/* Rise of Legends v2.20.182 — audited consolidated CSS. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* === assets/site.css: kept in original load order === */

:root {
    --bg: #080806;
    --bg-soft: #0e0c09;
    --panel: #12100c;
    --panel-soft: #19150f;
    --text: #f7f1e6;
    --muted: #a69d8e;
    --muted-dark: #6f685e;
    --gold: #d5a94f;
    --gold-light: #f1d285;
    --gold-dark: #8f6422;
    --line: rgba(213,169,79,.19);
    --white-line: rgba(255,255,255,.075);
    --danger: #ffb4a7;
    --danger-bg: rgba(117,37,23,.22);
    --success: #d5efc1;
    --success-bg: rgba(82,122,54,.2);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 10% 10%, rgba(143,93,25,.16), transparent 34rem),
        radial-gradient(circle at 90% 60%, rgba(99,29,17,.15), transparent 40rem),
        var(--bg);
    font-family: Inter, Arial, sans-serif;
}

html[lang="zh-CN"] body,
html[lang="zh-CN"] button,
html[lang="zh-CN"] input,
html[lang="zh-CN"] select,
html[lang="zh-CN"] textarea {
    font-family: Inter, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

html[lang="ko"] body,
html[lang="ko"] button,
html[lang="ko"] input,
html[lang="ko"] select,
html[lang="ko"] textarea {
    font-family: Inter, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", Arial, sans-serif;
}

.site-noise {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle, black, transparent 82%);
}

a { color: inherit; }

.container {
    width: min(1240px, calc(100% - 44px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--white-line);
    background: rgba(8,8,6,.91);
    backdrop-filter: blur(18px);
}

.header-inner {
    display: flex;
    align-items: center;
    min-height: 82px;
    gap: 28px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    flex-shrink: 0;
}

.site-brand-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(232,195,112,.48);
    background: linear-gradient(145deg, rgba(213,169,79,.16), rgba(44,31,14,.7));
    transform: rotate(45deg);
    box-shadow: inset 0 0 18px rgba(213,169,79,.07);
}

.site-brand-mark b {
    color: var(--gold-light);
    font: 700 21px Cinzel, serif;
    transform: rotate(-45deg);
}

.site-brand strong {
    display: block;
    font: 600 17px Cinzel, serif;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.site-brand small {
    display: block;
    margin-top: 3px;
    color: var(--gold);
    font-size: 8px;
    letter-spacing: .3em;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.main-nav a {
    position: relative;
    padding: 31px 0 28px;
    color: #a9a195;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: .2s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transition: .2s ease;
}

.main-nav a:hover,
.main-nav a.active { color: var(--gold-light); }

.main-nav a.active::after { transform: scaleX(1); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.server-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border: 1px solid var(--white-line);
    color: #918a7e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.server-pill i,
.footer-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.server-pill.online i,
.footer-status i {
    background: #8fc96b;
    box-shadow: 0 0 12px rgba(143,201,107,.65);
}

.server-pill.offline i { background: #bc5846; }

.gold-button,
.outline-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 50px;
    padding: 0 21px;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    font: 800 10px Inter, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.gold-button {
    border-color: #d9ad55;
    color: #181109;
    background: linear-gradient(110deg, #b5802d, #e2c06c 48%, #af7826);
    box-shadow: 0 13px 30px rgba(180,122,36,.15), inset 0 1px rgba(255,255,255,.34);
}

.gold-button:hover,
.outline-button:hover,
.ghost-button:hover { transform: translateY(-1px); }

.gold-button:hover { filter: brightness(1.06); }

.gold-button.small,
.ghost-button.small { min-height: 39px; padding: 0 15px; }

.gold-button.full { width: 100%; }

.outline-button {
    border-color: rgba(213,169,79,.32);
    color: #d9c18d;
    background: rgba(213,169,79,.035);
}

.outline-button:hover { border-color: rgba(236,204,133,.58); }

.ghost-button {
    min-height: 39px;
    padding: 0 14px;
    border-color: var(--white-line);
    color: #aaa296;
    background: rgba(255,255,255,.025);
}

.nav-toggle {
    display: none;
    margin-left: auto;
    border: 0;
    color: var(--gold-light);
    background: transparent;
    font-size: 23px;
    cursor: pointer;
}

.flash-wrap { padding-top: 18px; }

.flash,
.inline-alert {
    padding: 14px 17px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.55;
}

.flash.success,
.inline-alert.success {
    border-color: rgba(130,183,91,.32);
    color: var(--success);
    background: var(--success-bg);
}

.flash.error,
.inline-alert.error {
    border-color: rgba(216,99,79,.33);
    color: var(--danger);
    background: var(--danger-bg);
}

.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    border-bottom: 1px solid var(--white-line);
    background:
        linear-gradient(90deg, rgba(8,8,6,.98) 0%, rgba(8,8,6,.9) 48%, rgba(8,8,6,.65) 100%),
        radial-gradient(circle at 74% 40%, rgba(165,103,29,.18), transparent 25rem);
}

.hero-section::after {
    content: "ARCHLORD";
    position: absolute;
    right: -65px;
    bottom: -30px;
    color: rgba(255,255,255,.018);
    font: 700 160px Cinzel, serif;
    letter-spacing: -.07em;
    pointer-events: none;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    pointer-events: none;
}

.hero-orb.one {
    width: 420px;
    height: 420px;
    top: 80px;
    left: -230px;
    background: rgba(163,106,25,.23);
}

.hero-orb.two {
    width: 380px;
    height: 380px;
    right: 8%;
    bottom: -160px;
    background: rgba(109,31,16,.25);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .62fr);
    gap: clamp(55px, 8vw, 120px);
    align-items: center;
    min-height: 760px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .25em;
}

.eyebrow span {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.hero-copy h1,
.page-hero h1 {
    margin: 25px 0 0;
    font: 600 clamp(55px, 6.7vw, 94px)/.98 Cinzel, serif;
    letter-spacing: -.045em;
}

.hero-copy h1 em,
.page-hero h1 em,
.section-heading h2 em {
    color: transparent;
    font-style: normal;
    -webkit-text-stroke: 1px rgba(238,205,132,.9);
}

.hero-copy > p {
    max-width: 650px;
    margin: 28px 0 0;
    color: #b6ad9f;
    font-size: 16px;
    line-height: 1.85;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 38px;
}

.hero-facts {
    display: flex;
    margin-top: 55px;
    border-top: 1px solid var(--white-line);
}

.hero-facts div {
    min-width: 130px;
    padding: 22px 34px 0 0;
}

.hero-facts div + div {
    padding-left: 34px;
    border-left: 1px solid var(--white-line);
}

.hero-facts strong {
    display: block;
    font: 600 23px Cinzel, serif;
    color: var(--gold-light);
}

.hero-facts span {
    display: block;
    margin-top: 5px;
    color: #6f685d;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-card {
    position: relative;
    padding: 48px 38px;
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(56,42,20,.55), transparent 38%),
        rgba(15,13,9,.87);
    box-shadow: 0 30px 100px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.03);
}

.hero-card::before,
.hero-card::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
}

.hero-card::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
}

.hero-card::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--gold-dark);
    border-bottom: 2px solid var(--gold-dark);
}

.hero-card-crown {
    margin-bottom: 20px;
    color: var(--gold);
    font-size: 44px;
}

.hero-card > span {
    color: #8f826c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .28em;
}

.hero-card h2 {
    margin: 7px 0 16px;
    color: var(--gold-light);
    font: 600 38px Cinzel, serif;
    letter-spacing: .08em;
}

.hero-card p {
    color: #9e9588;
    font-size: 12px;
    line-height: 1.75;
}

.hero-card-line {
    height: 1px;
    margin: 28px 0;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: .42;
}

.hero-card ul {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-card li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #c9c0b2;
    font-size: 12px;
}

.hero-card li i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    color: var(--gold);
    background: rgba(213,169,79,.04);
    font: normal 600 9px Cinzel, serif;
}

.feature-section,
.news-section,
.wcoin-section,
.ranking-section,
.account-section,
.form-section {
    padding: 100px 0;
}

.feature-section {
    background: linear-gradient(180deg, #0b0a08, #080806);
}

.section-heading > span,
.panel-kicker,
.panel-heading > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .26em;
}

.section-heading h2 {
    margin: 14px 0 0;
    font: 600 clamp(35px, 4.2vw, 57px)/1.08 Cinzel, serif;
}

.section-heading.centered { text-align: center; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 55px;
}

.feature-card {
    position: relative;
    min-height: 310px;
    padding: 38px 34px;
    border: 1px solid var(--white-line);
    background: linear-gradient(145deg, rgba(213,169,79,.045), rgba(255,255,255,.012));
    transition: transform .2s ease, border-color .2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--line);
}

.feature-number {
    position: absolute;
    top: 24px;
    right: 28px;
    color: rgba(213,169,79,.24);
    font: 600 14px Cinzel, serif;
}

.feature-symbol {
    margin: 35px 0 30px;
    color: var(--gold);
    font-size: 37px;
}

.feature-card h3 {
    margin: 0;
    font: 600 23px Cinzel, serif;
}

.feature-card p {
    margin: 15px 0 0;
    color: #8d8579;
    font-size: 12px;
    line-height: 1.8;
}

.ranking-preview-section {
    padding: 100px 0;
    border-top: 1px solid var(--white-line);
    border-bottom: 1px solid var(--white-line);
    background:
        radial-gradient(circle at 90% 40%, rgba(108,31,17,.15), transparent 32rem),
        #090806;
}

.split-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 45px;
}

.text-link {
    padding-bottom: 8px;
    color: #c3a76d;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.ranking-table {
    border: 1px solid var(--white-line);
    background: rgba(15,13,10,.75);
}

.ranking-row {
    display: grid;
    grid-template-columns: 80px 1.3fr 1fr 1fr 90px;
    align-items: center;
    min-height: 66px;
    padding: 0 22px;
    border-bottom: 1px solid var(--white-line);
    color: #978f83;
    font-size: 12px;
}

.ranking-row:last-child { border-bottom: 0; }

.ranking-row strong { color: #e7dfd2; }

.ranking-row > b {
    color: var(--gold-light);
    font: 600 17px Cinzel, serif;
    text-align: right;
}

.ranking-head {
    min-height: 46px;
    color: #665f56;
    background: rgba(255,255,255,.016);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.rank {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid var(--white-line);
    color: #81796e;
    font: 600 11px Cinzel, serif;
}

.rank-1 {
    border-color: rgba(239,202,118,.48);
    color: var(--gold-light);
    background: rgba(213,169,79,.1);
}

.rank-2 { color: #c3c2bd; }
.rank-3 { color: #c28c5d; }

.empty-state {
    padding: 55px 30px;
    border: 1px solid var(--white-line);
    text-align: center;
}

.empty-state > span {
    color: var(--gold);
    font-size: 42px;
}

.empty-state h3 {
    margin: 20px 0 10px;
    font: 600 24px Cinzel, serif;
}

.empty-state p {
    max-width: 650px;
    margin: 0 auto 25px;
    color: #8f877b;
    font-size: 12px;
    line-height: 1.75;
}

.news-section { background: #0b0a08; }

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.news-card {
    min-height: 230px;
    padding: 30px;
    border: 1px solid var(--white-line);
    background: rgba(255,255,255,.014);
}

.news-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #6f675d;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.news-meta span { color: var(--gold); }

.news-card h3 {
    margin: 33px 0 13px;
    font: 600 20px/1.35 Cinzel, serif;
}

.news-card p {
    margin: 0;
    color: #8d8578;
    font-size: 12px;
    line-height: 1.75;
}

.cta-section { padding: 90px 0; }

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px 55px;
    border: 1px solid var(--line);
    background:
        linear-gradient(105deg, rgba(110,72,21,.28), transparent 54%),
        var(--panel);
}

.cta-panel > div > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .24em;
}

.cta-panel h2 {
    margin: 8px 0;
    font: 600 34px Cinzel, serif;
}

.cta-panel p {
    margin: 0;
    color: #8f877b;
    font-size: 12px;
}

.site-footer {
    border-top: 1px solid var(--white-line);
    background: #060604;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 55px;
    padding-top: 60px;
    padding-bottom: 55px;
}

.footer-brand {
    color: var(--gold-light);
    font: 600 19px Cinzel, serif;
    letter-spacing: .06em;
}

.footer-grid p {
    max-width: 280px;
    color: #635d54;
    font-size: 10px;
    line-height: 1.7;
}

.footer-grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-grid strong {
    margin-bottom: 8px;
    color: #b5ac9f;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.footer-grid a {
    color: #6f685e;
    text-decoration: none;
    font-size: 10px;
}

.footer-grid a:hover { color: var(--gold-light); }

.footer-status span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #80786c;
    font-size: 10px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-top: 20px;
    padding-bottom: 22px;
    border-top: 1px solid rgba(255,255,255,.045);
    color: #4f4a43;
    font-size: 8px;
}

.subpage { min-height: 70vh; }

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 90px;
    border-bottom: 1px solid var(--white-line);
    background:
        radial-gradient(circle at 78% 50%, rgba(152,95,26,.17), transparent 28rem),
        linear-gradient(135deg, #0c0a07, #080806);
}

.page-hero.compact { padding: 82px 0 70px; }

.page-hero::after {
    content: "CHANTRA";
    position: absolute;
    right: -25px;
    bottom: -30px;
    color: rgba(255,255,255,.018);
    font: 700 120px Cinzel, serif;
}

.page-hero h1 {
    max-width: 900px;
    font-size: clamp(48px, 6vw, 78px);
}

.page-hero p {
    max-width: 700px;
    margin: 25px 0 0;
    color: #a59c8e;
    font-size: 14px;
    line-height: 1.8;
}

.page-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 70px;
    align-items: center;
}

.coin-display,
.ranking-medallion {
    display: grid;
    place-items: center;
    min-width: 235px;
    min-height: 190px;
    border: 1px solid var(--line);
    background: rgba(213,169,79,.04);
    text-align: center;
}

.coin-display span,
.ranking-medallion small {
    color: #807561;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .22em;
}

.coin-display strong {
    color: var(--gold-light);
    font: 600 47px Cinzel, serif;
}

.coin-display small {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ranking-medallion span {
    color: var(--gold);
    font-size: 50px;
}

.ranking-medallion strong {
    font: 600 23px Cinzel, serif;
    color: var(--gold-light);
}

.panel {
    border: 1px solid var(--white-line);
    background:
        linear-gradient(145deg, rgba(213,169,79,.04), transparent 35%),
        var(--panel);
    box-shadow: 0 24px 70px rgba(0,0,0,.23);
}

.panel-heading { margin-bottom: 28px; }

.panel-heading h1,
.panel-heading h2 {
    margin: 7px 0 0;
    font: 600 29px Cinzel, serif;
}

.narrow-container { max-width: 580px; }

.form-panel { padding: 42px; }

.form-field {
    display: block;
    margin-bottom: 19px;
}

.form-field > span {
    display: block;
    margin-bottom: 9px;
    color: #c9c0b3;
    font-size: 11px;
    font-weight: 600;
}

.form-field input,
.form-field select,
.ranking-filters input,
.ranking-filters select,
.generated-codes textarea {
    width: 100%;
    min-height: 51px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.09);
    outline: 0;
    color: var(--text);
    background: rgba(4,4,3,.48);
    font: 500 13px Inter, sans-serif;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field input:focus,
.form-field select:focus,
.ranking-filters input:focus,
.ranking-filters select:focus {
    border-color: rgba(224,182,95,.55);
    box-shadow: 0 0 0 3px rgba(213,169,79,.07);
}

.form-note {
    margin: 19px 0 0;
    color: #716a60;
    text-align: center;
    font-size: 10px;
}

.form-note a { color: var(--gold-light); }

.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-bottom: 30px;
}

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 28px;
    border: 1px solid var(--white-line);
    background: rgba(255,255,255,.014);
}

.package-card > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.package-card strong {
    margin-top: 25px;
    color: var(--gold-light);
    font: 600 32px Cinzel, serif;
}

.package-card small {
    color: #837b6f;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.package-card em {
    margin-top: auto;
    color: #655f57;
    font-size: 9px;
    font-style: normal;
}

.wcoin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .65fr);
    gap: 22px;
}

.redeem-panel,
.security-panel { padding: 39px; }

.logged-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: rgba(213,169,79,.04);
}

.logged-account span {
    color: #81796e;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.logged-account strong {
    color: var(--gold-light);
    font: 600 14px Cinzel, serif;
}

.check-list {
    display: grid;
    gap: 16px;
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    gap: 11px;
    color: #a69d8f;
    font-size: 11px;
}

.check-list i {
    color: var(--gold);
    font-style: normal;
}

.security-note-box {
    padding: 18px;
    border: 1px solid var(--white-line);
    background: rgba(255,255,255,.015);
}

.security-note-box strong {
    color: #c6bdae;
    font-size: 10px;
}

.security-note-box p {
    margin: 8px 0 0;
    color: #756e64;
    font-size: 10px;
    line-height: 1.65;
}

.login-required {
    padding: 15px 0 0;
    text-align: center;
}

.login-required > span {
    color: var(--gold);
    font-size: 43px;
}

.login-required h3 {
    margin: 16px 0 8px;
    font: 600 22px Cinzel, serif;
}

.login-required p {
    margin: 0 0 22px;
    color: #81796e;
    font-size: 11px;
    line-height: 1.7;
}

.setup-panel {
    display: flex;
    gap: 28px;
    align-items: center;
    padding: 42px;
    border: 1px solid var(--line);
    background: var(--panel);
}

.setup-icon {
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    flex: 0 0 75px;
    border: 1px solid var(--line);
    color: var(--gold);
    background: rgba(213,169,79,.05);
    font-size: 31px;
}

.setup-panel h2 {
    margin: 8px 0 10px;
    font: 600 27px Cinzel, serif;
}

.setup-panel p {
    margin: 0;
    color: #90887c;
    font-size: 12px;
    line-height: 1.75;
}

.setup-panel code {
    color: var(--gold-light);
    font-size: 11px;
}

.ranking-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 22px;
    padding: 20px;
    border: 1px solid var(--white-line);
    background: rgba(255,255,255,.012);
}

.ranking-filters label > span {
    display: block;
    margin-bottom: 7px;
    color: #756e64;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.ranking-filters input,
.ranking-filters select { min-height: 39px; }

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.balance-card,
.account-card {
    min-height: 230px;
    padding: 31px;
    border: 1px solid var(--white-line);
    background: var(--panel);
}

.balance-card > span,
.account-card > span {
    color: #7d7465;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}

.balance-card strong,
.account-card strong {
    display: block;
    margin-top: 32px;
    color: var(--gold-light);
    font: 600 37px Cinzel, serif;
}

.account-card strong { font-size: 22px; }

.balance-card small,
.account-card small {
    display: block;
    margin-top: 6px;
    color: #71695e;
    font-size: 10px;
}

.balance-card a,
.account-card a {
    display: inline-block;
    margin-top: 28px;
    color: #bda366;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}


.account-info-panel {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 45px;
    margin-top: 25px;
    padding: 40px;
}

.account-info-panel h2 {
    margin: 9px 0 10px;
    font: 600 27px Cinzel, serif;
}

.account-info-panel p {
    margin: 0;
    color: #81796d;
    font-size: 11px;
    line-height: 1.7;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.quick-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border: 1px solid var(--white-line);
    text-decoration: none;
    background: rgba(255,255,255,.012);
}

.quick-links b {
    color: var(--gold);
    font-size: 21px;
}

.quick-links span {
    color: #d4ccbe;
    font-size: 11px;
    font-weight: 700;
}

.quick-links small {
    display: block;
    margin-top: 4px;
    color: #6f685e;
    font-size: 8px;
    font-weight: 400;
}

.admin-body { padding: 45px 0; }

.admin-shell {
    width: min(850px, calc(100% - 40px));
    margin: 0 auto;
}

.admin-back {
    display: inline-block;
    margin-bottom: 18px;
    color: #9c927f;
    text-decoration: none;
    font-size: 11px;
}

.admin-panel { padding: 40px; }

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 17px;
}

.generated-codes { margin-top: 28px; }

.generated-codes textarea {
    min-height: 150px;
    margin: 15px 0;
    padding: 15px;
    resize: vertical;
    line-height: 1.6;
}

@media (max-width: 1120px) {
    .server-pill { display: none; }
    .main-nav { gap: 16px; }
    .header-actions .ghost-button { display: none; }
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }

    .main-nav {
        position: absolute;
        top: 82px;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 22px 22px;
        border-bottom: 1px solid var(--white-line);
        background: rgba(8,8,6,.98);
    }

    .main-nav.open { display: flex; }

    .main-nav a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .main-nav a::after { display: none; }

    .hero-grid,
    .page-hero-grid,
    .wcoin-grid,
    .account-info-panel {
        grid-template-columns: 1fr;
    }

    .hero-grid { padding-top: 70px; }

    .hero-card { max-width: 580px; }

    .feature-grid,
    .news-grid,
    .package-grid,
   .account-grid { grid-template-columns: 1fr; }

    .feature-card { min-height: 250px; }

    .coin-display,
    .ranking-medallion {
        justify-self: start;
        min-width: 230px;
    }

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .ranking-filters {
        grid-template-columns: 1fr 1fr;
    }

    .quick-links { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .container { width: min(100% - 30px, 1240px); }

    .header-inner { min-height: 72px; }

    .site-brand-mark { width: 37px; height: 37px; }

    .site-brand strong { font-size: 14px; }

    .site-brand small { display: none; }

    .header-actions .gold-button { display: none; }

    .main-nav { top: 72px; }

    .hero-section,
    .hero-grid { min-height: auto; }

    .hero-grid { padding-top: 65px; padding-bottom: 65px; }

    .hero-copy h1,
    .page-hero h1 { font-size: clamp(42px, 13vw, 60px); }

    .hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); }

    .hero-facts div {
        min-width: 0;
        padding: 18px 8px 0 0;
    }

    .hero-facts div + div { padding-left: 13px; }

    .hero-facts strong { font-size: 17px; }

    .hero-card { padding: 35px 25px; }

    .feature-section,
    .news-section,
    .wcoin-section,
    .ranking-section,
    .account-section,
    .form-section,
    .ranking-preview-section { padding: 70px 0; }

    .split-heading,
    .cta-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .cta-panel { padding: 35px 28px; }

    .ranking-row {
        grid-template-columns: 45px 1fr 65px;
        padding: 0 12px;
    }

    .ranking-row > span:nth-child(3),
    .ranking-row > span:nth-child(4) { display: none; }

    .ranking-head > span:nth-child(3),
    .ranking-head > span:nth-child(4) { display: none; }

    .form-panel,
    .redeem-panel,
    .security-panel,
    .admin-panel { padding: 28px 22px; }

    .setup-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px;
    }

    .ranking-filters,
    .admin-form-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; }

    .footer-bottom { flex-direction: column; }

    .account-info-panel { padding: 28px; }
}


/* Live-Ranking v2.1 */
.ranking-table.large .ranking-row {
    grid-template-columns: 70px minmax(150px, 1.2fr) minmax(160px, 1fr) minmax(140px, 1fr) 110px 80px;
}

.ranking-table.large .ranking-row > span:nth-child(5) {
    color: #a99e8c;
    text-align: center;
}

@media (max-width: 850px) {
    .ranking-table.large .ranking-row {
        grid-template-columns: 50px minmax(130px, 1fr) minmax(130px, .8fr) 70px;
    }

    .ranking-table.large .ranking-row > span:nth-child(4),
    .ranking-table.large .ranking-row > span:nth-child(5) {
        display: none;
    }
}

@media (max-width: 650px) {
    .ranking-table.large .ranking-row {
        grid-template-columns: 42px 1fr 60px;
    }

    .ranking-table.large .ranking-row > span:nth-child(3),
    .ranking-table.large .ranking-row > span:nth-child(4),
    .ranking-table.large .ranking-row > span:nth-child(5) {
        display: none;
    }
}


/* Account-Verwarnungen v2.2 */
.account-warning-list {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid rgba(213,169,79,.24);
    background: rgba(213,169,79,.045);
}

.account-warning-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 13px;
}

.account-warning-heading span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.account-warning-heading strong {
    color: #aa9d87;
    font-size: 9px;
}

