/* ============================================================
   Reunited Roleplay — APP SHELL  (rr-shell.css)
   Add as a NEW stylesheet, attached to: (blank = all pages)
   Order it LAST so it overrides global.css / css3.css.
   ============================================================ */

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap);

:root{
    --rr-bg:        #0f1114;
    --rr-rail:      #15181e;
    --rr-topbar:    #15181e;
    --rr-surface:   #1b1f26;
    --rr-surface-2: #20242c;
    --rr-border:    #282d36;
    --rr-text:      #e6e8ec;
    --rr-muted:     #8b929e;
    --rr-dim:       #5b626d;
    --rr-gold:      #ffae00;
    --rr-gold-soft: rgba(255,174,0,.12);
}

/* kill the old min-width / centering */
#container{ min-width:0 !important; }
body{
    background:var(--rr-bg) !important;
    color:var(--rr-text);
    font-family:"Inter","Open Sans",Arial,sans-serif;
}

/* hide the legacy logo banner + old panel if they still render */
#logo, #header, #footer .upper { display:none !important; }

/* ══════════════════════════════ SHELL ══════════════════════════════ */
.rr-shell{
    display:flex;
    min-height:100vh;
    background:var(--rr-bg);
}

/* ── LEFT RAIL ───────────────────────────────────────────── */
.rr-rail{
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    width:74px;
    flex:0 0 74px;
    background:var(--rr-rail);
    border-right:1px solid var(--rr-border);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 0;
    z-index:50;
}

.rr-rail-brand{
    width:40px; height:40px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--rr-gold),#ff8a00);
    color:#141618;
    font-weight:800;
    font-size:20px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:26px;
    box-shadow:0 4px 14px rgba(255,174,0,.3);
}

.rr-rail-nav{ display:flex; flex-direction:column; gap:6px; width:100%; align-items:center; }

.rr-rail-link{
    position:relative;
    width:46px; height:46px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    color:var(--rr-muted) !important;
    font-size:19px;
    transition:all .15s ease;
}
.rr-rail-link:hover{
    background:var(--rr-surface);
    color:var(--rr-text) !important;
}
.rr-rail-link.active{
    background:var(--rr-gold-soft);
    color:var(--rr-gold) !important;
}
.rr-rail-link.active::before{
    content:"";
    position:absolute;
    left:-18px; top:50%;
    transform:translateY(-50%);
    width:3px; height:22px;
    border-radius:0 3px 3px 0;
    background:var(--rr-gold);
}

.rr-rail-sep{ width:34px; height:1px; background:var(--rr-border); margin:14px 0; }
.rr-rail-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:6px; align-items:center; }

/* ── MAIN COLUMN ─────────────────────────────────────────── */
.rr-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ── TOP BAR ─────────────────────────────────────────────── */
.rr-topbar{
    position:sticky; top:0; z-index:40;
    height:64px;
    display:flex; align-items:center;
    gap:18px;
    padding:0 26px;
    background:var(--rr-topbar);
    border-bottom:1px solid var(--rr-border);
}
.rr-topbar-left{ display:flex; align-items:center; gap:16px; flex:1 1 auto; min-width:0; }

.rr-menu-toggle{
    color:var(--rr-muted) !important;
    font-size:18px;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    transition:all .15s ease;
}
.rr-menu-toggle:hover{ background:var(--rr-surface); color:var(--rr-text) !important; }

.rr-search{
    display:flex; align-items:center; gap:10px;
    background:var(--rr-bg);
    border:1px solid var(--rr-border);
    border-radius:10px;
    padding:0 14px;
    height:40px;
    max-width:420px; width:100%;
    transition:border-color .15s ease;
}
.rr-search:focus-within{ border-color:var(--rr-gold); box-shadow:0 0 0 3px var(--rr-gold-soft); }
.rr-search i{ color:var(--rr-dim); font-size:14px; }
.rr-search-input{
    border:0 !important; outline:0 !important;
    background:transparent !important;
    color:var(--rr-text) !important;
    font-size:13px; width:100%;
    font-family:inherit;
}
.rr-search-input::placeholder{ color:var(--rr-dim); }

.rr-topbar-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

