/* =========================================================================
   RealGunz · style.css  (2026 redesign)
   Dark / neon / glassmorphism shell built on top of Bootstrap 3.
   The original WebEngine CMS module markup is preserved by override.css.
   ========================================================================= */

:root{
    /* Palette — Israel-inspired: deep navy base, royal blue, Jerusalem gold,
       silver-white. Blue is the spine but gold/white break the monotony. */
    --rg-bg-0: #02050c;
    --rg-bg-1: #05091a;
    --rg-bg-2: #08142a;
    --rg-surface: rgba(8, 18, 40, 0.82);
    --rg-surface-2: rgba(12, 26, 56, 0.72);
    --rg-surface-solid: #08142a;
    --rg-border: rgba(160,180,210,0.10);
    --rg-border-strong: rgba(160,180,210,0.22);

    --rg-text: #e3eaf5;
    --rg-text-dim: #94a4c2;
    --rg-text-mute: #5d7196;

    --rg-primary:    #1c4ea0;     /* Israeli flag blue (balanced, vivid) */
    --rg-primary-2:  #3370d0;     /* lighter sapphire — gradient partner */
    --rg-accent:     #e6c576;     /* warm Jerusalem gold (the "break") */
    --rg-accent-2:   #f4f7fb;     /* near-white silver (flag white) */
    --rg-accent-3:   #6fa3d8;     /* soft sky blue — secondary cool tone */
    --rg-warning:    #ffb020;     /* kept for gold-tier ranks */
    --rg-danger:     #d9534f;
    --rg-success:    #4ec07a;

    --rg-shadow-card: 0 30px 60px -25px rgba(0,0,0,.75), 0 8px 24px -8px rgba(0,0,0,.6);
    --rg-shadow-glow: 0 0 28px rgba(51,112,208,.40);
    --rg-shadow-warm: 0 0 24px rgba(230,197,118,.35);
    --rg-radius: 14px;
    --rg-radius-sm: 8px;
    --rg-radius-lg: 22px;

    --rg-font-display: 'Orbitron','Rajdhani',system-ui,sans-serif;
    --rg-font-ui:      'Rajdhani','Inter',system-ui,sans-serif;
    --rg-font-body:    'Inter',system-ui,'Segoe UI',sans-serif;
    --rg-font-mono:    'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* -------- base -------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ min-width:0; height:100%; -webkit-text-size-adjust:100%; background:#03060f; }
body{
    background: transparent;
    color: var(--rg-text);
    font-family: var(--rg-font-body);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: contain;        /* no rubber-band repaint on iOS */
    -webkit-overflow-scrolling: touch;
}
/* Fixed background via pseudo-element — iOS Safari ignores background-attachment:fixed.
   translateZ(0) + will-change promotes this to its own GPU layer so the compositor
   shifts it during scroll instead of repainting the gradients/image each frame. */
body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 70% -10%, rgba(28,78,160,.18) 0%, transparent 60%),
        radial-gradient(900px 600px at -10% 50%, rgba(10,30,72,.22) 0%, transparent 55%),
        linear-gradient(180deg, rgba(3,9,22,.55) 0%, rgba(6,16,40,.70) 60%, rgba(2,6,16,.88) 100%),
        url("/img/background.png") center center / cover no-repeat #03060f;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}
@media (max-width: 640px) and (orientation: portrait){
    body::before{ background-position: center top, center top, center top, center top; }
}

a{ color: var(--rg-accent); text-decoration:none; transition: color .2s ease, opacity .2s ease; }
a:hover{ color: var(--rg-primary-2); }
img{ border:0; max-width:100%; }
hr{ border:0; border-top:1px solid var(--rg-border); margin:20px 0; }