.account-warning-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.account-warning-item > div {
    display: flex;
    gap: 12px;
    align-items: center;
}

.account-warning-item strong {
    min-width: 72px;
    color: var(--gold-light);
    font-size: 9px;
}

.account-warning-item span {
    color: #c0b6a7;
    font-size: 11px;
}

.account-warning-item small {
    color: #70695e;
    font-size: 8px;
    text-align: right;
}

.account-warning-item.final strong {
    color: #ffb6a8;
}

@media (max-width: 650px) {
    .account-warning-heading,
    .account-warning-item {
        flex-direction: column;
    }

    .account-warning-item small {
        text-align: left;
    }
}


/* Stripe WCoin Checkout v2.3 */
.outline-button.full {
    width: 100%;
}

.inline-alert.stripe-cancelled {
    margin-bottom: 20px;
    border-color: rgba(213,169,79,.32);
    color: #e4c87e;
    background: rgba(137,91,25,.15);
}

.stripe-rate-banner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
    border: 1px solid var(--line);
    background: rgba(213,169,79,.035);
}

.stripe-rate-banner > div {
    padding: 20px 24px;
    border-right: 1px solid var(--white-line);
}

.stripe-rate-banner > div:last-child {
    border-right: 0;
}

.stripe-rate-banner span {
    display: block;
    color: #71695e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.stripe-rate-banner strong {
    display: block;
    margin-top: 7px;
    color: var(--gold-light);
    font: 600 15px Cinzel, serif;
}

.stripe-purchase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 22px;
}

.stripe-buy-panel,
.voucher-panel {
    padding: 39px;
}

.stripe-amount-field {
    margin-top: 5px;
}

.stripe-number-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.stripe-number-input input {
    min-height: 72px;
    border-right: 0;
    color: var(--gold-light);
    font: 600 27px Cinzel, serif;
}

.stripe-number-input b {
    display: grid;
    place-items: center;
    min-width: 105px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.09);
    color: #a89e8d;
    background: rgba(213,169,79,.04);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.stripe-amount-field > small {
    display: block;
    margin-top: 8px;
    color: #6e675d;
    font-size: 9px;
}

.stripe-price-box {
    display: flex;
    flex-direction: column;
    margin: 25px 0 19px;
    padding: 23px;
    border: 1px solid var(--line);
    background:
        linear-gradient(120deg, rgba(213,169,79,.1), transparent 65%),
        rgba(4,4,3,.25);
}

.stripe-price-box > span {
    color: #827866;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.stripe-price-box > strong {
    margin-top: 8px;
    color: var(--gold-light);
    font: 600 37px Cinzel, serif;
}

.stripe-price-box > small {
    margin-top: 6px;
    color: #6f675c;
    font-size: 9px;
}

.stripe-pay-button[disabled] {
    cursor: wait;
    filter: saturate(.4);
    opacity: .72;
}

.stripe-legal-note {
    margin: 16px 0 0;
    color: #655f56;
    text-align: center;
    font-size: 9px;
    line-height: 1.6;
}

.voucher-description {
    margin: -10px 0 24px;
    color: #827a6e;
    font-size: 11px;
    line-height: 1.7;
}

.stripe-security-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--white-line);
}

.stripe-security-list > div {
    display: flex;
    gap: 10px;
    color: #8d8579;
    font-size: 10px;
}

.stripe-security-list i {
    color: var(--gold);
    font-style: normal;
}

.stripe-unavailable {
    padding: 24px;
    border: 1px solid rgba(221,100,78,.26);
    background: rgba(112,38,25,.15);
    text-align: center;
}

.stripe-unavailable > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border: 1px solid rgba(221,100,78,.4);
    color: #ffb5a7;
    font: 600 20px Cinzel, serif;
}

.stripe-unavailable h3 {
    margin: 0 0 8px;
    font: 600 20px Cinzel, serif;
}

.stripe-unavailable p {
    margin: 0;
    color: #9a766f;
    font-size: 10px;
    line-height: 1.7;
}

.stripe-history-section {
    margin-top: 70px;
}

.stripe-history-section .section-heading {
    margin-bottom: 28px;
}

.stripe-history-table {
    border: 1px solid var(--white-line);
    background: rgba(15,13,10,.75);
}

.stripe-history-row {
    display: grid;
    grid-template-columns: 1.25fr .75fr .75fr .85fr;
    align-items: center;
    min-height: 61px;
    padding: 0 22px;
    border-bottom: 1px solid var(--white-line);
    color: #8f877b;
    font-size: 10px;
}

.stripe-history-row:last-child {
    border-bottom: 0;
}

.stripe-history-row > strong {
    color: var(--gold-light);
    font: 600 15px Cinzel, serif;
}

.stripe-history-head {
    min-height: 43px;
    color: #625c53;
    background: rgba(255,255,255,.014);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.stripe-status {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.stripe-status.success {
    border-color: rgba(129,185,91,.32);
    color: #bfe2a7;
    background: rgba(74,112,48,.18);
}

.stripe-status.warning {
    border-color: rgba(213,169,79,.32);
    color: #e4c276;
    background: rgba(137,91,25,.15);
}

.stripe-status.danger {
    border-color: rgba(220,96,75,.34);
    color: #ffb6a8;
    background: rgba(116,38,24,.2);
}

.stripe-result-panel {
    padding: 42px;
    text-align: center;
}

.stripe-result-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 23px;
    border: 1px solid;
    font: 600 27px Cinzel, serif;
}

.stripe-result-icon.success {
    border-color: rgba(129,185,91,.38);
    color: #c9eab2;
    background: rgba(74,112,48,.18);
}

.stripe-result-icon.pending {
    border-color: rgba(213,169,79,.38);
    color: var(--gold-light);
    background: rgba(137,91,25,.16);
}

.stripe-result-icon.danger {
    border-color: rgba(220,96,75,.4);
    color: #ffb6a8;
    background: rgba(116,38,24,.2);
}

.stripe-result-panel h2 {
    margin: 9px 0 12px;
    font: 600 28px Cinzel, serif;
}

.stripe-result-panel > p {
    color: #8e8679;
    font-size: 11px;
    line-height: 1.75;
}

.stripe-order-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 26px 0;
    border: 1px solid var(--white-line);
    background: var(--white-line);
}

.stripe-order-summary > div {
    padding: 17px;
    background: var(--panel);
}

.stripe-order-summary span {
    display: block;
    color: #6d665d;
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stripe-order-summary strong {
    display: block;
    margin-top: 6px;
    color: #d8cebf;
    font-size: 11px;
}

.stripe-back-link {
    display: inline-block;
    margin-top: 18px;
    color: #a58d58;
    font-size: 9px;
    text-decoration: none;
}

@media (max-width: 900px) {
    .stripe-rate-banner,
    .stripe-purchase-grid {
        grid-template-columns: 1fr;
    }

    .stripe-rate-banner > div {
        border-right: 0;
        border-bottom: 1px solid var(--white-line);
    }

    .stripe-rate-banner > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 650px) {
    .stripe-buy-panel,
    .voucher-panel,
    .stripe-result-panel {
        padding: 28px 22px;
    }

    .stripe-number-input {
        grid-template-columns: 1fr;
    }

    .stripe-number-input input {
        border-right: 1px solid rgba(255,255,255,.09);
    }

    .stripe-number-input b {
        min-height: 43px;
        border-top: 0;
    }

    .stripe-history-row {
        grid-template-columns: 1fr .65fr .85fr;
        padding: 0 13px;
    }

    .stripe-history-row > span:first-child,
    .stripe-history-head > span:first-child {
        display: none;
    }

    .stripe-order-summary {
        grid-template-columns: 1fr;
    }
}


/* Flexible WCoin pricing v2.3.1 */
.stripe-rate-banner > div > small {
    display: block;
    margin-top: 7px;
    color: #736a5d;
    font-size: 8px;
    letter-spacing: .05em;
}


/* Account-Passwortsystem v2.4 */
.security-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 22px;
    align-items: start;
}

.security-info-panel {
    padding: 38px;
}

.security-info-panel h2 {
    margin: 9px 0 20px;
    font: 600 25px Cinzel, serif;
}

.security-feature-list {
    display: grid;
    gap: 14px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.security-feature-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #938b7e;
    font-size: 10px;
    line-height: 1.55;
}

.security-feature-list i {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    min-height: 25px;
    border: 1px solid rgba(213,169,79,.24);
    color: var(--gold);
    background: rgba(213,169,79,.045);
    font-style: normal;
    font-size: 9px;
}

.security-rule-box {
    margin-bottom: 20px;
    padding: 17px;
    border: 1px solid var(--white-line);
    background: rgba(255,255,255,.012);
}

.security-rule-box strong,
.security-rule-box span {
    display: block;
}

.security-rule-box strong {
    color: #d3c9b8;
    font-size: 10px;
}

.security-rule-box span {
    margin-top: 6px;
    color: #746d63;
    font-size: 9px;
    line-height: 1.6;
}

.security-current-status {
    margin-bottom: 22px;
    padding: 20px;
    border: 1px solid var(--line);
    background: rgba(213,169,79,.035);
}

.security-current-status > span {
    display: block;
    color: #756d60;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.security-current-status > strong {
    display: block;
    margin-top: 7px;
    color: var(--gold-light);
    font: 600 17px Cinzel, serif;
}

.security-current-status > small {
    display: block;
    margin-top: 6px;
    color: #6d665d;
    font-size: 8px;
}

.security-secret-box {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid rgba(213,169,79,.38);
    background:
        linear-gradient(135deg, rgba(213,169,79,.1), transparent 62%),
        rgba(7,6,4,.48);
}

.security-secret-box > span {
    display: block;
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .19em;
}

.security-secret-box > strong {
    display: block;
    margin: 14px 0 11px;
    color: var(--gold-light);
    font: 600 clamp(14px, 2.5vw, 20px) Consolas, monospace;
    letter-spacing: .07em;
    overflow-wrap: anywhere;
}

.security-secret-box > p {
    margin: 0;
    color: #8c8376;
    font-size: 10px;
    line-height: 1.7;
}

.security-secret-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.security-secret-actions .outline-button {
    width: 100%;
    cursor: pointer;
}

.security-success-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    border: 1px solid rgba(129,185,91,.38);
    color: #c9eab2;
    background: rgba(74,112,48,.18);
    font: 600 27px Cinzel, serif;
}

.panel-heading.centered,
.security-center-text {
    text-align: center;
}

.security-center-text {
    margin: -10px auto 24px;
    max-width: 620px;
    color: #8e8679;
    font-size: 11px;
    line-height: 1.75;
}

.security-neutral-note {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--white-line);
    color: #6e675e;
    background: rgba(255,255,255,.012);
    font-size: 9px;
    line-height: 1.65;
}

.security-form-links {
    margin-top: 18px;
}

.login-help-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #777065;
    font-size: 10px;
}

.login-help-links a {
    color: var(--gold-light);
    text-decoration: none;
}

.login-help-links a:hover {
    text-decoration: underline;
}

.account-security-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 22px;
    padding: 34px;
    border-color: var(--line);
    background:
        linear-gradient(118deg, rgba(213,169,79,.075), transparent 62%),
        var(--panel);
}

.account-security-copy h2 {
    margin: 8px 0 8px;
    font: 600 24px Cinzel, serif;
}

.account-security-copy p {
    margin: 0;
    color: #81796e;
    font-size: 10px;
    line-height: 1.7;
}

.account-security-status {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 17px;
}

.account-security-status > span {
    color: #6e675d;
    font-size: 9px;
}

.account-security-status > strong {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid;
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.account-security-status > strong.ready {
    border-color: rgba(129,185,91,.32);
    color: #bfe2a7;
    background: rgba(74,112,48,.18);
}

.account-security-status > strong.missing {
    border-color: rgba(213,169,79,.32);
    color: #e4c276;
    background: rgba(137,91,25,.15);
}

.account-security-status > strong.unavailable {
    border-color: rgba(220,96,75,.3);
    color: #eaa899;
    background: rgba(116,38,24,.17);
}

.account-security-actions {
    display: grid;
    gap: 11px;
}

.recovery-form-panel {
    padding: 42px;
}

@media (max-width: 900px) {
    .security-layout,
    .account-security-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .security-secret-actions {
        grid-template-columns: 1fr;
    }

    .security-info-panel,
    .recovery-form-panel,
    .account-security-panel {
        padding: 26px 20px;
    }

    .account-security-status {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Account-Sicherheit v2.4.1 – Cache- und Designfix */
.security-primary-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(213,169,79,.24);
    background:
        radial-gradient(circle at 0 0, rgba(213,169,79,.10), transparent 280px),
        linear-gradient(145deg, rgba(255,255,255,.018), transparent 45%),
        var(--panel);
}

.security-primary-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .72;
}

.security-layout .panel-heading > span,
.account-security-panel .panel-kicker {
    display: block;
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.security-layout .panel-heading h2,
.account-security-panel h2 {
    color: var(--text);
    font-family: Cinzel, Georgia, serif;
    font-weight: 600;
    letter-spacing: -.025em;
}

.security-layout .form-field > span {
    color: #bdb3a4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.security-layout .form-field input,
.security-layout .form-field select {
    min-height: 56px;
    border-color: rgba(213,169,79,.15);
    color: #f7f1e6;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        #090806;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.42);
}

.security-layout .form-field input:focus,
.security-layout .form-field select:focus {
    border-color: rgba(226,184,99,.62);
    box-shadow:
        0 0 0 3px rgba(213,169,79,.075),
        inset 0 0 0 1px rgba(0,0,0,.42);
}

.security-current-status {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 86px;
    padding: 20px 22px 20px 68px;
    border-color: rgba(213,169,79,.20);
    background:
        linear-gradient(105deg, rgba(213,169,79,.075), transparent 62%),
        rgba(0,0,0,.18);
}

.security-current-status::before {
    content: "◆";
    position: absolute;
    top: 21px;
    left: 21px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(213,169,79,.32);
    color: var(--gold-light);
    background: rgba(213,169,79,.065);
    font-size: 10px;
    transform: rotate(45deg);
}

.security-current-status::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 30px;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(213,169,79,.18);
    transform: rotate(45deg);
}

.security-current-status > span,
.security-current-status > strong,
.security-current-status > small {
    position: relative;
    z-index: 1;
}

.security-layout .gold-button.full {
    min-height: 54px;
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: .12em;
}

.security-info-panel {
    border-color: rgba(255,255,255,.085);
    background:
        linear-gradient(145deg, rgba(213,169,79,.035), transparent 45%),
        rgba(14,12,9,.94);
}

.security-feature-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.045);
    font-size: 10px;
}

.security-feature-list li:last-child {
    border-bottom: 0;
}

.account-security-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(213,169,79,.24);
    box-shadow: 0 24px 70px rgba(0,0,0,.23);
}

.account-security-panel::after {
    content: "ACCOUNT PROTECTION";
    position: absolute;
    right: 24px;
    bottom: 14px;
    color: rgba(213,169,79,.055);
    font: 700 24px Cinzel, Georgia, serif;
    letter-spacing: .08em;
    pointer-events: none;
}

.account-security-copy,
.account-security-actions {
    position: relative;
    z-index: 1;
}

.account-security-copy p {
    max-width: 650px;
    color: #9a9184;
    font-size: 11px;
}

.account-security-status > span {
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.account-security-status > strong {
    border-radius: 2px;
    font-weight: 800;
}

@media (max-width: 650px) {
    .security-current-status {
        padding-left: 62px;
    }

    .account-security-panel::after {
        display: none;
    }
}

/* ========================================================================
   Rise of Legends v2.5.0 – Cinematic MMORPG Homepage
   ======================================================================== */

:root {
    --rol-black: #050504;
    --rol-black-soft: #090806;
    --rol-panel: rgba(10, 9, 7, .94);
    --rol-panel-deep: rgba(6, 6, 5, .97);
    --rol-gold: #c99535;
    --rol-gold-bright: #f0cf79;
    --rol-gold-pale: #f7e2a5;
    --rol-gold-dark: #6d4312;
    --rol-red: #7d1d0d;
    --rol-purple: #7c4cb7;
    --rol-line: rgba(193, 137, 45, .43);
    --rol-line-soft: rgba(226, 181, 92, .16);
    --rol-text: #eee7da;
    --rol-muted: #9c9282;
}

body {
    background:
        radial-gradient(circle at 12% 20%, rgba(111, 55, 14, .12), transparent 33rem),
        radial-gradient(circle at 88% 22%, rgba(70, 30, 102, .1), transparent 35rem),
        linear-gradient(180deg, #080706 0, #050504 52%, #080706 100%);
}

.site-noise {
    opacity: .1;
    background-image:
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,255,.028) 0 1px, transparent 1.5px);
    background-size: 42px 42px, 42px 42px, 7px 7px;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid rgba(180, 126, 35, .32);
    background:
        linear-gradient(180deg, rgba(5,5,4,.985), rgba(8,7,5,.955)),
        #070604;
    box-shadow: 0 16px 48px rgba(0,0,0,.34);
    backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 72px;
    gap: 28px;
}

.site-brand {
    position: relative;
    min-width: 194px;
    justify-content: center;
    padding: 8px 18px 7px 12px;
}

.site-brand::before,
.site-brand::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.site-brand::before {
    inset: 8px 18px 7px 12px;
    opacity: .44;
    background:
        linear-gradient(90deg, transparent 0 13%, rgba(238,190,86,.24) 49%, transparent 86%),
        radial-gradient(circle, rgba(238,190,86,.28), transparent 62%);
    filter: blur(8px);
}

.site-brand::after {
    left: 50%;
    bottom: -13px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(224,169,59,.42);
    border-top: 0;
    border-left: 0;
    transform: translateX(-50%) rotate(45deg);
    opacity: .5;
}

.site-brand-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    line-height: 1;
    text-shadow: 0 0 22px rgba(210,151,45,.24);
}

.site-brand-copy small {
    margin: 0 0 2px;
    color: #d6b063;
    font: 600 9px Cinzel, serif;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.site-brand-copy strong {
    color: transparent;
    font: 600 28px/.9 Cinzel, serif;
    letter-spacing: .035em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff0b0, #d8a84f 44%, #7d4c13 94%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(255,236,170,.2));
}

.site-brand-flare {
    position: absolute;
    left: 50%;
    bottom: -3px;
    z-index: 2;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd46e;
    box-shadow: 0 0 8px #f3a921, 0 0 22px rgba(243,169,33,.78);
    transform: translateX(-50%);
}

.main-nav {
    gap: clamp(15px, 1.8vw, 29px);
}

.main-nav a {
    padding: 28px 0 25px;
    color: #c2b9aa;
    font: 600 10px Cinzel, serif;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-nav a i {
    margin-left: 4px;
    color: #c79536;
    font-style: normal;
    font-size: 10px;
}

.main-nav a::after {
    right: 50%;
    bottom: -1px;
    left: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #efb84e, transparent);
    box-shadow: 0 0 10px rgba(239,184,78,.65);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    right: -8px;
    left: -8px;
    transform: scaleX(1);
}

.main-nav a:hover,
.main-nav a.active {
    color: #efcf80;
}

.header-actions {
    gap: 10px;
}

.server-pill {
    width: 35px;
    height: 35px;
    justify-content: center;
    padding: 0;
    border-color: rgba(215,169,77,.15);
    background: rgba(255,255,255,.015);
}

.server-pill > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.server-pill i {
    width: 8px;
    height: 8px;
}

.ghost-button,
.gold-button,
.outline-button {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    font-family: Cinzel, serif;
    letter-spacing: .045em;
}

.ghost-button::before,
.gold-button::before,
.outline-button::before,
.rol-action::before,
.rol-panel-button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent);
    transform: skewX(-18deg);
    transition: left .5s ease;
}

.ghost-button:hover::before,
.gold-button:hover::before,
.outline-button:hover::before,
.rol-action:hover::before,
.rol-panel-button:hover::before {
    left: 125%;
}

.ghost-button {
    border-color: rgba(203,150,53,.27);
    color: #d6c7aa;
    background: rgba(10,9,7,.74);
}

.gold-button {
    border-color: #b67b21;
    color: #201307;
    background:
        linear-gradient(180deg, rgba(255,232,145,.18), transparent 30%),
        linear-gradient(110deg, #8f5b17, #d6aa4d 47%, #8b5211);
    box-shadow:
        inset 0 0 0 1px rgba(255,224,131,.16),
        0 8px 24px rgba(89,48,8,.18);
}

/* Homepage */
.rol-home {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(106,61,16,.1), transparent 35rem),
        #060604;
}

.rol-hero {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border-bottom: 1px solid rgba(204,145,45,.36);
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(3,3,3,.08), rgba(4,4,3,.24) 58%, #060604 100%),
        radial-gradient(ellipse at 50% 32%, rgba(171,100,24,.14), transparent 42%),
        #090806;
}

.rol-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .7;
    background:
        linear-gradient(90deg, rgba(5,5,4,.12), rgba(5,5,4,.84) 40%, rgba(5,5,4,.84) 60%, rgba(5,5,4,.12)),
        url('/assets/visual/hero-atmosphere.webp') center top / cover no-repeat;
    transform: scale(1.05);
}

.rol-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.04), transparent 23%, rgba(0,0,0,.18) 49%, transparent 77%, rgba(0,0,0,.04)),
        linear-gradient(180deg, transparent 0 55%, rgba(5,5,4,.54) 82%, #060604 100%);
}

.rol-hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .7;
    background:
        repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.01) 47px 48px),
        radial-gradient(circle at 50% 22%, rgba(255,177,62,.14), transparent 25%),
        linear-gradient(180deg, transparent 60%, rgba(0,0,0,.38));
}

.rol-hero-glow {
    position: absolute;
    z-index: -1;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    opacity: .3;
    filter: blur(58px);
    animation: rolGlowPulse 5.5s ease-in-out infinite alternate;
}

.rol-hero-glow-left {
    top: 20px;
    left: -180px;
    background: rgba(193,91,20,.3);
}

.rol-hero-glow-right {
    top: -20px;
    right: -190px;
    background: rgba(99,50,164,.35);
    animation-delay: -2s;
}

.rol-hero-character {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 100%;
    max-height: 470px;
    width: auto;
    pointer-events: none;
    object-fit: contain;
    object-position: top;
    filter: saturate(.95) contrast(1.06) drop-shadow(0 18px 30px rgba(0,0,0,.45));
    transition: transform .25s ease-out;
    will-change: transform;
}

.rol-hero-warrior {
    left: max(-20px, calc(50% - 850px));
    transform-origin: left center;
    animation: rolCharacterFloatLeft 7s ease-in-out infinite alternate;
}

.rol-hero-mystics {
    right: max(-12px, calc(50% - 860px));
    transform-origin: right center;
    animation: rolCharacterFloatRight 8s ease-in-out infinite alternate;
}

.rol-hero-content {
    position: relative;
    z-index: 4;
    display: grid;
    place-items: center;
    min-height: 470px;
    padding-top: 24px;
    padding-bottom: 38px;
}

.rol-hero-title-wrap {
    width: min(760px, 56vw);
    text-align: center;
}

.rol-hero-sigil {
    position: absolute;
    top: 34px;
    left: 50%;
    z-index: -1;
    width: 175px;
    height: 175px;
    opacity: .62;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 22px rgba(240,174,52,.28));
}

.rol-hero-sigil::before,
.rol-hero-sigil::after,
.rol-hero-sigil span,
.rol-hero-sigil i,
.rol-hero-sigil b {
    content: "";
    position: absolute;
    border: 1px solid rgba(224,163,48,.44);
}

.rol-hero-sigil::before {
    inset: 25px;
    transform: rotate(45deg);
}

.rol-hero-sigil::after {
    inset: 48px;
    border-color: rgba(245,192,78,.56);
    transform: rotate(45deg);
}

.rol-hero-sigil span {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    border: 0;
    background: linear-gradient(transparent, rgba(245,190,71,.75), transparent);
}

.rol-hero-sigil i {
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(245,190,71,.75), transparent);
}

.rol-hero-sigil b {
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: #f9c75d;
    box-shadow: 0 0 18px #e89524, 0 0 46px rgba(255,179,42,.55);
    transform: translate(-50%, -50%);
}

.rol-hero-overline {
    margin: 0 0 -2px;
    color: #e8c477;
    font: 500 clamp(29px, 3.1vw, 48px)/1 Cinzel, serif;
    letter-spacing: .26em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #54330d, 0 0 25px rgba(234,168,45,.22);
}

