/* =========================================================================
   RealGunz · override.css
   Targets the legacy WebEngine module markup (Bootstrap-3, .panel, .table,
   .page-title, etc.) so it looks native to the 2026 dark theme.
   ========================================================================= */

/* ---- generic typography of module content ---- */
.rg-card, .rg-card * { color: inherit; }

.rg-card a{ color: var(--rg-accent); }
.rg-card a:hover{ color: var(--rg-primary-2); }

/* Page title used by tos.php, faqs.php, downloads.php, etc. */
.page-title{
    font-family: var(--rg-font-display);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rg-border);
    position: relative;
}
.page-title::after{
    content:""; position:absolute; left:0; bottom:-1px;
    width: 80px; height: 2px;
    background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent));
}
.page-title > span{ color: #fff; }

/* ---- legacy Bootstrap panels become dark cards ---- */
.panel,
.panel-default,
.panel-news,
.panel-general,
.panel-sidebar,
.panel-addstats,
.panel-downloads,
.panel-primary{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--rg-text);
    margin-bottom: 24px;
}
.panel > .panel-heading,
.panel-default > .panel-heading,
.panel-news > .panel-heading,
.panel-sidebar > .panel-heading,
.panel-primary > .panel-heading{
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rg-border) !important;
    padding: 0 0 12px;
    margin-bottom: 14px;
}
.panel .panel-title{
    font-family: var(--rg-font-display);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.panel .panel-body{ padding: 0; }
.panel-news .panel-footer{
    background: transparent !important;
    border-top: 1px dashed var(--rg-border) !important;
    color: var(--rg-text-mute) !important;
    font-style: italic;
    padding: 10px 0 0;
}

/* ---- tables (rankings, generic) ---- */
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th{
    border: 0 !important;
    color: var(--rg-text);
}
.rankings-table{
    width: 100%; border-collapse: separate; border-spacing: 0 6px;
}
.rankings-table tr td{
    background: rgba(255,255,255,.025);
    border: 0;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--rg-text);
    text-align: center;
    vertical-align: middle !important;
}
.rankings-table tr td:first-child{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.rankings-table tr td:last-child{  border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.rankings-table tr:hover td{ background: rgba(230,197,118,.06); }
/* The CMS uses the very first row as header */
.rankings-table tr:first-child td{
    background: transparent !important;
    color: var(--rg-accent) !important;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px !important;
    font-family: var(--rg-font-ui);
    border-bottom: 1px solid var(--rg-border) !important;
}
.rankings-table-place{
    color: var(--rg-primary);
    font-family: var(--rg-font-display);
    font-weight: 800;
    font-size: 22px;
}
.rankings-update-time{
    text-align:right;
    color: var(--rg-text-mute);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    padding: 12px 4px;
}

/* Rankings tab menu */
.rankings_menu{ text-align:center; margin: 0 0 18px; display:flex; gap:8px; flex-wrap: wrap; justify-content:center; }
.rankings_menu span{ display:none; }
.rankings_menu a{
    display: inline-flex; align-items:center;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--rg-border);
    color: var(--rg-text-dim) !important;
    font-family: var(--rg-font-ui);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    transition: all .2s ease;
}
.rankings_menu a:hover{ color: #fff !important; border-color: var(--rg-accent); }
.rankings_menu a.active{
    background: linear-gradient(135deg, var(--rg-primary), #1c4ea0);
    color: #fff !important;
    border-color: transparent;
    box-shadow: var(--rg-shadow-glow);
}

/* Generic .table */
.table{ color: var(--rg-text); }
.table>tbody>tr>td{ padding: 10px 12px; }
.table>tbody>tr:nth-child(odd) > td{ background: rgba(255,255,255,.02); }

/* General table UI (used by info page server modes etc.) */
.general-table-ui{
    width:100%; border-collapse: separate; border-spacing: 0;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
    overflow: hidden;
    margin: 14px 0;
}
.general-table-ui tr td{
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rg-border);
    vertical-align: middle !important;
    color: var(--rg-text);
}
.general-table-ui tr:last-child td{ border-bottom: 0; }
.general-table-ui tr:first-child td{
    color: var(--rg-accent);
    font-family: var(--rg-font-ui);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: rgba(230,197,118,.05);
}
.general-table-ui tr:nth-child(2n+2) td{ background: rgba(255,255,255,.02); }

/* My account / generic key-value table */
.myaccount-table{
    width:100%; background: rgba(255,255,255,.02);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
    overflow: hidden;
}
.myaccount-table tr td{
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--rg-border) !important;
    color: var(--rg-text);
}
.myaccount-table tr td:first-child{ color: var(--rg-text-dim); font-weight: 600; }
.myaccount-table tr:last-child td{ border-bottom: 0 !important; }

/* ---- forms (login, register, donation, etc.) ---- */
.form-control{
    background: rgba(0,0,0,.45) !important;
    border: 1px solid var(--rg-border-strong) !important;
    color: var(--rg-text) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    height: auto !important;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-control:focus{
    border-color: var(--rg-accent) !important;
    background: rgba(0,0,0,.6) !important;
    box-shadow: 0 0 0 3px rgba(230,197,118,.15) !important;
}
input[type=text], input[type=password], input[type=number], input[type=email], textarea, select{
    background: rgba(0,0,0,.45);
    border: 1px solid var(--rg-border-strong);
    color: var(--rg-text);
    border-radius: 10px;
    padding: 10px 14px;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, textarea:focus, select:focus{
    border-color: var(--rg-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(230,197,118,.15);
}
label{ color: var(--rg-text-dim); font-family: var(--rg-font-ui); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }

/* ---- buttons (Bootstrap btn classes) ---- */
.btn{
    border-radius: 10px;
    font-family: var(--rg-font-ui);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .15s ease;
}
.btn-primary{
    color: #fff !important;
    background: linear-gradient(135deg, var(--rg-primary), #1c4ea0) !important;
    border: 0 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
    color: #fff !important;
    filter: brightness(1.1);
    background: linear-gradient(135deg, var(--rg-primary-2), #1c4ea0) !important;
    border: 0 !important;
}
.btn-default{
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--rg-border-strong) !important;
    color: var(--rg-text) !important;
}
.btn-default:hover{ border-color: var(--rg-accent) !important; color: var(--rg-accent) !important; background: rgba(255,255,255,.07) !important; }
.btn-success{
    color:#fff !important;
    background: linear-gradient(135deg, var(--rg-success), #25a85c) !important;
    border: 0 !important;
}
.btn-danger{
    color:#fff !important;
    background: linear-gradient(135deg, var(--rg-danger), #c53030) !important;
    border: 0 !important;
}

/* ---- alert/info boxes (e.g. "No news articles…") ---- */
.alert, .alert-warning, .alert-info{
    background: rgba(255,176,32,.08) !important;
    border: 1px solid rgba(255,176,32,.35) !important;
    color: #f6d57a !important;
    border-radius: var(--rg-radius-sm) !important;
    padding: 14px 18px !important;
}
.alert-info{
    background: rgba(230,197,118,.06) !important;
    border-color: rgba(230,197,118,.3) !important;
    color: #aaf2ff !important;
}
.alert-danger{
    background: rgba(255,59,59,.08) !important;
    border-color: rgba(255,59,59,.35) !important;
    color: #ffb1b1 !important;
}
.alert-success{
    background: rgba(43,212,123,.08) !important;
    border-color: rgba(43,212,123,.35) !important;
    color: #b5f0ce !important;
}

/* ---- terms of service list ---- */
.tos_list li{
    color: var(--rg-primary) !important;
    font-family: var(--rg-font-ui);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
    margin-bottom: 28px;
}
.tos_list li p{
    color: var(--rg-text-dim);
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}

/* ---- PayPal block ---- */
.paypal-gateway-content{
    background: linear-gradient(180deg, rgba(0,40,80,.45), rgba(0,20,40,.55)) !important;
    border: 1px solid var(--rg-border-strong) !important;
    border-radius: var(--rg-radius) !important;
    color: var(--rg-text) !important;
    padding: 22px !important;
}
.paypal-gateway-logo{
    background: rgba(255,255,255,.96) url('../img/paypal-logo-200-68.png') no-repeat center !important;
    background-size: contain !important;
    border-radius: 10px !important;
    height: 90px !important;
}
.paypal-gateway-conversion-rate{ color: var(--rg-accent) !important; font-family: var(--rg-font-ui); letter-spacing:.12em; }
.paypal-gateway-form div{ color: #fff !important; }
.paypal-gateway-form input[type=text]{
    background: rgba(0,0,0,.4) !important;
    border: 1px solid var(--rg-border-strong) !important;
    color: var(--rg-text) !important;
    border-radius: 10px !important;
    font-size: 22px !important;
    width: 80px !important;
    text-align: center;
}
.paypal-gateway-form input[type=text]:focus{ border-color: var(--rg-accent) !important; }
.paypal-gateway-continue input[type=submit]{ filter: drop-shadow(0 6px 18px rgba(51,112,208,.4)); }

/* ---- character avatars / thumbnails ---- */
.thumbnail{
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--rg-border-strong) !important;
    border-radius: 10px !important;
    padding: 8px !important;
}
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active{
    border-color: var(--rg-primary) !important;
}

/* ---- admin button on top ---- */
.admincp-button{
    background: linear-gradient(135deg, var(--rg-primary), #1c4ea0) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 700 !important;
}

/* ---- WebEngine credit / global tweaks ---- */
.webengine-powered{ color: var(--rg-text-mute) !important; }
.webengine-powered:hover{ color: var(--rg-accent) !important; }

/* Fix a:hover global override from old Bootstrap-3 setup */
a:focus, a:hover{ text-decoration: none !important; }

/* Bootstrap col tweaks for spacing inside cards */
.rg-card .row{ margin-left: -10px; margin-right: -10px; }
.rg-card .row > [class*="col-"]{ padding-left: 10px; padding-right: 10px; }

/* ---- panel-usercp (user control panel side menu) ---- */
.panel-usercp{
    background: none !important;
}
.panel-usercp ul{
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 4px;
}
.panel-usercp ul li{
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.2;
    transition: background .15s ease;
}
.panel-usercp ul li:hover{ background: rgba(255,255,255,.05); }
.panel-usercp ul li img{
    width: 18px; height: 18px;
    padding: 0;
    position: static;
    filter: brightness(2.2) saturate(0);
    opacity: .8;
}
.panel-usercp ul li a{
    color: var(--rg-text) !important;
    font-family: var(--rg-font-ui);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    font-size: 14px;
}
.panel-usercp ul li:hover a{ color: var(--rg-accent) !important; }
.panel-usercp ul li:hover img{ opacity: 1; filter: none; }

/* Profile / character avatar shadowed images keep neon outline */
.rankings-class-image{
    width: 32px !important; height: auto !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 1px var(--rg-border-strong), 0 4px 14px rgba(0,0,0,.5) !important;
}
.rankings-gens-img{ height: 26px !important; width: auto !important; box-shadow: none !important; }
.rankings-guild-emb{ border-radius: 6px !important; }

/* News panel body */
.panel-news .panel-body{ color: var(--rg-text); }
.panel-news .panel-title{ color: #fff; font-family: var(--rg-font-display); font-size: 22px; font-weight: 800; letter-spacing: .04em; text-transform: none; }

/* Module requirement notes (downloads page) */
.module-requirements{
    color: var(--rg-text-mute);
    font-size: 12px;
    margin-top: 18px;
    border-top: 1px dashed var(--rg-border);
    padding-top: 12px;
}

/* Class filter (rankings) */
.rankings-class-filter{
    margin: 12px auto 24px !important;
    padding: 12px 18px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--rg-border);
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.rankings-class-filter-selection{
    color: var(--rg-text-dim) !important;
    font-size: 11px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.rankings-class-filter-selection img{
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.4) !important;
    margin-bottom: 6px !important;
}
.rankings-class-filter li:hover .rankings-class-filter-selection{ color: #fff !important; }
.rankings-class-filter li:hover .rankings-class-filter-selection img{ box-shadow: 0 0 0 2px var(--rg-accent), 0 8px 22px rgba(230,197,118,.45) !important; }

/* =========================================================================
   HOME · TOP-3 KILLERS PODIUM
   ========================================================================= */
.rg-killers-wrap{ margin: 22px 0 6px; }
.rg-killers{
    position: relative;
    margin: 8px 0 36px;
    padding: 28px 22px 36px;
    border-radius: 22px;
    background:
        radial-gradient(900px 320px at 50% -10%, rgba(51,112,208,.22), transparent 60%),
        radial-gradient(700px 260px at 100% 110%, rgba(230,197,118,.10), transparent 60%),
        linear-gradient(180deg, rgba(20,22,40,.78), rgba(10,10,22,.86));
    border: 1px solid var(--rg-border);
    box-shadow: var(--rg-shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
}
.rg-killers::before{
    content:"";
    position:absolute; inset:-2px;
    background: conic-gradient(from 0deg, transparent 0 60%, rgba(51,112,208,.45) 70%, transparent 80%, rgba(230,197,118,.45) 92%, transparent 100%);
    filter: blur(14px); opacity:.55; z-index:0; pointer-events:none;
    animation: rg-killers-orbit 18s linear infinite;
    will-change: transform; transform: translateZ(0);
}
@keyframes rg-killers-orbit{ to{ transform: rotate(360deg) translateZ(0); } }

.rg-killers__head{
    position: relative; z-index: 2;
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap: wrap; gap: 16px;
    margin-bottom: 22px;
}
.rg-killers__title h2{
    font-family: var(--rg-font-display);
    margin: 6px 0 6px;
    font-size: 30px; font-weight: 900; letter-spacing: .14em;
    color:#fff; text-transform: uppercase;
    text-shadow: 0 0 24px rgba(51,112,208,.35);
}
.rg-killers__title h2 span{
    background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rg-killers__pre{
    display:inline-flex; align-items:center; gap:8px;
    color: var(--rg-primary-2);
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing:.22em; text-transform: uppercase;
    font-size: 12px;
}
.rg-killers__lead{ color: var(--rg-text-dim); margin: 0; font-size: 13px; }
.rg-killers__cta{
    display:inline-flex; align-items:center; gap:10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--rg-border-strong);
    color:#fff !important; font-weight: 700; letter-spacing:.12em;
    text-transform: uppercase; font-size: 12px;
    background: rgba(255,255,255,.04);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
.rg-killers__cta:hover{
    transform: translateY(-2px);
    border-color: var(--rg-primary);
    background: rgba(51,112,208,.12);
    box-shadow: 0 12px 28px -10px rgba(51,112,208,.55);
}

/* ---- Podium grid ---- */
.rg-podium{
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 22px;
    align-items: end;
    padding: 18px 6px 6px;
}
.rg-podium__beam{
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 60%; transform: translateX(-50%);
    background:
        radial-gradient(closest-side at 50% 0%, rgba(255,209,102,.18), transparent 70%);
    filter: blur(6px);
    pointer-events: none; z-index: 0;
}

/* ---- Slot (wrapper so the crown isn't clipped by the card) ---- */
.rg-podium__slot{
    position: relative;
    overflow: visible;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.rg-podium__slot:hover{ transform: translateY(-8px); }
.rg-podium__slot--gold{ transform: translateY(-22px); }
.rg-podium__slot--gold:hover{ transform: translateY(-30px); }

/* ---- Single card ---- */
.rg-podium__card{
    position: relative;
    padding: 28px 18px 0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(26,28,48,.95), rgba(14,15,30,.95));
    border: 1px solid rgba(255,255,255,.08);
    text-align:center;
    color: var(--rg-text);
    overflow: hidden;
    isolation: isolate;
    /* Equal-height layout: base ribbon always sticks to the bottom */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.rg-podium__base{ margin-top: auto; }
.rg-podium{ align-items: stretch; }

/* Tier-specific frames */
.rg-podium__card--gold{
    border-color: rgba(255,209,102,.55);
    box-shadow:
        0 0 0 1px rgba(255,209,102,.25) inset,
        0 30px 60px -25px rgba(255,176,32,.55),
        0 0 60px -10px rgba(255,176,32,.45);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(255,209,102,.22), transparent 70%),
        linear-gradient(180deg, rgba(36,28,18,.95), rgba(18,12,8,.95));
}
.rg-podium__card--silver{
    border-color: rgba(210,222,240,.45);
    box-shadow:
        0 0 0 1px rgba(210,222,240,.18) inset,
        0 22px 48px -22px rgba(160,180,210,.45);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(210,222,240,.16), transparent 70%),
        linear-gradient(180deg, rgba(22,26,40,.95), rgba(12,14,24,.95));
}
.rg-podium__card--bronze{
    border-color: rgba(207,127,68,.5);
    box-shadow:
        0 0 0 1px rgba(207,127,68,.18) inset,
        0 22px 48px -22px rgba(207,127,68,.45);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(207,127,68,.18), transparent 70%),
        linear-gradient(180deg, rgba(30,22,18,.95), rgba(16,12,10,.95));
}

/* Halo behind the card */
.rg-podium__halo{
    position:absolute; inset:-2px; z-index:-1; border-radius: inherit;
    background: conic-gradient(from 0deg, transparent, var(--halo, rgba(255,209,102,.6)), transparent 40%);
    filter: blur(10px); opacity:.60;
    animation: rg-podium-halo 8s linear infinite;
    will-change: transform; transform: translateZ(0);
}
.rg-podium__card--gold   .rg-podium__halo{ --halo: rgba(255,209,102,.85); }
.rg-podium__card--silver .rg-podium__halo{ --halo: rgba(210,222,240,.65); }
.rg-podium__card--bronze .rg-podium__halo{ --halo: rgba(207,127,68,.7); }
@keyframes rg-podium-halo{ to{ transform: rotate(360deg); } }

/* Diagonal shimmer (animated via transform so it stays on the GPU). */
.rg-podium__shine{
    position:absolute; top:0; left:0;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.12) 55%, transparent 100%);
    transform: translateX(-110%) skewX(-18deg);
    animation: rg-podium-shine 5.5s ease-in-out infinite;
    pointer-events:none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.rg-podium__card--silver .rg-podium__shine{ animation-delay: 1.5s; }
.rg-podium__card--bronze .rg-podium__shine{ animation-delay: 3s; }
@keyframes rg-podium-shine{
    0%, 100% { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
    35%      { opacity: 1; }
    70%      { transform: translateX(220%)  skewX(-18deg); opacity: 0; }
}

/* Crown for #1 — floating side badge above the card (slot is overflow:visible) */
.rg-podium__crown{
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none;
    z-index: 6;
    animation: rg-podium-crown-float 3.4s ease-in-out infinite;
}
.rg-podium__crown-glow{
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 60px;
    background: radial-gradient(ellipse at center, rgba(255,209,102,.55), transparent 70%);
    filter: blur(10px);
    z-index: -1;
}
.rg-podium__crown-icon{
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff3b8, #ffb020 55%, #c87600);
    color: #3a1f00;
    font-size: 28px;
    box-shadow:
        0 0 0 4px rgba(20,16,8,.9),
        0 0 28px rgba(255,176,32,.7),
        0 0 60px rgba(255,176,32,.45),
        inset 0 2px 4px rgba(255,255,255,.45),
        inset 0 -3px 6px rgba(120,60,0,.6);
}
@keyframes rg-podium-crown-float{
    0%,100% { transform: translateX(-50%) translateY(0)   rotate(-4deg); }
    50%     { transform: translateX(-50%) translateY(-6px) rotate(4deg); }
}
/* Hide the duplicate "CHAMPION" pill in the gold card base since the crown
   already labels it (silver/bronze keep their base ribbons). */
.rg-podium__card--gold .rg-podium__base{ display: none; }

/* Rank pill */
.rg-podium__rank{
    position:absolute; top: 14px; right: 14px;
    font-family: var(--rg-font-display);
    font-size: 13px; font-weight: 900; letter-spacing: .08em;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.12);
    color:#fff;
}
.rg-podium__card--gold   .rg-podium__rank{ color:#ffd166; border-color: rgba(255,209,102,.55); }
.rg-podium__card--silver .rg-podium__rank{ color:#d2def0; border-color: rgba(210,222,240,.45); }
.rg-podium__card--bronze .rg-podium__rank{ color:#e1996a; border-color: rgba(207,127,68,.55); }

/* Avatar — uniform box (keeps cards same size); image scaled per rank via transform */
.rg-podium__avatar-wrap{
    position: relative; display: inline-block;
    margin: 6px auto 14px;
    width: 120px; height: 120px;
    transform-origin: center center;
    transition: transform .35s ease;
}
.rg-podium__card--rank1 .rg-podium__avatar-wrap{ transform: scale(.88); }
.rg-podium__card--rank2 .rg-podium__avatar-wrap{ transform: scale(1.00); }
.rg-podium__card--rank3 .rg-podium__avatar-wrap{ transform: scale(1.20); }

/* Tier medallion (replaces the avatar image) */
.rg-podium__avatar{
    width: 100%; height: 100%;
    border-radius: 50%;
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow:
        0 18px 36px -16px rgba(0,0,0,.7),
        inset 0 4px 12px rgba(255,255,255,.35),
        inset 0 -8px 16px rgba(0,0,0,.55);
}

/* Outer decorative ring (dashed engraving) */
.rg-podium__avatar::before{
    content: "";
    position: absolute; inset: 7px;
    border-radius: 50%;
    border: 2px dashed currentColor;
    opacity: .35;
    pointer-events: none;
}
/* Inner highlight gleam */
.rg-podium__avatar::after{
    content: "";
    position: absolute; left: 12%; top: 8%;
    width: 40%; height: 30%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.7), transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

/* Subtle conic-gradient burst behind the icon */
.rg-podium__avatar-rays{
    position: absolute; inset: 0;
    background: conic-gradient(
        from 0deg,
        rgba(255,255,255,0)   0deg,
        rgba(255,255,255,.18) 18deg,
        rgba(255,255,255,0)   36deg,
        rgba(255,255,255,0)   54deg,
        rgba(255,255,255,.18) 72deg,
        rgba(255,255,255,0)   90deg,
        rgba(255,255,255,0)  108deg,
        rgba(255,255,255,.18) 126deg,
        rgba(255,255,255,0)  144deg,
        rgba(255,255,255,0)  162deg,
        rgba(255,255,255,.18) 180deg,
        rgba(255,255,255,0)  198deg,
        rgba(255,255,255,0)  216deg,
        rgba(255,255,255,.18) 234deg,
        rgba(255,255,255,0)  252deg,
        rgba(255,255,255,0)  270deg,
        rgba(255,255,255,.18) 288deg,
        rgba(255,255,255,0)  306deg,
        rgba(255,255,255,0)  324deg,
        rgba(255,255,255,.18) 342deg,
        rgba(255,255,255,0)  360deg
    );
    mix-blend-mode: overlay;
    animation: rg-podium-rays 14s linear infinite;
    pointer-events: none;
    will-change: transform; transform: translateZ(0);
}
@keyframes rg-podium-rays{ to { transform: rotate(360deg) translateZ(0); } }

/* Central engraved skull */
.rg-podium__avatar-icon{
    position: relative; z-index: 2;
    font-size: 54px;
    line-height: 1;
    color: #1a0e02;
    text-shadow:
        0 1px 0 rgba(255,255,255,.35),
        0 -1px 1px rgba(0,0,0,.45);
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}

/* Tiny rank stamp at the bottom of the medallion */
.rg-podium__avatar-rank{
    position: absolute; bottom: 8%; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--rg-font-display);
    font-size: 11px; font-weight: 900; letter-spacing: .14em;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: currentColor;
    box-shadow: 0 1px 0 rgba(255,255,255,.2);
}

/* ---- Gold medallion ---- */
.rg-podium__avatar--gold{
    color: #ffd166;
    background:
        radial-gradient(circle at 30% 25%, #fff3b8 0%, #ffd166 38%, #c87600 78%, #5a3000 100%);
}
.rg-podium__avatar--gold .rg-podium__avatar-icon{ color: #3a1f00; }

/* ---- Silver medallion ---- */
.rg-podium__avatar--silver{
    color: #e8eef8;
    background:
        radial-gradient(circle at 30% 25%, #ffffff 0%, #d2def0 40%, #8a98ac 78%, #3a4250 100%);
}
.rg-podium__avatar--silver .rg-podium__avatar-icon{ color: #1c2230; }

/* ---- Bronze medallion ---- */
.rg-podium__avatar--bronze{
    color: #f3b48a;
    background:
        radial-gradient(circle at 30% 25%, #ffd0a8 0%, #cf7f44 42%, #7a3e16 80%, #2e1608 100%);
}
.rg-podium__avatar--bronze .rg-podium__avatar-icon{ color: #2a1100; }

/* Rotating ring around avatar */
.rg-podium__ring{
    position:absolute; inset:-8px; border-radius:50%;
    background: conic-gradient(from 0deg, var(--ring, #ffd166), transparent 35%, var(--ring, #ffd166) 70%, transparent);
    filter: blur(2px); opacity:.85;
    animation: rg-podium-ring 5s linear infinite;
    z-index: 1;
    will-change: transform; transform: translateZ(0);
}
.rg-podium__card--gold   .rg-podium__ring{ --ring: #ffd166; }
.rg-podium__card--silver .rg-podium__ring{ --ring: #d2def0; }
.rg-podium__card--bronze .rg-podium__ring{ --ring: #cf7f44; }
@keyframes rg-podium-ring{ to { transform: rotate(360deg); } }

/* Gender badge on avatar */
.rg-podium__gender{
    position:absolute; right: -4px; bottom: 4px;
    width: 30px; height: 30px;
    padding: 4px;
    border-radius: 50%;
    background: #0a0a14;
    border: 2px solid rgba(255,255,255,.18);
    z-index: 3;
}

/* Name */
.rg-podium__name{
    font-family: var(--rg-font-display);
    margin: 0 0 10px;
    font-size: 17px; font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
}
.rg-podium__card--gold .rg-podium__name{ font-size: 20px; }
.rg-podium__name a{ color: #fff !important; }
.rg-podium__name a:hover{ color: var(--rg-accent) !important; }

/* Kills */
.rg-podium__kills{
    display:flex; flex-direction:column; align-items:center;
    margin: 6px 0 18px;
}
.rg-podium__kills-num{
    font-family: var(--rg-font-display);
    font-size: 28px; font-weight: 900;
    color: var(--rg-primary);
    text-shadow: 0 0 18px rgba(51,112,208,.55);
    line-height: 1;
    animation: rg-podium-pulse 2.6s ease-in-out infinite;
}
.rg-podium__card--gold .rg-podium__kills-num{
    font-size: 38px;
    color: #ffd166;
    text-shadow: 0 0 22px rgba(255,176,32,.65);
}
.rg-podium__kills-lbl{
    font-size: 10px; letter-spacing: .35em;
    color: var(--rg-text-mute);
    margin-top: 4px;
}
@keyframes rg-podium-pulse{
    0%,100% { transform: scale(1); filter: brightness(1); }
    50%     { transform: scale(1.06); filter: brightness(1.2); }
}

/* Base ribbon */
.rg-podium__base{
    margin: 0 -18px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
    border-top: 1px solid rgba(255,255,255,.06);
}
.rg-podium__medal{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--rg-font-ui);
    font-weight: 700; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase;
}
.rg-podium__card--gold   .rg-podium__medal{ color:#ffd166; }
.rg-podium__card--silver .rg-podium__medal{ color:#d2def0; }
.rg-podium__card--bronze .rg-podium__medal{ color:#e1996a; }

/* ---- Responsive ---- */
@media (max-width: 720px){
    .rg-killers{ padding: 22px 14px 26px; }
    .rg-killers__head{ flex-direction: column; align-items: flex-start; }
    .rg-killers__title h2{ font-size: 24px; }
    .rg-podium{
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 36px; /* room for the crown that floats above the gold card */
        align-items: start;  /* single-column: don't stretch, size each card to content */
    }
    /* The central beam is a 3-column decoration; hide it in the vertical stack. */
    .rg-podium__beam{ display: none; }
    /* Safari resolves height:100% to 0 inside a stretched single-column grid item — kill it. */
    .rg-podium__card{ height: auto; padding-bottom: 6px; }
    /* Bring the gold base ribbon back so all three cards have matching footers. */
    .rg-podium__card--gold .rg-podium__base{ display: block; }
    /* Reset desktop lift on the slot (where the transform actually lives) and reorder gold to top. */
    .rg-podium__slot{ width: 100%; }
    .rg-podium__slot--gold{ transform: none; order: -1; }
    .rg-podium__slot--gold:hover{ transform: translateY(-6px); }
    /* Bronze avatar's 1.2× scale and the gold's 38px kills counter are too big on phones. */
    .rg-podium__avatar-wrap{ width: 100px; height: 100px; margin: 4px auto 12px; }
    .rg-podium__card--rank3 .rg-podium__avatar-wrap{ transform: scale(1.08); }
    .rg-podium__avatar-icon{ font-size: 44px; }
    .rg-podium__name{ font-size: 16px; }
    .rg-podium__card--gold .rg-podium__name{ font-size: 18px; }
    .rg-podium__kills-num{ font-size: 24px; }
    .rg-podium__card--gold .rg-podium__kills-num{ font-size: 30px; }
    .rg-podium__crown{ top: -28px; }
    .rg-podium__crown-icon{ width: 52px; height: 52px; font-size: 22px; }
}
@media (max-width: 420px){
    .rg-killers{ padding: 18px 10px 22px; }
    .rg-killers__title h2{ font-size: 20px; }
    .rg-podium__card{ padding: 24px 14px 6px; }
    .rg-podium__base{ margin: 0 -14px; }
    .rg-podium__avatar-wrap{ width: 88px; height: 88px; }
    .rg-podium__avatar-icon{ font-size: 38px; }
    .rg-podium__card--rank3 .rg-podium__avatar-wrap{ transform: scale(1.04); }
}

/* =========================================================================
   TOP KILLERS — scroll-perf (effects kept on all sizes, just less expensive)
   What actually costs frames on mobile is `filter: blur(28px / 18px)` on
   large rotating elements — re-blurred every animation tick. Cutting blur
   radius is ~quadratically cheaper than disabling, so the look is preserved
   even on small phones while the GPU stops choking.
   ========================================================================= */
@media (max-width: 900px){
    /* Section orbit aura — same conic ring, much cheaper blur, stays visible. */
    .rg-killers::before{ filter: blur(12px); opacity: .55; animation-duration: 18s; }
    /* Card halos — keep glow + rotate, cheaper blur. */
    .rg-podium__halo{ filter: blur(10px); opacity: .60; animation-duration: 8s; }
    /* Ray bursts — drop blend mode (forces compositor passes), keep rotation. */
    .rg-podium__avatar-rays{ mix-blend-mode: normal; opacity: .45; animation-duration: 18s; }
    /* Rings — keep spinning, drop tiny blur. */
    .rg-podium__ring{ filter: none; }
    /* Shine sweep — keep, slightly slower so phone GPU breathes between. */
    .rg-podium__shine{ animation-duration: 7s; opacity: .9; }
    /* Kills pulse + crown float — slow a touch. */
    .rg-podium__kills-num{ animation-duration: 3.5s; }
    .rg-podium__crown{ animation-duration: 4s; }
}
/* (No prefers-reduced-motion override here on purpose — the Top Killers
   section is a key visual hook and the OS-level reduced-motion setting
   was nuking every animation for desktop users who hadn't opted in
   consciously. Subtle rotating glows are not vestibular-trigger motion.) */

/* =========================================================================
   INFO STRIP  (server status + top clans, sits just below the hero frame)
   ========================================================================= */
.rg-infostrip{ margin: 18px 0 6px; }
.rg-infostrip__inner{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 22px;
    align-items: stretch;
}
.rg-infostrip__col{
    min-width: 0;            /* let children shrink inside the grid cell */
    margin: 0 !important;    /* override per-widget margins (e.g. rg-topclans margin-top) */
    align-self: stretch;
}
.rg-infostrip .rg-status{ height: 100%; }   /* make both cards the same height */

@media (max-width: 900px){
    .rg-infostrip__inner{ grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================================
   HERO · TOP-3 ELITE CLANS WIDGET (sits under the status panel)
   ========================================================================= */
.rg-topclans{
    margin-top: 14px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background:
        radial-gradient(180px 80px at 100% 0%, rgba(230,197,118,.12), transparent 60%),
        linear-gradient(180deg, rgba(20,22,40,.78), rgba(10,10,22,.86));
    border: 1px solid var(--rg-border);
    box-shadow: 0 18px 36px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
    overflow: hidden;
}
.rg-topclans::before{
    content:""; position:absolute; left:0; right:0; top:0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230,197,118,.5), transparent);
}
.rg-topclans__head{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.rg-topclans__pre{
    display:inline-flex; align-items:center; gap:6px;
    color: var(--rg-accent);
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; font-size: 11px;
}
.rg-topclans__more{
    display:inline-flex; align-items:center; gap:6px;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rg-text-dim) !important;
    padding: 4px 8px; border-radius: 999px;
    border: 1px solid var(--rg-border);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.rg-topclans__more:hover{
    color: var(--rg-accent) !important;
    border-color: var(--rg-accent);
    background: rgba(230,197,118,.08);
}
.rg-topclans__list{
    display: flex; flex-direction: column; gap: 8px;
}
.rg-topclans__row{
    --tier-color: #fff;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px 8px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rg-topclans__row::before{
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tier-color);
    box-shadow: 0 0 10px var(--tier-color);
}
.rg-topclans__row::after{
    /* subtle diagonal shine sweep on hover */
    content: "";
    position: absolute; top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.12) 50%, transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
    pointer-events: none;
}
.rg-topclans__row:hover{
    transform: translateX(4px);
    background: rgba(255,255,255,.06);
    border-color: var(--tier-color);
    box-shadow: 0 10px 22px -10px var(--tier-color);
}
.rg-topclans__row:hover::after{ left: 120%; }

.rg-topclans__row--gold{   --tier-color: #ffd166; }
.rg-topclans__row--silver{ --tier-color: #d2def0; }
.rg-topclans__row--bronze{ --tier-color: #cf7f44; }

/* #1 row sits ever-so-slightly fancier */
.rg-topclans__row--gold{
    background:
        linear-gradient(90deg, rgba(255,209,102,.10), rgba(255,209,102,0) 60%),
        rgba(255,255,255,.03);
}

.rg-topclans__rank{
    font-family: var(--rg-font-display);
    font-weight: 900; font-size: 14px;
    color: var(--tier-color);
    min-width: 26px;
    text-align: left;
    text-shadow: 0 0 10px rgba(0,0,0,.5);
}
.rg-topclans__emblem-wrap{
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(0,0,0,.45);
    border: 2px solid var(--tier-color);
    box-shadow: 0 0 14px -3px var(--tier-color), inset 0 0 8px rgba(0,0,0,.55);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.rg-topclans__emblem-wrap::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 45%);
    pointer-events: none;
}
.rg-topclans__emblem{
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}
.rg-topclans__info{
    display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.rg-topclans__name{
    font-family: var(--rg-font-display);
    font-weight: 800; font-size: 13px; letter-spacing: .04em;
    color: #fff;
    text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rg-topclans__stats{
    color: var(--rg-text-dim); font-size: 11px; letter-spacing: .04em;
    margin-top: 2px;
    display: flex; align-items: center; gap: 6px;
}
.rg-topclans__stats i{ color: var(--tier-color); }
.rg-topclans__dot{ opacity: .55; }
.rg-topclans__chevron{
    color: var(--rg-text-mute);
    font-size: 11px;
    transition: transform .25s ease, color .25s ease;
}
.rg-topclans__row:hover .rg-topclans__chevron{
    transform: translateX(4px);
    color: var(--tier-color);
}

/* =========================================================================
   DOWNLOADS · SYSTEM REQUIREMENTS TABLE
   ========================================================================= */
.rg-sysreq{
    margin: 28px 0 8px;
    padding: 22px 22px 26px;
    border-radius: 18px;
    background:
        radial-gradient(700px 220px at 50% -10%, rgba(230,197,118,.10), transparent 60%),
        linear-gradient(180deg, rgba(20,22,40,.78), rgba(10,10,22,.86));
    border: 1px solid var(--rg-border);
    box-shadow: var(--rg-shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
}
.rg-sysreq__head{
    margin-bottom: 18px;
}
.rg-sysreq__pre{
    display:inline-flex; align-items:center; gap:8px;
    color: var(--rg-accent);
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; font-size: 11px;
}
.rg-sysreq__head h2{
    font-family: var(--rg-font-display);
    margin: 6px 0 6px;
    font-size: 24px; font-weight: 900; letter-spacing: .14em;
    color: #fff; text-transform: uppercase;
}
.rg-sysreq__head h2 span{
    background: linear-gradient(90deg, var(--rg-accent), var(--rg-primary));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rg-sysreq__lead{ color: var(--rg-text-dim); margin: 0; font-size: 13px; }

.rg-sysreq__wrap{
    border-radius: 14px;
    border: 1px solid var(--rg-border);
    overflow: hidden;
    background: rgba(8,9,18,.55);
}

/* The table itself — override Bootstrap completely so this is fully isolated */
.rg-sysreq__table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-family: var(--rg-font-body);
}
.rg-sysreq__table thead th{
    font-family: var(--rg-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid var(--rg-border-strong);
    text-align: left;
    white-space: nowrap;
}
.rg-sysreq__table thead th i{ margin-right: 8px; opacity: .9; }
.rg-sysreq__th-label{ width: 26%; color: var(--rg-text-dim) !important; }
.rg-sysreq__th-min{   width: 37%; color: var(--rg-warning) !important; }
.rg-sysreq__th-rec{   width: 37%; color: var(--rg-success) !important; }

.rg-sysreq__table tbody td{
    padding: 14px 16px;
    border-top: 1px solid var(--rg-border);
    color: var(--rg-text);
    font-size: 14px;
    vertical-align: middle;
    background: transparent;
}
.rg-sysreq__table tbody tr:nth-child(odd) td{
    background: rgba(255,255,255,.018);
}
.rg-sysreq__table tbody tr:hover td{
    background: rgba(230,197,118,.05);
}

.rg-sysreq__label{
    font-family: var(--rg-font-display);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff !important;
    font-size: 13px !important;
}
.rg-sysreq__label i{
    color: var(--rg-accent);
    margin-right: 10px;
    width: 18px; text-align: center;
}
.rg-sysreq__min{
    color: var(--rg-text-dim) !important;
    position: relative;
}
.rg-sysreq__min::before{
    content:""; display:inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rg-warning);
    margin-right: 10px;
    box-shadow: 0 0 8px rgba(255,176,32,.55);
    vertical-align: middle;
}
.rg-sysreq__rec{
    color: #fff !important;
    font-weight: 600;
    position: relative;
}
.rg-sysreq__rec::before{
    content:""; display:inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rg-success);
    margin-right: 10px;
    box-shadow: 0 0 10px rgba(43,212,123,.55);
    vertical-align: middle;
}

/* =========================================================================
   SIDEBAR · HALL OF FAME WIDGET (castle siege champion)
   ========================================================================= */
.rg-hof{
    position: relative;
    margin-bottom: 22px;
    padding: 0;
    border-radius: 18px;
    background:
        radial-gradient(140% 80% at 50% 0%, rgba(255,209,102,.18), transparent 60%),
        linear-gradient(180deg, rgba(28,22,12,.78), rgba(10,8,18,.92));
    border: 1px solid rgba(255,209,102,.28);
    box-shadow:
        var(--rg-shadow-card),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 28px -8px rgba(255,176,32,.35);
    overflow: hidden;
    color: var(--rg-text);
}
.rg-hof::before{
    /* slow rotating gold halo */
    content:"";
    position:absolute; inset:-30%;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,209,102,.4) 85%, transparent 100%);
    filter: blur(32px);
    opacity: .45;
    pointer-events: none;
    animation: rg-hof-orbit 16s linear infinite;
    z-index: 0;
}
@keyframes rg-hof-orbit{ to{ transform: rotate(360deg); } }
.rg-hof > *{ position: relative; z-index: 1; }

/* ---- Header ---- */
.rg-hof__head{
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,209,102,.18);
    background: linear-gradient(180deg, rgba(255,209,102,.10), transparent);
}
.rg-hof__icon{
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff3b8, #ffb020 55%, #8a5000);
    color: #3a1f00;
    font-size: 16px;
    box-shadow: 0 0 0 2px rgba(255,209,102,.25), 0 6px 16px rgba(255,176,32,.45);
    flex-shrink: 0;
}
.rg-hof__head-text{ display:flex; flex-direction:column; min-width:0; }
.rg-hof__pre{
    color: #ffd166;
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; font-size: 10px;
}
.rg-hof__title{
    font-family: var(--rg-font-display);
    margin: 2px 0 0;
    font-size: 15px; font-weight: 900; letter-spacing: .14em;
    color: #fff; text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255,176,32,.45);
}

/* ---- Hero block (emblem + clan name + master) ---- */
.rg-hof__hero{
    position: relative;
    padding: 28px 16px 18px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px;
}
.rg-hof__crown{
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    color: #ffd166;
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(255,176,32,.7));
    animation: rg-hof-crown 3.4s ease-in-out infinite;
}
@keyframes rg-hof-crown{
    0%,100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
    50%     { transform: translateX(-50%) translateY(-4px) rotate(5deg); }
}
.rg-hof__emblem-wrap{
    position: relative;
    width: 96px; height: 96px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 6px;
}
.rg-hof__emblem-ring{
    position: absolute; inset: -6px;
    border-radius: 18px;
    background: conic-gradient(from 0deg, #ffd166, transparent 35%, #ffd166 70%, transparent);
    filter: blur(2px); opacity: .8;
    animation: rg-hof-ring 6s linear infinite;
}
@keyframes rg-hof-ring{ to{ transform: rotate(360deg); } }
.rg-hof__emblem{
    position: relative; z-index: 2;
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 14px;
    background: #0a0a14;
    border: 2px solid #ffd166;
    box-shadow:
        0 12px 24px -8px rgba(0,0,0,.65),
        inset 0 0 12px rgba(0,0,0,.45);
    padding: 4px;
}
.rg-hof__hero-info{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rg-hof__label{
    color: var(--rg-text-mute);
    font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase;
}
.rg-hof__clan{
    font-family: var(--rg-font-display);
    margin: 4px 0 6px;
    font-size: 18px; font-weight: 900; letter-spacing: .08em;
    color: #fff; text-transform: uppercase;
    word-break: break-word;
    text-shadow: 0 0 16px rgba(255,176,32,.35);
}
.rg-hof__master{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--rg-text-dim);
}
.rg-hof__master i{ color: #ffd166; }
.rg-hof__master-name{ color: #fff; font-weight: 600; }

/* ---- Last conquest block ---- */
.rg-hof__lastwar{
    margin: 0 14px 14px;
    padding: 12px 12px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
}
.rg-hof__lastwar-head{
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; font-size: 10px;
    color: var(--rg-primary-2);
    margin-bottom: 8px;
}
.rg-hof__lastwar-head i{ margin-right: 4px; color: var(--rg-primary); }
.rg-hof__lastwar-body{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 10px; }
.rg-hof__row{
    display:flex; align-items:center; justify-content:space-between; gap: 8px;
    font-size: 13px;
}
.rg-hof__row-label{ color: var(--rg-text-mute); display:inline-flex; align-items:center; gap:6px; }
.rg-hof__row-label i{ width: 14px; text-align: center; color: var(--rg-accent); }
.rg-hof__row-value{ color: #fff; font-weight: 600; }
.rg-hof__row-value--enemy{ color: var(--rg-danger); }

/* Score bar */
.rg-hof__score{ margin-top: 8px; }
.rg-hof__score-bar{
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,59,59,.25), rgba(255,255,255,.05));
    overflow: hidden;
    position: relative;
}
.rg-hof__score-fill{
    height: 100%;
    background: linear-gradient(90deg, #2bd47b, #f4f7fb);
    box-shadow: 0 0 14px rgba(43,212,123,.55);
    border-radius: 999px;
    transition: width .8s ease;
}
.rg-hof__score-legend{
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px;
    font-size: 11px; color: var(--rg-text-dim);
    letter-spacing: .04em;
}
.rg-hof__score-win{ color: var(--rg-success); }
.rg-hof__score-win i{ margin-right: 3px; }
.rg-hof__score-win b{ color: #fff; margin-left: 2px; }
.rg-hof__score-lose{ color: var(--rg-danger); }
.rg-hof__score-lose i{ margin-right: 3px; }
.rg-hof__score-lose b{ color: #fff; margin-left: 2px; }

/* CTA */
.rg-hof__cta{
    display: flex; align-items: center; gap: 10px;
    margin: 0 14px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,209,102,.18), rgba(255,176,32,.05));
    border: 1px solid rgba(255,209,102,.4);
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--rg-font-display);
    font-weight: 800;
    font-size: 12px; letter-spacing: .18em;
    text-transform: uppercase;
    transition: transform .2s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.rg-hof__cta::after{
    content:""; position:absolute; top:0; left:-60%;
    width: 50%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.2) 50%, transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
    pointer-events: none;
}
.rg-hof__cta i:first-child{ color: #ffd166; font-size: 14px; }
.rg-hof__cta-arrow{ margin-left: auto; transition: transform .25s ease; }
.rg-hof__cta:hover{
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,209,102,.28), rgba(255,176,32,.1));
    border-color: #ffd166;
    box-shadow: 0 14px 28px -10px rgba(255,176,32,.55);
}
.rg-hof__cta:hover::after{ left: 120%; }
.rg-hof__cta:hover .rg-hof__cta-arrow{ transform: translateX(4px); }

/* Hide the OLD legacy castle-siege widget styling if a stale module ever
   reuses the .castle-owner-widget class — keeps things visually clean. */
.castle-owner-widget{ display: none !important; }

/* =========================================================================
   CASTLE SIEGE PAGE  (modules/castlesiege.php · namespace `.rg-cs`)
   ========================================================================= */
.rg-cs{ display: flex; flex-direction: column; gap: 26px; }

.rg-cs__pre{
    display:inline-flex; align-items:center; gap:6px;
    color: var(--rg-accent);
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; font-size: 11px;
}

/* ---- Section header (icon chip + title) ---- */
.rg-cs__sec-head{
    display:flex; align-items:center; gap: 14px;
    margin-bottom: 16px;
}
.rg-cs__sec-icon{
    width: 40px; height: 40px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(230,197,118,.18), rgba(51,112,208,.12));
    border: 1px solid rgba(230,197,118,.35);
    color: var(--rg-accent);
    font-size: 16px;
    box-shadow: 0 8px 18px -10px rgba(230,197,118,.55);
}
.rg-cs__sec-head h2{
    font-family: var(--rg-font-display);
    margin: 2px 0 0;
    font-size: 22px; font-weight: 900; letter-spacing: .12em;
    color: #fff; text-transform: uppercase;
}

/* =========================================================================
   OWNER PANEL  (top hero of the page)
   ========================================================================= */
.rg-cs__owner{
    position: relative;
    border-radius: 20px;
    padding: 28px 26px;
    background:
        radial-gradient(900px 320px at 50% -10%, rgba(255,209,102,.18), transparent 60%),
        linear-gradient(180deg, rgba(28,22,12,.78), rgba(10,8,18,.92));
    border: 1px solid rgba(255,209,102,.32);
    box-shadow:
        var(--rg-shadow-card),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 36px -10px rgba(255,176,32,.4);
    overflow: hidden;
}
.rg-cs__owner-glow{
    position: absolute; inset: -40%;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,209,102,.5) 85%, transparent 100%);
    filter: blur(38px);
    opacity: .45;
    z-index: 0;
    pointer-events: none;
    animation: rg-cs-orbit 18s linear infinite;
}
@keyframes rg-cs-orbit{ to{ transform: rotate(360deg); } }
.rg-cs__owner-crown{
    position: absolute; top: 14px; right: 18px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff3b8, #ffb020 55%, #8a5000);
    color: #3a1f00; font-size: 18px;
    box-shadow: 0 0 0 3px rgba(20,16,8,.9), 0 0 22px rgba(255,176,32,.6);
    z-index: 2;
}
.rg-cs__owner-inner{
    position: relative; z-index: 1;
    display:flex; gap: 24px; align-items:center;
    flex-wrap: wrap;
}
.rg-cs__owner-emblem{
    position: relative;
    width: 130px; height: 130px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rg-cs__owner-emblem img{
    position: relative; z-index: 2;
    max-width: 100%; max-height: 100%;
    border-radius: 16px;
    border: 2px solid #ffd166;
    background: #0a0a14;
    padding: 6px;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.75), inset 0 0 14px rgba(0,0,0,.5);
}
.rg-cs__owner-ring{
    position: absolute; inset: -8px;
    border-radius: 22px;
    background: conic-gradient(from 0deg, #ffd166, transparent 35%, #ffd166 70%, transparent);
    filter: blur(3px); opacity: .85;
    animation: rg-cs-ring 6s linear infinite;
    z-index: 1;
}
@keyframes rg-cs-ring{ to{ transform: rotate(360deg); } }
.rg-cs__owner-info{ flex: 1; min-width: 220px; }
.rg-cs__owner-info .rg-cs__pre{ color: #ffd166; }
.rg-cs__owner-info .rg-cs__pre i{ color: #ffd166; }
.rg-cs__owner-name{
    font-family: var(--rg-font-display);
    margin: 6px 0 12px;
    font-size: 30px; font-weight: 900; letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 22px rgba(255,176,32,.4);
}
.rg-cs__owner-name a{ color: #fff !important; }
.rg-cs__owner-name a:hover{ color: #ffd166 !important; }
.rg-cs__owner-master{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,209,102,.3);
    font-size: 13px;
}
.rg-cs__owner-master i{ color: #ffd166; }
.rg-cs__owner-master span{ color: var(--rg-text-dim); letter-spacing: .04em; }
.rg-cs__owner-master strong{ color: #fff; font-weight: 700; }
.rg-cs__owner-master strong a{ color: #fff !important; }
.rg-cs__owner-master strong a:hover{ color: var(--rg-accent) !important; }

/* Alliance block */
.rg-cs__alliance{
    position: relative; z-index: 1;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed rgba(255,209,102,.22);
}
.rg-cs__alliance-head{
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; font-size: 11px;
    color: #ffd166;
    margin-bottom: 10px;
}
.rg-cs__alliance-head i{ margin-right: 6px; }
.rg-cs__alliance-list{ display: flex; flex-direction: column; gap: 8px; }
.rg-cs__ally{
    display: grid;
    grid-template-columns: 36px 1fr 1.2fr;
    gap: 14px; align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    transition: background .2s ease, border-color .2s ease;
}
.rg-cs__ally:hover{ background: rgba(255,209,102,.06); border-color: rgba(255,209,102,.35); }
.rg-cs__ally-mark img{ max-width: 32px; max-height: 32px; border-radius: 6px; background: #0a0a14; padding: 2px; }
.rg-cs__ally-name{ font-weight: 700; color: #fff; }
.rg-cs__ally-master{ color: var(--rg-text-dim); font-size: 13px; }
.rg-cs__ally-master i{ color: var(--rg-accent); margin-right: 4px; }

/* =========================================================================
   COUNTDOWN BANNER
   ========================================================================= */
.rg-cs__countdown{
    text-align: center;
    padding: 22px 18px;
    border-radius: 18px;
    background:
        radial-gradient(700px 220px at 50% 0%, rgba(51,112,208,.18), transparent 60%),
        linear-gradient(180deg, rgba(20,22,40,.78), rgba(10,10,22,.86));
    border: 1px solid var(--rg-border);
    box-shadow: var(--rg-shadow-card);
}
.rg-cs__countdown .rg-cs__pre{ color: var(--rg-primary-2); }
.rg-cs__countdown .rg-cs__pre i{ color: var(--rg-primary); }
.rg-cs__timer{
    font-family: var(--rg-font-display);
    font-size: 44px !important;
    font-weight: 900 !important;
    letter-spacing: .14em;
    color: #fff;
    margin-top: 8px;
    text-shadow: 0 0 28px rgba(51,112,208,.45);
}
.rg-cs__timer span{
    color: var(--rg-text-dim) !important;
    font-size: 22px !important;
    margin-left: 6px;
}

/* =========================================================================
   CASTLE INFORMATION  (the section the user wanted fixed)
   ========================================================================= */
.rg-cs__info{
    padding: 22px;
    border-radius: 18px;
    background:
        radial-gradient(700px 220px at 0% 0%, rgba(230,197,118,.10), transparent 55%),
        radial-gradient(700px 220px at 100% 100%, rgba(51,112,208,.10), transparent 55%),
        linear-gradient(180deg, rgba(20,22,40,.78), rgba(10,10,22,.86));
    border: 1px solid var(--rg-border);
    box-shadow: var(--rg-shadow-card);
}

/* ---- Stage cards row ---- */
.rg-cs__stages{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.rg-cs__stage{
    position: relative;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.rg-cs__stage::before{
    content:""; position:absolute; left:0; top:0; bottom:0;
    width: 4px;
    background: var(--stage-c, var(--rg-accent));
    box-shadow: 0 0 14px var(--stage-c, var(--rg-accent));
}
.rg-cs__stage--current{ --stage-c: var(--rg-success); }
.rg-cs__stage--next{    --stage-c: var(--rg-warning); }
.rg-cs__stage-label{
    display:inline-flex; align-items:center; gap: 6px;
    color: var(--rg-text-dim);
    font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase;
}
.rg-cs__stage-label i{ color: var(--stage-c, var(--rg-accent)); }
.rg-cs__stage-title{
    display: block;
    font-family: var(--rg-font-display);
    font-size: 18px; font-weight: 900;
    color: #fff;
    margin-top: 4px;
    letter-spacing: .04em;
}
.rg-cs__stage-countdown{
    display:inline-flex; align-items:center; gap:6px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: var(--stage-c, #fff);
    font-family: var(--rg-font-mono);
    font-size: 12px; font-weight: 700;
    letter-spacing: .04em;
}

/* ---- Battle duration chip ---- */
.rg-cs__duration{
    display:inline-flex; align-items:center; gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0,0,0,.4);
    border: 1px solid var(--rg-border-strong);
    margin-bottom: 16px;
}
.rg-cs__duration i{ color: var(--rg-warning); }
.rg-cs__duration span{ color: var(--rg-text-dim); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.rg-cs__duration strong{ color: #fff; font-family: var(--rg-font-mono); font-weight: 700; }

/* ---- Tax-rate meters grid ---- */
.rg-cs__meters{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.rg-cs__meter{
    --tone-c: var(--rg-accent);
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.rg-cs__meter:hover{
    transform: translateY(-2px);
    border-color: var(--tone-c);
    box-shadow: 0 12px 22px -10px var(--tone-c);
}
.rg-cs__meter--cyan{ --tone-c: var(--rg-accent); }
.rg-cs__meter--red{  --tone-c: var(--rg-primary); }
.rg-cs__meter--gold{ --tone-c: #ffd166; }

.rg-cs__meter-head{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.rg-cs__meter-label{
    display:inline-flex; align-items:center; gap: 6px;
    font-size: 12px; letter-spacing: .1em;
    color: var(--rg-text-dim);
    text-transform: uppercase;
}
.rg-cs__meter-label i{ color: var(--tone-c); }
.rg-cs__meter-value{
    font-family: var(--rg-font-display);
    font-weight: 900; font-size: 18px;
    color: #fff;
    text-shadow: 0 0 12px var(--tone-c);
}
.rg-cs__meter-bar{
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
    position: relative;
}
.rg-cs__meter-fill{
    height: 100%;
    background: linear-gradient(90deg, var(--tone-c), rgba(255,255,255,.6));
    box-shadow: 0 0 14px var(--tone-c);
    border-radius: 999px;
    transition: width .8s ease;
    position: relative;
}
.rg-cs__meter-fill::after{
    /* moving sheen */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    animation: rg-cs-sheen 2.8s linear infinite;
}
@keyframes rg-cs-sheen{
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- Vault (Trial Money) ---- */
.rg-cs__vault{
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,209,102,.15), rgba(255,176,32,.02));
    border: 1px solid rgba(255,209,102,.45);
    box-shadow: 0 12px 28px -14px rgba(255,176,32,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.rg-cs__vault-icon{
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: radial-gradient(circle at 30% 30%, #fff3b8, #ffb020 55%, #8a5000);
    color: #3a1f00; font-size: 22px;
    box-shadow: 0 0 0 3px rgba(20,16,8,.85), 0 0 22px rgba(255,176,32,.5);
    flex-shrink: 0;
}
.rg-cs__vault-text{ display: flex; flex-direction: column; }
.rg-cs__vault-label{
    color: var(--rg-text-dim);
    font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase;
}
.rg-cs__vault-amount{
    font-family: var(--rg-font-display);
    font-size: 26px; font-weight: 900;
    color: #ffd166;
    text-shadow: 0 0 22px rgba(255,176,32,.55);
    line-height: 1;
    margin-top: 4px;
}
.rg-cs__vault-amount small{
    font-size: 13px;
    color: #fff;
    opacity: .75;
    font-weight: 700;
    letter-spacing: .14em;
    margin-left: 4px;
}

/* =========================================================================
   GUILDS + SCHEDULE TABLES
   ========================================================================= */
.rg-cs__guilds, .rg-cs__schedule{
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20,22,40,.78), rgba(10,10,22,.86));
    border: 1px solid var(--rg-border);
    box-shadow: var(--rg-shadow-card);
}
.rg-cs__table-wrap{
    border-radius: 12px;
    border: 1px solid var(--rg-border);
    overflow: hidden;
    background: rgba(8,9,18,.55);
}
.rg-cs__table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
.rg-cs__table thead th{
    font-family: var(--rg-font-display);
    font-size: 11px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--rg-text-dim);
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid var(--rg-border-strong);
    text-align: left;
}
.rg-cs__table thead th.text-center{ text-align: center; }
.rg-cs__th-mark{ width: 60px; }
.rg-cs__table tbody td{
    padding: 12px 14px;
    border-top: 1px solid var(--rg-border);
    color: var(--rg-text);
    font-size: 13px;
    vertical-align: middle;
}
.rg-cs__table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.018); }
.rg-cs__table tbody tr:hover td{ background: rgba(230,197,118,.05); }
.rg-cs__td-mark img{
    max-width: 30px; max-height: 30px;
    border-radius: 6px;
    background: #0a0a14;
    padding: 2px;
    border: 1px solid var(--rg-border-strong);
}
.rg-cs__td-name{ font-weight: 700; color: #fff; }
.rg-cs__td-name a{ color: #fff !important; }
.rg-cs__td-name a:hover{ color: var(--rg-accent) !important; }
.rg-cs__td-name i{ color: var(--rg-warning); margin-right: 6px; }
.rg-cs__td-score{
    font-family: var(--rg-font-display);
    color: var(--rg-success);
    font-weight: 900;
}

/* ---- Responsive ---- */
@media (max-width: 720px){
    .rg-cs__owner{ padding: 22px 16px; }
    .rg-cs__owner-inner{ flex-direction: column; text-align: center; }
    .rg-cs__owner-info{ text-align: center; }
    .rg-cs__owner-name{ font-size: 24px; }
    .rg-cs__timer{ font-size: 32px !important; }
    .rg-cs__info, .rg-cs__guilds, .rg-cs__schedule{ padding: 18px 14px; }
    .rg-cs__ally{ grid-template-columns: 32px 1fr; }
    .rg-cs__ally-master{ grid-column: 1 / -1; padding-left: 46px; }
    .rg-cs__table-wrap{ overflow-x: auto; }
}

/* =========================================================================
   AUTH PAGES  (modules/login.php, register.php, forgotpassword.php)
   ========================================================================= */
.rg-auth{
    max-width: 560px;
    margin: 22px auto 8px;
    padding: 28px 28px 26px;
    border-radius: 20px;
    background:
        radial-gradient(700px 220px at 50% -10%, rgba(230,197,118,.14), transparent 60%),
        linear-gradient(180deg, rgba(20,22,40,.85), rgba(10,10,22,.92));
    border: 1px solid var(--rg-border);
    box-shadow:
        var(--rg-shadow-card),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 36px -12px rgba(230,197,118,.32);
    position: relative;
    overflow: hidden;
}
.rg-auth::before{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--rg-accent), transparent);
}
.rg-auth--register::before{
    background: linear-gradient(90deg, transparent, var(--rg-primary), transparent);
}

/* Header */
.rg-auth__head{
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--rg-border);
}
.rg-auth__icon{
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(230,197,118,.22), rgba(51,112,208,.16));
    border: 1px solid rgba(230,197,118,.4);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 22px -10px rgba(230,197,118,.55);
    flex-shrink: 0;
}
.rg-auth--register .rg-auth__icon{
    background: linear-gradient(135deg, rgba(51,112,208,.22), rgba(255,176,32,.16));
    border-color: rgba(51,112,208,.45);
    box-shadow: 0 10px 22px -10px rgba(51,112,208,.6);
}
.rg-auth__pre{
    color: var(--rg-accent);
    font-family: var(--rg-font-ui);
    font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; font-size: 10px;
    display: block;
}
.rg-auth--register .rg-auth__pre{ color: var(--rg-primary-2); }
.rg-auth__title{
    font-family: var(--rg-font-display);
    margin: 2px 0 4px;
    font-size: 22px; font-weight: 900; letter-spacing: .08em;
    color: #fff; text-transform: uppercase;
}
.rg-auth__lead{
    color: var(--rg-text-dim);
    margin: 0;
    font-size: 13px;
}

/* Form (overrides Bootstrap 3 horizontal form inside .rg-auth) */
.rg-auth__form .form-group{
    margin-bottom: 16px;
}
.rg-auth__form .control-label{
    font-family: var(--rg-font-ui);
    font-weight: 700;
    color: var(--rg-text-dim) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 12px;
    padding-top: 12px;
}
.rg-auth__form .form-control{
    background: rgba(8,9,18,.65) !important;
    color: #fff !important;
    border: 1px solid var(--rg-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.rg-auth__form .form-control::placeholder{ color: var(--rg-text-mute); }
.rg-auth__form .form-control:focus{
    background: rgba(8,9,18,.85) !important;
    border-color: var(--rg-accent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 4px rgba(230,197,118,.18),
        0 0 18px -4px rgba(230,197,118,.4) !important;
    outline: 0 !important;
}
.rg-auth--register .rg-auth__form .form-control:focus{
    border-color: var(--rg-primary) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 4px rgba(51,112,208,.18),
        0 0 18px -4px rgba(51,112,208,.4) !important;
}
.rg-auth__form .help-block{
    color: var(--rg-text-mute) !important;
    font-size: 11px !important;
    margin-top: 6px !important;
    letter-spacing: .04em;
}
.rg-auth__form .help-block a{
    color: var(--rg-accent) !important;
    display: inline-flex; align-items: center; gap: 4px;
}
.rg-auth__form .help-block a:hover{ color: #fff !important; text-decoration: underline; }

/* TOS / fine-print line */
.rg-auth__form .form-group .col-sm-offset-4 a{ color: var(--rg-accent); }

/* Submit + alt link */
.rg-auth__actions{ margin-top: 4px !important; }
.rg-auth__submit{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    border: 0 !important;
    color: #fff !important;
    font-family: var(--rg-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 13px !important;
    background: linear-gradient(135deg, var(--rg-accent), #2bb4d9) !important;
    box-shadow: 0 12px 26px -10px rgba(230,197,118,.6) !important;
    transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important;
}
.rg-auth--register .rg-auth__submit{
    background: linear-gradient(135deg, var(--rg-primary), var(--rg-primary-2)) !important;
    box-shadow: 0 12px 26px -10px rgba(51,112,208,.6) !important;
}
.rg-auth__submit:hover, .rg-auth__submit:focus{
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff !important;
}
.rg-auth__submit i{ font-size: 14px; }

.rg-auth__alt{
    margin-top: 14px;
    color: var(--rg-text-dim);
    font-size: 13px;
}
.rg-auth__alt a{
    color: #fff !important;
    font-weight: 700;
    border-bottom: 1px solid var(--rg-accent);
    padding-bottom: 1px;
}
.rg-auth--register .rg-auth__alt a{ border-bottom-color: var(--rg-primary-2); }
.rg-auth__alt a:hover{ color: var(--rg-accent) !important; }
.rg-auth--register .rg-auth__alt a:hover{ color: var(--rg-primary-2) !important; }

/* reCAPTCHA — center it under the label column */
.rg-auth__form .g-recaptcha{ display: inline-block; }

/* Responsive */
@media (max-width: 720px){
    .rg-auth{ padding: 22px 18px 20px; margin: 14px auto 6px; }
    .rg-auth__title{ font-size: 18px; }
    .rg-auth__form .control-label{
        text-align: left !important;
        padding-top: 0 !important;
        margin-bottom: 6px;
    }
    .rg-auth__form .col-sm-4,
    .rg-auth__form .col-sm-8,
    .rg-auth__form .col-sm-offset-4{
        width: 100%;
        margin-left: 0 !important;
    }
}

/* Responsive — collapse to stacked cards on phones */
@media (max-width: 720px){
    .rg-sysreq{ padding: 18px 14px 22px; }
    .rg-sysreq__wrap{ border: 0; background: transparent; }
    .rg-sysreq__table thead{ display:none; }
    .rg-sysreq__table, .rg-sysreq__table tbody, .rg-sysreq__table tr, .rg-sysreq__table td{
        display: block; width: 100%;
    }
    .rg-sysreq__table tbody tr{
        margin-bottom: 12px;
        border: 1px solid var(--rg-border);
        border-radius: 12px;
        background: rgba(8,9,18,.55);
        overflow: hidden;
    }
    .rg-sysreq__table tbody td{
        border-top: 1px solid var(--rg-border);
        padding: 10px 14px;
    }
    .rg-sysreq__table tbody tr td:first-child{ border-top: 0; }
    .rg-sysreq__min::after,
    .rg-sysreq__rec::after{
        content: attr(data-tier);
    }
    .rg-sysreq__min{ display:flex; align-items:center; }
    .rg-sysreq__rec{ display:flex; align-items:center; }
    .rg-sysreq__min::after{
        content: "MIN";
        margin-left:auto;
        font-size: 10px; letter-spacing:.18em;
        color: var(--rg-warning);
        font-family: var(--rg-font-display);
    }
    .rg-sysreq__rec::after{
        content: "REC";
        margin-left:auto;
        font-size: 10px; letter-spacing:.18em;
        color: var(--rg-success);
        font-family: var(--rg-font-display);
    }
}

/* =========================================================================
   RANKINGS TABLES — mobile
   The module HTML has up to 8 cols and a broken gender <img> tag
   (class="emblem width="25" height="25"") so width/height never apply
   and the icon renders at native size, blowing out the row width.
   ========================================================================= */
.rankings-table .emblem{
    width: 22px !important; height: 22px !important;
    object-fit: contain; vertical-align: middle;
}

@media (max-width: 720px){
    /* Card breathing room shrinks so the table has room. */
    .rg-card.rg-card--solid{ padding-left: 12px; padding-right: 12px; }

    /* Horizontal scroll without breaking <tr>/<td> semantics. */
    .rankings-table{
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rankings-table tbody{
        display: table;
        width: 100%;
        min-width: 540px;     /* keeps cells from squashing to unreadable */
        border-collapse: separate;
        border-spacing: 0 6px;
    }
    .rankings-table tr td{
        padding: 9px 10px;
        font-size: 13px;
        white-space: nowrap;
    }
    .rankings-table tr:first-child td{
        font-size: 10px !important;
        letter-spacing: .14em;
        padding: 7px 10px;
    }
    .rankings-table-place{ font-size: 16px; }
    .rankings-class-image{ width: 28px !important; }
    .rankings-gens-img{ height: 22px !important; }
    .online-status-indicator{ width: 8px !important; height: 8px !important; margin-left: 4px; }

    /* Rankings tab strip — let it scroll horizontally instead of wrapping into 3 rows. */
    .rankings_menu{
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 4px;
    }
    .rankings_menu a{
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 11px;
        letter-spacing: .12em;
    }
    .rankings-update-time{ text-align: left; padding: 12px 2px; }
}

@media (max-width: 420px){
    .rankings-table tbody{ min-width: 460px; }
    .rankings-table tr td{ padding: 8px 8px; font-size: 12px; }
    .rankings-table-place{ font-size: 14px; }
    .rankings-class-image{ width: 24px !important; }
    .rankings-table .emblem{ width: 18px !important; height: 18px !important; }
}

/* =========================================================================
   USERCP · MYACCOUNT — character cards
   Replaces the legacy Bootstrap table with a responsive card grid.
   ========================================================================= */
.rg-charlist{ margin: 10px 0 26px; }
.rg-charlist__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.rg-charcard{
    position: relative;
    padding: 14px 16px 14px;
    border-radius: 14px;
    background:
        radial-gradient(140% 80% at 0% 0%, rgba(230,197,118,.10), transparent 55%),
        linear-gradient(180deg, rgba(20,22,40,.92), rgba(10,11,22,.94));
    border: 1px solid var(--rg-border-strong);
    box-shadow: 0 16px 32px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rg-charcard::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent));
    opacity: .85;
}
.rg-charcard:hover{
    transform: translateY(-2px);
    border-color: var(--rg-accent);
    box-shadow: 0 22px 44px -22px rgba(230,197,118,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.rg-charcard__top{
    display:flex; align-items:center; justify-content:space-between;
    gap: 12px; margin-bottom: 12px;
}
.rg-charcard__name{
    font-family: var(--rg-font-display);
    font-size: 18px; font-weight: 800;
    letter-spacing: .04em;
    color: #fff !important;
    text-decoration: none;
    text-shadow: 0 0 14px rgba(230,197,118,.35);
    word-break: break-word;
    flex: 1 1 auto; min-width: 0;
}
.rg-charcard__name:hover{ color: var(--rg-accent) !important; }
.rg-charcard__lvl{
    flex: 0 0 auto;
    display:inline-flex; align-items:baseline; gap:6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,176,32,.18), rgba(51,112,208,.18));
    border: 1px solid rgba(255,176,32,.45);
    box-shadow: 0 0 14px -4px rgba(255,176,32,.45) inset;
}
.rg-charcard__lvl span{
    font-family: var(--rg-font-ui);
    font-size: 10px; letter-spacing: .18em;
    color: var(--rg-warning);
    text-transform: uppercase;
}
.rg-charcard__lvl b{
    font-family: var(--rg-font-display);
    font-size: 16px; font-weight: 900;
    color: #ffd9a0;
    line-height: 1;
}
.rg-charcard__stats{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin: 0;
}
.rg-charcard__stat{ display:flex; flex-direction:column; gap:2px; min-width: 0; }
.rg-charcard__stat--kd{ grid-column: 1 / -1; }
.rg-charcard__stat dt{
    font-family: var(--rg-font-ui);
    font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rg-text-mute);
    margin: 0;
}
.rg-charcard__stat dd{
    margin: 0;
    font-family: var(--rg-font-display);
    font-size: 15px; font-weight: 800;
    color: #f4f6ff;
    overflow-wrap: anywhere;
}
.rg-charcard__stat--kd dd span{
    color: var(--rg-accent);
    font-weight: 700;
    font-size: 13px;
    margin-left: 4px;
}

@media (max-width: 480px){
    .rg-charlist__grid{ grid-template-columns: 1fr; gap: 12px; }
    .rg-charcard{ padding: 12px 14px; }
    .rg-charcard__name{ font-size: 16px; }
    .rg-charcard__lvl b{ font-size: 14px; }
    .rg-charcard__stat dd{ font-size: 14px; }
}

/* =========================================================================
   Legacy fallback — old Bootstrap character table styling (kept in case
   another module renders the same .table.table-bordered combo).
   ========================================================================= */
.rg-card .table.table-bordered{
    width: 100%;
    background: linear-gradient(180deg, rgba(14,16,30,.92), rgba(8,10,20,.92)) !important;
    border: 1px solid var(--rg-border-strong) !important;
    border-radius: 12px;
    overflow: hidden;
    margin: 14px 0 22px;
    color: var(--rg-text);
    box-shadow: 0 18px 36px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
.rg-card .table.table-bordered > tbody > tr > td,
.rg-card .table.table-bordered > thead > tr > td{
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rg-border) !important;
    background: transparent !important;
    color: #f4f6ff;
    font-weight: 600;
    vertical-align: middle !important;
}
.rg-card .table.table-bordered > tbody > tr:last-child > td{ border-bottom: 0 !important; }
.rg-card .table.table-bordered > tbody > tr:first-child > td{
    color: var(--rg-accent) !important;
    font-family: var(--rg-font-ui);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    background-color: #0d1124 !important;
    background-image: linear-gradient(180deg, rgba(230,197,118,.18), rgba(230,197,118,.06)) !important;
    border-bottom: 1px solid var(--rg-border-strong) !important;
    text-shadow: 0 0 12px rgba(230,197,118,.25);
}
.rg-card .table.table-bordered > tbody > tr:nth-child(2n+3) > td{
    background: rgba(255,255,255,.04) !important;
}
.rg-card .table.table-bordered > tbody > tr:hover > td{
    background: rgba(230,197,118,.10) !important;
}
/* Kill Bootstrap's .table-striped / .table-hover white backgrounds explicitly. */
.rg-card .table.table-striped > tbody > tr > td,
.rg-card .table.table-striped > tbody > tr:nth-of-type(odd) > td,
.rg-card .table.table-striped > tbody > tr:nth-of-type(even) > td{
    background-color: transparent !important;
}
.rg-card .table.table-hover > tbody > tr:hover > td,
.rg-card .table.table-hover > tbody > tr:hover > th{
    background-color: rgba(230,197,118,.10) !important;
}
.rg-card .table.table-bordered a{
    color: var(--rg-accent);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(230,197,118,.35);
}
.rg-card .table.table-bordered a:hover{
    color: var(--rg-primary-2);
    text-shadow: 0 0 14px rgba(51,112,208,.4);
}

/* Mobile — horizontal scroll so the 5 character columns stay readable. */
@media (max-width: 720px){
    .rg-card .table.table-bordered{
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rg-card .table.table-bordered > tbody{
        display: table;
        width: 100%;
        min-width: 480px;
    }
    .rg-card .table.table-bordered > tbody > tr > td{
        padding: 10px 10px !important;
        font-size: 13px;
        white-space: nowrap;
    }
    .rg-card .table.table-bordered > tbody > tr:first-child > td{
        font-size: 10px !important;
        padding: 8px 10px !important;
        letter-spacing: .14em;
    }

    /* myaccount key/value table — let buttons sit under the value instead of overflowing. */
    .myaccount-table td .btn{
        float: none !important;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
    }
    .myaccount-table td{
        word-break: break-word;
    }
}

@media (max-width: 420px){
    .rg-card .table.table-bordered > tbody{ min-width: 420px; }
    .rg-card .table.table-bordered > tbody > tr > td{ padding: 9px 8px !important; font-size: 12px; }
}