::selection{ background: var(--rg-primary); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: #07070d; }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #28304c, #1a1f33); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, #3a4470, #232a47); }

/* -------- container -------- */
.rg-container{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* -------- animated background -------- */
.rg-bg{
    position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
    contain: layout paint style;
}
/* Background video (optional — drop a file at templates/default/video/bg.mp4) */
/* Legacy class kept hidden — the video now lives inside .rg-hero as .rg-hero__video */
.rg-bg-video{ display: none !important; }
/* Darkening veil so foreground text stays readable on top of video */
.rg-bg-veil{
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(6,6,12,.30) 0%, rgba(6,6,12,.55) 70%, rgba(3,3,10,.78) 100%),
        radial-gradient(1000px 600px at 70% 0%, rgba(51,112,208,.14), transparent 60%),
        radial-gradient(900px 600px at 0% 100%, rgba(230,197,118,.10), transparent 60%);
}
/* When a video plays, soften the other overlays so the footage shows through */
.rg-bg-video ~ .rg-bg-noise{ opacity: .02; }
.rg-bg-video ~ .rg-bg-grid{  opacity: .35; }
.rg-bg-video ~ .rg-bg-glow{  opacity: .25; mix-blend-mode: screen; }
.rg-bg-grid{
    position: absolute; inset: -50%;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    /* Use translate3d so the animation runs on the GPU compositor instead of
       repainting background-position every frame (the original kept it on CPU). */
    transform: perspective(800px) rotateX(60deg) translateY(-10%) translateZ(0);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    opacity:.55;
    animation: rg-grid-move 30s linear infinite;
    will-change: transform;
}
@keyframes rg-grid-move{
    0%   { transform: perspective(800px) rotateX(60deg) translateY(-10%)     translateZ(0); }
    100% { transform: perspective(800px) rotateX(60deg) translateY(calc(-10% + 56px)) translateZ(0); }
}
.rg-bg-glow{
    position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
    filter: blur(120px); opacity: .45; mix-blend-mode: screen;
    animation: rg-float 18s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateZ(0);
}
.rg-bg-glow--a{ background: radial-gradient(circle, #1c4ea0 0%, transparent 60%); top: -20%; left: -10%; }
.rg-bg-glow--b{ background: radial-gradient(circle, #e6c576 0%, transparent 60%); bottom: -25%; right: -15%; animation-duration: 22s; }
.rg-bg-glow--c{ background: radial-gradient(circle, #6fa3d8 0%, transparent 60%); top: 30%; right: 30%; opacity:.30; animation-duration: 28s; }
@keyframes rg-float{
    0%   { transform: translate(0,0)   scale(1); }
    100% { transform: translate(40px,-30px) scale(1.08); }
}
.rg-bg-noise{
    position: absolute; inset: 0; opacity:.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>");
}

/* -------- top bar -------- */
.rg-topbar{
    border-bottom: 1px solid var(--rg-border);
    background: rgba(6,6,12,.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--rg-font-ui);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.rg-topbar__inner{
    display:flex; justify-content:space-between; align-items:center;
    padding-top: 8px; padding-bottom: 8px;
    min-height: 38px;
}
.rg-topbar__left, .rg-topbar__right{ display:flex; align-items:center; gap:14px; }
.rg-topbar__link{
    color: var(--rg-text-dim);
    display:inline-flex; align-items:center; gap:6px;
    padding: 4px 8px; border-radius: 6px;
    transition: color .2s ease, background .2s ease;
}
.rg-topbar__link:hover{ color: var(--rg-text); background: rgba(255,255,255,.04); }
.rg-topbar__link--cta{
    color: #fff;
    background: linear-gradient(135deg, var(--rg-primary), var(--rg-primary-2));
    box-shadow: var(--rg-shadow-glow);
}
.rg-topbar__link--cta:hover{ color:#fff; filter: brightness(1.1); }
.rg-topbar__link--logout{ color: var(--rg-danger); }
.rg-topbar__link--admin{
    color: #0a0010 !important;
    background: linear-gradient(135deg, var(--rg-warning), #3370d0);
    font-weight: 800;
    box-shadow: 0 6px 16px -6px rgba(255,176,32,.55);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.rg-topbar__link--admin:hover{ color: #0a0010 !important; filter: brightness(1.08); transform: translateY(-1px); }

/* Floating Admin FAB */
.rg-admin-fab{
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 20px 14px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rg-warning), #3370d0 55%, var(--rg-primary));
    color: #0a0010 !important;
    font-family: var(--rg-font-ui);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow:
        0 18px 36px -10px rgba(51,112,208,.55),
        0 8px 20px -8px rgba(255,176,32,.55),
        inset 0 0 0 1px rgba(255,255,255,.25);
    transition: transform .2s ease, filter .2s ease, box-shadow .25s ease;
}
.rg-admin-fab:hover{
    color: #0a0010 !important;
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.08);
}
.rg-admin-fab:active{ transform: translateY(0) scale(.99); }
.rg-admin-fab i{ font-size: 16px; }
.rg-admin-fab::before{
    content:"";
    position:absolute; inset:-4px;
    border-radius:inherit;
    background: linear-gradient(135deg, rgba(255,176,32,.45), rgba(51,112,208,.45));
    filter: blur(14px);
    opacity:.6;
    z-index: -1;
    animation: rg-fab-pulse 2.4s ease-in-out infinite;
}
@keyframes rg-fab-pulse{
    0%,100% { opacity:.55; transform: scale(1); }
    50%     { opacity:.9;  transform: scale(1.04); }
}
@media (max-width: 720px){
    .rg-admin-fab{ right: 16px; bottom: 16px; padding: 12px 16px; }
    .rg-admin-fab__label{ display: none; }   /* icon-only on phones */
}
.rg-topbar__sep{ width:1px; height:14px; background: var(--rg-border-strong); display:inline-block; }

/* Language switcher — segmented toggle (EN | HE). Active item paints itself,
   no sliding indicator (avoids :has() compat issues on older mobile browsers). */
.webengine-language-switcher{
    display: inline-flex; align-items: stretch;
    list-style: none;
    padding: 3px !important; margin: 0 !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(10,12,24,.85), rgba(6,7,16,.85));
    border: 1px solid var(--rg-border-strong);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 20px -12px rgba(0,0,0,.6);
    gap: 2px;
}
.webengine-language-switcher li{
    display: inline-flex;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 999px;
    transition: background .25s ease;
}
.webengine-language-switcher li a{
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--rg-text-dim) !important;
    font-family: var(--rg-font-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}
.webengine-language-switcher li.is-active{
    background: linear-gradient(135deg, var(--rg-primary), var(--rg-accent)) !important;
    box-shadow: 0 4px 14px -6px rgba(230,197,118,.55), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
.webengine-language-switcher li.is-active a{
    color: #0a0010 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.webengine-language-switcher li:not(.is-active):hover{ background: rgba(255,255,255,.06) !important; }
.webengine-language-switcher li:not(.is-active) a:hover{ color: #fff !important; }
.webengine-language-switcher li img{
    height: 13px; width: auto; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
    filter: saturate(1.1);
}
/* Hebrew labels mustn't be letter-spaced. */
html[dir="rtl"] .webengine-language-switcher li a{ letter-spacing: .04em; }

/* Mobile — tighter and never overflowing the topbar. */
@media (max-width: 720px){
    .webengine-language-switcher{ padding: 2px !important; }
    .webengine-language-switcher li a{ padding: 5px 10px; font-size: 11px; letter-spacing: .14em; }
    .webengine-language-switcher li img{ height: 11px; }
}

/* -------- primary nav -------- */
.rg-nav{
    position: sticky; top: 0; z-index: 50;
    background: rgba(6,6,12,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rg-border);
}
.rg-nav__inner{
    display: flex; align-items: center; justify-content: space-between;
    min-height: 72px; gap: 24px;
}

/* Brand */
.rg-brand{ display:inline-flex; align-items:center; gap:14px; }
.rg-brand:hover{ color: inherit; }
.rg-brand__mark{
    width: 46px; height: 46px; border-radius: 12px;
    display:inline-flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--rg-primary), #3370d0 70%, var(--rg-warning));
    color: #1a0006; font-size: 22px;
    box-shadow: 0 10px 22px -8px rgba(51,112,208,.55), inset 0 0 0 1px rgba(255,255,255,.18);
    overflow: hidden;
}
/* Image variant — naked favicon, no card behind it. */
.rg-brand__mark--img{
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    width: 44px; height: 44px;
}
.rg-brand__mark--img img{
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
    image-rendering: -webkit-optimize-contrast;
}
.rg-brand__text{ display:flex; flex-direction:column; line-height: 1; }
.rg-brand__name{
    font-family: var(--rg-font-display);
    font-weight: 900;
    letter-spacing: .12em;
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(51,112,208,.4);
}
.rg-brand__tag{
    font-family: var(--rg-font-ui);
    font-weight: 600;
    letter-spacing: .35em;
    color: var(--rg-accent);
    font-size: 10px;
    margin-top: 4px;
}

/* Nav menu (built by templateBuildNavbar => ul/li/a) */
.rg-nav__menu{ flex:1; display:flex; justify-content:center; }
.rg-nav__menu ul{
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center; gap: 4px;
    flex-wrap: wrap;
}
.rg-nav__menu ul li{ display:inline-flex; }
.rg-nav__menu ul li a{
    display:inline-flex; align-items:center;
    font-family: var(--rg-font-ui);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rg-text-dim) !important;
    padding: 12px 18px;
    border-radius: 10px;
    position: relative;
    transition: color .2s ease, background .2s ease;
}
.rg-nav__menu ul li a::after{
    content:''; position:absolute; left:18px; right:18px; bottom:6px;
    height:2px; background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent));
    border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .25s ease;
}
.rg-nav__menu ul li a:hover,
.rg-nav__menu ul li a:focus{
    color: #fff !important;
    background: rgba(255,255,255,.04);
}
.rg-nav__menu ul li a:hover::after{ transform: scaleX(1); }

.rg-nav__burger{
    display:none;
    background: rgba(255,255,255,.06);
    border:1px solid var(--rg-border);
    color: var(--rg-text);
    width:44px; height:44px; border-radius:10px;
    font-size: 18px; cursor:pointer;
}
.rg-nav__burger:hover{ background: rgba(255,255,255,.12); }

/* -------- hero -------- */
.rg-hero{
    padding: 56px 0 32px;
}
.rg-hero__inner{
    /* Single-column hero: welcome text on the left, video as background.
       The server status + clan widgets used to live in a right column —
       they now render below the hero in `.rg-infostrip`. */
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 340px;
    padding: 48px 44px;
}
/* Make the welcome block sit in the left half so the video shows on the right */
.rg-hero__left{
    max-width: 60%;
}
/* Background video confined to the hero frame */
.rg-hero__video{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    filter: saturate(1.1) brightness(.7) contrast(1.05);
    background: var(--rg-bg-1);
}
/* Dark veil on top of the video, under the content */
.rg-hero__veil{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6,6,12,.35) 0%, rgba(6,6,12,.55) 70%, rgba(3,3,10,.78) 100%),
        radial-gradient(900px 400px at 70% 0%, rgba(51,112,208,.16), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(230,197,118,.10), transparent 60%);
}
/* Hero content sits above the video + veil */
.rg-hero__left,
.rg-hero__right{
    position: relative;
    z-index: 2;
}
.rg-hero__title{
    font-family: var(--rg-font-display);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: .02em;
    margin: 0 0 18px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.rg-hero__sub{
    display:block;
    font-family: var(--rg-font-ui);
    font-size: 14px;
    letter-spacing: .5em;
    color: var(--rg-accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.rg-hero__accent{
    color: var(--rg-primary);
    text-shadow: 0 0 30px var(--rg-primary);
}
.rg-hero__lead{
    color: var(--rg-text-dim);
    font-size: 17px;
    max-width: 540px;
    margin: 0 0 24px;
}
.rg-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* Buttons */
.rg-btn{
    display:inline-flex; align-items:center; gap: 10px;
    font-family: var(--rg-font-ui);
    font-weight: 700; font-size: 14px; letter-spacing: .18em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease, background .2s ease;
    text-decoration: none !important;
}
.rg-btn:hover{ transform: translateY(-1px); filter: brightness(1.1); }
.rg-btn:active{ transform: translateY(0); }
.rg-btn--primary{
    color: #fff !important;
    background: linear-gradient(135deg, var(--rg-primary), #1c4ea0);
    box-shadow: 0 14px 28px -10px rgba(51,112,208,.55), inset 0 0 0 1px rgba(255,255,255,.18);
}
.rg-btn--ghost{
    color: var(--rg-text) !important;
    background: rgba(255,255,255,.04);
    border-color: var(--rg-border-strong);
}
.rg-btn--ghost:hover{ background: rgba(255,255,255,.09); border-color: var(--rg-accent); color: var(--rg-accent) !important; }
.rg-btn--accent{
    color: #021018 !important;
    background: linear-gradient(135deg, var(--rg-accent), #f4d792);
    box-shadow: 0 14px 28px -10px rgba(230,197,118,.55);
}

/* Hero status card */
.rg-status{
    background: var(--rg-surface);
    border: 1px solid var(--rg-border-strong);
    border-radius: var(--rg-radius-lg);
    padding: 22px 24px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--rg-shadow-card);
}
.rg-status__row{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,.06);
    gap: 14px;
}
.rg-status__row:last-child{ border-bottom: 0; padding-bottom: 0; }
.rg-status__label{ color: var(--rg-text-dim); font-family: var(--rg-font-ui); letter-spacing:.18em; text-transform: uppercase; font-size: 12px; display:inline-flex; gap:8px; align-items:center; }
.rg-status__label .fa-circle{ font-size:8px; color: var(--rg-success); }
.rg-status__value{ font-weight: 600; color: #fff; font-size: 15px; }
.rg-status__hint{ color: var(--rg-text-mute); font-weight: 400; }
.rg-status__bar{
    height: 6px; width: 100%; border-radius:6px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    margin: 4px 0 10px;
}
.rg-status__bar-fill{
    height: 100%;
    background: linear-gradient(90deg, var(--rg-success), var(--rg-accent));
    box-shadow: 0 0 12px rgba(43,212,123,.6);
    border-radius:6px;
    transition: width .5s ease;
}
.rg-text-mono{ font-family: var(--rg-font-mono); }
.rg-pulse{ animation: rg-pulse 1.6s ease-in-out infinite; }
@keyframes rg-pulse{
    0%,100%{ transform: scale(1); opacity:1; }
    50%   { transform: scale(1.4); opacity:.6; }
}

/* -------- main grid -------- */
.rg-main{
    padding: 18px 0 56px;
}
.rg-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
.rg-grid__main{ min-width: 0; }
.rg-grid__side{ display: grid; gap: 20px; }

/* Cards */
.rg-card{
    background: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius);
    padding: 28px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--rg-shadow-card);
    color: var(--rg-text);
}
.rg-card--solid{
    background: linear-gradient(180deg, rgba(20,22,42,.85), rgba(14,16,30,.92));
}
.rg-card + .rg-card{ margin-top: 20px; }
.rg-card h1, .rg-card h2, .rg-card h3, .rg-card h4{ color:#fff; font-family: var(--rg-font-display); letter-spacing:.04em; }

/* -------- footer -------- */
.rg-footer{
    border-top: 1px solid var(--rg-border);
    background: rgba(0,0,0,.55);
    padding: 36px 0 60px;
    color: var(--rg-text-dim);
    font-size: 13px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.rg-footer a{ color: var(--rg-text-dim); }
.rg-footer a:hover{ color: var(--rg-accent); }
.rg-footer .footer-container{ width:100%; }
.rg-footer .footer-social-link img{
    width: 28px; height: auto;
    filter: grayscale(100%) brightness(1.4);
    transition: filter .2s ease, transform .2s ease;
}
.rg-footer .footer-social-link:hover img{ filter: none; transform: translateY(-2px); }

/* -------- sidebar widgets -------- */
.rg-side-card{
    background: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius);
    padding: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--rg-shadow-card);
}
.rg-side-card__title{
    font-family: var(--rg-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .35em;
    color: var(--rg-accent);
    text-transform: uppercase;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rg-border);
    display:flex; align-items:center; justify-content:space-between;
}
.rg-side-card__title .rg-tag{
    color: var(--rg-text-mute); font-size: 11px; letter-spacing: .2em;
}

/* Login form (in sidebar) */
.rg-login{
    display: grid; gap: 12px;
}
.rg-login input{
    width: 100%;
    background: rgba(0,0,0,.45);
    border: 1px solid var(--rg-border-strong);
    color: var(--rg-text);
    padding: 12px 14px;
    border-radius: 10px;
    font-family: var(--rg-font-body);
    font-size: 14px;
    transition: border-color .2s ease, background .2s ease;
}
.rg-login input::placeholder{ color: var(--rg-text-mute); }
.rg-login input:focus{
    outline: none;
    border-color: var(--rg-accent);
    background: rgba(0,0,0,.6);
    box-shadow: 0 0 0 3px rgba(230,197,118,.15);
}
.rg-login__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rg-login__forgot{ font-size:12px; color: var(--rg-text-mute); letter-spacing:.08em; text-transform: uppercase; }
.rg-login__forgot:hover{ color: var(--rg-accent); }

/* Banner cards (Join / Download) */
.rg-banner{
    display:flex; align-items:center; gap: 14px;
    padding: 18px 20px;
    border-radius: var(--rg-radius);
    border: 1px solid var(--rg-border-strong);
    background:
        radial-gradient(140% 140% at 0% 0%, rgba(51,112,208,.18), transparent 50%),
        linear-gradient(135deg, #181a2e, #0c0e1c);
    color: #fff;
    overflow: hidden;
    position: relative;
    transition: transform .2s ease, box-shadow .25s ease;
}
.rg-banner:hover{ transform: translateY(-2px); box-shadow: var(--rg-shadow-card); color:#fff; }
.rg-banner__icon{
    width: 48px; height: 48px; border-radius: 12px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size: 20px;
    background: linear-gradient(135deg, var(--rg-primary), #3370d0);
    color:#1a0006;
    flex-shrink: 0;
}
.rg-banner--cyan .rg-banner__icon{ background: linear-gradient(135deg, var(--rg-accent), #f4d792); color:#021018; }
.rg-banner__body{ display:flex; flex-direction:column; line-height: 1.2; }
.rg-banner__kicker{
    font-size: 11px; letter-spacing: .35em; color: var(--rg-text-mute);
    text-transform: uppercase; font-family: var(--rg-font-ui);
}
.rg-banner__title{
    font-family: var(--rg-font-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Server info table inside side card */
.rg-info-list{ width:100%; border-collapse: collapse; }
.rg-info-list tr td{
    padding: 9px 0;
    border-bottom: 1px dashed rgba(255,255,255,.06);
    font-size: 13px;
}
.rg-info-list tr:last-child td{ border-bottom: 0; }
.rg-info-list tr td:first-child{ color: var(--rg-text-dim); }
.rg-info-list tr td:last-child{ text-align:right; color:#fff; font-weight: 600; }

/* Hall of Fame widget (castle siege) */
.castle-owner-widget{
    border-radius: var(--rg-radius);
    border: 1px solid var(--rg-border-strong);
    background:
        linear-gradient(180deg, rgba(20,10,30,.7), rgba(8,6,18,.85)),
        radial-gradient(120% 100% at 50% 0%, rgba(51,112,208,.25), transparent 60%);
    overflow: hidden;
    color: #fff;
}
.castle-owner-widget .panel-heading{
    padding: 14px 18px;
    border-bottom: 1px solid var(--rg-border);
    background: rgba(0,0,0,.25);
}
.castle-owner-widget .panel-title{
    font-family: var(--rg-font-display);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
    margin: 0;
}
.castle-owner-widget .panel-body{ padding: 18px; }
.castle-owner-widget .alt{ color: var(--rg-text-mute); font-size:11px; letter-spacing:.18em; text-transform: uppercase; }
.castle-owner-widget .emblem{ width: 96px; height: 96px; border-radius: 10px; border: 1px solid var(--rg-border-strong); }

/* -------- mobile -------- */
@media (max-width: 1024px){
    .rg-hero__inner{ grid-template-columns: 1fr; }
    .rg-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
    .rg-nav__menu{ position: absolute; top: 72px; left:0; right:0; padding: 14px 24px 18px; background: rgba(6,6,14,.96); border-bottom:1px solid var(--rg-border); display:none; }
    .rg-nav__menu.is-open{ display: block; }
    .rg-nav__menu ul{ flex-direction: column; align-items: stretch; gap: 0; }
    .rg-nav__menu ul li a{ padding: 14px 12px; }
    .rg-nav__burger{ display: inline-flex; align-items:center; justify-content:center; }
    .rg-topbar__inner{ flex-direction: row; flex-wrap: wrap; gap:10px; }
    .rg-hero{ padding: 18px 0 16px; }
    .rg-card{ padding: 20px; }

    /* Hero on mobile: video at top in its native 16:9 frame (so nothing is
       cropped to a zoomed-in slice), text + CTAs stacked below it. */
    .rg-hero__inner{
        padding: 0;
        min-height: 0;
        border-radius: 14px;
        border: 1px solid var(--rg-border);
        background: linear-gradient(180deg, rgba(20,22,40,.85), rgba(10,11,22,.92));
    }
    .rg-hero__video{
        position: relative;
        top: auto; left: auto;
        width: 100%; height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center 30%;        /* favor the action toward the top */
        filter: saturate(1.1) brightness(.85) contrast(1.05);
        border-radius: 14px 14px 0 0;
        display: block;
    }
    .rg-hero__veil{
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 14px 14px 0 0;
        background:
            linear-gradient(180deg, transparent 0%, transparent 55%, rgba(3,3,10,.55) 100%),
            radial-gradient(700px 300px at 70% 0%, rgba(51,112,208,.14), transparent 60%);
    }
    .rg-hero__left{
        max-width: none;
        padding: 18px 18px 20px;
    }
    .rg-hero__title{
        font-size: clamp(26px, 7.5vw, 38px);
        margin-bottom: 12px;
        text-shadow: 0 4px 18px rgba(0,0,0,.55);
    }
    .rg-hero__sub{ font-size: 12px; letter-spacing: .42em; }
    .rg-hero__lead{ font-size: 14px; margin-bottom: 16px; }
    .rg-hero__cta{ gap: 10px; }
    .rg-hero__cta .rg-btn{ font-size: 12px; padding: 12px 16px; letter-spacing: .14em; }
}

/* Very small phones — go a touch shorter so the video doesn't dominate. */
@media (max-width: 420px){
    .rg-hero__video,
    .rg-hero__veil{ aspect-ratio: 4 / 3; }
}

/* =========================================================================
   SCROLL PERFORMANCE — mobile
   Big blurs, backdrop-filter and infinite animations are the main causes
   of scroll stutter on phones. Tone them down here without losing the look.
   ========================================================================= */
@media (max-width: 900px){
    /* backdrop-filter on a fixed bar forces re-blur of the content moving
       under it every scroll frame — the single worst offender on mobile. */
    .rg-topbar{
        background: rgba(6,6,12,.92);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* 120px blur on 60vmax glows is hundreds of millions of pixels of blur
       per frame on a phone GPU. Shrink them and drop one of the three. */
    .rg-bg-glow{ filter: blur(60px); }
    .rg-bg-glow--c{ display: none; }
    /* Grid animation is the costliest decoration. Keep the grid visible but
       don't animate it on mobile — saves a continuous repaint. */
    .rg-bg-grid{ animation: none; }
}
/* prefers-reduced-motion override removed on purpose — the background
   grid drift and glow float are slow, subtle, and not vestibular triggers;
   honoring the OS flag was killing the visual hook for users who never
   opted in to that setting. */

/* =========================================================================
   RTL — applied when <html dir="rtl"> (Hebrew). Logical properties handle
   most of the work; the rules below flip the few places that still use
   physical left/right values or directional gradients.
   ========================================================================= */
html[dir="rtl"] body{ font-family: 'Rubik','Heebo',var(--rg-font-body); }
html[dir="rtl"] .rg-hero__title,
html[dir="rtl"] .rg-killers__title h2,
html[dir="rtl"] .page-title{
    font-family: 'Rubik','Heebo',var(--rg-font-display);
    letter-spacing: 0;            /* tracking distorts Hebrew glyphs */
}
html[dir="rtl"] .rg-hero__sub,
html[dir="rtl"] .rg-killers__pre,
html[dir="rtl"] .rg-topclans__pre,
html[dir="rtl"] .rg-btn,
html[dir="rtl"] .rg-topbar__link,
html[dir="rtl"] .rg-nav__menu a,
html[dir="rtl"] .panel-title,
html[dir="rtl"] .rg-charcard__name,
html[dir="rtl"] .rg-charcard__lvl span{
    letter-spacing: 0;
    font-family: 'Rubik','Heebo',var(--rg-font-ui);
}
html[dir="rtl"] .rg-hero__lead,
html[dir="rtl"] .rg-charcard__stat dd,
html[dir="rtl"] body{ font-family: 'Rubik','Heebo','Inter',system-ui,sans-serif; }

/* Flip the topbar left/right groups so the user info still anchors to the
   logical "end" of the bar (visually the left in RTL). */
html[dir="rtl"] .rg-topbar__inner,
html[dir="rtl"] .rg-nav__inner,
html[dir="rtl"] .rg-hero__cta,
html[dir="rtl"] .rg-killers__head,
html[dir="rtl"] .rg-charcard__top,
html[dir="rtl"] .rg-charcard__stats,
html[dir="rtl"] .rg-topclans__head,
html[dir="rtl"] .rg-topclans__list,
html[dir="rtl"] .rg-topclans__row{
    direction: rtl;
}

/* Lifted-from-left elements that hard-coded "right:" */
html[dir="rtl"] .rg-admin-fab{ right: auto; left: 24px; }
@media (max-width: 720px){
    html[dir="rtl"] .rg-admin-fab{ right: auto; left: 16px; }
}
html[dir="rtl"] .rg-podium__rank{ right: auto; left: 14px; }
html[dir="rtl"] .rg-podium__gender{ right: auto; left: -4px; }
html[dir="rtl"] .rg-charcard::before{
    background: linear-gradient(270deg, var(--rg-primary), var(--rg-accent));
}

/* Lists with bullet/chevron decorators — flip the chevron icon. */
html[dir="rtl"] .rg-topclans__chevron i,
html[dir="rtl"] .rg-killers__cta i.fa-arrow-right-long,
html[dir="rtl"] .rg-news-more i,
html[dir="rtl"] .news_btnreadmore i{
    transform: scaleX(-1);
}

/* Tables — header row should not letter-space Hebrew text. */
html[dir="rtl"] .rankings-table tr:first-child td,
html[dir="rtl"] .rg-card .table.table-bordered > tbody > tr:first-child > td{
    letter-spacing: 0;
}

/* Underline accent on .page-title was anchored to the left; mirror it. */
html[dir="rtl"] .page-title::after{ left: auto; right: 0; }

/* Scrollbar can stay on the same physical side; the visual reads fine. */
html[dir="rtl"] .webengine-language-switcher{ flex-direction: row-reverse; }

/* =========================================================================
 *  PERFORMANCE MODE (html.rg-perf-low)
 *  -----------------------------------------------------------------------
 *  Strips GPU-only effects so the page is paintable on a CPU compositor.
 *  Activated by main.js when:
 *    - the user toggles it in the footer (persisted in localStorage),
 *    - prefers-reduced-motion is set, or
 *    - the boot FPS sampler measures < 30 fps.
 *  See also the @media (prefers-reduced-motion: reduce) block at the end.
 * ========================================================================= */

/* Backdrop-filter is the #1 cost without GPU. Replace with solid rgba()
   tints that read close to the original glassmorphism panels. */
html.rg-perf-low .rg-topbar{
    background: rgba(10,10,16,.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rg-perf-low .rg-nav{
    background: rgba(10,10,16,.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rg-perf-low .rg-status,
html.rg-perf-low .rg-card,
html.rg-perf-low .rg-side-card{
    background: #14162a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rg-perf-low .rg-card--solid{
    background: #14162a;
}
html.rg-perf-low .rg-footer{
    background: rgba(0,0,0,.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Kill the animated decorative background entirely — it's pure CPU cost
   (60vmax blurred radial gradients with mix-blend-mode and infinite anim). */
html.rg-perf-low .rg-bg-grid,
html.rg-perf-low .rg-bg-glow,
html.rg-perf-low .rg-bg-noise{
    display: none !important;
}
html.rg-perf-low .rg-bg{
    /* Solid fallback so the page still has the dark sci-fi background tone. */
    background:
        radial-gradient(ellipse at 20% 10%, #16213d 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, #2a1f1a 0%, transparent 55%),
        #07070d;
}

/* Hero video is decoded + CSS-filtered every frame; cut it out. The
   poster image stays visible (CSS background on .rg-hero takes over). */
html.rg-perf-low .rg-hero__video{
    display: none !important;
}

/* Stop every infinite animation site-wide. One-shot transitions (button
   hovers, fades) are cheap and stay enabled. */
html.rg-perf-low *,
html.rg-perf-low *::before,
html.rg-perf-low *::after{
    animation: none !important;
}

/* Strip filter:blur and blend modes from common decorative pseudo-elements
   that override.css attaches to the killer podium, hall of fame, castle
   siege, eventshop, etc. These are all "background sparkle" — losing them
   doesn't break the layout. */
html.rg-perf-low .rg-podium__halo,
html.rg-perf-low .rg-podium__shine,
html.rg-perf-low .rg-podium__crown-glow,
html.rg-perf-low .rg-podium__avatar-rays,
html.rg-perf-low .rg-podium__ring,
html.rg-perf-low .rg-podium__beam,
html.rg-perf-low .rg-killers::before,
html.rg-perf-low .rg-killers::after,
html.rg-perf-low .rg-hof-section-bg,
html.rg-perf-low .rg-cs-section-bg,
html.rg-perf-low .rg-eshop__hero-aura{
    display: none !important;
}
html.rg-perf-low .rg-hero__veil{
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Final safety net: any leftover element using these properties gets
   neutralised. Selector covers the long tail in override.css that
   we don't enumerate individually. */
html.rg-perf-low [class*="rg-"]{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* prefers-reduced-motion is intentionally NOT honored for the background grid
   or the Top Killers podium — see the comments at the top of this perf section
   (style.css ~line 839) and in override.css (~line 976). The OS flag was
   killing the page's signature visual hook for desktop users who hadn't
   consciously opted in. Users who want to drop these effects use the Effects
   toggle in the topbar (writes rgPerfMode='off' → adds .rg-perf-low). */

/* Topbar Effects toggle. Sits next to the EN/HE language selector.
   Matches the .rg-topbar__link size so it lines up cleanly. */
.rg-perf-toggle{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px;
    background: transparent;
    border: 1px solid var(--rg-border);
    border-radius: 999px;
    color: var(--rg-text-dim);
    font: inherit;                  /* match the topbar typography */
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.6;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rg-perf-toggle:hover{
    background: rgba(255,255,255,.06);
    color: #fff;
    border-color: var(--rg-accent);
}
.rg-perf-toggle .fa-bolt{ font-size: 11px; }
.rg-perf-toggle__state{ font-weight: 700; color: var(--rg-accent); }
/* When effects are OFF, mute the accent colour so the pill reads "inactive". */
.rg-perf-toggle.is-off .rg-perf-toggle__state{ color: var(--rg-text-mute); }
.rg-perf-toggle.is-off{ opacity: .85; }