.rol-hero h1 {
    margin: 0;
    color: transparent;
    font: 600 clamp(76px, 8vw, 126px)/.86 Cinzel, serif;
    letter-spacing: -.035em;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, #fff4bd 0, #e7bd65 38%, #a5681d 70%, #52300a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(255,221,130,.32);
    filter: drop-shadow(0 2px 0 #3d2308) drop-shadow(0 12px 20px rgba(0,0,0,.48));
}

.rol-hero-motto {
    display: grid;
    grid-template-columns: minmax(35px, 1fr) auto minmax(35px, 1fr);
    align-items: center;
    gap: 17px;
    margin: 15px auto 0;
    color: #e0bc70;
    font: 600 clamp(12px, 1.25vw, 18px) Cinzel, serif;
    text-transform: uppercase;
}

.rol-hero-motto i {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207,151,48,.75));
}

.rol-hero-motto i:last-child {
    background: linear-gradient(90deg, rgba(207,151,48,.75), transparent);
}

.rol-hero-description {
    max-width: 600px;
    margin: 15px auto 0;
    color: #d2cabd;
    font-size: 12px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

.rol-hero-tagline {
    margin: 6px 0 0;
    color: #e4bd68;
    font-size: 12px;
    font-weight: 700;
}

.rol-hero-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: min(780px, 100%);
    margin: 22px auto 0;
}

.rol-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    overflow: hidden;
    border: 1px solid;
    color: #e8d5aa;
    text-decoration: none;
    font: 600 12px Cinzel, serif;
    letter-spacing: .015em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.22);
    transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}

.rol-action:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.rol-action-icon {
    color: #ffe09a;
    font-size: 19px;
    filter: drop-shadow(0 0 7px rgba(247,186,65,.35));
}

.rol-action-gold {
    border-color: #b7771c;
    color: #251506;
    background:
        linear-gradient(180deg, rgba(255,237,160,.26), transparent 31%),
        linear-gradient(105deg, #8e5712, #d6a848 46%, #986016);
}

.rol-action-gold .rol-action-icon {
    color: #3e2609;
}

.rol-action-dark {
    border-color: rgba(196,139,42,.46);
    background: linear-gradient(180deg, rgba(34,26,15,.94), rgba(7,7,6,.96));
}

.rol-action-red {
    border-color: #9f3a19;
    color: #f1c986;
    background:
        linear-gradient(180deg, rgba(255,163,91,.12), transparent 32%),
        linear-gradient(115deg, #341008, #7f210e 52%, #381008);
}

.rol-coin-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(244,193,92,.72);
    border-radius: 50%;
}

.rol-hero-bottom-fade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 7;
    height: 58px;
    pointer-events: none;
    background: linear-gradient(transparent, #060604 88%);
}

/* Dashboard */
.rol-command-center {
    position: relative;
    z-index: 9;
    padding: 0 0 16px;
    background:
        radial-gradient(circle at 50% 0, rgba(169,104,25,.08), transparent 34rem),
        #060604;
}

.rol-command-grid {
    display: grid;
    grid-template-columns: 1.02fr 1.02fr 1.02fr 1.35fr;
    gap: 1px;
    padding: 0;
    border: 1px solid var(--rol-line);
    background: rgba(193,137,45,.25);
    box-shadow: 0 24px 65px rgba(0,0,0,.38);
}

.rol-dashboard-panel,
.rol-feature-panel,
.rol-community-panel {
    position: relative;
    min-width: 0;
    padding: 12px 17px 13px;
    background:
        linear-gradient(145deg, rgba(179,121,31,.055), transparent 33%),
        linear-gradient(180deg, rgba(12,11,9,.98), rgba(6,6,5,.99));
}

.rol-dashboard-panel::before,
.rol-dashboard-panel::after,
.rol-feature-panel::before,
.rol-community-panel::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.rol-dashboard-panel::before,
.rol-feature-panel::before,
.rol-community-panel::before {
    inset: 5px;
    border: 1px solid rgba(225,176,75,.055);
}

.rol-dashboard-panel::after {
    top: -1px;
    right: -1px;
    width: 17px;
    height: 17px;
    border-top: 1px solid rgba(240,192,90,.64);
    border-right: 1px solid rgba(240,192,90,.64);
}

.rol-panel-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0 4px 9px;
    border-bottom: 1px solid rgba(194,137,44,.2);
}

.rol-panel-heading.centered {
    justify-content: center;
    text-align: center;
}

.rol-panel-heading span {
    color: #d7ad59;
    font: 600 13px Cinzel, serif;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.rol-panel-heading small {
    color: #776d5d;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.rol-ranking-list {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 166px;
}

.rol-ranking-entry {
    display: grid;
    grid-template-columns: 25px 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 32px;
    border-bottom: 1px solid rgba(255,255,255,.045);
    color: #d4cdc1;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.rol-ranking-entry:hover {
    color: #f1d28b;
    background: linear-gradient(90deg, rgba(202,142,43,.08), transparent);
}

.rol-rank-number {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: #b9a982;
    font: 700 9px Cinzel, serif;
}

.rol-rank-number.top-1,
.rol-rank-number.top-2,
.rol-rank-number.top-3 {
    border: 1px solid;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.rol-rank-number.top-1 {
    border-color: rgba(240,183,62,.75);
    color: #f6d579;
    background: rgba(174,112,18,.22);
}

.rol-rank-number.top-2 {
    border-color: rgba(198,190,166,.5);
    color: #ded8c8;
    background: rgba(158,152,134,.12);
}

.rol-rank-number.top-3 {
    border-color: rgba(185,100,43,.63);
    color: #dfa376;
    background: rgba(132,65,25,.16);
}

.rol-rank-number.top-1,
.rol-rank-number.top-2,
.rol-rank-number.top-3 {
    line-height: 1;
}

.rol-class-emblem {
    display: grid;
    place-items: center;
    min-width: 26px;
    text-align: center;
}

.rol-class-emblem.muted {
    color: #9b9689;
}

.rol-class-emblem.guild {
    color: #c6812f;
}

.rol-rank-name {
    min-width: 0;
}

.rol-rank-name strong,
.rol-rank-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rol-rank-name strong {
    font-size: 9px;
    font-weight: 600;
}

.rol-rank-name small {
    margin-top: 1px;
    color: #70695f;
    font-size: 7px;
}

.rol-ranking-entry > b {
    color: #cdb277;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.rol-panel-empty {
    display: grid;
    place-items: center;
    min-height: 160px;
    color: #786f63;
    text-align: center;
    font-size: 9px;
}

.rol-panel-button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-top: 9px;
    overflow: hidden;
    border: 1px solid rgba(180,122,29,.37);
    color: #c8a45e;
    background: linear-gradient(180deg, rgba(36,26,14,.78), rgba(9,8,6,.84));
    text-decoration: none;
    font: 700 8px Cinzel, serif;
    letter-spacing: .055em;
    text-transform: uppercase;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.rol-panel-button:hover {
    border-color: rgba(230,177,69,.6);
    color: #f0ce81;
    background: rgba(143,87,17,.13);
}

.rol-news-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    min-height: 166px;
}

.rol-news-entry {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 9px;
    min-height: 51px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.rol-news-entry img {
    width: 74px;
    height: 49px;
    border: 1px solid rgba(193,137,45,.25);
    object-fit: cover;
    filter: saturate(.82) contrast(1.08);
}

.rol-news-entry strong,
.rol-news-entry p,
.rol-news-entry time {
    display: block;
}

.rol-news-entry strong {
    overflow: hidden;
    color: #d8b664;
    font-size: 8px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rol-news-entry p {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: #8f8779;
    font-size: 7px;
    line-height: 1.22;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rol-news-entry time {
    margin-top: 2px;
    color: #765833;
    font-size: 6px;
    text-transform: uppercase;
}

/* Lower cards */
.rol-lower-section {
    padding: 0 0 12px;
    background: #060604;
}

.rol-lower-grid {
    display: grid;
    grid-template-columns: 1.1fr .96fr 1.08fr;
    gap: 12px;
}

.rol-feature-panel,
.rol-community-panel {
    min-height: 157px;
    border: 1px solid var(--rol-line);
    padding: 12px 18px 13px;
}

.rol-feature-icons {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 7px 0 10px;
}

.rol-feature-icons div {
    display: grid;
    justify-items: center;
    min-width: 0;
    text-align: center;
}

.rol-feature-icons i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
    border: 1px solid rgba(202,144,45,.33);
    border-radius: 50%;
    color: #d5a43e;
    background: radial-gradient(circle, rgba(194,125,24,.12), transparent 67%);
    font-style: normal;
    font-size: 18px;
    box-shadow: inset 0 0 12px rgba(196,133,31,.08);
}

.rol-feature-icons strong,
.rol-feature-icons span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.rol-feature-icons strong {
    color: #c9c1b4;
    font-size: 7px;
}

.rol-feature-icons span {
    margin-top: 2px;
    color: #766f64;
    font-size: 6px;
}

.rol-battle-panel {
    position: relative;
    min-height: 157px;
    overflow: hidden;
    border: 1px solid var(--rol-line);
    background: #100d08;
}

.rol-battle-panel::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 2;
    border: 1px solid rgba(232,183,82,.1);
    pointer-events: none;
}

.rol-battle-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.75) contrast(1.08) brightness(.65);
    transition: transform .8s ease, filter .8s ease;
}

.rol-battle-panel:hover img {
    transform: scale(1.035);
    filter: saturate(.92) contrast(1.08) brightness(.74);
}

.rol-battle-overlay {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 157px;
    padding: 18px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(7,6,4,.32), rgba(7,6,4,.56)),
        radial-gradient(circle at center, transparent, rgba(4,4,3,.45));
}

.rol-battle-overlay span {
    color: #e0b85f;
    font: 600 14px Cinzel, serif;
    text-transform: uppercase;
}

.rol-battle-overlay h2 {
    margin: 2px 0 0;
    color: #f1d28b;
    font: 600 10px Cinzel, serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rol-battle-overlay p {
    margin: 8px 0 0;
    color: #9d9486;
    font-size: 7px;
}

.rol-battle-overlay a {
    margin-top: 12px;
    padding: 6px 18px;
    border: 1px solid rgba(207,149,47,.42);
    color: #d1ae68;
    background: rgba(8,7,5,.68);
    text-decoration: none;
    font: 700 7px Cinzel, serif;
    text-transform: uppercase;
}

.rol-community-links {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin: 8px 0 10px;
}

.rol-community-links a {
    display: grid;
    justify-items: center;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.rol-community-links i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 5px;
    color: #c99a3e;
    font-style: normal;
    font-size: 19px;
    transition: transform .18s ease, color .18s ease;
}

.rol-community-links a:hover i {
    color: #efd17e;
    transform: translateY(-2px);
}

.rol-community-links strong {
    color: #cac1b3;
    font-size: 7px;
    text-transform: uppercase;
}

.rol-community-links span {
    margin-top: 2px;
    color: #776849;
    font-size: 6px;
}

/* CTA and server strip */
.rol-news-showcase {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
    border-top: 1px solid rgba(191,135,42,.12);
    background:
        radial-gradient(circle at 18% 50%, rgba(150,82,18,.14), transparent 27rem),
        radial-gradient(circle at 84% 50%, rgba(84,39,127,.08), transparent 27rem),
        #080705;
}

.rol-news-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .14;
    background: url('/assets/visual/hero-atmosphere.webp') center / cover;
    filter: blur(7px);
}

.rol-news-showcase-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 28px 34px;
    border: 1px solid rgba(198,141,44,.32);
    background: rgba(6,6,5,.75);
    box-shadow: inset 0 0 40px rgba(198,132,29,.035);
}

.rol-section-kicker {
    color: #c69037;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.rol-news-showcase h2 {
    margin: 6px 0 0;
    color: #e8d3a5;
    font: 600 clamp(22px, 3vw, 38px) Cinzel, serif;
}

.rol-news-showcase p {
    margin: 7px 0 0;
    color: #8f8779;
    font-size: 10px;
    line-height: 1.65;
}

.rol-news-showcase-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.rol-news-showcase-actions .rol-action {
    min-width: 190px;
    min-height: 44px;
    font-size: 9px;
}

.rol-status-strip {
    border-top: 1px solid rgba(194,137,44,.38);
    border-bottom: 1px solid rgba(194,137,44,.16);
    background: rgba(5,5,4,.96);
}

.rol-status-grid {
    display: grid;
    grid-template-columns: 1.15fr repeat(4, 1fr);
    min-height: 50px;
}

.rol-status-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    border-right: 1px solid rgba(255,255,255,.045);
}

.rol-status-grid > div:last-child {
    border-right: 0;
}

.rol-status-grid span {
    color: #867d70;
    font: 600 8px Cinzel, serif;
    text-transform: uppercase;
}

.rol-status-grid strong {
    color: #d6c5a0;
    font-size: 10px;
}

.rol-status-grid strong.is-online,
.rol-status-grid strong.is-offline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
}

.rol-status-grid strong i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.rol-status-grid strong.is-online {
    color: #8ac66a;
}

.rol-status-grid strong.is-online i {
    background: #67c147;
    box-shadow: 0 0 12px rgba(103,193,71,.68);
}

.rol-status-grid strong.is-offline {
    color: #c36e5c;
}

.rol-status-grid strong.is-offline i {
    background: #a63d2b;
    box-shadow: 0 0 12px rgba(166,61,43,.58);
}

/* Footer refresh */
.site-footer {
    border-top: 0;
    background:
        radial-gradient(circle at 50% 0, rgba(133,80,15,.08), transparent 28rem),
        #050504;
}

.footer-grid {
    padding-top: 46px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(211,158,58,.13);
}

.footer-brand {
    display: grid;
    justify-items: start;
    line-height: .95;
}

.footer-brand small {
    color: #c69b4a;
    font: 600 9px Cinzel, serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.footer-brand strong {
    color: #e7c677;
    font: 600 28px Cinzel, serif;
    text-transform: uppercase;
}

.footer-identity p {
    max-width: 320px;
}

/* Ember particles and reveal */
.rol-embers {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.rol-ember {
    position: absolute;
    bottom: -20px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: 0;
    background: #ffad35;
    box-shadow: 0 0 6px #e96c16, 0 0 12px rgba(255,133,30,.55);
    animation: rolEmberRise var(--duration) linear infinite;
    animation-delay: var(--delay);
}

.rol-reveal {
    opacity: 1;
    transform: none;
}

.rol-motion-ready .rol-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}

.rol-motion-ready .rol-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes rolEmberRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.6);
    }
    12% { opacity: .75; }
    75% { opacity: .26; }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), -520px, 0) scale(1.25);
    }
}

@keyframes rolGlowPulse {
    from { opacity: .18; transform: scale(.92); }
    to { opacity: .38; transform: scale(1.08); }
}

@keyframes rolCharacterFloatLeft {
    from { transform: translate3d(-5px, 2px, 0) scale(1.02); }
    to { transform: translate3d(5px, -3px, 0) scale(1.025); }
}

@keyframes rolCharacterFloatRight {
    from { transform: translate3d(5px, -2px, 0) scale(1.02); }
    to { transform: translate3d(-5px, 3px, 0) scale(1.025); }
}

/* Subpage visual consistency */
.is-subpage .page-hero,
.is-subpage .hero-section {
    border-bottom: 1px solid rgba(195,137,43,.23);
    background:
        linear-gradient(90deg, rgba(5,5,4,.94), rgba(7,6,5,.74), rgba(5,5,4,.94)),
        url('/assets/visual/hero-atmosphere.webp') center / cover no-repeat;
}

.is-subpage .panel,
.is-subpage .ranking-table,
.is-subpage .setup-panel,
.is-subpage .cta-panel {
    border-color: rgba(194,137,44,.24);
    background:
        linear-gradient(145deg, rgba(194,137,44,.045), transparent 34%),
        rgba(10,9,7,.95);
}


/* ========================================================================
   Rise of Legends v2.5.1 – bessere Lesbarkeit auf großen Bildschirmen
   ======================================================================== */

/* Navigation und Kopfbereich */
.main-nav a {
    font-size: 11px;
}

.site-header .ghost-button,
.site-header .gold-button,
.site-header .outline-button {
    font-size: 11px;
}

/* Heldenbereich: Fließtext und Aktionsflächen */
.rol-hero-description {
    font-size: 14px;
}

.rol-hero-tagline {
    font-size: 13px;
}

.rol-action {
    font-size: 13px;
}

/* Überschriften der Ranking-, Gilden- und News-Karten */
.rol-panel-heading span {
    font-size: 15px;
}

.rol-panel-heading small {
    font-size: 8px;
}

/* Rankinglisten */
.rol-rank-number {
    font-size: 10px;
}

.rol-rank-name strong {
    font-size: 11px;
}

.rol-rank-name small {
    font-size: 8px;
}

.rol-ranking-entry > b {
    font-size: 10px;
}

.rol-panel-empty {
    font-size: 10px;
}

.rol-panel-button {
    min-height: 32px;
    font-size: 9px;
}

/* News */
.rol-news-entry strong {
    font-size: 10px;
}

.rol-news-entry p {
    font-size: 8px;
    line-height: 1.34;
}

.rol-news-entry time {
    font-size: 7px;
}

/* Server-Features */
.rol-feature-icons strong {
    font-size: 8px;
}

.rol-feature-icons span {
    font-size: 7px;
}

/* Schlachtenkarte */
.rol-battle-overlay span {
    font-size: 16px;
}

.rol-battle-overlay h2 {
    font-size: 12px;
}

.rol-battle-overlay p {
    font-size: 9px;
}

.rol-battle-overlay a {
    font-size: 9px;
}

/* Community */
.rol-community-links strong {
    font-size: 8px;
}

.rol-community-links span {
    font-size: 7px;
}

/* Große Abschlussfläche */
.rol-section-kicker {
    font-size: 10px;
}

.rol-news-showcase p {
    font-size: 12px;
}

.rol-news-showcase-actions .rol-action {
    font-size: 10px;
}

/* Serverstatus */
.rol-status-grid span {
    font-size: 9px;
}

.rol-status-grid strong {
    font-size: 12px;
}

/* Footer */
.footer-grid p {
    font-size: 11px;
}

.footer-grid strong {
    font-size: 11px;
}

.footer-grid a {
    font-size: 11px;
}

.footer-status span {
    font-size: 11px;
}

.footer-bottom {
    font-size: 9px;
}

/* Responsive */
@media (max-width: 1240px) {
    .main-nav {
        gap: 15px;
    }

    .main-nav a {
        font-size: 9px;
    }

    .site-brand {
        min-width: 170px;
    }

    .rol-hero-warrior {
        left: -70px;
        opacity: .82;
    }

    .rol-hero-mystics {
        right: -88px;
        opacity: .82;
    }

    .rol-command-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rol-dashboard-panel:nth-child(2) {
        border-right: 0;
    }

    .rol-lower-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rol-community-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1080px) {
    .server-pill {
        display: none;
    }

    .site-brand {
        min-width: 155px;
    }

    .site-brand-copy strong {
        font-size: 24px;
    }

    .main-nav a:nth-child(2),
    .main-nav a:nth-child(3) {
        display: none;
    }

    .rol-hero-title-wrap {
        width: min(720px, 70vw);
    }

    .rol-hero-character {
        opacity: .62;
    }
}

@media (max-width: 860px) {
    .header-inner {
        min-height: 66px;
    }

    .site-brand {
        min-width: auto;
        margin-right: auto;
        justify-content: flex-start;
    }

    .site-brand::after,
    .site-brand-flare {
        display: none;
    }

    .nav-toggle {
        display: grid;
        gap: 4px;
        width: 38px;
        height: 38px;
        place-content: center;
        border: 1px solid rgba(199,143,45,.25);
    }

    .nav-toggle span {
        display: block;
        width: 18px;
        height: 1px;
        background: #d1a44c;
    }

    .main-nav {
        position: absolute;
        top: 66px;
        right: 0;
        left: 0;
        display: none;
        padding: 10px 22px 18px;
        border-bottom: 1px solid rgba(196,139,44,.28);
        background: rgba(6,6,5,.985);
        box-shadow: 0 18px 38px rgba(0,0,0,.35);
    }

    .main-nav.open {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .main-nav a,
    .main-nav a:nth-child(2),
    .main-nav a:nth-child(3) {
        display: block;
        padding: 12px 8px;
        border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .main-nav a::after {
        display: none;
    }

    .header-actions .ghost-button {
        display: none;
    }

    .header-actions .gold-button {
        min-height: 38px;
        padding: 0 13px;
        font-size: 8px;
    }

    .rol-hero {
        min-height: 520px;
    }

    .rol-hero-content {
        min-height: 520px;
    }

    .rol-hero-title-wrap {
        width: min(680px, 88vw);
    }

    .rol-hero-warrior {
        left: -150px;
        opacity: .35;
    }

    .rol-hero-mystics {
        right: -170px;
        opacity: .36;
    }

    .rol-hero-actions {
        grid-template-columns: 1fr;
        width: min(420px, 100%);
    }

    .rol-command-center {
        padding-top: 12px;
    }

    .rol-lower-grid {
        grid-template-columns: 1fr;
    }

    .rol-community-panel {
        grid-column: auto;
    }

    .rol-news-showcase-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .rol-news-showcase-actions {
        width: 100%;
    }

    .rol-news-showcase-actions .rol-action {
        flex: 1;
        min-width: 0;
    }

    .rol-status-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rol-status-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(100% - 24px, 1240px);
    }

    .header-actions .gold-button {
        display: none;
    }

    .site-brand-copy small {
        font-size: 7px;
    }

    .site-brand-copy strong {
        font-size: 21px;
    }

    .main-nav.open {
        grid-template-columns: 1fr;
    }

    .rol-hero-overline {
        font-size: 24px;
        letter-spacing: .2em;
    }

    .rol-hero h1 {
        font-size: clamp(52px, 18vw, 78px);
    }

    .rol-hero-motto {
        grid-template-columns: 30px minmax(0, auto) 30px;
        gap: 8px;
        font-size: 9px;
    }

    .rol-hero-description {
        font-size: 10px;
    }

    .rol-hero-tagline {
        font-size: 10px;
    }

    .rol-action {
        min-height: 45px;
        font-size: 9px;
    }

    .rol-command-grid {
        grid-template-columns: 1fr;
    }

    .rol-dashboard-panel:nth-child(2) {
        border-right: initial;
    }

    .rol-feature-icons {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 13px;
    }

    .rol-community-links {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 14px;
    }

    .rol-news-showcase-actions {
        flex-direction: column;
    }

    .rol-status-grid {
        grid-template-columns: 1fr;
    }

    .rol-status-grid > div:first-child {
        grid-column: auto;
    }

    .rol-status-grid > div {
        justify-content: space-between;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.045);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rol-hero-glow,
    .rol-hero-character,
    .rol-ember {
        animation: none !important;
    }

    .rol-motion-ready .rol-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ========================================================================
   Rise of Legends v2.5.2 – stärkere Lesbarkeit
   ======================================================================== */

/* Navigation und Header */
.main-nav a {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.site-header .ghost-button,
.site-header .gold-button,
.site-header .outline-button {
    font-size: 12px;
}

/* Heldenbereich */
.rol-hero-description {
    font-size: 16px;
    line-height: 1.7;
}

.rol-hero-tagline {
    font-size: 15px;
    line-height: 1.55;
}

.rol-action {
    font-size: 14px;
}

/* Karten-Überschriften */
.rol-panel-heading span {
    font-size: 17px;
}

.rol-panel-heading small {
    font-size: 9px;
    letter-spacing: 0.18em;
}

/* Rankings */
.rol-rank-number {
    font-size: 12px;
}

.rol-rank-name strong {
    font-size: 13px;
    line-height: 1.35;
}

.rol-rank-name small {
    font-size: 9px;
}

.rol-ranking-entry > b {
    font-size: 11px;
}

.rol-panel-empty {
    font-size: 11px;
}

.rol-panel-button {
    min-height: 36px;
    font-size: 10px;
    letter-spacing: 0.14em;
}

/* News */
.rol-news-entry strong {
    font-size: 12px;
    line-height: 1.35;
}

.rol-news-entry p {
    font-size: 9px;
    line-height: 1.45;
}

.rol-news-entry time {
    font-size: 8px;
}

/* Server Features */
.rol-feature-icons strong {
    font-size: 9px;
    line-height: 1.3;
}

.rol-feature-icons span {
    font-size: 8px;
}

/* Schlachtenkarte */
.rol-battle-overlay span {
    font-size: 18px;
}

.rol-battle-overlay h2 {
    font-size: 14px;
}

.rol-battle-overlay p {
    font-size: 10px;
    line-height: 1.45;
}

.rol-battle-overlay a {
    font-size: 10px;
}

/* Community */
.rol-community-links strong {
    font-size: 9px;
}

.rol-community-links span {
    font-size: 8px;
}

/* Große Abschlusssektion */
.rol-section-kicker {
    font-size: 11px;
    letter-spacing: 0.22em;
}

.rol-news-showcase p {
    font-size: 14px;
    line-height: 1.55;
}

.rol-news-showcase-actions .rol-action {
    font-size: 11px;
}

/* Statusleiste */
.rol-status-grid span {
    font-size: 10px;
}

.rol-status-grid strong {
    font-size: 14px;
}

/* Footer */
.footer-grid p {
    font-size: 12px;
    line-height: 1.65;
}

.footer-grid strong {
    font-size: 12px;
}

.footer-grid a {
    font-size: 12px;
    line-height: 1.9;
}

.footer-status span {
    font-size: 12px;
}

.footer-bottom {
    font-size: 10px;
    line-height: 1.5;
}


/* ========================================================================
   Rise of Legends v2.6 – Live-Serverstatus und News-System
   ======================================================================== */
.server-pill.unknown {
    border-color: rgba(213,169,79,.24);
    color: #b9a16e;
    background: rgba(213,169,79,.045);
}

.server-pill.unknown i,
.rol-status-grid strong.is-unknown i {
    background: #d4a846;
    box-shadow: 0 0 12px rgba(212,168,70,.55);
}

.rol-status-grid strong.is-unknown {
    color: #d6b36a;
}

.rol-news-entry > a {
    display: block;
    flex: 0 0 auto;
}

.rol-news-entry strong a {
    color: inherit;
    text-decoration: none;
}

.rol-news-entry strong a:hover {
    color: var(--gold2);
}

.news-archive-page,
.news-detail-page {
    background:
        radial-gradient(circle at 50% 0, rgba(118,75,19,.14), transparent 34%),
        #090806;
}

.news-archive-hero {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.42)),
        url('/assets/visual/hero-atmosphere.webp') center 47% / cover no-repeat;
}

.news-archive-section {
    padding: 62px 0 92px;
}

.news-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.news-card {
    overflow: hidden;
    border: 1px solid rgba(213,169,79,.2);
    background:
        linear-gradient(145deg, rgba(213,169,79,.055), transparent 38%),
        rgba(9,8,6,.93);
    box-shadow: 0 24px 65px rgba(0,0,0,.3);
    transition: transform .25s ease, border-color .25s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(224,182,95,.46);
}

.news-card-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #0d0b08;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease, filter .45s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.045);
    filter: brightness(1.08);
}