.rr-icon-btn{
    position:relative;
    width:40px; height:40px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:var(--rr-muted) !important;
    font-size:16px;
    border:1px solid var(--rr-border);
    background:var(--rr-bg);
    transition:all .15s ease;
}
.rr-icon-btn:hover{ color:var(--rr-gold) !important; border-color:var(--rr-gold); }

.rr-badge{
    position:absolute; top:-5px; right:-5px;
    min-width:17px; height:17px; padding:0 4px;
    border-radius:9px;
    background:var(--rr-gold);
    color:#141618;
    font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--rr-topbar);
}

.rr-user-chip{
    display:flex; align-items:center; gap:9px;
    padding:5px 12px 5px 6px;
    border-radius:10px;
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    color:var(--rr-text) !important;
    font-size:13px; font-weight:600;
    transition:border-color .15s ease;
}
.rr-user-chip:hover{ border-color:var(--rr-gold); }
.rr-user-avatar{
    width:28px; height:28px; border-radius:8px;
    background:linear-gradient(135deg,var(--rr-gold),#ff8a00);
    color:#141618; font-weight:800; font-size:13px;
    display:flex; align-items:center; justify-content:center;
}
.rr-user-chip i{ color:var(--rr-dim); font-size:11px; }

.rr-btn-ghost,
.rr-btn-gold{
    display:inline-flex; align-items:center; justify-content:center;
    height:38px; padding:0 18px;
    border-radius:10px;
    font-size:13px; font-weight:600;
    transition:all .15s ease;
}
.rr-btn-ghost{
    color:var(--rr-text) !important;
    border:1px solid var(--rr-border);
    background:transparent;
}
.rr-btn-ghost:hover{ border-color:var(--rr-gold); color:var(--rr-gold) !important; }
.rr-btn-gold{
    color:#141618 !important;
    background:var(--rr-gold);
    border:1px solid var(--rr-gold);
}
.rr-btn-gold:hover{ background:#ffc233; color:#141618 !important; }

/* ── CONTENT AREA ────────────────────────────────────────── */
.rr-content{ padding:26px; flex:1 1 auto; }

/* breadcrumb */
.navigation{
    background:transparent !important;
    border:0 !important;
    height:auto !important; line-height:1.4 !important;
    padding:0 2px 18px !important;
    margin:0 !important;
    font-size:13px !important;
    color:var(--rr-dim) !important;
}
.navigation a{ color:var(--rr-muted) !important; }
.navigation a:hover{ color:var(--rr-gold) !important; }
.navigation .active{ color:var(--rr-text) !important; font-weight:600 !important; }

/* ══════════════════════════════ INDEX GRID ══════════════════════════════ */
.rr-index-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:22px;
    align-items:start;
}
.rr-index-main{ min-width:0; }
.rr-index-side{ display:flex; flex-direction:column; gap:18px; }

/* ── HERO BANNER ─────────────────────────────────────────── */
.rr-hero{
    position:relative;
    display:flex; align-items:center;
    gap:24px;
    background:linear-gradient(135deg,#1c2129 0%,#161a20 100%);
    border:1px solid var(--rr-border);
    border-radius:16px;
    padding:34px 36px;
    margin-bottom:24px;
    overflow:hidden;
}
.rr-hero::after{
    content:"";
    position:absolute; right:-40px; top:-40px;
    width:240px; height:240px;
    background:radial-gradient(circle,var(--rr-gold-soft) 0%,transparent 70%);
    pointer-events:none;
}
.rr-hero-text{ flex:1 1 auto; position:relative; z-index:1; }
.rr-hero-text h1{
    font-size:30px; font-weight:800; line-height:1.18;
    color:#fff; margin:0 0 12px;
    letter-spacing:-.5px;
}
.rr-hero-text p{
    color:var(--rr-muted); font-size:14px;
    max-width:480px; margin:0 0 20px; line-height:1.6;
}
.rr-hero-actions{ display:flex; align-items:center; gap:12px; }
.rr-hero-art{ flex:0 0 auto; position:relative; z-index:1; }
.rr-hero-art i{
    font-size:90px;
    color:var(--rr-gold);
    opacity:.9;
    filter:drop-shadow(0 8px 20px rgba(255,174,0,.25));
}

/* ── SECTION HEADER (Community Forums) ───────────────────── */
.rr-section-head{
    display:flex; align-items:center; gap:10px;
    margin:6px 0 16px;
}
.rr-section-head i{ color:var(--rr-gold); font-size:16px; }
.rr-section-head h2{
    font-size:17px; font-weight:700; color:var(--rr-text); margin:0;
}

/* ══════════════════════════════ FORUM CARDS ══════════════════════════════ */
.rr-cat{ margin-bottom:26px; }
.rr-cat-head{
    display:flex; align-items:center; gap:10px;
    margin-bottom:12px;
}
.rr-cat-head i{ color:var(--rr-gold); font-size:15px; }
.rr-cat-title{ font-size:16px; font-weight:700; color:var(--rr-text); }
.rr-cat-title a{ color:var(--rr-text) !important; }
.rr-cat-title a:hover{ color:var(--rr-gold) !important; }
.rr-cat-desc{ color:var(--rr-dim); font-size:12px; margin-left:auto; }
.rr-cat-body{ display:flex; flex-direction:column; gap:10px; }

.rr-forum{
    display:flex; align-items:center;
    gap:16px;
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:12px;
    padding:16px 20px;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.rr-forum:hover{
    background:var(--rr-surface-2);
    border-color:rgba(255,174,0,.3);
}

.rr-forum-icon{
    flex:0 0 auto;
    width:44px; height:44px;
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff;
    background:var(--rr-gold);
}
/* cycle badge hues across forums for the reference look */
.rr-cat-body .rr-forum:nth-child(5n+1) .rr-forum-icon{ background:#4f8ef7; }
.rr-cat-body .rr-forum:nth-child(5n+2) .rr-forum-icon{ background:#46c46a; }
.rr-cat-body .rr-forum:nth-child(5n+3) .rr-forum-icon{ background:#9b6cf0; }
.rr-cat-body .rr-forum:nth-child(5n+4) .rr-forum-icon{ background:#f7894f; }
.rr-cat-body .rr-forum:nth-child(5n+5) .rr-forum-icon{ background:var(--rr-gold); }
.rr-forum.rr-forum-off .rr-forum-icon{ background:#2c323c; color:var(--rr-dim); }

.rr-forum-info{ flex:1 1 auto; min-width:0; }
.rr-forum-name{
    display:block;
    font-size:14px; font-weight:600;
    color:var(--rr-text) !important;
    margin-bottom:3px;
}
.rr-forum-name:hover{ color:var(--rr-gold) !important; }
.rr-forum-sub{ font-size:12px; color:var(--rr-dim); line-height:1.5; }
.rr-forum-sub a{ color:var(--rr-muted) !important; }
.rr-forum-sub a:hover{ color:var(--rr-gold) !important; }

.rr-forum-stat{
    flex:0 0 auto;
    text-align:center;
    min-width:62px;
}
.rr-forum-stat .rr-stat-num{
    display:block;
    font-size:14px; font-weight:700; color:var(--rr-text);
    font-variant-numeric:tabular-nums;
}
.rr-forum-stat .rr-stat-label{
    display:block;
    font-size:11px; color:var(--rr-dim);
    text-transform:uppercase; letter-spacing:.4px;
    margin-top:1px;
}
.rr-forum-last{
    flex:0 0 auto;
    width:180px;
    font-size:12px; color:var(--rr-muted);
    line-height:1.5;
    text-align:right;
}
.rr-forum-last a{ color:var(--rr-text) !important; font-weight:600; }
.rr-forum-last a:hover{ color:var(--rr-gold) !important; }
.rr-forum-last .smalltext{ color:var(--rr-muted) !important; }

/* ══════════════════════════════ STAT CARDS ══════════════════════════════ */
.rr-stats-head{ display:flex; align-items:center; gap:9px; margin:30px 0 14px; }
.rr-stats-head i{ color:var(--rr-gold); font-size:15px; }
.rr-stats-head h3{ font-size:15px; font-weight:700; color:var(--rr-text); margin:0; }

.rr-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}
.rr-stat-card{
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:14px;
    padding:18px;
}
.rr-stat-ico{
    width:40px; height:40px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; color:#fff; margin-bottom:14px;
}
.rr-stat-card:nth-child(1) .rr-stat-ico{ background:#46c46a; }
.rr-stat-card:nth-child(2) .rr-stat-ico{ background:#f7894f; }
.rr-stat-card:nth-child(3) .rr-stat-ico{ background:#4f8ef7; }
.rr-stat-card:nth-child(4) .rr-stat-ico{ background:#9b6cf0; }
.rr-stat-title{ font-size:14px; font-weight:700; color:var(--rr-text); }
.rr-stat-sub{ font-size:12px; color:var(--rr-dim); margin:2px 0 14px; }
.rr-stat-bar{
    height:6px; border-radius:6px;
    background:var(--rr-bg);
    overflow:hidden;
    display:flex; align-items:center;
    position:relative;
}
.rr-stat-bar span{
    display:block; height:100%;
    border-radius:6px;
}
.rr-stat-card:nth-child(1) .rr-stat-bar span{ background:#46c46a; }
.rr-stat-card:nth-child(2) .rr-stat-bar span{ background:#f7894f; }
.rr-stat-card:nth-child(3) .rr-stat-bar span{ background:#4f8ef7; }
.rr-stat-card:nth-child(4) .rr-stat-bar span{ background:#9b6cf0; }
.rr-stat-val{
    font-size:12px; font-weight:700; color:var(--rr-muted);
    margin-top:8px; text-align:right;
    font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════ SIDEBAR WIDGETS ══════════════════════════════ */
.rr-widget{
    background:var(--rr-surface);
    border:1px solid var(--rr-border);
    border-radius:14px;
    overflow:hidden;
}
.rr-widget-head{
    display:flex; align-items:center; gap:9px;
    padding:15px 18px;
    border-bottom:1px solid var(--rr-border);
}
.rr-widget-head i{ color:var(--rr-gold); font-size:14px; }
.rr-widget-head h3{ font-size:14px; font-weight:700; color:var(--rr-text); margin:0; }
.rr-widget-body{ padding:8px 8px; }

.rr-wrow{
    display:flex; align-items:center; gap:12px;
    padding:9px 10px;
    border-radius:10px;
    transition:background .12s ease;
}
.rr-wrow:hover{ background:var(--rr-bg); }
.rr-wrow-ava{
    flex:0 0 auto;
    width:34px; height:34px; border-radius:9px;
    background:var(--rr-surface-2);
    border:1px solid var(--rr-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--rr-muted); font-size:13px;
}
.rr-wrow-main{ flex:1 1 auto; min-width:0; }
.rr-wrow-title{
    font-size:13px; font-weight:600; color:var(--rr-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rr-wrow-title a{ color:var(--rr-text) !important; }
.rr-wrow-title a:hover{ color:var(--rr-gold) !important; }
.rr-wrow-sub{
    font-size:12px; color:var(--rr-dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rr-wrow-sub a{ color:var(--rr-muted) !important; }
.rr-online-dot{
    flex:0 0 auto;
    width:8px; height:8px; border-radius:50%;
    background:#46c46a; box-shadow:0 0 6px #46c46a;
}

/* board stats fallback styling (if {$boardstats} kept) */
.rr-index-side .tborder{ border-radius:14px; }

/* ══════════════════════════════ FOOTER ══════════════════════════════ */
.rr-footer{
    border-top:1px solid var(--rr-border);
    padding:20px 26px;
    display:flex; align-items:center; justify-content:space-between;
    color:var(--rr-dim); font-size:12px;
}
.rr-footer a{ color:var(--rr-muted) !important; }
.rr-footer a:hover{ color:var(--rr-gold) !important; }

/* back to top */
#backtop{ background:var(--rr-gold) !important; color:#141618 !important; }

/* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */
@media (max-width:1180px){
    .rr-index-grid{ grid-template-columns:1fr; }
    .rr-index-side{ flex-direction:row; flex-wrap:wrap; }
    .rr-index-side > *{ flex:1 1 280px; }
    .rr-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
    .rr-rail{ width:60px; flex-basis:60px; }
    .rr-content{ padding:16px; }
    .rr-forum-last{ display:none; }
    .rr-hero-art{ display:none; }
    .rr-hero-text h1{ font-size:23px; }
    .rr-search{ max-width:none; }
    .rr-user-chip span{ display:none; }
}