.news-card-image > span:not(.news-card-placeholder) {
    position: absolute;
    left: 17px;
    bottom: 15px;
    padding: 6px 9px;
    border: 1px solid rgba(239,199,112,.35);
    color: var(--gold2);
    background: rgba(6,5,4,.82);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.news-card-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgba(224,182,95,.54);
    font: 600 20px Cinzel, serif;
    letter-spacing: .15em;
}

.news-card-content {
    padding: 24px;
}

.news-card-content time {
    color: #756c5e;
    font-size: 10px;
    letter-spacing: .08em;
}

.news-card-content h2 {
    margin: 9px 0 12px;
    font: 600 21px/1.3 Cinzel, serif;
}

.news-card-content h2 a {
    color: #e8ddca;
    text-decoration: none;
}

.news-card-content h2 a:hover {
    color: var(--gold2);
}

.news-card-content p {
    min-height: 74px;
    margin: 0;
    color: #958b7d;
    font-size: 13px;
    line-height: 1.65;
}

.news-card-link {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin-top: 18px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.news-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 38px;
}

.news-pagination a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--line);
    color: #9d8d6a;
    text-decoration: none;
    background: rgba(213,169,79,.03);
}

.news-pagination a.active,
.news-pagination a:hover {
    color: #0d0b08;
    background: linear-gradient(135deg, #b77a1e, #e0b65f);
}

.news-empty-state {
    max-width: 760px;
    margin: 0 auto;
    padding: 52px;
    text-align: center;
}

.news-empty-state h2 {
    margin: 10px 0;
    font: 600 28px Cinzel, serif;
}

.news-empty-state p {
    color: #92887a;
    font-size: 13px;
    line-height: 1.7;
}

.news-detail-header {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #070605;
}

.news-detail-header > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .67;
}

.news-detail-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,4,4,.2), rgba(5,4,3,.86) 85%),
        linear-gradient(90deg, rgba(4,3,3,.65), transparent 66%);
}

.news-detail-heading {
    position: relative;
    z-index: 1;
    padding-bottom: 58px;
}

.news-back-link {
    display: inline-block;
    margin-bottom: 38px;
    color: #c19c52;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.news-detail-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.news-detail-meta span {
    padding: 6px 10px;
    border: 1px solid rgba(224,182,95,.36);
    color: var(--gold2);
    background: rgba(7,6,4,.64);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.news-detail-meta time {
    color: #a79d8d;
    font-size: 12px;
}

.news-detail-heading h1 {
    max-width: 960px;
    margin: 0;
    color: #f0e4d1;
    font: 600 clamp(35px, 5vw, 62px)/1.12 Cinzel, serif;
}

.news-detail-heading > p {
    max-width: 850px;
    margin: 18px 0 0;
    color: #b9ae9c;
    font-size: 16px;
    line-height: 1.7;
}

.news-detail-body-section {
    padding: 64px 0 100px;
}

.news-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 44px;
    align-items: start;
}

.news-detail-content {
    color: #c0b7aa;
    font-size: 16px;
    line-height: 1.85;
}

.news-detail-content > :first-child {
    margin-top: 0;
}

.news-detail-content h2,
.news-detail-content h3 {
    margin: 38px 0 16px;
    color: #e8d5ad;
    font-family: Cinzel, serif;
}

.news-detail-content h2 {
    font-size: 28px;
}

.news-detail-content h3 {
    font-size: 22px;
}

.news-detail-content a {
    color: var(--gold2);
}

.news-detail-content blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--gold);
    color: #d6c6a8;
    background: rgba(213,169,79,.055);
}

.news-detail-sidebar {
    position: sticky;
    top: 100px;
    padding: 30px;
    border: 1px solid var(--line);
    background:
        linear-gradient(140deg, rgba(213,169,79,.07), transparent 48%),
        rgba(9,8,6,.94);
}

.news-detail-sidebar h2 {
    margin: 9px 0 12px;
    font: 600 23px Cinzel, serif;
}

.news-detail-sidebar p {
    margin: 0 0 22px;
    color: #8f8679;
    font-size: 12px;
    line-height: 1.7;
}

.news-detail-sidebar .outline-button {
    margin-top: 10px;
}

@media (max-width: 980px) {
    .news-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-detail-layout {
        grid-template-columns: 1fr;
    }

    .news-detail-sidebar {
        position: static;
    }
}

@media (max-width: 650px) {
    .news-card-grid {
        grid-template-columns: 1fr;
    }

    .news-archive-section {
        padding: 40px 0 68px;
    }

    .news-detail-header {
        min-height: 430px;
    }

    .news-detail-heading {
        padding-bottom: 38px;
    }

    .news-detail-heading > p,
    .news-detail-content {
        font-size: 14px;
    }
}

.rol-status-grid strong.is-unknown {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rol-status-grid strong > b {
    color: inherit;
    font: inherit;
}


/* Rise of Legends v2.6.1 – News-Bilder proportional / unverzerrt */
.rol-news-entry {
    grid-template-columns: 86px minmax(0, 1fr);
}

.rol-news-entry img {
    width: 86px;
    height: 48px;
    object-fit: contain;
    object-position: center;
    background: #070605;
}

.news-card-image img {
    object-fit: contain;
    object-position: center;
    background: #070605;
}

.news-detail-header > img {
    object-fit: contain;
    object-position: center;
    background: #070605;
    opacity: .78;
}


/* ========================================================================
   Rise of Legends v2.7.0 – Download Center
   ======================================================================== */

.downloads-page {
    background:
        radial-gradient(circle at 15% 18%, rgba(148,89,19,.09), transparent 28%),
        radial-gradient(circle at 82% 34%, rgba(78,48,110,.08), transparent 32%),
        #050504;
}

.downloads-hero {
    overflow: hidden;
}

.downloads-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 50px;
    align-items: center;
}

.downloads-hero-mark {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 210px;
    border: 1px solid rgba(210,157,45,.28);
    background:
        linear-gradient(135deg, rgba(210,157,45,.08), transparent 62%),
        rgba(8,7,5,.66);
    box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}

.downloads-hero-mark span {
    color: #d8a849;
    font: 600 88px Cinzel, serif;
    line-height: .9;
    text-shadow: 0 0 28px rgba(204,141,35,.22);
}

.downloads-hero-mark strong {
    margin-top: 14px;
    color: #8e7b59;
    font-size: 10px;
    letter-spacing: .32em;
}

.downloads-guide-section {
    padding: 34px 0;
    border-top: 1px solid rgba(188,132,27,.18);
    border-bottom: 1px solid rgba(188,132,27,.18);
    background: rgba(0,0,0,.35);
}

.downloads-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.downloads-guide-grid article {
    display: flex;
    gap: 18px;
    min-height: 118px;
    padding: 22px;
    border: 1px solid rgba(190,137,32,.2);
    background: rgba(8,7,5,.76);
}

.downloads-guide-grid article > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(218,163,52,.32);
    color: #d5a039;
    font: 600 13px Cinzel, serif;
}

.downloads-guide-grid strong {
    color: #d8c59b;
    font: 600 14px Cinzel, serif;
}

.downloads-guide-grid p {
    margin: 8px 0 0;
    color: #8d8373;
    font-size: 11px;
    line-height: 1.65;
}

.downloads-list-section {
    padding: 72px 0 86px;
}

.downloads-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: end;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(188,132,27,.2);
}

.downloads-section-heading span {
    color: #d79c2e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
}

.downloads-section-heading h2 {
    margin: 7px 0 0;
    color: #e7d6b1;
    font: 600 28px Cinzel, serif;
}

.downloads-section-heading > p {
    max-width: 480px;
    margin: 0;
    color: #82796c;
    font-size: 11px;
    line-height: 1.65;
    text-align: right;
}

.downloads-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.download-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(193,138,32,.27);
    background:
        linear-gradient(145deg, rgba(166,103,20,.08), transparent 42%),
        rgba(7,6,5,.94);
    box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.download-card::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,133,30,.08), transparent 68%);
    pointer-events: none;
}

.download-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.download-card-number {
    color: rgba(217,166,67,.52);
    font: 600 13px Cinzel, serif;
    letter-spacing: .12em;
}

.download-card-platform {
    padding: 7px 10px;
    border: 1px solid rgba(188,132,27,.24);
    color: #bca66f;
    background: rgba(188,132,27,.04);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.download-card-copy {
    flex: 1;
    padding: 32px 0 24px;
}

.download-card-kicker {
    color: #946d2f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .22em;
}

.download-card-copy h2 {
    margin: 8px 0 12px;
    color: #ecd7a9;
    font: 600 23px Cinzel, serif;
}

.download-card-copy p {
    margin: 0;
    color: #968b7b;
    font-size: 12px;
    line-height: 1.7;
}

.download-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.download-card-meta > div {
    min-width: 104px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.018);
}

.download-card-meta span,
.download-card-meta strong {
    display: block;
}

.download-card-meta span {
    color: #6f675b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .16em;
}

.download-card-meta strong {
    margin-top: 4px;
    color: #c5b17f;
    font-size: 11px;
}

.download-primary-button {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border: 1px solid #b77c19;
    color: #140e04;
    background: linear-gradient(90deg, #a96f17, #e0b04e, #b47b1d);
    font: 700 11px Cinzel, serif;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .2s ease, filter .2s ease;
}

.download-primary-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.download-primary-button span {
    font-size: 18px;
}

.download-primary-button b {
    font-size: 14px;
}

.downloads-security-note {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid rgba(190,137,32,.18);
    background: rgba(9,8,6,.72);
}

.downloads-security-note > span {
    color: #d59d31;
    font-size: 17px;
}

.downloads-security-note strong {
    color: #d8c59d;
    font: 600 12px Cinzel, serif;
}

.downloads-security-note p {
    margin: 6px 0 0;
    color: #7e766b;
    font-size: 10px;
    line-height: 1.65;
}

.downloads-empty {
    padding: 44px;
    text-align: center;
}

@media (max-width: 900px) {
    .downloads-hero-grid,
    .downloads-card-grid {
        grid-template-columns: 1fr;
    }

    .downloads-hero-mark {
        display: none;
    }

    .downloads-guide-grid {
        grid-template-columns: 1fr;
    }

    .downloads-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .downloads-section-heading > p {
        text-align: left;
    }
}

@media (max-width: 620px) {
    .downloads-list-section {
        padding: 52px 0 66px;
    }

    .download-card {
        min-height: 0;
        padding: 22px 18px;
    }

    .download-card-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================================================
   Rise of Legends v2.8.0 – Language Switcher
   ======================================================================== */

.language-switcher {
    position: relative;
    z-index: 80;
}

.language-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 72px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(193, 138, 32, .28);
    color: #cbb887;
    background: rgba(7, 6, 4, .82);
    cursor: pointer;
    font: inherit;
}

.language-current > span {
    font-size: 16px;
    line-height: 1;
}

.language-current > strong {
    font-size: 9px;
    letter-spacing: .12em;
}

.language-current > i {
    color: #8e713c;
    font-size: 10px;
    font-style: normal;
    transition: transform .2s ease;
}

.language-switcher.open .language-current > i {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    display: none;
    width: 235px;
    max-height: min(520px, 72vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(193, 138, 32, .32);
    background: rgba(5, 5, 4, .98);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
    backdrop-filter: blur(12px);
}

.language-switcher.open .language-menu {
    display: grid;
}

.language-menu a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 28px;
    gap: 9px;
    align-items: center;
    min-height: 39px;
    padding: 7px 9px;
    color: #9d9383;
    text-decoration: none;
    border: 1px solid transparent;
}

.language-menu a:hover,
.language-menu a.active {
    color: #e2cb98;
    border-color: rgba(193, 138, 32, .18);
    background: rgba(193, 138, 32, .06);
}

.language-menu a > span {
    font-size: 17px;
}

.language-menu a > strong {
    font-size: 10px;
    font-weight: 600;
}

.language-menu a > small {
    color: #665c4e;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: right;
}

@media (max-width: 1120px) {
    .header-language-switcher {
        margin-left: auto;
    }
}

@media (max-width: 760px) {
    .language-current {
        min-width: 62px;
        min-height: 36px;
    }

    .language-menu {
        position: fixed;
        top: 70px;
        right: 14px;
        left: 14px;
        width: auto;
        max-height: calc(100vh - 90px);
    }
}



/* Rise of Legends v2.9.0 – Real Arena/PvP Ranking */
.rol-arena-home {
    width: min(1240px, calc(100% - 32px));
    margin: 26px auto;
    border: 1px solid rgba(190,137,32,.24);
    background: linear-gradient(120deg, rgba(80,44,105,.08), transparent 35%), rgba(7,6,5,.94);
}
.rol-arena-home-heading {
    display:flex; justify-content:space-between; align-items:end; gap:20px;
    padding:18px 22px; border-bottom:1px solid rgba(190,137,32,.18);
}
.rol-arena-home-heading span {color:#c58a27;font-size:8px;font-weight:800;letter-spacing:.2em}
.rol-arena-home-heading h2 {margin:4px 0 0;color:#e3c785;font:600 19px Cinzel,serif}
.rol-arena-home-heading a {color:#a98849;font-size:9px;font-weight:700;text-decoration:none;text-transform:uppercase}
.rol-arena-home-table {padding:8px 18px 16px}
.rol-arena-home-row {
    display:grid;grid-template-columns:70px minmax(160px,1.5fr) minmax(110px,1fr) 90px 90px 100px;
    gap:12px;align-items:center;min-height:44px;padding:0 10px;
    border-bottom:1px solid rgba(255,255,255,.055);color:#aaa093;font-size:11px;text-decoration:none
}
.rol-arena-home-row:not(.rol-arena-home-head):hover {background:rgba(188,132,27,.035)}
.rol-arena-home-head {min-height:34px;color:#7d6f93;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rol-arena-home-row strong,.rol-arena-home-row b {color:#e4d6bd}
.arena-position {color:#c99a3a;font:600 13px Cinzel,serif}
.rol-arena-home-empty {padding:30px;color:#82796b;text-align:center}

.arena-ranking-section {padding:54px 0 80px}
.arena-panel {border:1px solid rgba(188,132,27,.25);background:rgba(8,7,6,.95);box-shadow:0 30px 80px rgba(0,0,0,.28)}
.arena-panel-heading {display:flex;justify-content:space-between;align-items:end;padding:20px 22px;border-bottom:1px solid rgba(188,132,27,.18)}
.arena-panel-heading span {color:#a77e3a;font-size:8px;font-weight:800;letter-spacing:.18em}
.arena-panel-heading h2 {margin:5px 0 0;color:#e0c88f;font:600 21px Cinzel,serif}
.arena-panel-heading small {color:#746d63;font-size:9px}
.arena-filters {display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.012)}
.arena-filters label {display:grid;gap:6px}
.arena-filters label>span {color:#9c8c6b;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.arena-filters select,.arena-filters input {min-width:170px;height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.10);color:#ddd4c5;background:#12110f}
.arena-search {flex:1}
.arena-search input {width:100%}
.arena-table-wrap {overflow-x:auto}
.arena-table {width:100%;min-width:1050px;border-collapse:collapse}
.arena-table th,.arena-table td {padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.065);text-align:left;white-space:nowrap}
.arena-table th {color:#8f78aa;background:rgba(255,255,255,.018);font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.arena-table td {color:#b4aa9d;font-size:10px}
.arena-table td strong {display:block;color:#e2d8c7;font-size:11px}
.arena-table td small {display:block;margin-top:3px;color:#766d62;font-size:8px}
.arena-rank,.arena-win {color:#d9aa48!important;font-weight:800}
.arena-empty {padding:36px!important;color:#766d62!important;text-align:center!important}

@media (max-width:850px) {
    .rol-arena-home-row {grid-template-columns:46px minmax(120px,1.5fr) 90px 70px 80px}
    .rol-arena-home-row>:nth-child(5) {display:none}
    .arena-panel-heading {align-items:flex-start;flex-direction:column;gap:8px}
}
@media (max-width:620px) {
    .rol-arena-home-row {grid-template-columns:38px minmax(100px,1fr) 70px 70px;font-size:9px}
    .rol-arena-home-row>:nth-child(3),.rol-arena-home-row>:nth-child(5) {display:none}
}


/* ========================================================================
   Rise of Legends v2.9.1 – Header & Arena Dropdowns
   ======================================================================== */

/* ---------- Header dropdown navigation ---------- */
.main-nav {
    align-items: stretch;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-transform: uppercase;
}

.nav-dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d59b2d, transparent);
    transform: translateX(-50%);
    transition: width .22s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown.open .nav-dropdown-trigger,
.nav-dropdown.active .nav-dropdown-trigger {
    color: #d5b66d;
}

.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown.open .nav-dropdown-trigger::after,
.nav-dropdown.active .nav-dropdown-trigger::after {
    width: 100%;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    z-index: 120;
    display: none;
    width: 270px;
    padding: 8px;
    border: 1px solid rgba(190, 137, 32, .28);
    background:
        linear-gradient(145deg, rgba(176, 112, 24, .05), transparent 38%),
        rgba(7, 6, 5, .985);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .6),
        inset 0 1px rgba(255, 255, 255, .015);
    transform: translateX(-50%);
}

.nav-dropdown.open .nav-dropdown-menu {
    display: grid;
}

.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b88324, transparent);
}

.nav-dropdown-menu > a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid transparent;
    color: #9d9385;
    text-decoration: none;
    text-transform: none;
}

.nav-dropdown-menu > a:hover,
.nav-dropdown-menu > a.active {
    border-color: rgba(192, 139, 36, .18);
    color: #ead49e;
    background:
        linear-gradient(90deg, rgba(194, 137, 31, .08), transparent 80%);
}

.nav-dropdown-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(195, 140, 34, .25);
    color: #d39c35;
    background: rgba(186, 125, 26, .035);
    font-size: 14px;
}

.nav-dropdown-menu strong,
.nav-dropdown-menu small {
    display: block;
}

.nav-dropdown-menu strong {
    color: #d8c697;
    font: 600 10px Cinzel, serif;
    letter-spacing: .05em;
}

.nav-dropdown-menu small {
    margin-top: 4px;
    color: #71695e;
    font-size: 8px;
    letter-spacing: .02em;
}

/* ---------- Arena filters ---------- */
.arena-filter-toolbar {
    display: grid;
    grid-template-columns: 130px 150px 180px minmax(220px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
}

.arena-filter-field {
    position: relative;
    display: grid;
    gap: 7px;
}

.arena-filter-field > span {
    color: #b39762;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.arena-filter-field select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 38px 0 12px;
    border: 1px solid rgba(202, 151, 49, .27);
    border-radius: 2px;
    color: #e5dccd;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent),
        #11100e;
    font-size: 11px;
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.arena-filter-field select:hover,
.arena-filter-field select:focus {
    border-color: rgba(211, 158, 50, .55);
    box-shadow: 0 0 0 1px rgba(211, 158, 50, .08);
}

.arena-filter-field select option {
    color: #f0eadf;
    background: #181715;
}

.arena-filter-field input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 2px;
    color: #e6ded2;
    background: #11100e;
    outline: none;
}

.arena-filter-field input:focus {
    border-color: rgba(211, 158, 50, .38);
}

.arena-search-button,
.arena-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 17px;
    border: 1px solid #a86f19;
    font: 700 9px Cinzel, serif;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
}

.arena-search-button {
    color: #1a1004;
    background: linear-gradient(90deg, #a96e17, #dda947, #af761c);
    cursor: pointer;
}

.arena-search-button:hover {
    filter: brightness(1.08);
}

.arena-reset-button {
    color: #cfb26f;
    background: rgba(9, 8, 6, .7);
}

.arena-reset-button:hover {
    color: #ead49a;
    border-color: #c18b26;
}

/* Native dropdown panels inherit a dark theme in supporting browsers. */
.arena-filter-field select {
    color-scheme: dark;
}

@media (max-width: 1120px) {
    .arena-filter-toolbar {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .arena-search {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .nav-dropdown {
        display: block;
        width: 100%;
    }

    .nav-dropdown-trigger {
        width: 100%;
        min-height: 43px;
        justify-content: flex-start;
    }

    .nav-dropdown-menu {
        position: static;
        width: 100%;
        margin: 0;
        transform: none;
        box-shadow: none;
    }

    .arena-filter-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .arena-search {
        grid-column: 1 / -1;
    }

    .arena-search-button,
    .arena-reset-button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .arena-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .arena-search {
        grid-column: auto;
    }
}


/* ========================================================================
   Rise of Legends v2.9.2 – Arena reference-style correction
   ======================================================================== */

.main-nav .nav-dropdown-trigger {
    white-space: nowrap;
}

/* Keep GAME INFO compact like the other header entries. */
.main-nav .nav-dropdown-trigger {
    font-size: inherit;
    line-height: inherit;
}

/* Arena toolbar closer to the supplied reference layout. */
.arena-filter-toolbar {
    display: grid;
    grid-template-columns: 150px 170px 190px minmax(220px, 1fr) 94px 72px minmax(150px, auto);
    gap: 10px;
    align-items: end;
    padding: 16px 18px 12px;
    background: #171715;
}

.arena-filter-field {
    gap: 5px;
}

.arena-filter-field > span {
    color: #d0b572;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.arena-filter-field select,
.arena-filter-field input {
    height: 37px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 2px;
    color: #f1ece5;
    background: #1c1b1a;
    font-size: 11px;
}

.arena-filter-field select {
    padding: 0 10px;
}

.arena-filter-field select option {
    color: #fff;
    background: #1c1b1a;
}

.arena-search {
    align-self: end;
}

.arena-search input {
    height: 37px;
}

.arena-search-button,
.arena-reset-button {
    height: 37px;
    margin: 0;
    align-self: end;
    font-size: 9px;
}

.arena-last-updated {
    align-self: center;
    justify-self: end;
    padding-bottom: 1px;
    color: #c7c0b6;
    font-size: 10px;
    white-space: nowrap;
}

.arena-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1250px) {
    .arena-filter-toolbar {
        grid-template-columns: 140px 160px 170px minmax(190px,1fr) 90px 70px;
    }

    .arena-last-updated {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 900px) {
    .arena-filter-toolbar {
        grid-template-columns: repeat(3, minmax(130px,1fr));
    }

    .arena-search {
        grid-column: span 2;
    }

    .arena-last-updated {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .arena-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .arena-search,
    .arena-last-updated {
        grid-column: auto;
    }

    .arena-last-updated {
        justify-self: start;
    }
}


/* ========================================================================
   Rise of Legends v2.9.3 – Header dropdown text matches normal nav links
   ======================================================================== */

/*
 * GAME INFO / RANKINGS use buttons because they open dropdowns.
 * Force those buttons to use exactly the same typography as normal
 * header links such as SUPPORT.
 */
.main-nav .nav-dropdown-trigger {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* Match the actual link typography even if a browser applies button defaults. */
.main-nav > a,
.main-nav > .nav-dropdown > .nav-dropdown-trigger {
    font-family: "Cinzel", Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
}


/* ========================================================================
   Rise of Legends v2.9.4 – Dropdown labels use EXACT SUPPORT link style
   ======================================================================== */

/*
 * SUPPORT is a normal direct child link of .main-nav.
 * GAME INFO and RANKINGS are buttons only because they open dropdowns.
 * This rule forces those buttons to inherit the exact same visual style
 * as the normal .main-nav links, including color.
 */
.main-nav > .nav-dropdown > .nav-dropdown-trigger {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;

    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    text-decoration: none !important;
}

/*
 * Apply the same base link styling context to direct links and dropdown
 * trigger buttons. This intentionally does NOT add a separate gold text color.
 */
.main-nav > a,
.main-nav > .nav-dropdown > .nav-dropdown-trigger {
    color: #9f9587 !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

/* Hover/open state follows the same subtle behavior as normal nav links. */
.main-nav > a:hover,
.main-nav > .nav-dropdown:hover > .nav-dropdown-trigger,
.main-nav > .nav-dropdown.open > .nav-dropdown-trigger {
    color: #c7b58f !important;
}

/* Active page text uses the same highlight behavior as the current normal link. */
.main-nav > a.active,
.main-nav > .nav-dropdown.active > .nav-dropdown-trigger {
    color: #d0b66f !important;
}


/* Rise of Legends v2.12.0 – FAQ */
.faq-page {
    background:
        radial-gradient(circle at 15% 10%, rgba(170, 106, 14, .07), transparent 33%),
        radial-gradient(circle at 85% 20%, rgba(87, 43, 120, .06), transparent 30%);
}

.faq-hero-mark {
    width: 210px;
    min-height: 210px;
    margin-left: auto;
    border: 1px solid rgba(197, 143, 34, .35);
    display: grid;
    place-items: center;
    align-content: center;
    background:
        linear-gradient(145deg, rgba(197, 143, 34, .07), transparent 58%);
}

.faq-hero-mark span {
    display: block;
    font-family: Georgia, serif;
    font-size: 92px;
    line-height: .9;
    color: #d5a644;
}

.faq-hero-mark small {
    margin-top: 18px;
    color: #b9903d;
    letter-spacing: .38em;
    font-weight: 700;
}

.faq-section {
    padding: 42px 0 78px;
}

.faq-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.faq-quicklinks a {
    padding: 11px 15px;
    border: 1px solid rgba(194, 139, 29, .34);
    background: rgba(10, 9, 7, .76);
    color: #c7b998;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.faq-quicklinks a:hover {
    color: #f2cf75;
    border-color: rgba(213, 166, 68, .72);
}

.faq-category {
    margin: 0 0 30px;
    border: 1px solid rgba(180, 126, 27, .28);
    background: rgba(7, 7, 6, .76);
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(180, 126, 27, .24);
}

.faq-category-header > span {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(205, 149, 33, .42);
    color: #d6a94d;
    font-family: Georgia, serif;
}

.faq-category-header small {
    display: block;
    margin-bottom: 4px;
    color: #9d7a35;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
}

.faq-category-header h2 {
    margin: 0;
    color: #e9d59d;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 500;
}

.faq-list details {
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.faq-list details:last-child {
    border-bottom: 0;
}

.faq-list summary {
    position: relative;
    padding: 20px 56px 20px 24px;
    cursor: pointer;
    list-style: none;
    color: #ddd3c2;
    font-weight: 700;
    font-size: 14px;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #d0a03e;
    font-size: 22px;
    font-weight: 400;
}

.faq-list details[open] summary {
    color: #edc867;
    background: rgba(196, 143, 35, .045);
}

.faq-list details[open] summary::after {
    content: '−';
}

.faq-answer {
    padding: 0 24px 22px;
    color: #a99d8a;
    font-size: 13px;
    line-height: 1.75;
    max-width: 980px;
}

.faq-answer p {
    margin: 0 0 12px;
}

.faq-answer strong {
    color: #d8bd76;
}

.faq-action {
    display: inline-flex;
    margin-top: 5px;
    padding: 10px 14px;
    border: 1px solid rgba(196, 143, 35, .38);
    color: #d5aa4e;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
    font-weight: 800;
}

.faq-action:hover {
    color: #f4d77e;
    border-color: rgba(220, 173, 68, .72);
}

@media (max-width: 760px) {
    .faq-hero-mark {
        width: 140px;
        min-height: 140px;
        margin: 20px 0 0;
    }

    .faq-hero-mark span {
        font-size: 64px;
    }

    .faq-category-header,
    .faq-list summary,
    .faq-answer {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* Rise of Legends v2.13.0 - Community & Service Center */
.portal-section {
    padding: 38px 0 72px;
}

.portal-list {
    display: grid;
    gap: 18px;
}

.portal-card {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(184, 132, 30, .27);
    background:
        linear-gradient(145deg, rgba(190, 132, 24, .05), transparent 58%),
        rgba(8, 8, 7, .86);
}

.portal-card h2,
.portal-card h3 {
    margin: 7px 0 10px;
    color: #e5d2a3;
    font-family: Georgia, serif;
    font-weight: 500;
}

.portal-card p,
.portal-empty {
    color: #a99e8c;
    line-height: 1.7;
}

.portal-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #a47d32;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.roadmap-column {
    min-width: 0;
}

.roadmap-column > header {
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(180, 126, 27, .28);
    color: #d8aa49;
    background: rgba(11, 10, 8, .82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.roadmap-column .portal-card {
    margin-bottom: 10px;
    padding: 18px;
}

.service-grid,
.player-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.service-card {
    min-height: 155px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(178, 125, 25, .28);
    background: rgba(8, 8, 7, .84);
}

.service-card span {
    color: #9d7b38;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.service-card strong {
    margin: 10px 0 6px;
    color: #e8d39e;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 500;
}

.service-card small {
    color: #8e8678;
}

.service-online { color: #7acb86 !important; }
.service-offline { color: #d36a62 !important; }

.support-layout {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: start;
}

.portal-form {
    display: grid;
    gap: 14px;
}

.portal-form label {
    display: grid;
    gap: 7px;
}

.portal-form label > span {
    color: #b69a61;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portal-form input,
.portal-form select,
.portal-form textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid rgba(183, 132, 32, .30);
    background: rgba(0, 0, 0, .36);
    color: #ddd3c1;
    font: inherit;
}

.portal-form textarea {
    resize: vertical;
}

.portal-mini-list {
    display: grid;
    gap: 9px;
}

.portal-mini-list article,
.portal-mini-list a {
    display: grid;
    gap: 3px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.06);
    color: #d9ccb2;
    text-decoration: none;
    background: rgba(255,255,255,.015);
}

.portal-mini-list span {
    color: #8d8476;
    font-size: 11px;
}

.ticket-thread {
    display: grid;
    gap: 12px;
}

.ticket-message {
    padding: 15px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.018);
}

.ticket-message.admin {
    border-color: rgba(196, 143, 35, .28);
    background: rgba(196, 143, 35, .05);
}

.ticket-message strong {
    color: #d6b76f;
}

.ticket-message small {
    float: right;
    color: #81796d;
}

.ticket-message p {
    clear: both;
    margin: 10px 0 0;
    color: #b7ad9d;
    line-height: 1.65;
}


.race-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #d8d0c2;
}

.race-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(209,164,78,.52);
    border-radius: 4px;
    object-fit: cover;
    object-position: 50% 13%;
    background: #090807;
    box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 5px 13px rgba(0,0,0,.38);
}

.rol-race-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border: 1px solid rgba(209,164,78,.48);
    border-radius: 4px;
    object-fit: cover;
    object-position: 50% 13%;
    background: #090807;
    box-shadow: 0 0 0 1px rgba(0,0,0,.62), 0 5px 12px rgba(0,0,0,.34);
}

.ranking-player-link {
    color: inherit;
    text-decoration: none;
}

.ranking-player-link:hover {
    color: #e5b957;
}

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

.portal-character-card {
    display: grid;
    gap: 5px;
    padding: 15px;
    border: 1px solid rgba(180,126,27,.25);
    color: #d9ceb7;
    text-decoration: none;
    background: rgba(255,255,255,.015);
}

.portal-character-card strong {
    color: #e5bd62;
}

.portal-character-card span,
.portal-character-card small {
    color: #91887b;
}

.portal-history {
    display: grid;
    margin-top: 18px;
}

.portal-history > div {
    display: grid;
    grid-template-columns: 1fr .7fr .8fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.portal-history strong {
    color: #d8b660;
}

.portal-history span,
.portal-history small {
    color: #91887b;
}

.portal-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.legal-copy {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
}

.legal-copy h2 {
    margin: 28px 0 9px;
    color: #e3c675;
    font-family: Georgia, serif;
    font-weight: 500;
}

.legal-copy p {
    color: #aaa092;
    line-height: 1.75;
}

@media (max-width: 1000px) {
    .roadmap-grid,
    .service-grid,
    .player-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-layout {
        grid-template-columns: 1fr;
    }

    .portal-character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .roadmap-grid,
    .service-grid,
    .player-profile-grid,
    .portal-character-grid {
        grid-template-columns: 1fr;
    }

    .portal-history > div {
        grid-template-columns: 1fr;
    }
}


.rol-home-events {
    padding: 30px 0 42px;
}

.rol-home-event-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rol-home-event-grid article {
    padding: 18px;
    border: 1px solid rgba(183, 130, 28, .25);
    background: rgba(7,7,6,.78);
}

.rol-home-event-grid small {
    color: #9b7936;
    font-size: 10px;
}

.rol-home-event-grid h3 {
    margin: 8px 0;
    color: #dfc275;
    font-family: Georgia, serif;
    font-weight: 500;
}

.rol-home-event-grid p {
    margin: 0;
    color: #9d9486;
    line-height: 1.55;
}

.rol-home-event-action {
    margin-top: 14px;
    text-align: center;
}

@media (max-width: 760px) {
    .rol-home-event-grid {
        grid-template-columns: 1fr;
    }
}



.portal-filter-bar {
    display: flex;
    gap: 9px;
    margin-bottom: 18px;
}

.portal-filter-bar input {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(183,132,32,.30);
    background: rgba(0,0,0,.36);
    color: #ddd3c1;
}


/* Rise of Legends v2.13.1 - Community polish */
.portal-shell {
    display: grid;
    gap: 20px;
}

.portal-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(184, 132, 30, .18);
}

.portal-panel-header.standalone {
    margin-bottom: 0;
}

.portal-panel-header > div {
    display: grid;
    gap: 6px;
}

.portal-panel-header > div > span {
    color: #b69046;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.portal-panel-header h2 {
    margin: 0;
    color: #ecd9aa;
    font-family: Georgia, serif;
    font-weight: 500;
    font-size: 38px;
}

.portal-panel-header p {
    margin: 0;
    max-width: 760px;
    color: #9f9585;
    line-height: 1.7;
}

.portal-sidebar {
    position: sticky;
    top: 112px;
}

.support-layout {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 22px;
}

.portal-main-form {
    min-height: 100%;
}

.portal-mini-list article,
.portal-mini-list a {
    gap: 5px;
    padding: 14px 15px;
    border: 1px solid rgba(184, 132, 30, .22);
    background:
        linear-gradient(145deg, rgba(191, 140, 39, .05), transparent 60%),
        rgba(8, 8, 7, .78);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.portal-mini-list a:hover,
.portal-mini-list a.active {
    transform: translateY(-1px);
    border-color: rgba(224, 180, 75, .45);
    background:
        linear-gradient(145deg, rgba(191, 140, 39, .09), transparent 60%),
        rgba(12, 11, 8, .9);
}

.portal-mini-list strong {
    color: #ead39e;
}

.portal-empty-card {
    display: grid;
    gap: 8px;
    padding: 30px;
    border: 1px dashed rgba(203, 155, 55, .28);
    background: rgba(255,255,255,.015);
    color: #a89d8a;
}

.portal-empty-card.small {
    padding: 22px;
}

.portal-empty-card strong {
    color: #e4c572;
}

.portal-empty-card p {
    margin: 0;
    line-height: 1.7;
}

.ticket-thread {
    display: grid;
    gap: 14px;
    min-height: 420px;
}

.ticket-thread-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(184, 132, 30, .18);
}

.ticket-thread-header h2 {
    margin: 2px 0 0;
    color: #f1dfb1;
    font-family: Georgia, serif;
    font-size: 34px;
    font-weight: 500;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ticket-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(187, 134, 35, .26);
    background: rgba(255,255,255,.02);
    color: #c7ab68;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ticket-chip.closed {
    color: #e09e91;
    border-color: rgba(188, 84, 73, .28);
}

.ticket-chip.open {
    color: #83cb8f;
    border-color: rgba(96, 181, 114, .26);
}

.portal-toolbar.actions-only {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.ticket-delete-form {
    display: inline-flex;
}

.ticket-message {
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid rgba(185, 132, 35, .2);
    background:
        linear-gradient(120deg, rgba(191, 140, 39, .04), transparent 50%),
        rgba(255,255,255,.018);
}

.ticket-message.player {
    border-left-color: rgba(224, 179, 76, .48);
}

.ticket-message.admin {
    border-left-color: rgba(122, 203, 134, .44);
    border-color: rgba(122, 203, 134, .18);
    background:
        linear-gradient(120deg, rgba(90, 161, 104, .08), transparent 55%),
        rgba(255,255,255,.02);
}

.ticket-message header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ticket-message strong {
    color: #e0bf6f;
}

.ticket-message.admin strong {
    color: #aee0b7;
}

.ticket-message small {
    float: none;
}

.ticket-message p {
    margin-top: 12px;
}

.ticket-closed-box {
    padding: 15px 16px;
    border: 1px dashed rgba(188, 84, 73, .35);
    color: #c9b6a6;
    background: rgba(116, 33, 25, .08);
}

.portal-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-event-card {
    min-height: 220px;
}

.portal-card small {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    color: #cfba83;
}

.roadmap-grid {
    align-items: start;
    gap: 18px;
}

.roadmap-column {
    padding: 18px;
    border: 1px solid rgba(184, 132, 30, .22);
    background:
        linear-gradient(145deg, rgba(191, 140, 39, .04), transparent 58%),
        rgba(8, 8, 7, .78);
}

.roadmap-column > header {
    margin-bottom: 14px;
    background: rgba(0,0,0,.18);
}

.roadmap-column .portal-card {
    min-height: 170px;
}

.service-grid {
    gap: 16px;
}

.service-card {
    min-height: 170px;
    background:
        linear-gradient(145deg, rgba(191, 140, 39, .05), transparent 58%),
        rgba(8, 8, 7, .84);
}

.service-card strong {
    font-size: 28px;
}

.portal-form input,
.portal-form select,
.portal-form textarea {
    border-color: rgba(183, 132, 32, .34);
    background: rgba(0, 0, 0, .42);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus {
    outline: none;
    border-color: rgba(232, 191, 92, .52);
    box-shadow: 0 0 0 1px rgba(232, 191, 92, .18);
}

@media (max-width: 1200px) {
    .portal-event-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .portal-panel-header {
        flex-direction: column;
    }

    .portal-sidebar {
        position: static;
    }

    .ticket-thread-header {
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .portal-panel-header h2,
    .ticket-thread-header h2 {
        font-size: 28px;
    }

    .portal-toolbar.actions-only {
        justify-content: flex-start;
    }

    .ticket-message header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Rise of Legends v2.13.2 - Community page redesign */
.community-section {
    padding-top: 58px;
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.community-layout-equal {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
}

.community-sidebar,
.community-main-panel,
.community-empty-panel {
    padding: 30px;
}

.community-sidebar {
    position: sticky;
    top: 112px;
}

.community-block-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.community-block-head.compact {
    flex-direction: column;
    align-items: stretch;
}

.community-block-head.no-border {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.community-block-head h2 {
    margin: 10px 0 8px;
    font: 600 32px Cinzel, serif;
    color: var(--gold-light);
}

.community-block-head p {
    max-width: 760px;
    margin: 0;
    color: #9a9184;
    font-size: 13px;
    line-height: 1.75;
}

.community-list {
    display: grid;
    gap: 12px;
}

.community-list-card {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(213,169,79,.16);
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,.02);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.community-list-card:hover,
.community-list-card.active {
    transform: translateY(-1px);
    border-color: rgba(224,182,95,.44);
    background: rgba(213,169,79,.05);
}

.community-list-card.static:hover {
    transform: none;
}

.community-list-card strong {
    color: #ead39e;
    font-size: 18px;
    line-height: 1.4;
}

.community-list-card span {
    color: #8d8476;
    font-size: 11px;
}

.ticket-overview-list {
    max-height: 720px;
    overflow: auto;
    padding-right: 4px;
}

.community-empty-state {
    padding: 22px;
    border: 1px dashed rgba(213,169,79,.22);
    background: rgba(255,255,255,.018);
}

.community-empty-state.compact {
    min-height: 180px;
}

.community-empty-state strong,
.community-empty-panel strong {
    display: block;
    color: var(--gold-light);
    font: 600 22px Cinzel, serif;
}

.community-empty-state p,
.community-empty-panel p {
    margin: 9px 0 0;
    color: #93897a;
    font-size: 13px;
    line-height: 1.75;
}

.community-meta-row,
.community-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.community-action-row form {
    display: inline-flex;
}

.community-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(213,169,79,.24);
    color: #d7bc79;
    background: rgba(255,255,255,.02);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.community-chip.success {
    color: #8bce97;
    border-color: rgba(122,203,134,.28);
}

.community-chip.danger {
    color: #df9b8e;
    border-color: rgba(188,88,70,.34);
}

.community-thread {
    display: grid;
    gap: 14px;
}

.community-message {
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.018);
}

.community-message.player {
    border-left: 3px solid rgba(213,169,79,.52);
}

.community-message.staff {
    border-left: 3px solid rgba(122,203,134,.46);
    background: linear-gradient(145deg, rgba(97,157,108,.07), rgba(255,255,255,.016));
}

.community-message header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.community-message strong {
    color: #e3c16a;
    font-size: 18px;
}

.community-message.staff strong {
    color: #a9e0b2;
}

.community-message small {
    color: #8f8578;
    font-size: 11px;
}

.community-message p {
    margin: 0;
    color: #d5cdbc;
    font-size: 15px;
    line-height: 1.75;
}

.community-form textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px 15px;
    resize: vertical;
    border: 1px solid rgba(255,255,255,.09);
    outline: 0;
    color: var(--text);
    background: rgba(4,4,3,.48);
    font: 500 13px Inter, sans-serif;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.community-form textarea:focus {
    border-color: rgba(224,182,95,.55);
    box-shadow: 0 0 0 3px rgba(213,169,79,.07);
}

.community-form .gold-button,
.community-form .outline-button,
.community-form .ghost-button {
    margin-top: 6px;
}

.community-note-box {
    margin-top: 8px;
    padding: 16px 18px;
    border: 1px solid rgba(213,169,79,.18);
    background: rgba(255,255,255,.02);
    color: #cbc0ac;
    line-height: 1.7;
}

.community-note-box.warning {
    border-color: rgba(188,88,70,.28);
    background: rgba(188,88,70,.05);
}

.community-intro-panel {
    margin-bottom: 22px;
}

.community-event-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.community-event-card {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 30px;
}

.community-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.community-event-meta span {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(213,169,79,.18);
    color: #b69245;
    background: rgba(255,255,255,.02);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.community-event-card h2 {
    margin: 0 0 15px;
    font: 600 34px Cinzel, serif;
    color: var(--gold-light);
}

.community-event-card p {
    margin: 0;
    color: #cfc6b8;
    font-size: 15px;
    line-height: 1.85;
}

.community-event-card small {
    margin-top: auto;
    padding-top: 18px;
    color: #9e937f;
    font-size: 12px;
}

.community-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.community-roadmap-column {
    padding: 24px;
}

.community-roadmap-head {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.community-roadmap-list {
    display: grid;
    gap: 14px;
}

.community-roadmap-card {
    min-height: 190px;
    padding: 18px 18px 20px;
    border: 1px solid rgba(213,169,79,.16);
    background: rgba(255,255,255,.02);
}

.community-roadmap-card h3 {
    margin: 0 0 12px;
    color: var(--gold-light);
    font: 600 20px Cinzel, serif;
}

.community-roadmap-card p {
    margin: 0;
    color: #cec6b8;
    font-size: 14px;
    line-height: 1.78;
}

.community-empty-panel {
    display: block;
}

@media (max-width: 1200px) {
    .community-event-grid,
    .community-roadmap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .community-layout,
    .community-layout-equal {
        grid-template-columns: 1fr;
    }

    .community-sidebar {
        position: static;
    }

    .community-block-head {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .community-event-grid,
    .community-roadmap-grid {
        grid-template-columns: 1fr;
    }

    .community-sidebar,
    .community-main-panel,
    .community-empty-panel,
    .community-roadmap-column,
    .community-event-card {
        padding: 22px;
    }

    .community-block-head h2,
    .community-event-card h2 {
        font-size: 27px;
    }

    .community-message header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ========================================================================
   Rise of Legends v2.13.3 - Professional Community UI
   Visual reference: Account Security / Password & Recovery
   ======================================================================== */
.rol-pro-page {
    background:
        radial-gradient(circle at 20% 0, rgba(213,169,79,.035), transparent 420px),
        linear-gradient(180deg, rgba(8,7,6,.12), rgba(4,4,4,.02));
}

.rol-pro-section {
    padding-top: 44px;
}

.rol-pro-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(213,169,79,.24) !important;
    background:
        linear-gradient(118deg, rgba(213,169,79,.055), transparent 62%),
        rgba(9,8,6,.92) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.rol-pro-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223,177,86,.42), transparent);
    pointer-events: none;
}

.rol-pro-copy,
.rol-pro-actions,
.rol-pro-form,
.rol-pro-list,
.rol-pro-thread,
.rol-pro-status-copy,
.rol-pro-roadmap-list {
    position: relative;
    z-index: 1;
}

.rol-pro-copy .panel-kicker,
.rol-pro-panel .panel-kicker,
.rol-pro-status-copy .panel-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.rol-pro-copy h2,
.rol-pro-panel h2,
.rol-pro-status-copy strong,
.rol-pro-roadmap-item h3 {
    font-family: Cinzel, Georgia, serif;
    font-weight: 600;
    letter-spacing: -.025em;
}

.rol-pro-copy h2,
.rol-pro-panel h2 {
    margin: 0 0 9px;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
}

.rol-pro-copy p {
    margin: 0;
    max-width: 720px;
    color: #9a9184;
    font-size: 11px;
    line-height: 1.75;
}

.rol-pro-support-grid {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.rol-pro-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr);
    gap: 22px;
    align-items: start;
}

.rol-pro-ticket-list,
.rol-pro-side-panel,
.rol-pro-main-panel,
.rol-pro-header-panel,
.rol-pro-empty-panel {
    padding: 34px;
}

.rol-pro-ticket-list {
    position: sticky;
    top: 110px;
}

.rol-pro-panel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 26px;
    align-items: start;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.rol-pro-actions {
    display: grid;
    gap: 11px;
}

.rol-pro-actions.single {
    margin-top: 22px;
}

.rol-pro-actions form {
    display: block;
}

.rol-pro-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.rol-pro-badges > span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(213,169,79,.28);
    color: #d5bd7f;
    background: rgba(213,169,79,.05);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rol-pro-badges > span.success {
    border-color: rgba(129,185,91,.32);
    color: #bfe2a7;
    background: rgba(74,112,48,.18);
}

.rol-pro-badges > span.danger {
    border-color: rgba(220,96,75,.30);
    color: #eaa899;
    background: rgba(116,38,24,.17);
}

.rol-pro-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.rol-pro-list-item {
    display: grid;
    gap: 4px;
    padding: 14px 15px;
    border: 1px solid rgba(213,169,79,.12);
    background: rgba(255,255,255,.014);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.rol-pro-list-item:hover,
.rol-pro-list-item.active {
    transform: translateY(-1px);
    border-color: rgba(213,169,79,.38);
    background: rgba(213,169,79,.055);
}

.rol-pro-list-item.static:hover {
    transform: none;
}

.rol-pro-list-item strong {
    color: #e2ca91;
    font-size: 13px;
    line-height: 1.45;
}

.rol-pro-list-item small {
    color: #766f64;
    font-size: 9px;
    line-height: 1.45;
}

.rol-pro-empty {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px dashed rgba(213,169,79,.18);
    background: rgba(255,255,255,.012);
}

.rol-pro-empty.compact {
    padding: 16px;
}

.rol-pro-empty strong {
    color: #d8be82;
    font: 600 15px Cinzel, Georgia, serif;
}

.rol-pro-empty span {
    color: #837b70;
    font-size: 10px;
    line-height: 1.65;
}

.rol-pro-thread {
    display: grid;
    gap: 11px;
    margin-top: 22px;
}

.rol-pro-message {
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.055);
    border-left: 2px solid rgba(213,169,79,.42);
    background: rgba(255,255,255,.014);
}

.rol-pro-message.staff {
    border-left-color: rgba(129,185,91,.50);
    background: linear-gradient(110deg, rgba(87,133,61,.07), rgba(255,255,255,.014));
}

.rol-pro-message header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.rol-pro-message strong {
    color: #d9bd76;
    font-size: 12px;
}

.rol-pro-message.staff strong {
    color: #bfe2a7;
}

.rol-pro-message small {
    color: #736b60;
    font-size: 9px;
}

.rol-pro-message p {
    margin: 0;
    color: #c8c0b2;
    font-size: 12px;
    line-height: 1.75;
}

.rol-pro-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.rol-pro-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rol-pro-form .form-field {
    display: grid;
    gap: 8px;
}

.rol-pro-form .form-field > span {
    color: #bdb3a4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.rol-pro-form input[type="text"],
.rol-pro-form input[type="search"],
.rol-pro-form input[type="email"],
.rol-pro-form input[type="url"],
.rol-pro-form input[type="number"],
.rol-pro-form select,
.rol-pro-form textarea {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(213,169,79,.15) !important;
    color: #f7f1e6 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        #090806 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.42);
    font: 500 12px Inter, sans-serif;
}

.rol-pro-form input[type="text"],
.rol-pro-form input[type="search"],
.rol-pro-form input[type="email"],
.rol-pro-form input[type="url"],
.rol-pro-form input[type="number"],
.rol-pro-form select {
    padding: 0 14px;
}

.rol-pro-form textarea {
    min-height: 190px;
    padding: 14px;
    resize: vertical;
}

.rol-pro-form input:focus,
.rol-pro-form select:focus,
.rol-pro-form textarea:focus {
    outline: none;
    border-color: rgba(226,184,99,.62) !important;
    box-shadow:
        0 0 0 3px rgba(213,169,79,.075),
        inset 0 0 0 1px rgba(0,0,0,.42);
}

.rol-pro-file-field input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(213,169,79,.15);
    color: #a89f91;
    background: #090806;
    font-size: 10px;
}

.rol-pro-file-field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(213,169,79,.32);
    color: #e6cb8c;
    background: rgba(213,169,79,.08);
    font: 700 9px Cinzel, Georgia, serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.rol-pro-note {
    margin-top: 20px;
    padding: 15px 16px;
    border: 1px solid rgba(220,96,75,.18);
    color: #a99f90;
    background: rgba(116,38,24,.08);
    font-size: 10px;
    line-height: 1.7;
}

.rol-pro-danger-button {
    width: 100%;
    min-height: 49px;
    padding: 0 18px;
    border: 1px solid rgba(220,96,75,.28);
    color: #e6a99c;
    background: rgba(116,38,24,.12);
    font: 700 9px Cinzel, Georgia, serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.rol-pro-danger-button:hover {
    border-color: rgba(220,96,75,.48);
    background: rgba(116,38,24,.20);
}

.rol-pro-header-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 22px;
    padding: 34px;
}

.rol-pro-header-panel::after {
    content: "RISE OF LEGENDS";
    position: absolute;
    right: 28px;
    bottom: 14px;
    color: rgba(213,169,79,.045);
    font: 700 25px Cinzel, Georgia, serif;
    letter-spacing: .08em;
    pointer-events: none;
}

.rol-pro-event-list {
    display: grid;
    gap: 16px;
}

.rol-pro-event-card {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 210px;
    gap: 28px;
    align-items: center;
    min-height: 180px;
    padding: 30px 34px;
}

.rol-pro-event-date {
    display: grid;
    gap: 6px;
    padding-right: 24px;
    border-right: 1px solid rgba(255,255,255,.055);
}

.rol-pro-event-date > span {
    color: #dfbd6d;
    font: 600 14px Cinzel, Georgia, serif;
}

.rol-pro-event-date > small {
    color: #7f7669;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rol-pro-event-card .rol-pro-copy h2 {
    font-size: 26px;
}

.rol-pro-event-card .rol-pro-copy p {
    font-size: 11px;
}

.rol-pro-event-end {
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,.055);
    color: #80786c;
    font-size: 9px;
    line-height: 1.7;
    text-transform: uppercase;
}

.rol-pro-event-end strong {
    display: block;
    margin-top: 4px;
    color: #c7b078;
    font-size: 10px;
}

.rol-pro-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.rol-pro-roadmap-column {
    min-height: 330px;
    padding: 28px;
}

.rol-pro-roadmap-title {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.rol-pro-roadmap-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.rol-pro-roadmap-item {
    padding: 18px;
    border: 1px solid rgba(213,169,79,.12);
    background: rgba(255,255,255,.014);
}

.rol-pro-roadmap-item h3 {
    margin: 0 0 9px;
    color: #dfc47f;
    font-size: 17px;
}

.rol-pro-roadmap-item p {
    margin: 0;
    color: #92897c;
    font-size: 10px;
    line-height: 1.75;
}

.rol-pro-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rol-pro-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 18px;
    align-items: center;
    min-height: 140px;
    padding: 28px 30px;
}

.rol-pro-status-copy strong {
    display: block;
    margin-top: 7px;
    color: var(--text);
    font-size: 26px;
}

.rol-pro-status-copy strong.online {
    color: #82d090;
}

.rol-pro-status-copy strong.offline {
    color: #dc8c7f;
}

.rol-pro-status-copy strong.neutral {
    color: #e4c57b;
}

.rol-pro-status-copy small {
    display: block;
    margin-top: 4px;
    color: #81796e;
    font-size: 10px;
}

.rol-pro-status-light {
    position: relative;
    width: 40px;
    height: 40px;
    justify-self: end;
    border: 1px solid rgba(213,169,79,.22);
    transform: rotate(45deg);
    background: rgba(213,169,79,.04);
}

.rol-pro-status-light::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #b99242;
    box-shadow: 0 0 14px rgba(185,146,66,.35);
}

.rol-pro-status-light.online::after {
    background: #75c884;
    box-shadow: 0 0 15px rgba(117,200,132,.55);
}

.rol-pro-status-light.offline::after {
    background: #cb7366;
    box-shadow: 0 0 15px rgba(203,115,102,.45);
}

/* Account additions: use the same visual language as Password & Recovery */
.rol-account-community-panel,
.rol-account-history-panel,
.rol-account-links-panel {
    margin-bottom: 22px;
}

.rol-account-community-panel {
    grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr);
}

.rol-account-character-list,
.rol-account-history-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 9px;
}

.rol-account-character-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid rgba(213,169,79,.12);
    color: inherit;
    background: rgba(255,255,255,.014);
    text-decoration: none;
}

.rol-account-character-row:hover {
    border-color: rgba(213,169,79,.36);
    background: rgba(213,169,79,.05);
}

.rol-account-character-row div {
    display: grid;
    gap: 4px;
}

.rol-account-character-row strong {
    color: #dfbd6d;
    font-size: 14px;
}

.rol-account-character-row span,
.rol-account-character-row small {
    color: #81796e;
    font-size: 10px;
}

.rol-account-history-panel {
    grid-template-columns: minmax(0, .62fr) minmax(440px, 1.38fr);
}

.rol-account-history-row {
    display: grid;
    grid-template-columns: minmax(160px, .9fr) minmax(100px, .55fr) minmax(150px, .75fr);
    gap: 16px;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.rol-account-history-row:last-child {
    border-bottom: 0;
}

.rol-account-history-row strong {
    color: #dfbd6d;
    font-size: 12px;
}

.rol-account-history-row span,
.rol-account-history-row small {
    color: #80786d;
    font-size: 10px;
}

.rol-account-links-panel {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr);
}

.rol-account-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rol-account-status-reason {
    margin-top: 12px !important;
    color: #c2aa72 !important;
}

@media (max-width: 1000px) {
    .rol-pro-support-grid,
    .rol-pro-two-column,
    .rol-pro-panel-top,
    .rol-pro-header-panel,
    .rol-account-community-panel,
    .rol-account-history-panel,
    .rol-account-links-panel {
        grid-template-columns: 1fr;
    }

    .rol-pro-ticket-list {
        position: static;
    }

    .rol-pro-event-card {
        grid-template-columns: 1fr;
    }

    .rol-pro-event-date,
    .rol-pro-event-end {
        padding: 0;
        border: 0;
    }
}

@media (max-width: 760px) {
    .rol-pro-roadmap-grid,
    .rol-pro-status-grid,
    .rol-pro-form-grid,
    .rol-account-link-grid {
        grid-template-columns: 1fr;
    }

    .rol-pro-ticket-list,
    .rol-pro-side-panel,
    .rol-pro-main-panel,
    .rol-pro-header-panel,
    .rol-pro-empty-panel,
    .rol-pro-roadmap-column,
    .rol-pro-event-card,
    .rol-pro-status-card {
        padding: 24px 20px;
    }

    .rol-pro-copy h2,
    .rol-pro-panel h2 {
        font-size: 21px;
    }

    .rol-pro-message header {
        flex-direction: column;
    }

    .rol-account-history-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }
}

/* Rise of Legends v2.14.0 - Live ticket sync */
.rol-pro-live-sync{
    display:inline-flex;
    align-items:center;
    min-height:21px;
    margin-left:6px;
    padding:0 7px;
    border:1px solid rgba(213,169,79,.22);
    color:#b9964f;
    background:rgba(213,169,79,.03);
    font:800 8px Inter,sans-serif;
    letter-spacing:.12em;
    vertical-align:middle;
}
.rol-pro-live-sync.online{
    border-color:rgba(99,190,118,.28);
    color:#8fd39b;
    background:rgba(62,122,73,.07);
}


/* Rise of Legends v2.14.1 - Professional Legal Pages */
.legal-pro-section {
    padding-top: 42px;
}

.legal-pro-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.legal-pro-nav a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 15px;
    border: 1px solid rgba(213,169,79,.18);
    color: #a99f8e;
    background: rgba(255,255,255,.018);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.legal-pro-nav a:hover,
.legal-pro-nav a.active {
    color: #efd281;
    border-color: rgba(224,182,95,.46);
    background: rgba(213,169,79,.055);
}

.legal-pro-intro {
    padding: 34px;
    margin-bottom: 20px;
}

.legal-pro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.legal-pro-card {
    position: relative;
    min-height: 225px;
    padding: 34px 34px 32px;
}

.legal-pro-card .rol-pro-copy {
    max-width: 700px;
    padding-right: 56px;
}

.legal-pro-card .rol-pro-copy h2 {
    margin-bottom: 14px;
    color: #ead8ad;
    font-size: 27px;
}

.legal-pro-card .rol-pro-copy p {
    color: #b3aa9c;
    font-size: 14px;
    line-height: 1.85;
}

.legal-pro-number {
    position: absolute;
    top: 26px;
    right: 28px;
    color: rgba(213,169,79,.38);
    font: 600 22px Cinzel, Georgia, serif;
    letter-spacing: .08em;
}

.legal-pro-notice {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(213,169,79,.22);
    background:
        linear-gradient(100deg, rgba(213,169,79,.06), transparent 70%),
        rgba(8,7,6,.82);
}

.legal-pro-notice-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(213,169,79,.35);
    color: #e0b75e;
    font: 700 17px Cinzel, Georgia, serif;
}

.legal-pro-notice p {
    margin: 0;
    color: #b0a696;
    font-size: 12px;
    line-height: 1.65;
}

@media (max-width: 880px) {
    .legal-pro-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .legal-pro-intro,
    .legal-pro-card {
        padding: 24px;
    }

    .legal-pro-card .rol-pro-copy {
        padding-right: 34px;
    }

    .legal-pro-card .rol-pro-copy h2 {
        font-size: 23px;
    }

    .legal-pro-nav a {
        flex: 1 1 100%;
        justify-content: center;
    }

    .legal-pro-notice {
        grid-template-columns: 1fr;
    }
}

/* v2.14.2 complete legal texts */
.legal-pro-grid-wide .legal-pro-card {
    min-height: 270px;
}
.legal-pro-card .rol-pro-copy p + p {
    margin-top: 12px;
}
.legal-pro-card .rol-pro-copy a,
.legal-pro-intro .rol-pro-copy a {
    color: #ddb95e;
    text-decoration: none;
}
.legal-pro-card .rol-pro-copy a:hover,
.legal-pro-intro .rol-pro-copy a:hover {
    text-decoration: underline;
}

/* ========================================================================
   Rise of Legends v2.14.4 – Professional Player Profile
   ======================================================================== */
.player-profile-page {
    background:
        radial-gradient(circle at 75% 12%, rgba(213,169,79,.045), transparent 420px),
        #070706;
}

.player-profile-hero {
    padding: 74px 0 68px;
}

.player-profile-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 54px;
    align-items: center;
}

.player-profile-hero-copy h1 {
    margin-top: 18px;
    color: #f3eee5;
    font-size: clamp(52px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.045em;
}

.player-profile-hero-copy p {
    max-width: 720px;
    margin-top: 24px;
}

.player-profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.player-profile-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(213,169,79,.20);
    color: #c6ad74;
    background: rgba(213,169,79,.035);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.player-profile-emblem {
    position: relative;
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(213,169,79,.24);
    background:
        radial-gradient(circle, rgba(213,169,79,.10), transparent 66%),
        rgba(5,5,4,.52);
    box-shadow: inset 0 0 0 8px rgba(213,169,79,.018);
}

.player-profile-emblem::before,
.player-profile-emblem::after {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(213,169,79,.10);
    transform: rotate(45deg);
}

.player-profile-emblem::after {
    inset: 34px;
    border-color: rgba(213,169,79,.07);
}

.player-profile-emblem span {
    position: relative;
    z-index: 2;
    color: #e3bd62;
    font: 600 68px Cinzel, Georgia, serif;
    text-shadow: 0 0 28px rgba(213,169,79,.18);
}

.player-profile-emblem small {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    color: #756a58;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .20em;
}

.player-profile-section {
    padding: 54px 0 84px;
}

.player-profile-overview {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, .38fr);
    gap: 34px;
    align-items: center;
    margin-bottom: 22px;
    padding: 36px;
    border-color: rgba(213,169,79,.24);
    background:
        linear-gradient(118deg, rgba(213,169,79,.075), transparent 62%),
        var(--panel);
}

.player-profile-overview::after {
    content: "CHARACTER PROFILE";
    position: absolute;
    right: 28px;
    bottom: 14px;
    color: rgba(213,169,79,.045);
    font: 700 24px Cinzel, Georgia, serif;
    letter-spacing: .08em;
    pointer-events: none;
}

.player-profile-overview-copy,
.player-profile-overview-actions {
    position: relative;
    z-index: 1;
}

.player-profile-overview-copy h2,
.player-profile-detail-panel h2,
.player-profile-footer-panel h2,
.player-profile-not-found h2 {
    margin: 8px 0 10px;
    color: #f2ede4;
    font: 600 28px Cinzel, Georgia, serif;
    letter-spacing: -.025em;
}

.player-profile-overview-copy p,
.player-profile-detail-panel p,
.player-profile-footer-panel p,
.player-profile-not-found p {
    max-width: 700px;
    margin: 0;
    color: #9a9184;
    font-size: 11px;
    line-height: 1.75;
}

.player-profile-overview-actions {
    display: grid;
    gap: 11px;
}

.player-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.player-profile-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(213,169,79,.25);
    color: #d9bf81;
    background: rgba(213,169,79,.045);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.player-profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.player-profile-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 178px;
    padding: 27px;
    border: 1px solid rgba(213,169,79,.20);
    background:
        linear-gradient(145deg, rgba(213,169,79,.05), transparent 58%),
        rgba(10,9,7,.94);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.player-profile-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(213,169,79,.48), transparent);
}

.player-profile-stat-card > span {
    color: #9a7a39;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.player-profile-stat-card > strong {
    display: block;
    margin-top: 30px;
    overflow: hidden;
    color: var(--gold-light);
    font: 600 29px Cinzel, Georgia, serif;
    line-height: 1.1;
    text-overflow: ellipsis;
}

.player-profile-stat-card > small {
    display: block;
    margin-top: 7px;
    color: #756e62;
    font-size: 9px;
}

.player-profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.player-profile-detail-panel {
    position: relative;
    overflow: hidden;
    min-height: 290px;
    padding: 34px;
    border-color: rgba(213,169,79,.18);
}

.player-profile-detail-value {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.player-profile-detail-value span {
    color: #7e7568;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.player-profile-detail-value strong {
    color: #e3be67;
    font: 600 33px Cinzel, Georgia, serif;
}

.player-profile-text-link {
    display: inline-block;
    margin-top: 24px;
    color: #c6aa6e;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.player-profile-text-link:hover {
    color: #ead08f;
}

.player-profile-detail-note {
    display: block;
    margin-top: 22px;
    color: #8c8377;
    font-size: 10px;
}

.player-profile-footer-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 34px;
    border-color: rgba(255,255,255,.08);
    background:
        linear-gradient(145deg, rgba(213,169,79,.035), transparent 45%),
        rgba(14,12,9,.94);
}

.player-profile-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.player-profile-not-found {
    padding: 42px;
    border-color: rgba(213,169,79,.22);
}

.player-profile-not-found .gold-button {
    margin-top: 22px;
}

@media (max-width: 1100px) {
    .player-profile-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .player-profile-hero-grid,
    .player-profile-overview,
    .player-profile-footer-panel {
        grid-template-columns: 1fr;
    }

    .player-profile-emblem {
        width: 150px;
        height: 150px;
    }

    .player-profile-overview::after {
        display: none;
    }
}

@media (max-width: 700px) {
    .player-profile-detail-grid,
    .player-profile-stat-grid {
        grid-template-columns: 1fr;
    }

    .player-profile-hero {
        padding: 58px 0 52px;
    }

    .player-profile-overview,
    .player-profile-detail-panel,
    .player-profile-footer-panel,
    .player-profile-not-found {
        padding: 24px 20px;
    }

    .player-profile-stat-card {
        min-height: 150px;
        padding: 22px;
    }

    .player-profile-footer-actions {
        display: grid;
    }
}


/* Rise of Legends v2.14.5 - Player inventory */
.player-inventory-panel {
    margin-top: 24px;
    padding: 38px;
}

.player-inventory-heading,
.player-inventory-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.player-inventory-heading {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.player-inventory-heading h2,
.player-inventory-section-head h3 {
    margin: 10px 0 8px;
    color: var(--gold-light);
    font: 600 30px Cinzel, serif;
}

.player-inventory-heading p {
    max-width: 720px;
    margin: 0;
    color: #958b7d;
    font-size: 12px;
    line-height: 1.75;
}

.player-inventory-counts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.player-inventory-counts span {
    min-width: 120px;
    padding: 13px 15px;
    border: 1px solid rgba(213,169,79,.22);
    background: rgba(213,169,79,.035);
    color: #9c927f;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.player-inventory-counts b {
    display: block;
    margin-bottom: 4px;
    color: #e6c775;
    font: 600 24px Cinzel, serif;
}

.player-inventory-section-head {
    margin: 30px 0 15px;
}

.player-inventory-section-head.inventory-head {
    margin-top: 38px;
}

.player-inventory-section-head h3 {
    font-size: 22px;
}

.player-inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.player-inventory-grid.equipment {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-inventory-item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    min-height: 106px;
    padding: 14px;
    border: 1px solid rgba(213,169,79,.16);
    background:
        linear-gradient(145deg, rgba(213,169,79,.035), transparent 55%),
        rgba(255,255,255,.014);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.player-inventory-item:hover {
    transform: translateY(-2px);
    border-color: rgba(224,182,95,.42);
    background:
        linear-gradient(145deg, rgba(213,169,79,.07), transparent 55%),
        rgba(255,255,255,.022);
}

.player-inventory-item.equipped {
    border-color: rgba(224,182,95,.28);
}

.player-inventory-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(213,169,79,.28);
    background:
        radial-gradient(circle at 50% 35%, rgba(226,192,108,.14), transparent 60%),
        rgba(8,7,5,.85);
    box-shadow: inset 0 0 18px rgba(213,169,79,.035);
}

.player-inventory-icon span {
    color: #d9b75e;
    font: 600 12px Cinzel, serif;
}

.player-inventory-item-copy {
    min-width: 0;
}

.player-inventory-item-copy small {
    display: block;
    overflow: hidden;
    color: #7f7568;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-inventory-item-copy h4 {
    margin: 7px 0 10px;
    overflow: hidden;
    color: #e5d09a;
    font: 600 16px Cinzel, serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-inventory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.player-inventory-tags span {
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.06);
    color: #8d8375;
    background: rgba(255,255,255,.018);
    font-size: 8px;
}

.player-inventory-empty {
    padding: 22px;
    border: 1px dashed rgba(213,169,79,.18);
    color: #847b6e;
    background: rgba(255,255,255,.012);
    font-size: 12px;
}

.player-inventory-note {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #70685e;
    font-size: 9px;
    line-height: 1.65;
}

@media (max-width: 1180px) {
    .player-inventory-grid,
    .player-inventory-grid.equipment {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .player-inventory-panel {
        padding: 24px;
    }

    .player-inventory-heading {
        flex-direction: column;
    }

    .player-inventory-grid,
    .player-inventory-grid.equipment {
        grid-template-columns: 1fr;
    }
}


/* Rise of Legends v2.14.7 - real item icons */
.player-inventory-icon {
    position: relative;
    overflow: hidden;
}

.player-inventory-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.55));
}

.player-inventory-icon.has-image span {
    display: none;
}

.player-inventory-icon.no-image span {
    display: block;
}

.player-inventory-item:hover .player-inventory-icon.has-image img {
    transform: scale(1.04);
}

.player-inventory-icon img {
    transition: transform .18s ease;
}


/* Rise of Legends v2.14.8.4 - real cross-platform language flags */
.language-flag-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.language-flag {
    display: block;
    width: 26px;
    height: 16px;
    object-fit: cover;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 2px 7px rgba(0,0,0,.35);
}

.language-current .language-flag {
    width: 23px;
    height: 14px;
}

.language-current > span,
.language-menu a > span {
    font-size: 0;
    line-height: 0;
}

/* =========================================================
   Rise of Legends Wiki & Item Database v2.16.0
   ========================================================= */
.wiki-page{background:radial-gradient(circle at 50% 0,rgba(147,96,27,.07),transparent 34rem)}
.wiki-section{padding-top:54px;padding-bottom:70px}
.wiki-hero .container,.wiki-item-hero .container,.wiki-monster-hero .container,.wiki-quest-hero .container,.wiki-article-hero .container{position:relative}
.wiki-hero h1,.wiki-item-hero h1,.wiki-monster-hero h1,.wiki-quest-hero h1,.wiki-article-hero h1{max-width:920px}
.wiki-hero p,.wiki-item-hero p,.wiki-monster-hero p,.wiki-quest-hero p,.wiki-article-hero p{max-width:880px}
.wiki-subnav{display:flex;gap:7px;margin-top:30px;padding:7px;border:1px solid rgba(213,169,79,.13);background:rgba(3,3,3,.38);overflow-x:auto;scrollbar-width:thin}
.wiki-subnav a{display:flex;flex:0 0 auto;min-height:38px;align-items:center;padding:0 13px;border:1px solid transparent;color:#81786a;text-decoration:none;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:.18s ease}
.wiki-subnav a:hover,.wiki-subnav a.active{color:var(--gold-light);border-color:rgba(213,169,79,.34);background:rgba(213,169,79,.045)}
.wiki-stats-grid,.wiki-gate-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.wiki-stats-grid article,.wiki-gate-stats article,.wiki-stat-card{min-height:128px;padding:23px;border:1px solid rgba(213,169,79,.14);background:linear-gradient(145deg,rgba(213,169,79,.035),transparent 55%),rgba(9,8,6,.9)}
.wiki-stats-grid span,.wiki-gate-stats span,.wiki-stat-card span{color:#887653;font-size:8px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.wiki-stats-grid strong,.wiki-gate-stats strong,.wiki-stat-card strong{display:block;margin-top:17px;color:var(--gold-light);font:600 30px Cinzel,serif}
.wiki-stats-grid small,.wiki-gate-stats small,.wiki-stat-card small{display:block;margin-top:7px;color:#726a5f;font-size:9px}
.wiki-search-panel,.wiki-detail-panel,.wiki-source-panel,.wiki-gate-overview,.wiki-intro-panel,.wiki-article-view,.wiki-recipe-card,.wiki-box-card,.wiki-world-card,.wiki-monster-card,.wiki-quest-card{border:1px solid rgba(213,169,79,.14);background:linear-gradient(150deg,rgba(213,169,79,.025),transparent 42%),rgba(9,8,7,.91);box-shadow:0 20px 55px rgba(0,0,0,.16)}
.wiki-search-panel{margin-bottom:28px;padding:31px}
.wiki-panel-heading{display:flex;justify-content:space-between;gap:24px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
.wiki-panel-heading h2,.wiki-result-head h2,.wiki-source-panel h2,.wiki-gate-overview h2,.wiki-section-title{margin:8px 0 6px;color:var(--gold-light);font:600 28px Cinzel,serif}
.wiki-panel-heading p,.wiki-result-head p,.wiki-gate-overview p{margin:0;color:#8f8678;font-size:11px;line-height:1.7}
.wiki-search-form,.wiki-monster-search{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(210px,.7fr) auto;gap:14px;align-items:end}
.wiki-search-form.single{grid-template-columns:minmax(0,1fr) auto}
.wiki-monster-search{grid-template-columns:minmax(0,1.5fr) 140px 140px auto}
.wiki-search-form .form-field,.wiki-monster-search .form-field{margin:0}
.wiki-search-form .gold-button,.wiki-monster-search .gold-button{min-height:48px}
.wiki-result-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:34px 0 18px}
.wiki-result-head h2{margin-top:7px;font-size:25px}
.wiki-item-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.wiki-item-card{display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;align-items:center;min-height:112px;padding:17px;border:1px solid rgba(213,169,79,.13);text-decoration:none;background:linear-gradient(145deg,rgba(213,169,79,.025),transparent 52%),rgba(9,8,7,.92);transition:.18s ease}
.wiki-item-card:hover{transform:translateY(-2px);border-color:rgba(230,190,94,.42);background:linear-gradient(145deg,rgba(213,169,79,.065),transparent 52%),rgba(12,11,8,.94)}
.wiki-item-icon{display:grid;place-items:center;width:74px;height:74px;border:1px solid rgba(213,169,79,.16);color:#7f714e;background:radial-gradient(circle,rgba(213,169,79,.07),rgba(0,0,0,.55));font-size:8px;overflow:hidden}
.wiki-item-icon img{width:100%;height:100%;object-fit:contain}
.wiki-item-copy{min-width:0}.wiki-item-copy small{display:block;margin-bottom:7px;color:#776c5c;font-size:7px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.wiki-item-copy strong{display:block;overflow:hidden;color:#ead294;font:600 14px Cinzel,serif;white-space:nowrap;text-overflow:ellipsis}.wiki-item-copy span{display:block;margin-top:7px;color:#716a60;font-size:8px}
.wiki-pagination{display:flex;justify-content:center;gap:7px;margin:28px 0 10px}.wiki-pagination a{display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(255,255,255,.08);color:#8e8577;text-decoration:none;font-size:10px}.wiki-pagination a.active,.wiki-pagination a:hover{border-color:rgba(213,169,79,.4);color:var(--gold-light);background:rgba(213,169,79,.05)}
.wiki-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:38px}.wiki-feature-card{min-height:190px;padding:27px;border:1px solid rgba(213,169,79,.18);text-decoration:none;background:linear-gradient(145deg,rgba(213,169,79,.04),transparent 48%),rgba(10,9,7,.9);transition:.18s ease}.wiki-feature-card:hover{transform:translateY(-2px);border-color:rgba(213,169,79,.42)}.wiki-feature-card>span,.wiki-article-card>span{color:var(--gold);font-size:8px;font-weight:800;letter-spacing:.2em}.wiki-feature-card h3,.wiki-article-card h3{margin:18px 0 10px;color:var(--gold-light);font:600 22px Cinzel,serif}.wiki-feature-card p,.wiki-article-card p{margin:0;color:#91887b;font-size:11px;line-height:1.75}
.wiki-item-hero-grid,.wiki-monster-hero-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:34px;align-items:center}.wiki-item-hero-icon,.wiki-monster-emblem{display:grid;place-items:center;width:150px;height:150px;border:1px solid rgba(213,169,79,.28);background:radial-gradient(circle,rgba(213,169,79,.12),rgba(4,4,3,.88) 68%);overflow:hidden}.wiki-item-hero-icon img{width:100%;height:100%;object-fit:contain}.wiki-item-hero-icon span{color:var(--gold-light);font:600 24px Cinzel,serif}.wiki-monster-emblem{align-content:center;text-align:center}.wiki-monster-emblem span{color:#7f714f;font-size:9px;font-weight:900;letter-spacing:.2em}.wiki-monster-emblem strong{display:block;margin-top:8px;color:var(--gold-light);font:600 42px Cinzel,serif}.wiki-item-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.wiki-item-tags span{padding:8px 10px;border:1px solid rgba(213,169,79,.2);color:#b8a16a;background:rgba(213,169,79,.03);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wiki-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.wiki-detail-main{display:grid;gap:20px}.wiki-detail-side{display:grid;gap:16px;position:sticky;top:105px}.wiki-detail-panel,.wiki-source-panel{padding:29px}.wiki-source-panel .outline-button{margin-top:14px}.wiki-description{color:#b8afa1;font-size:13px;line-height:1.85;white-space:pre-line}.wiki-property-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.wiki-property-grid>div{min-height:75px;padding:14px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.012)}.wiki-property-grid span{display:block;color:#6c655c;font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.wiki-property-grid strong{display:block;margin-top:9px;color:#cdbb88;font:600 13px Cinzel,serif}.wiki-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.wiki-link-grid a{padding:13px;border:1px solid rgba(255,255,255,.06);color:#bca875;text-decoration:none;font-size:9px}.wiki-link-grid a:hover{border-color:rgba(213,169,79,.3);background:rgba(213,169,79,.035)}.wiki-note,.wiki-admin-note{padding:15px 17px;border:1px solid rgba(213,169,79,.13);color:#8d8477;background:rgba(213,169,79,.025);font-size:10px;line-height:1.7}
.wiki-monster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.wiki-monster-card{display:flex;gap:17px;align-items:center;min-height:112px;padding:20px;text-decoration:none;transition:.18s ease}.wiki-monster-card:hover{transform:translateY(-2px);border-color:rgba(213,169,79,.36)}.wiki-monster-level{display:grid;place-items:center;flex:0 0 62px;height:62px;border:1px solid rgba(213,169,79,.18);background:rgba(213,169,79,.025)}.wiki-monster-level span{color:#665c45;font-size:7px;font-weight:900}.wiki-monster-level strong{color:#cfba7c;font:600 19px Cinzel,serif}.wiki-monster-copy{min-width:0}.wiki-monster-copy small{color:#665f55;font-size:7px;font-weight:800}.wiki-monster-copy h3{margin:7px 0 9px;overflow:hidden;color:#dfcb8e;font:600 15px Cinzel,serif;white-space:nowrap;text-overflow:ellipsis}.wiki-monster-card-meta{display:flex;flex-wrap:wrap;gap:5px}.wiki-monster-card-meta span{padding:5px 7px;border:1px solid rgba(255,255,255,.05);color:#746d63;font-size:7px}.wiki-monster-card-meta .special{color:#bca768;border-color:rgba(213,169,79,.14)}
.wiki-monster-drop-list{display:grid;gap:7px}.wiki-monster-drop-row{display:grid;grid-template-columns:52px minmax(0,1fr) 80px 105px;gap:13px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.055);text-decoration:none;background:rgba(255,255,255,.01)}.wiki-monster-drop-row:hover{border-color:rgba(213,169,79,.24)}.wiki-mini-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(213,169,79,.14);color:#75694d;font-size:7px;overflow:hidden}.wiki-mini-icon img{width:100%;height:100%;object-fit:contain}.wiki-monster-drop-name{min-width:0}.wiki-monster-drop-name small{display:block;color:#625c54;font-size:7px}.wiki-monster-drop-name strong{display:block;margin-top:5px;overflow:hidden;color:#cdbb88;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.wiki-monster-drop-amount,.wiki-monster-drop-chance{color:#81786d;font-size:9px;text-align:right}
.wiki-recipe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.wiki-recipe-card{padding:23px}.wiki-recipe-card header{display:flex;justify-content:space-between;gap:15px;margin-bottom:17px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}.wiki-recipe-card h3{margin:6px 0 0;color:#dcc88b;font:600 17px Cinzel,serif}.wiki-recipe-card small{color:#685f52;font-size:7px}.wiki-recipe-ingredients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.wiki-recipe-ingredients a,.wiki-recipe-ingredients>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border:1px solid rgba(255,255,255,.05);text-decoration:none}.wiki-recipe-ingredients strong{min-width:0;overflow:hidden;color:#b9aa82;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.wiki-recipe-ingredients small{display:block;margin-top:4px;color:#6d655b;font-size:8px}.wiki-recipe-card footer{display:flex;justify-content:space-between;margin-top:18px;color:#5e584f;font-size:8px}
.wiki-box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wiki-box-card{padding:25px}.wiki-box-card>header{display:flex;align-items:center;gap:17px;margin-bottom:18px;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.06)}.wiki-box-card h2{margin:7px 0 5px;font:600 20px Cinzel,serif}.wiki-box-card h2 a{color:var(--gold-light);text-decoration:none}.wiki-box-card header p{margin:0;color:#6f675c;font-size:8px}.wiki-box-drops{display:grid;gap:7px;margin-bottom:15px}.wiki-box-drops a{display:flex;justify-content:space-between;gap:15px;padding:10px 11px;border:1px solid rgba(255,255,255,.055);text-decoration:none}.wiki-box-drops strong{color:#b9a87f;font-size:9px}.wiki-box-drops span{color:#6e675d;font-size:8px}
.wiki-gate-tabs,.wiki-view-tabs{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto}.wiki-gate-tabs a,.wiki-view-tabs a{min-width:150px;padding:15px 16px;border:1px solid rgba(255,255,255,.07);text-decoration:none;background:rgba(255,255,255,.012)}.wiki-gate-tabs span{display:block;color:#c8b37e;font:600 13px Cinzel,serif}.wiki-gate-tabs small{display:block;margin-top:5px;color:#635d54;font-size:8px}.wiki-gate-tabs a.active,.wiki-view-tabs a.active{border-color:rgba(213,169,79,.38);background:rgba(213,169,79,.05)}.wiki-view-tabs a{color:#8e8577;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.wiki-gate-overview{display:flex;justify-content:space-between;gap:22px;align-items:end;margin-bottom:18px;padding:28px}
.wiki-table-wrap{overflow-x:auto;border:1px solid rgba(213,169,79,.12)}.wiki-table{width:100%;border-collapse:collapse;background:rgba(7,7,5,.76)}.wiki-table th{padding:13px;color:#8e7b4f;border-bottom:1px solid rgba(213,169,79,.16);font-size:7px;letter-spacing:.11em;text-align:left;text-transform:uppercase}.wiki-table td{padding:13px;color:#8a8175;border-bottom:1px solid rgba(255,255,255,.045);font-size:9px}.wiki-table a{color:#cbb57b;text-decoration:none}
.wiki-quest-list{display:grid;gap:10px}.wiki-quest-card{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:23px 27px;text-decoration:none;transition:.18s ease}.wiki-quest-card:hover{transform:translateY(-1px);border-color:rgba(213,169,79,.35)}.wiki-quest-card h3{margin:7px 0 5px;color:var(--gold-light);font:600 19px Cinzel,serif}.wiki-quest-card p{margin:0;color:#766e63;font-size:9px}.wiki-quest-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.wiki-quest-meta span{padding:7px 9px;border:1px solid rgba(255,255,255,.06);color:#81796d;font-size:8px}.wiki-chain-link,.wiki-chain-current{display:block;margin-top:10px;padding:12px;border:1px solid rgba(255,255,255,.06);text-decoration:none;color:#a89464;font-size:9px}.wiki-chain-current{color:#ddd0a9;background:rgba(213,169,79,.035)}
.wiki-world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.wiki-world-card{min-height:150px;padding:23px}.wiki-world-card h3{margin:14px 0 9px;color:var(--gold-light);font:600 18px Cinzel,serif}.wiki-world-card p,.wiki-world-card small{color:#777064;font-size:9px;line-height:1.6}
.wiki-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.wiki-article-card{display:flex;flex-direction:column;min-height:210px;padding:25px;border:1px solid rgba(213,169,79,.17);text-decoration:none;background:rgba(11,10,8,.88)}.wiki-article-card img{width:calc(100% + 50px);height:170px;margin:-25px -25px 22px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.06)}.wiki-article-card small{margin-top:auto;padding-top:18px;color:#b9a15f;font-size:9px;font-weight:700}.wiki-article-view{padding:0;overflow:hidden}.wiki-article-cover{display:block;width:100%;max-height:520px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.06)}.wiki-richtext{padding:42px;color:#c7bfb2;font-size:14px;line-height:1.85}.wiki-richtext h2,.wiki-richtext h3{color:var(--gold-light);font-family:Cinzel,serif;font-weight:600}.wiki-richtext h2{margin:35px 0 15px;font-size:27px}.wiki-richtext h3{margin:28px 0 12px;font-size:20px}.wiki-richtext a{color:#d5b968}.wiki-richtext blockquote{margin:25px 0;padding:18px 20px;border-left:2px solid var(--gold);background:rgba(213,169,79,.035);color:#a99f90}.wiki-article-view>footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 42px;border-top:1px solid rgba(255,255,255,.06);color:#6f675d;font-size:8px}
.wiki-empty-state{grid-column:1/-1;padding:34px}.wiki-empty-state.compact{padding:22px}.wiki-empty-state strong{color:var(--gold-light);font:600 20px Cinzel,serif}.wiki-empty-state p{margin:10px 0 0;color:#81796d;font-size:11px;line-height:1.7}
@media(max-width:1100px){.wiki-item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wiki-category-grid,.wiki-world-grid,.wiki-article-grid,.wiki-monster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-detail-layout{grid-template-columns:1fr}.wiki-detail-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.wiki-stats-grid,.wiki-gate-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-search-form,.wiki-search-form.single,.wiki-monster-search{grid-template-columns:1fr}.wiki-item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-box-grid,.wiki-recipe-grid{grid-template-columns:1fr}.wiki-property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-gate-overview,.wiki-quest-card{align-items:flex-start;flex-direction:column}.wiki-quest-meta{justify-content:flex-start}}
@media(max-width:560px){.wiki-section{padding-top:35px}.wiki-stats-grid,.wiki-gate-stats,.wiki-item-grid,.wiki-category-grid,.wiki-world-grid,.wiki-article-grid,.wiki-monster-grid,.wiki-detail-side,.wiki-property-grid,.wiki-link-grid{grid-template-columns:1fr}.wiki-item-hero-grid,.wiki-monster-hero-grid{grid-template-columns:1fr;gap:20px}.wiki-item-hero-icon,.wiki-monster-emblem{width:112px;height:112px}.wiki-search-panel,.wiki-detail-panel,.wiki-source-panel,.wiki-recipe-card,.wiki-box-card{padding:22px}.wiki-panel-heading h2,.wiki-result-head h2{font-size:22px}.wiki-recipe-ingredients{grid-template-columns:1fr}.wiki-result-head{align-items:flex-start;flex-direction:column}.wiki-monster-drop-row{grid-template-columns:46px minmax(0,1fr);}.wiki-monster-drop-amount,.wiki-monster-drop-chance{text-align:left;grid-column:2}.wiki-richtext{padding:26px 22px;font-size:13px}.wiki-article-view>footer{align-items:flex-start;flex-direction:column;padding:20px 22px}}
/* v2.16.2 Wiki current-data rebuild */
.wiki-item-icon.no-icon,.wiki-item-hero-icon.no-icon{background:linear-gradient(145deg,rgba(213,169,79,.025),rgba(0,0,0,.72));border-color:rgba(213,169,79,.12)}
.wiki-no-icon{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;text-align:center;color:#81765f!important;font-family:Arial,sans-serif!important;line-height:1!important}
.wiki-no-icon b{font-size:9px;letter-spacing:.14em;color:#9a8a68;font-weight:700}
.wiki-no-icon small{font-size:8px;color:#5f584d;letter-spacing:.06em}
.wiki-icon-warning p{margin:10px 0 0;color:#8f8678;font-size:11px;line-height:1.7}

/* =========================================================
   Rise of Legends Wiki v2.16.3 - rich item/refinery sources
   ========================================================= */
.wiki-recipe-grid-rich{grid-template-columns:1fr;gap:18px}
.wiki-recipe-card-rich{padding:26px}
.wiki-recipe-result{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:start;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.07)}
.wiki-recipe-result-icon{display:grid;place-items:center;width:112px;height:112px;border:1px solid rgba(213,169,79,.24);background:radial-gradient(circle,rgba(213,169,79,.09),rgba(0,0,0,.72));overflow:hidden;text-decoration:none}
.wiki-recipe-result-icon img{width:100%;height:100%;object-fit:contain}.wiki-recipe-result-icon.no-icon span{text-align:center;color:#75694d;font-size:8px}.wiki-recipe-result-icon.no-icon b{display:block;color:#99865a;font-size:10px}.wiki-recipe-result-copy>small{color:#75694d;font-size:8px;letter-spacing:.08em}.wiki-recipe-result-copy h3{margin:7px 0 8px;font-size:20px}.wiki-recipe-result-copy h3 a{color:#dbc783;text-decoration:none}.wiki-recipe-result-copy p{max-width:900px;margin:11px 0 0;color:#8e8578;font-size:10px;line-height:1.7}.wiki-recipe-result-meta{display:flex;flex-wrap:wrap;gap:7px}.wiki-recipe-result-meta span{padding:6px 8px;border:1px solid rgba(213,169,79,.12);color:#8f8263;font-size:8px}.wiki-recipe-result-meta b{color:#d6bd79}
.wiki-recipe-flow-label{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px}.wiki-recipe-flow-label span{color:#887a57;font-size:8px;font-weight:900;letter-spacing:.13em}.wiki-recipe-flow-label strong{color:#6f685e;font-size:9px}
.wiki-recipe-ingredients-rich{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.wiki-recipe-ingredient{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;min-height:68px;padding:9px!important}.wiki-recipe-ingredient-copy{min-width:0}.wiki-recipe-ingredient-copy strong{display:block;color:#c5b27d!important;font-size:10px!important}.wiki-recipe-ingredient-copy small{display:block;margin-top:5px!important;overflow:hidden;color:#726a60!important;font-size:8px!important;white-space:nowrap;text-overflow:ellipsis}.wiki-recipe-count{min-width:48px;padding:8px 9px;border-left:1px solid rgba(213,169,79,.12);color:#e0c77e;font:600 15px Cinzel,serif;text-align:center}
.wiki-recipe-footer-rich{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;margin-top:18px!important}.wiki-recipe-footer-rich>span{padding:12px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.012)}.wiki-recipe-footer-rich small{display:block;color:#625c54;font-size:7px;letter-spacing:.1em}.wiki-recipe-footer-rich strong{display:block;margin-top:6px;color:#bca875;font-size:10px}

.wiki-obtain-panel .wiki-panel-heading{margin-bottom:22px}.wiki-source-block{padding-top:22px;margin-top:22px;border-top:1px solid rgba(255,255,255,.065)}.wiki-source-block:first-of-type{padding-top:0;margin-top:0;border-top:0}.wiki-source-title{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:11px}.wiki-source-title h3{margin:0;color:#d2bc7b;font:600 17px Cinzel,serif}.wiki-source-title>span{color:#71695e;font-size:8px;font-weight:800;letter-spacing:.06em}.wiki-source-explain{margin:-1px 0 13px;color:#81786d;font-size:9px;line-height:1.65}
.wiki-obtain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wiki-obtain-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;min-height:66px;padding:9px 11px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.012);text-decoration:none}.wiki-obtain-card:hover{border-color:rgba(213,169,79,.28);background:rgba(213,169,79,.025)}.wiki-obtain-card.static:hover{border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.012)}.wiki-obtain-card>span:nth-child(2){min-width:0}.wiki-obtain-card>span:nth-child(2)>strong{display:block;overflow:hidden;color:#c7b47f;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.wiki-obtain-card>span:nth-child(2)>small{display:block;margin-top:5px;overflow:hidden;color:#6e675d;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.wiki-obtain-meta{text-align:right}.wiki-obtain-meta b{display:block;color:#d8c17d;font-size:9px}.wiki-obtain-meta small{display:block;margin-top:5px;color:#71695f;font-size:7px}.wiki-level-badge,.wiki-source-symbol,.wiki-quest-source-badge{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(213,169,79,.15);background:rgba(213,169,79,.025);color:#9a8654;text-align:center}.wiki-level-badge small{font-size:6px}.wiki-level-badge b{font:600 15px Cinzel,serif}.wiki-source-symbol{font:700 9px Cinzel,serif}.wiki-quest-source-badge{font-size:7px;font-weight:900}.wiki-source-more{margin-top:13px}
.wiki-item-recipes{display:grid;gap:10px}.wiki-item-recipe{padding:13px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.01)}.wiki-item-recipe-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05)}.wiki-item-recipe-head strong{color:#c6b47e;font-size:10px}.wiki-item-recipe-head span{color:#756c60;font-size:8px}.wiki-item-recipe-materials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.wiki-item-recipe-materials a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px;border:1px solid rgba(255,255,255,.045);text-decoration:none}.wiki-item-recipe-materials a>span:nth-child(2){min-width:0}.wiki-item-recipe-materials strong{display:block;overflow:hidden;color:#bda977;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.wiki-item-recipe-materials small{display:block;margin-top:4px;color:#655f57;font-size:7px}.wiki-item-recipe-materials a>b{color:#d8c17d;font:600 13px Cinzel,serif}
.wiki-filter-banner{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:15px;align-items:center;margin-bottom:14px;padding:18px}.wiki-filter-banner h2{margin:4px 0;color:#d6c083;font:600 18px Cinzel,serif}.wiki-filter-banner p{margin:0;color:#756d61;font-size:9px}.wiki-filter-banner .outline-button{margin:0}.wiki-mini-icon.no-icon{background:rgba(0,0,0,.3);color:#6f654d;font-size:6px;text-align:center}
.wiki-source-panel .outline-button+.outline-button{margin-left:0;margin-top:8px}

@media(max-width:820px){.wiki-recipe-ingredients-rich,.wiki-obtain-grid,.wiki-item-recipe-materials{grid-template-columns:1fr}.wiki-recipe-footer-rich{grid-template-columns:1fr}.wiki-filter-banner{grid-template-columns:48px minmax(0,1fr)}.wiki-filter-banner .outline-button{grid-column:1/-1}}
@media(max-width:560px){.wiki-recipe-result{grid-template-columns:82px minmax(0,1fr);gap:14px}.wiki-recipe-result-icon{width:82px;height:82px}.wiki-recipe-card-rich{padding:20px}.wiki-obtain-card{grid-template-columns:46px minmax(0,1fr)}.wiki-obtain-meta{grid-column:2;text-align:left}.wiki-source-title{align-items:flex-start;flex-direction:column}.wiki-item-recipe-head{align-items:flex-start;flex-direction:column}}
/* v2.16.4 Fortune Gate item-pool visibility fix */
.wiki-gate-filter{display:flex;gap:12px;align-items:end;margin:18px 0}.wiki-gate-filter label{display:grid;gap:7px;min-width:220px}.wiki-gate-filter label span{color:#887653;font-size:8px;font-weight:800;letter-spacing:.18em}.wiki-gate-filter select{height:42px;padding:0 12px;border:1px solid rgba(213,169,79,.18);background:#0a0907;color:#c8b37e}.wiki-gate-item-grid{margin-bottom:22px}.wiki-gate-level-details{margin-top:26px;border:1px solid rgba(213,169,79,.14);background:rgba(9,8,7,.8)}.wiki-gate-level-details>summary{cursor:pointer;padding:18px 20px;color:#c8b37e;font:600 12px Cinzel,serif;letter-spacing:.06em}.wiki-gate-level-details .wiki-table-wrap{margin:0;border:0;border-top:1px solid rgba(213,169,79,.12)}.wiki-empty-gate{padding:28px;margin-bottom:22px}.wiki-empty-gate h2{margin:8px 0;color:var(--gold-light);font:600 24px Cinzel,serif}.wiki-empty-gate p{margin:0;color:#8f8678;font-size:11px;line-height:1.7}
@media(max-width:560px){.wiki-gate-filter{display:block}.wiki-gate-filter label{min-width:0}.wiki-gate-filter select{width:100%}}


/* v2.20.14 Long Patch Notes / News content */
.news-detail-content{max-height:none!important;overflow:visible!important;min-width:0;overflow-wrap:anywhere;word-break:normal}
.news-detail-content p,.news-detail-content ul,.news-detail-content ol{max-width:none}
.news-detail-content ul,.news-detail-content ol{padding-left:1.5em}
.news-detail-content li{margin:.6em 0}

/* Rise of Legends v2.20.26 - prominent homepage Discord CTA */
.rol-discord-cta {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    align-items: center;
    gap: 13px;
    width: min(520px, 100%);
    min-height: 62px;
    margin: 14px auto 0;
    padding: 9px 16px;
    overflow: hidden;
    border: 1px solid rgba(133, 157, 255, .72);
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(105deg, rgba(35,42,86,.98), rgba(72,80,171,.96) 52%, rgba(37,42,96,.98));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 12px 30px rgba(22,26,75,.34),
        0 0 22px rgba(92,105,220,.18);
    color: #f4f5ff;
    text-decoration: none;
    text-align: left;
    transition: transform .2s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rol-discord-cta::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 28%;
    height: 170%;
    transform: skewX(-24deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transition: left .45s ease;
}

.rol-discord-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.09);
    border-color: rgba(179, 194, 255, .95);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 15px 34px rgba(22,26,75,.42),
        0 0 30px rgba(92,105,220,.26);
}

.rol-discord-cta:hover::before {
    left: 120%;
}

.rol-discord-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(210,218,255,.48);
    border-radius: 50%;
    background: rgba(12,16,53,.42);
    color: #dfe4ff;
    font-size: 22px;
    box-shadow: inset 0 0 14px rgba(134,149,255,.18);
}

.rol-discord-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rol-discord-copy strong {
    color: #ffffff;
    font: 700 13px Cinzel, serif;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.rol-discord-copy small {
    color: #cbd1ff;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rol-discord-arrow {
    color: #eef0ff;
    font-size: 30px;
    line-height: 1;
    text-align: right;
}

@media (max-width: 520px) {
    .rol-discord-cta {
        grid-template-columns: 38px 1fr 18px;
        gap: 10px;
        min-height: 58px;
        padding: 8px 12px;
    }

    .rol-discord-mark {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .rol-discord-copy strong {
        font-size: 11px;
    }

    .rol-discord-copy small {
        font-size: 9px;
        letter-spacing: .045em;
    }
}

/* ========================================================================== 
   Rise of Legends v2.20.27 - polished Discord CTA
   Uses unique v27 classes so older cached/legacy Discord styles cannot leak in.
   ========================================================================== */
.is-home-page .rol-discord-cta-wrap-v27 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 26px auto 4px;
    padding: 0 10px;
}

.is-home-page .rol-discord-card-v27,
.is-home-page .rol-discord-card-v27:visited {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 18px;
    width: min(610px, 100%);
    min-height: 92px;
    padding: 13px 18px 13px 15px;
    overflow: hidden;
    border: 1px solid rgba(220, 174, 74, .72);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(88, 101, 242, .98) 0%, rgba(72, 83, 210, .98) 58%, rgba(52, 60, 154, .98) 100%);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .46),
        0 0 0 1px rgba(255, 255, 255, .055) inset,
        0 0 34px rgba(88, 101, 242, .21);
    color: #fff;
    text-align: left;
    text-decoration: none !important;
    transform: translateZ(0);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.is-home-page .rol-discord-card-v27::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 14% 20%, rgba(255, 255, 255, .18), transparent 25%),
        linear-gradient(110deg, transparent 0 56%, rgba(255, 255, 255, .07) 57%, transparent 74%);
    pointer-events: none;
}

.is-home-page .rol-discord-card-v27::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -22%;
    width: 14%;
    height: 190%;
    transform: rotate(17deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .23), transparent);
    opacity: 0;
    pointer-events: none;
}

.is-home-page .rol-discord-card-v27:hover,
.is-home-page .rol-discord-card-v27:focus-visible {
    transform: translateY(-3px) scale(1.008);
    border-color: rgba(244, 205, 112, .98);
    filter: brightness(1.05);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, .52),
        0 0 0 1px rgba(255, 255, 255, .08) inset,
        0 0 42px rgba(88, 101, 242, .34),
        0 0 18px rgba(219, 171, 67, .14);
    color: #fff;
    text-decoration: none !important;
}

.is-home-page .rol-discord-card-v27:hover::after {
    opacity: 1;
    animation: rolDiscordShineV27 .72s ease forwards;
}

@keyframes rolDiscordShineV27 {
    from { left: -22%; }
    to { left: 118%; }
}

.is-home-page .rol-discord-card-v27__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(34, 41, 119, .42);
    box-shadow:
        0 8px 22px rgba(17, 21, 78, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
    color: #fff;
}

.is-home-page .rol-discord-card-v27__icon::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    pointer-events: none;
}

.is-home-page .rol-discord-card-v27__icon svg {
    display: block;
    width: 43px;
    height: 34px;
    overflow: visible;
}

.is-home-page .rol-discord-card-v27__icon .rol-discord-eye-v27 {
    fill: #5865f2;
}

.is-home-page .rol-discord-card-v27__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.is-home-page .rol-discord-card-v27__eyebrow {
    margin-bottom: 4px;
    color: rgba(235, 238, 255, .76);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.is-home-page .rol-discord-card-v27__copy strong {
    display: block;
    margin: 0;
    color: #fff;
    font: 700 19px/1.15 Cinzel, Georgia, serif;
    letter-spacing: .025em;
    text-shadow: 0 2px 8px rgba(20, 23, 73, .32);
}

.is-home-page .rol-discord-card-v27__copy small {
    display: block;
    margin-top: 5px;
    color: rgba(235, 238, 255, .88);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .045em;
}

.is-home-page .rol-discord-card-v27__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    background: rgba(27, 33, 102, .32);
    color: rgba(255, 255, 255, .96);
    transition: transform .22s ease, background .22s ease;
}

.is-home-page .rol-discord-card-v27__arrow svg {
    width: 18px;
    height: 18px;
}

.is-home-page .rol-discord-card-v27:hover .rol-discord-card-v27__arrow,
.is-home-page .rol-discord-card-v27:focus-visible .rol-discord-card-v27__arrow {
    transform: translateX(3px);
    background: rgba(27, 33, 102, .48);
}

@media (max-width: 640px) {
    .is-home-page .rol-discord-cta-wrap-v27 {
        margin-top: 20px;
        padding: 0 4px;
    }

    .is-home-page .rol-discord-card-v27,
    .is-home-page .rol-discord-card-v27:visited {
        grid-template-columns: 54px minmax(0, 1fr) 30px;
        gap: 12px;
        min-height: 80px;
        padding: 11px 12px;
        border-radius: 10px;
    }

    .is-home-page .rol-discord-card-v27__icon {
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }

    .is-home-page .rol-discord-card-v27__icon svg {
        width: 35px;
        height: 28px;
    }

    .is-home-page .rol-discord-card-v27__eyebrow {
        font-size: 7px;
        letter-spacing: .12em;
    }

    .is-home-page .rol-discord-card-v27__copy strong {
        font-size: 15px;
    }

    .is-home-page .rol-discord-card-v27__copy small {
        font-size: 9px;
        letter-spacing: .025em;
    }

    .is-home-page .rol-discord-card-v27__arrow {
        width: 28px;
        height: 28px;
    }
}


/* ========================================================================== 
   Rise of Legends v2.20.28 - compact Discord button in header
   ========================================================================== */
.header-discord-v28,
.header-discord-v28:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 35px;
    min-width: 96px;
    padding: 0 11px 0 9px;
    border: 1px solid rgba(120, 132, 255, .42);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(88, 101, 242, .24), rgba(36, 42, 112, .18)),
        rgba(10, 10, 14, .88);
    color: #e8eaff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .025),
        0 0 16px rgba(88, 101, 242, .08);
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.header-discord-v28::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.08) 48%, transparent 70%);
    transform: translateX(-115%);
    transition: transform .36s ease;
    pointer-events: none;
}

.header-discord-v28:hover,
.header-discord-v28:focus-visible {
    color: #fff;
    border-color: rgba(174, 182, 255, .78);
    background:
        linear-gradient(180deg, rgba(88, 101, 242, .38), rgba(44, 50, 134, .26)),
        rgba(10, 10, 14, .92);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 18px rgba(88, 101, 242, .18);
    transform: translateY(-1px);
}

.header-discord-v28:hover::before,
.header-discord-v28:focus-visible::before {
    transform: translateX(115%);
}

.header-discord-v28__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: #aeb5ff;
}

.header-discord-v28__icon svg {
    display: block;
    width: 19px;
    height: 15px;
}

.header-discord-v28__text {
    font: 700 10px Cinzel, serif;
    letter-spacing: .055em;
    text-transform: uppercase;
}

/* The old homepage v27 CTA is intentionally no longer rendered. */
@media (max-width: 1120px) {
    .header-discord-v28 {
        min-width: 35px;
        width: 35px;
        padding: 0;
        gap: 0;
    }

    .header-discord-v28__text {
        display: none;
    }
}

@media (max-width: 650px) {
    .header-discord-v28 {
        display: inline-flex;
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 5px;
    }

    .header-discord-v28__icon,
    .header-discord-v28__icon svg {
        width: 18px;
    }
}

.race-orc .race-icon,
.race-orc .rol-race-icon { object-position: 50% 12%; }

.race-moonelf .race-icon,
.race-moonelf .rol-race-icon { object-position: 50% 10%; }

.race-dragonscion .race-icon,
.race-dragonscion .rol-race-icon { object-position: 50% 9%; }

/* v2.20.42 – Freunde werben Freunde UI-Polish */
.rol-referral-section {
    padding-top: 34px;
}

.rol-referral-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.rol-referral-overview-card {
    padding: 18px 20px;
    border: 1px solid rgba(205, 158, 63, .18);
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        radial-gradient(circle at top right, rgba(205, 158, 63, .12), transparent 48%),
        rgba(9, 8, 7, .82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 30px rgba(0,0,0,.16);
}

.rol-referral-overview-card small,
.rol-referral-overview-card span {
    display: block;
}

.rol-referral-overview-card small {
    margin-bottom: 8px;
    color: #b39a68;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
}

.rol-referral-overview-card strong {
    display: block;
    margin-bottom: 6px;
    font: 700 27px Cinzel, Georgia, serif;
    color: #f2dfb4;
}

.rol-referral-overview-card span {
    color: #aea392;
    line-height: 1.45;
}

.rol-referral-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 22px;
    margin-bottom: 22px;
}

.rol-referral-code-panel,
.rol-referral-reward-panel,
.rol-referral-protection-panel,
.rol-referral-incoming-panel,
.rol-referral-list-panel {
    margin-bottom: 22px;
}

.rol-referral-code-card {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid rgba(205, 158, 63, .22);
    background: linear-gradient(180deg, rgba(201, 156, 67, .06), rgba(201, 156, 67, .02));
}

.rol-referral-code {
    margin: 0 0 14px;
    padding: 20px 20px 18px;
    border: 1px solid rgba(205, 158, 63, .36);
    background:
        linear-gradient(180deg, rgba(201, 156, 67, .10), rgba(201, 156, 67, .03)),
        rgba(12, 10, 7, .92);
    font: 700 34px Cinzel, Georgia, serif;
    letter-spacing: .16em;
    text-align: center;
    color: #f1c96b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.rol-referral-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.rol-referral-link-row input {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(0,0,0,.42);
    color: #d9d1c3;
    padding: 14px 16px;
    border-radius: 2px;
}

.rol-referral-copy-button {
    min-width: 170px;
}

.rol-referral-code-hint {
    margin-top: 12px;
    color: #9b907f;
    line-height: 1.5;
}

.rol-referral-reward-panel {
    position: relative;
    overflow: hidden;
}

.rol-referral-reward-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(220, 169, 61, .12), transparent 40%);
    pointer-events: none;
}

.rol-referral-reward-number {
    margin-top: 14px;
    font: 700 56px Cinzel, Georgia, serif;
    color: #e4b855;
    line-height: 1;
}

.rol-referral-reward-number small {
    font-size: 18px;
    letter-spacing: .08em;
}

.rol-referral-step-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.rol-referral-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

.rol-referral-step b {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(201, 156, 67, .24), rgba(201, 156, 67, .10));
    border: 1px solid rgba(205, 158, 63, .30);
    color: #f1c96b;
    font: 700 20px Cinzel, Georgia, serif;
}

.rol-referral-step span {
    color: #d6ccbd;
    line-height: 1.45;
}

.rol-referral-protection-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 24px;
    align-items: start;
}

.rol-referral-protection-badges {
    display: grid;
    gap: 12px;
}

.rol-referral-protection-badges span {
    position: relative;
    padding: 13px 14px 13px 42px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
    color: #d3c8b7;
}

.rol-referral-protection-badges span::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: #14110c;
    background: #d2a24d;
    box-shadow: 0 0 0 4px rgba(210,162,77,.12);
}

.rol-referral-incoming-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 12px;
}

.rol-referral-incoming-grid > div {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

.rol-referral-incoming-grid small,
.rol-referral-incoming-grid strong {
    display: block;
}

.rol-referral-incoming-grid small {
    margin-bottom: 5px;
    color: #8d857a;
}

.rol-referral-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.rol-referral-row {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
}

.rol-referral-row.status-rewarded {
    border-color: rgba(98, 177, 103, .35);
    background: linear-gradient(180deg, rgba(98, 177, 103, .10), rgba(255,255,255,.015));
}

.rol-referral-row.status-blocked {
    border-color: rgba(187, 92, 84, .35);
    background: linear-gradient(180deg, rgba(187, 92, 84, .10), rgba(255,255,255,.015));
}

.rol-referral-row-main {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.rol-referral-row-main strong,
.rol-referral-row-main span,
.rol-referral-status b,
.rol-referral-status small {
    display: block;
}

.rol-referral-row-main span,
.rol-referral-status small {
    margin-top: 4px;
    color: #8d857a;
}

.rol-referral-status {
    text-align: right;
}

.rol-referral-status b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid rgba(205, 158, 63, .25);
    background: rgba(205, 158, 63, .08);
    color: #f0d084;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
}

.rol-referral-progress {
    height: 8px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.rol-referral-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(169,119,36,.78), rgba(236,194,91,.94));
}

.rol-referral-block-reason {
    display: block;
    margin-top: 10px;
    color: #d87c6c;
}

@media (max-width: 980px) {
    .rol-referral-overview-grid {
        grid-template-columns: 1fr;
    }

    .rol-referral-hero-grid,
    .rol-referral-protection-panel,
    .rol-referral-incoming-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .rol-referral-link-row {
        grid-template-columns: 1fr;
    }

    .rol-referral-copy-button {
        width: 100%;
        min-width: 0;
    }

    .rol-referral-code {
        font-size: 26px;
        letter-spacing: .11em;
        word-break: break-word;
    }

    .rol-referral-row-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .rol-referral-status {
        text-align: left;
    }
}


/* v2.20.43 – Referral exakt an das bestehende Seiten-Design angepasst */
.rol-referral-code-panel,
.rol-referral-reward-panel,
.rol-referral-protection-panel,
.rol-referral-incoming-panel,
.rol-referral-list-panel {
    padding: 34px;
    border-color: rgba(213,169,79,.24);
    background:
        linear-gradient(118deg, rgba(213,169,79,.055), transparent 62%),
        var(--panel);
    box-shadow: 0 24px 70px rgba(0,0,0,.23);
}

.rol-referral-code-panel h2,
.rol-referral-protection-panel h2 {
    margin: 8px 0 8px;
    color: var(--text);
    font: 600 24px Cinzel, Georgia, serif;
    letter-spacing: -.025em;
}

.rol-referral-code-panel > p,
.rol-referral-reward-panel > p,
.rol-referral-protection-panel p {
    margin: 0;
    color: #9a9184;
    font-size: 11px;
    line-height: 1.7;
}

.rol-referral-reward-panel > strong {
    display: block;
    margin: 8px 0 10px;
    color: #d8cdbb;
    font-size: 11px;
    font-weight: 700;
}

.rol-referral-overview-card {
    padding: 20px 22px;
    border-color: rgba(213,169,79,.18);
    background:
        linear-gradient(145deg, rgba(213,169,79,.04), transparent 45%),
        var(--panel);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.rol-referral-overview-card small {
    margin-bottom: 7px;
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.rol-referral-overview-card strong {
    margin-bottom: 5px;
    color: var(--text);
    font: 600 22px Cinzel, Georgia, serif;
    letter-spacing: -.02em;
}

.rol-referral-overview-card span {
    color: #81796e;
    font-size: 10px;
    line-height: 1.6;
}

.rol-referral-code-card {
    margin-top: 20px;
    padding: 16px;
}

.rol-referral-code {
    padding: 18px 18px 16px;
    font-size: 30px;
}

.rol-referral-link-row input {
    min-height: 48px;
    padding: 0 14px;
    font-size: 10px;
}

.rol-referral-copy-button {
    min-width: 160px;
}

.rol-referral-code-hint {
    margin-top: 11px;
    color: #81796e;
    font-size: 10px;
    line-height: 1.65;
}

.rol-referral-reward-number {
    margin-top: 12px;
    font-size: 48px;
}

.rol-referral-reward-number small {
    font-size: 14px;
}

.rol-referral-step-list {
    gap: 10px;
    margin-top: 18px;
}

.rol-referral-step {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 12px;
    min-height: 54px;
    padding: 9px 12px;
}

.rol-referral-step b {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

.rol-referral-step span {
    color: #c9c0b3;
    font-size: 10px;
    line-height: 1.55;
}

.rol-referral-protection-panel {
    gap: 34px;
}

.rol-referral-protection-badges {
    gap: 9px;
}

.rol-referral-protection-badges span {
    min-height: 44px;
    padding: 0 14px 0 42px;
    display: flex;
    align-items: center;
    color: #c9c0b3;
    font-size: 10px;
}

.rol-referral-protection-badges span::before {
    width: 16px;
    height: 16px;
    font-size: 9px;
}

.rol-referral-incoming-grid > div {
    padding: 12px 14px;
}

.rol-referral-incoming-grid small {
    color: #81796e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rol-referral-incoming-grid strong {
    color: #d9d1c3;
    font-size: 11px;
}

.rol-referral-row {
    padding: 14px 16px;
}

.rol-referral-row-main strong {
    color: #ddd4c6;
    font-size: 11px;
}

.rol-referral-row-main span,
.rol-referral-status small {
    font-size: 9px;
}

.rol-referral-status b {
    font-size: 8px;
    letter-spacing: .08em;
}

.rol-referral-list-panel .rol-pro-empty.compact {
    margin-top: 4px;
}

@media (max-width: 650px) {
    .rol-referral-code-panel,
    .rol-referral-reward-panel,
    .rol-referral-protection-panel,
    .rol-referral-incoming-panel,
    .rol-referral-list-panel {
        padding: 26px 20px;
    }

    .rol-referral-code {
        font-size: 24px;
    }
}

/* v2.20.54 – PayPal WCoin Checkout */
.wcoin-payment-buttons {
    display: grid;
    gap: 11px;
}

.paypal-pay-button {
    min-height: 48px;
    border-color: rgba(213, 169, 79, .42);
    color: #e8d49f;
    background:
        linear-gradient(180deg, rgba(213,169,79,.08), rgba(213,169,79,.025)),
        rgba(8,8,7,.45);
}

.paypal-pay-button:hover {
    border-color: rgba(232, 195, 111, .68);
    color: #fff2cc;
    background:
        linear-gradient(180deg, rgba(213,169,79,.14), rgba(213,169,79,.04)),
        rgba(8,8,7,.62);
}

.paypal-pay-button[disabled] {
    cursor: wait;
    filter: saturate(.4);
    opacity: .72;
}

/* v2.20.82 – Referral Legendary Reward Pack */
.rol-referral-overview-card.reward-highlight {
    border-color: rgba(231, 184, 82, .42);
    background:
        radial-gradient(circle at 82% 18%, rgba(232, 184, 75, .18), transparent 38%),
        linear-gradient(145deg, rgba(213,169,79,.10), transparent 55%),
        var(--panel);
}

.rol-referral-item-rewards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.rol-referral-item-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 94px;
    padding: 12px;
    border: 1px solid rgba(213,169,79,.28);
    background:
        radial-gradient(circle at 18% 20%, rgba(213,169,79,.13), transparent 42%),
        rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.rol-referral-item-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 1px solid rgba(225,181,83,.42);
    background: #080705;
    box-shadow: 0 0 22px rgba(213,169,79,.12), inset 0 0 16px rgba(213,169,79,.07);
}

.rol-referral-item-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: auto;
}

.rol-referral-item-icon span {
    color: #a99264;
    font-size: 10px;
}

.rol-referral-item-card small,
.rol-referral-item-card strong,
.rol-referral-item-card span {
    display: block;
}

.rol-referral-item-card small {
    margin-bottom: 5px;
    color: #8d7c5b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

.rol-referral-item-card strong {
    color: #f1dab0;
    font: 600 13px Cinzel, Georgia, serif;
    line-height: 1.35;
}

.rol-referral-item-card span {
    margin-top: 5px;
    color: #8e8577;
    font-size: 9px;
    line-height: 1.45;
}

.rol-referral-incoming-reward-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 2px solid var(--gold);
    background: rgba(213,169,79,.055);
    color: #a79d8e;
    font-size: 10px;
    line-height: 1.55;
}

.rol-referral-incoming-reward-note strong {
    color: #e6d3aa;
}

@media (max-width: 720px) {
    .rol-referral-item-rewards {
        grid-template-columns: 1fr;
    }
}