/* =========================================================================
   Riot-style theme for the account panel (all pages, incl. logged-in).
   Ported from the aos_site riot design language.
   Loads AFTER codebase.css / custom.css / theme / baylee.css (see head.tpl).
   Palette: #010a13 / #091428 navy glass, #c8aa6e gold, #f0e6d2 bright gold.
   ========================================================================= */

:root {
  --rg-bg: #010a13;
  --rg-bg-2: #091428;
  --rg-line: rgba(200, 170, 110, 0.35);
  --rg-line-soft: rgba(255, 255, 255, 0.06);
  --rg-gold: #c8aa6e;
  --rg-gold-bright: #f0e6d2;
  --rg-text: #f0e6d2;
  --rg-text-dim: #a09b8c;
  --rg-text-muted: #5b5a56;
  /* Hextech magic accents ? break up the gold monochrome */
  --rg-teal: #0ac8b9;
  --rg-teal-dim: rgba(10, 200, 185, 0.35);
  --rg-blue: #0397ab;
  --rg-serif: 'Cinzel', 'TCAdministerRR-Bold', 'BeaufortforLOL', serif;
  --rg-danger: #e85d5d;
  --rg-danger-soft: rgba(232, 93, 93, 0.18);
  --rg-danger-line: rgba(232, 93, 93, 0.4);
  --rg-success: #3c9d6e;
  --rg-success-soft: rgba(60, 157, 110, 0.16);
  --rg-warning: #c8aa6e;
  --rg-warning-soft: rgba(200, 170, 110, 0.16);
  --rg-info: #8fb4d9;
  --rg-info-soft: rgba(143, 180, 217, 0.16);
}

/* ---------- GLOBAL ---------- */

html {
  min-height: 100%;
  background-color: var(--rg-bg);
}

body {
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif !important;
  min-height: 100vh;
  /* Solid only ? painted scene lives on fixed ::before so accordion/masonry
     height changes do not stretch/rescales the background art. */
  background: var(--rg-bg) !important;
  color: var(--rg-text-dim) !important;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 520px at 12% -8%, rgba(200, 170, 110, 0.08), transparent 60%),
    radial-gradient(ellipse 800px 600px at 92% 12%, rgba(200, 170, 110, 0.09), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 115%, rgba(0, 90, 130, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(1, 10, 19, 0.45) 0%, rgba(1, 10, 19, 0.72) 55%, rgba(1, 10, 19, 0.92) 100%),
    url(../images/bg.webp) no-repeat top center / cover,
    var(--rg-bg);
  background-size: auto, auto, auto, auto, cover, auto;
  background-position: 12% -8%, 92% 12%, 50% 115%, center, top center, center;
}

#page-container {
  background: transparent !important;
  min-height: 100vh;
}

#main-container {
  background: transparent !important;
}

::selection {
  background: rgba(200, 170, 110, 0.35);
  color: var(--rg-gold-bright);
}

a {
  color: var(--rg-gold);
}

a:hover,
a:focus {
  color: var(--rg-gold-bright);
}

a.link-effect::before {
  background-color: var(--rg-gold) !important;
}

.link-effect.text-muted,
.link-effect.text-muted i {
  color: var(--rg-text-dim) !important;
  transition: color 0.2s ease;
}

.link-effect.text-muted:hover,
.link-effect.text-muted:hover i {
  color: var(--rg-gold-bright) !important;
}

/* ---------- SCROLLBAR ---------- */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--rg-gold) #010a13;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #010a13 0%, #050e1c 100%);
  border-left: 1px solid rgba(200, 170, 110, 0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c8aa6e 0%, #a48a4a 100%);
  border: 2px solid #010a13;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f0e6d2 0%, #c8aa6e 100%);
}

::-webkit-scrollbar-corner {
  background: #010a13;
}

/* ---------- TOP HEADER BAR ? match aos_site riot-theme header ---------- */

/*
  Codebase `#page-container.page-header-modern #page-header { box-shadow: none !important }`
  kills the aos_site gold hairline ? beat it on specificity + draw a real bottom edge.
*/
#page-container #page-header.rg-site-header,
#page-container.page-header-modern #page-header.rg-site-header,
#page-container.page-header-inverse #page-header.rg-site-header,
#page-header.rg-site-header {
  position: relative;
  z-index: 1040;
  background: linear-gradient(180deg, rgba(1, 10, 19, 0.97) 0%, rgba(1, 10, 19, 0.94) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Keep fixed headers above dashboard tiles / overlays */
#page-container.page-header-fixed #page-header.rg-site-header {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1040;
}

/* Gold hairline under the header (same cue as aos_site box-shadow 0 1px 0 var(--rg-line))
   Keep z-index below header chrome (utils z-index: 3) so menus aren't sliced by the line. */
#page-container #page-header.rg-site-header::after,
#page-header.rg-site-header::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(200, 170, 110, 0.45);
  box-shadow: 0 0 0 0 transparent;
  z-index: 1;
  pointer-events: none;
}

#page-container.page-header-fixed #main-container {
  padding-top: 80px !important;
}

/*
  Full-bleed header: logo | flexible nav | auth.
  Flex row uses the full viewport width ? no absolute centering squeeze.
*/
#page-container.page-header-modern #page-header > .content-header.rg-site-header__bar,
#page-container.main-content-boxed > #page-header > .content-header.rg-site-header__bar,
#page-container.page-header-inverse #page-header > .content-header.rg-site-header__bar,
#page-container #page-header > .content-header.rg-site-header__bar,
#page-header .rg-site-header__bar {
  position: relative !important;
  background: transparent !important;
  width: 100% !important;
  max-width: none !important;
  height: 80px !important;
  min-height: 80px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px 24px;
  box-sizing: border-box !important;
}

#page-header.rg-site-header {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#page-header .rg-site-header__bar {
  overflow: visible !important;
}

#page-header .rg-site-header__utils {
  overflow: visible !important;
}

/* Brand and utils get equal flexible widths so the nav sits at the true
   viewport center regardless of which auth buttons are rendered. */
#page-header .rg-site-header__brand {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 0;
  margin: 0 !important;
  z-index: 3;
}

#page-header .rg-site-header__nav {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  max-width: none;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2;
  pointer-events: auto;
  overflow: visible;
}

#page-header .rg-site-header__nav .nav-main-header {
  pointer-events: auto;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100%;
}

#page-header .rg-site-header__utils {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end !important;
  flex: 1 1 0;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 !important;
  z-index: 3;
}

#page-header .rg-site-header__utils .mr-10 {
  margin-right: 0 !important;
}

/* Auth buttons keep natural width — utils yields flexible space instead of
   squeezing (and clipping) button labels when the viewport tightens. */
#page-header .rg-site-header__utils > * {
  flex-shrink: 0;
}

#page-header .rg-site-header__utils .rg-btn-ghost,
#page-header .rg-site-header__utils .rg-btn-cta {
  white-space: nowrap;
}

/* Language is last in the utils cluster */
#page-header .rg-site-header__lang {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

#page-header .rg-site-header__lang .rg-lang__btn {
  height: 36px;
  padding: 0 12px;
  gap: 8px;
}

/* Logo ? same crop / hover / vertical center as aos_site */
#page-header .rg-brand.logo,
#page-header .rg-brand {
  display: inline-flex !important;
  align-items: center;
  height: 100%;
  transition: filter 0.25s ease, transform 0.25s ease;
}

#page-header .rg-brand::before {
  display: none !important;
}

#page-header .rg-brand.link-effect,
#page-header .content-header .content-header-section .content-header-item .link-effect.rg-brand {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-header .rg-brand__img {
  height: 60px !important;
  width: auto !important;
  max-height: 60px;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

#page-header .rg-brand:hover {
  filter: drop-shadow(0 0 8px rgba(200, 170, 110, 0.35));
}

#page-header .rg-brand:hover .rg-brand__img {
  transform: none;
  filter: none;
}

/* Project name fallback (if logo text used) */
#page-header .link-effect .text-dual-primary-dark,
#page-header .text-dual-primary-dark {
  font-family: var(--rg-serif);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-gold-bright) !important;
}

/* Header nav ? aos_site riot-theme */
.nav-main-header.rg-site-nav {
  display: flex;
  align-items: center;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main-header.rg-site-nav > li {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
}

.nav-main-header.rg-site-nav > li > a,
.nav-main-header > li > a {
  font-family: 'Cinzel', 'Philosopher', var(--rg-serif), serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--rg-text) !important;
  height: 68px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-main-header.rg-site-nav > li > a::after,
.nav-main-header > li > a::after {
  display: none !important;
}

/* Sliding gold underline (aos_site) */
.nav-main-header.rg-site-nav > li > a::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rg-gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.nav-main-header.rg-site-nav > li > a:hover,
.nav-main-header > li > a:hover {
  color: var(--rg-gold-bright) !important;
  background: transparent !important;
}

.nav-main-header.rg-site-nav > li > a:hover::before,
.nav-main-header.rg-site-nav > li > a.active::before {
  transform: scaleX(1);
}

.nav-main-header.rg-site-nav > li > a.active {
  color: var(--rg-gold) !important;
}

/* =========================================================================
   LOCKED NAV ITEMS — sign-in-only options shown greyed to guests
   ========================================================================= */

.nav-main-header > li > a.rg-nav-locked,
.nav-main > li > a.rg-nav-locked {
  color: var(--rg-text-muted) !important;
  cursor: not-allowed;
  position: relative;
}

.nav-main-header > li > a.rg-nav-locked > i,
.nav-main > li > a.rg-nav-locked > i {
  opacity: 0.45;
}

/* No gold hover, no sliding underline */
.nav-main-header.rg-site-nav > li > a.rg-nav-locked:hover,
.nav-main-header > li > a.rg-nav-locked:hover,
.nav-main > li > a.rg-nav-locked:hover {
  color: var(--rg-text-muted) !important;
  background: transparent !important;
}

.nav-main-header.rg-site-nav > li > a.rg-nav-locked::before {
  display: none !important;
}

/* Tooltip (the nav ::after is display:none'd above — bring it back here) */
.nav-main-header > li > a.rg-nav-locked::after,
.nav-main > li > a.rg-nav-locked::after {
  content: attr(data-locked-tip);
  display: block !important;
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 1060;
  padding: 7px 12px;
  white-space: nowrap;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--rg-gold-bright);
  background: #0a1428;
  border: 1px solid var(--rg-line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-main-header > li > a.rg-nav-locked:hover::after,
.nav-main-header > li > a.rg-nav-locked:focus::after,
.nav-main > li > a.rg-nav-locked:hover::after,
.nav-main > li > a.rg-nav-locked:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Header nav icons beside each option */
#page-header .rg-site-header__nav .nav-main-header > li > a {
  gap: 7px;
}

#page-header .rg-site-header__nav .nav-main-header > li > a > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0 !important;
  font-size: 13px;
  line-height: 1;
  color: var(--rg-gold) !important;
  transition: color 0.2s ease;
}

#page-header .rg-site-header__nav .nav-main-header > li > a:hover > i,
#page-header .rg-site-header__nav .nav-main-header > li > a.active > i {
  color: var(--rg-gold-bright) !important;
}

#page-header .rg-site-header__nav .nav-main-header > li > a > i.rg-icon {
  width: 13px;
  height: 13px;
  background-color: currentColor;
}

/* Header nav submenu (Donations, etc.) ? match wiki/user dropdown */
#page-header .rg-site-header__nav .nav-main-header > li > ul {
  top: calc(100% - 4px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 0;
  min-width: 240px;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
  border: 1px solid var(--rg-line);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  z-index: 1040;
}

#page-header .rg-site-header__nav .nav-main-header > li:last-child > ul {
  left: auto;
  right: 0;
  transform: none;
}

#page-header .rg-site-header__nav .nav-main-header > li:hover > a.nav-submenu,
#page-header .rg-site-header__nav .nav-main-header > li.open > a.nav-submenu {
  color: var(--rg-gold-bright) !important;
  background: transparent !important;
}

#page-header .rg-site-header__nav .nav-main-header > li > ul > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: auto !important;
  padding: 11px 20px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--rg-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#page-header .rg-site-header__nav .nav-main-header > li > ul > li > a:hover,
#page-header .rg-site-header__nav .nav-main-header > li > ul > li > a:focus,
#page-header .rg-site-header__nav .nav-main-header > li > ul > li > a.active {
  color: var(--rg-gold) !important;
  background: rgba(228, 197, 113, 0.1) !important;
  border-left-color: var(--rg-gold) !important;
}

#page-header .rg-site-header__nav .nav-main-header > li > ul > li > a > i {
  flex-shrink: 0;
  width: 1.1em;
  margin: 0 !important;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

#page-header .rg-site-header__nav .nav-main-header > li > ul > li > a > i.si-plus {
  color: var(--rg-gold) !important;
}

/* Wiki dropdown ? matches aos_site */
.rg-wiki-li:hover > .rg-wiki-dropdown,
.rg-wiki-dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rg-wiki-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%);
  border: 1px solid var(--rg-line);
  border-radius: 0;
  padding: 6px 0;
  min-width: 240px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s linear;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.rg-wiki-dropdown li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: #fff !important;
  text-decoration: none;
  font-family: var(--rg-serif) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  height: auto !important;
  border-left: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rg-wiki-dropdown li a:hover {
  color: var(--rg-gold) !important;
  background: rgba(228, 197, 113, 0.1);
  border-left-color: var(--rg-gold);
}

.rg-wiki-ico {
  font-size: 16px;
  line-height: 1;
}

/*
 * Site icon set.
 *
 * These are SVG masks instead of icon-font characters. That keeps every mark
 * sharp and predictable even when a third-party font fails to load or maps a
 * glyph differently. Add the base class plus one semantic modifier:
 * <i class="rg-icon rg-icon--donation" aria-hidden="true"></i>
 */
.rg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--rg-icon-mask) center / contain no-repeat;
  mask: var(--rg-icon-mask) center / contain no-repeat;
}

.rg-icon::before {
  content: none !important;
}

.rg-icon--home {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9v11h5v-6h3v6h5V9'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--rankings {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19v-7h4v7M10 19V5h4v14M16 19v-10h4v10M2 21h20'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--store {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6L5 8Z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--exchange {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h15m0 0-4-4m4 4-4 4M20 17H5m0 0 4-4m-4 4 4 4'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--support {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--transfer {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h8c3 0 5 2 5 5v4c0 2-1 3-2.5 3-1.8 0-2.7-2-3.5-3H9c-.8 1-1.7 3-3.5 3C4 19 3 18 3 16v-4c0-3 2-5 5-5Z'/%3E%3Cpath d='M7 11v4M5 13h4M16.5 12h.01M18.5 14h.01'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--donation {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 4-5h10l4 5-9 13L3 8Z'/%3E%3Cpath d='m3 8 9 13 9-13M3 8h18M7 3l5 18L17 3'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--settings {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--market {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-6 9 6H3ZM5 10v8M10 10v8M14 10v8M19 10v8M3 21h18M2 18h20'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--wheel {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 3v7M12 14v7M3 12h7M14 12h7M5.6 5.6l5 5M13.4 13.4l5 5M18.4 5.6l-5 5M10.6 13.4l-5 5'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--case {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='1'/%3E%3Cpath d='M9 7V4h6v3M3 12h7M14 12h7M10 11h4v3h-4z'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--gift {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18v4H3zM5 13h14v8H5zM12 9v12'/%3E%3Cpath d='M12 9H8.5C6 9 5 7.5 5.8 6.1 7 4.1 10.2 6.2 12 9ZM12 9h3.5C18 9 19 7.5 18.2 6.1 17 4.1 13.8 6.2 12 9Z'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--wallet {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h15a2 2 0 0 1 2 2v11H5a2 2 0 0 1-2-2V6.5A3.5 3.5 0 0 1 6.5 3H17v3'/%3E%3Cpath d='M15 11h6v5h-6a2.5 2.5 0 0 1 0-5Z'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--discord {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 4.4a20 20 0 0 0-4.9-1.5l-.6 1.2a18 18 0 0 0-5.6 0l-.6-1.2a20 20 0 0 0-4.9 1.5C.6 9 .1 13.5.1 18a20 20 0 0 0 6 3.1l1.3-2a13 13 0 0 1-1.9-.9l.4-.3c3.9 1.8 8.2 1.8 12.1 0l.4.3c-.6.4-1.2.7-1.9.9l1.3 2a20 20 0 0 0 6-3.1c.5-5.2-.8-9.7-3.5-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4S6.8 10.5 8 10.5s2.2 1.1 2.2 2.4S9.2 15.3 8 15.3Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z'/%3E%3C/svg%3E");
}

.rg-icon--check {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m7 12 3.2 3.2L17.5 8'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--security {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v5.5c0 5-3.3 8.2-8 10-4.7-1.8-8-5-8-10V6l8-3.5Z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--user {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.7-4.5 3.3-7 8-7s7.3 2.5 8 7'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--refresh {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7V3l-2 2a9 9 0 1 0 2.4 9'/%3E%3Cpath d='M20 3h-4'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--plus {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--close {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 5 14 14M19 5 5 19'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--login {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v16h-6M3 12h13M11 7l5 5-5 5'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--logout {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H4v16h6M21 12H8M16 7l5 5-5 5'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--key {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='5'/%3E%3Cpath d='m11.5 11.5 8-8M16 7l2 2M18 5l2 2'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--mail {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--phone {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M10 5h4M11 19h2'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--document {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h9l5 5v13H5V3Z'/%3E%3Cpath d='M14 3v5h5M8 12h8M8 16h8'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--print {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H4a2 2 0 0 1-2-2v-5h20v5a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M7 14h10v7H7zM18 12h1'/%3E%3C/g%3E%3C/svg%3E");
}

.rg-icon--globe {
  --rg-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- PAGE TITLE ---------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--rg-serif) !important;
  color: var(--rg-gold-bright) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.content .h4 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Gold hairline flourish under the page title */
.content .pb-20.text-center h1 {
  position: relative;
  padding-bottom: 16px;
}

.content .pb-20.text-center h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rg-gold), transparent);
}

/* Diamond pip on the title flourish */
.content .pb-20.text-center h1::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--rg-bg);
  border: 1px solid var(--rg-gold);
  box-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
}

/* ---------- DONATIONS PAGE HERO ---------- */

.rg-donate-hero {
  text-align: center;
  margin: 20px auto 12px;
  padding: 4px 16px 8px;
  max-width: 720px;
  position: relative;
}

.rg-donate-hero__eyebrow {
  margin: 0 0 10px;
  font-family: 'Cinzel', var(--rg-serif), serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rg-gold) !important;
}

.rg-donate-hero__title {
  margin: 0 0 14px !important;
  font-family: 'Cinzel', var(--rg-serif), serif !important;
  font-size: clamp(22px, 4vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--rg-gold-bright) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 0 24px rgba(200, 170, 110, 0.18);
  line-height: 1.25;
  position: relative;
  padding-bottom: 18px;
}

.rg-donate-hero__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(220px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rg-gold), transparent);
}

.rg-donate-hero__title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--rg-bg);
  border: 1px solid var(--rg-gold);
  box-shadow: 0 0 10px rgba(200, 170, 110, 0.55);
}

.rg-donate-hero__subtitle {
  margin: 14px 0 0;
  font-family: 'Muli', 'Intro', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--rg-text-dim) !important;
  text-transform: none;
}

.rg-donate-where {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rg-line-soft);
}

.rg-donate-where__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-donate-where__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rg-donate-where__opt {
  margin: 0;
  cursor: pointer;
}

.rg-donate-where__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rg-donate-where__face {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  height: 100%;
  padding: 12px 14px;
  color: var(--rg-text-dim);
  background: rgba(1, 10, 19, 0.45);
  border: 1px solid rgba(200, 170, 110, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rg-donate-where__face > i {
  flex: 0 0 auto;
  width: 28px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: rgba(200, 170, 110, 0.72);
  transition: color 0.2s ease;
}

.rg-donate-where__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rg-donate-where__name {
  font-family: var(--rg-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-text);
  transition: color 0.2s ease;
}

.rg-donate-where__bal,
.rg-donate-where__hint {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rg-text-muted);
}

.rg-donate-where__opt:hover .rg-donate-where__face {
  background: rgba(200, 170, 110, 0.07);
  border-color: rgba(200, 170, 110, 0.4);
}

.rg-donate-where__opt:hover .rg-donate-where__name {
  color: var(--rg-gold);
}

.rg-donate-where__opt:hover .rg-donate-where__face > i {
  color: var(--rg-gold);
}

.rg-donate-where__opt.is-active .rg-donate-where__face {
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.14) 0%, rgba(1, 10, 19, 0.55) 100%);
  border-color: rgba(200, 170, 110, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(200, 170, 110, 0.12),
    0 0 0 1px rgba(200, 170, 110, 0.08);
}

.rg-donate-where__opt.is-active .rg-donate-where__name {
  color: var(--rg-gold-bright);
}

.rg-donate-where__opt.is-active .rg-donate-where__face > i {
  color: var(--rg-gold-bright);
}

.rg-donate-where__opt.is-active .rg-donate-where__bal,
.rg-donate-where__opt.is-active .rg-donate-where__hint {
  color: rgba(232, 214, 170, 0.78);
}

.rg-donate-recipient {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rg-donate-recipient__pick {
  width: 100%;
}

.rg-donate-recipient__other[hidden] {
  display: none !important;
}

.rg-donate-master-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rg-text-dim);
  background: rgba(200, 170, 110, 0.06);
  border-left: 2px solid rgba(200, 170, 110, 0.45);
}

.rg-donate-ingame.is-master-mode .rg-donate-char-only {
  display: none !important;
}

@media (max-width: 575.98px) {
  .rg-donate-where__opts {
    grid-template-columns: 1fr;
  }
}

.rg-donate-block-head .block-title {
  font-family: 'Cinzel', var(--rg-serif), serif !important;
  font-size: 15px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--rg-gold-bright) !important;
}

/* ---------- DONATE WIDGET LAYOUT ---------- */

.rg-donate__body {
  padding: 22px 24px 8px !important;
}

.rg-donate__foot {
  margin-top: 8px !important;
  padding: 18px 24px !important;
}

.rg-donate--popup {
  margin: 0;
}

.rg-donate--popup .rg-donate__body {
  padding: 8px 4px 4px;
}

#modal-ajax .modal-ajax-footer:has(.rg-donate-popup-foot) {
  background: transparent;
  border: 0;
}

#modal-ajax .rg-donate-popup-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0 2px;
  text-align: center;
}

#modal-ajax .block-content.modal-ajax-content:has(.rg-donate--popup) {
  padding-top: 12px;
  padding-bottom: 8px;
}

.rg-donate-dest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rg-line-soft);
}

.rg-donate-dest__label {
  flex: 0 0 auto;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-donate-dest__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
}

.rg-donate-dest__opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  padding: 10px 14px;
  text-decoration: none !important;
  color: inherit;
  background: rgba(1, 10, 19, 0.45);
  border: 1px solid var(--rg-line-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rg-donate-dest__opt > i {
  font-size: 16px;
  color: var(--rg-gold);
  opacity: 0.85;
}

.rg-donate-dest__opt.is-active,
.rg-donate-dest__opt:hover {
  border-color: var(--rg-gold);
  background: rgba(200, 170, 110, 0.08);
}

.rg-donate-dest__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rg-donate-dest__name {
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-donate-dest__bal {
  font-family: var(--rg-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rg-gold-bright);
  line-height: 1.1;
}

.rg-donate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr);
  gap: 24px 28px;
  align-items: start;
}

.rg-donate-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.rg-donate-amount label {
  margin-bottom: 8px;
}

.rg-donate-pay {
  position: sticky;
  top: 16px;
  padding: 16px;
  background: rgba(1, 10, 19, 0.4);
  border: 1px solid var(--rg-line-soft);
}

.rg-donate-pay__head {
  margin: 0 0 14px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-gold);
}

.rg-donate-pay__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rg-donate-pay__opt {
  margin: 0;
}

.rg-donate-pay__opt .drinkcard-cc {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 8px;
  margin: 0;
  background: rgba(9, 20, 40, 0.55) !important;
}

.rg-donate-pay__opt .drinkcard-cc img {
  max-height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.rg-donate-pay__opt input:checked + .drinkcard-cc {
  background: rgba(200, 170, 110, 0.1) !important;
}

/* Payment tip opens downward inside the side panel */
.rg-donate-pay .rg-pay-tip {
  bottom: auto;
  top: calc(100% + 10px);
}

.rg-donate-pay .rg-pay-tip::after,
.rg-donate-pay .rg-pay-tip::before {
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: 7px solid var(--rg-gold);
}

.rg-donate-pay .rg-pay-tip::before {
  border-bottom-color: rgba(1, 10, 19, 0.98);
  border-bottom-width: 6px;
  margin-top: 0;
  margin-bottom: -1px;
}

.rg-donate-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--rg-line-soft);
}

.rg-donate-rates__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.rg-donate-rates__cur {
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-donate-rates__val {
  font-family: var(--rg-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rg-gold-bright);
}

.rg-donate-items {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(1, 10, 19, 0.35);
  border: 1px solid var(--rg-line-soft);
}

.rg-donate-items__title {
  margin-bottom: 10px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-gold);
  text-align: center;
}

.rg-donate-items__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rg-line-soft);
  font-size: 13px;
  color: var(--rg-text-dim);
}

.rg-donate-items__row:last-child {
  border-bottom: 0;
}

.rg-donate-items__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rg-donate-items__enc {
  color: #bbb529;
}

.rg-donate-items__qty {
  font-family: var(--rg-serif);
  font-weight: 700;
  color: var(--rg-gold-bright);
  white-space: nowrap;
}

.rg-donate-captcha {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rg-line-soft);
  display: flex;
  justify-content: center;
}

.rg-donate .rg-total {
  margin: 0;
}

.rg-donate .rg-tiers {
  margin: 0;
}

@media (max-width: 991.98px) {
  .rg-donate-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .rg-donate-pay {
    position: static;
  }

  .rg-donate-pay__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 575.98px) {
  .rg-donate__body {
    padding: 16px 14px 6px !important;
  }

  .rg-donate__foot {
    padding: 14px !important;
  }

  .rg-donate-pay__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rg-donate-dest__opt {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
}

/* ---------- AUTH CARD (block) ---------- */

.block,
.block.block-themed {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.92) 0%, rgba(1, 10, 19, 0.96) 100%) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* Modals stay rectangular ? clipped corners reveal the red page bg.webp behind them */
.modal-content {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.98) 0%, rgba(1, 10, 19, 0.99) 100%) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
  clip-path: none !important;
  overflow: hidden;
}

/* Hextech energy bar across the top of every card */
.block::before,
.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--rg-gold) 25%, var(--rg-gold-bright) 55%, var(--rg-gold) 80%, transparent 100%);
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}

/* Faint teal glow rising from the clipped corner */
.block::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 100% 100%, rgba(200, 170, 110, 0.12), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.block-header,
.block-header.bg-gd-dusk,
.block-header.bg-gd-emerald,
.block-header.bg-gd-primary,
.block-header.bg-primary-dark,
.block-header.block-header-default {
  background: rgba(1, 10, 19, 0.55) !important;
  border-bottom: 1px solid var(--rg-line-soft);
  border-radius: 0 !important;
}

.block-title,
.block.block-themed > .block-header > .block-title {
  font-family: var(--rg-serif) !important;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--rg-gold) !important;
}

/* Bottom strip with sign-up / reminder links */
.block-content.bg-body-light {
  background: rgba(1, 10, 19, 0.55) !important;
  border-top: 1px solid var(--rg-line-soft);
}

/* Auth card footer actions ? Register / Reset / Sign in */
.rg-auth-links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}

.rg-auth-links__item {
  position: relative;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 14px 16px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--rg-text-dim) !important;
  background: transparent;
  border: none;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.rg-auth-links__item + .rg-auth-links__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rg-line), transparent);
  pointer-events: none;
}

.rg-auth-links__item i {
  font-size: 14px;
  line-height: 1;
  color: var(--rg-gold);
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rg-auth-links__item:hover,
.rg-auth-links__item:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.06);
}

.rg-auth-links__item:hover i,
.rg-auth-links__item:focus i {
  opacity: 1;
  color: var(--rg-gold-bright);
  transform: translateY(-1px);
}

.rg-auth-links__item--primary {
  color: var(--rg-gold) !important;
}

.rg-auth-links__item--primary i {
  opacity: 1;
}

.rg-auth-links__item--primary:hover,
.rg-auth-links__item--primary:focus {
  background: rgba(200, 170, 110, 0.1);
  box-shadow: inset 0 -2px 0 var(--rg-gold);
}

/* Single-link footers stay centered without looking sparse */
.rg-auth-links--solo .rg-auth-links__item {
  flex: 0 1 auto;
  min-width: 180px;
}

.rg-auth-links--solo .rg-auth-links__item + .rg-auth-links__item::before {
  display: none;
}

/* Auth helper copy under inputs */
.block .form-text,
.block .form-text.text-muted,
.block code {
  display: block;
  margin-top: 8px;
  padding: 0;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--rg-text-muted) !important;
  background: none !important;
  border: none !important;
}

/* Hide useless single-option auth tabs */
.rg-auth-tabs--solo {
  display: none !important;
}

/* ---------- FORMS ---------- */

label {
  font-family: var(--rg-serif);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-text-dim) !important;
}

.form-control,
select.form-control {
  background-color: rgba(9, 20, 40, 0.6) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-radius: 0 !important;
  color: var(--rg-text) !important;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control::placeholder {
  color: var(--rg-text-dim) !important;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

.form-control:focus {
  background-color: rgba(9, 20, 40, 0.85) !important;
  border-color: var(--rg-gold) !important;
  box-shadow: 0 0 14px rgba(200, 170, 110, 0.25), inset 0 -1px 0 var(--rg-gold) !important;
  color: var(--rg-gold-bright) !important;
}

/* Filled (has value, not focused) ? keep a settled gold cue after blur.
   Selects/buttons excluded ? they never show a placeholder, so this rule
   painted every dropdown in the "filled" glow permanently. */
.form-control:not(select):not(button):not(:placeholder-shown):not(:focus):not(.is-invalid):not(:disabled),
textarea.form-control:not(:placeholder-shown):not(:focus):not(.is-invalid):not(:disabled) {
  background-color: rgba(12, 26, 48, 0.88) !important;
  border-color: rgba(200, 170, 110, 0.42) !important;
  color: var(--rg-gold-bright) !important;
  box-shadow: inset 0 -1px 0 rgba(200, 170, 110, 0.55) !important;
}

.form-group:has(.form-control:not(:placeholder-shown):not(.is-invalid)) > label,
.form-group:has(.form-control:not(:placeholder-shown):not(.is-invalid)) label,
.col-12:has(> .form-control:not(:placeholder-shown):not(.is-invalid)) > label {
  color: var(--rg-gold) !important;
}

/* Browser autofill ? override yellow/white paint to match filled state */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--rg-gold-bright) !important;
  caret-color: var(--rg-gold-bright);
  border-color: rgba(200, 170, 110, 0.42) !important;
  box-shadow:
    0 0 0 1000px #0a1428 inset,
    inset 0 -1px 0 rgba(200, 170, 110, 0.55) !important;
  transition: background-color 99999s ease-out 0s;
}

.form-control:-webkit-autofill:focus {
  border-color: var(--rg-gold) !important;
  box-shadow:
    0 0 0 1000px #091428 inset,
    0 0 14px rgba(200, 170, 110, 0.25),
    inset 0 -1px 0 var(--rg-gold) !important;
}

.form-group:has(.form-control:-webkit-autofill) > label,
.form-group:has(.form-control:-webkit-autofill) label,
.col-12:has(> .form-control:-webkit-autofill) > label {
  color: var(--rg-gold) !important;
}

/* Selects: kill the native widget chrome — gold chevron, dark native list */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c8aa6e' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

select.form-control::-ms-expand {
  display: none;
}

select.form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--rg-line) !important;
  background-color: rgba(12, 26, 48, 0.88) !important;
}

select.form-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select.form-control option,
select.form-control optgroup {
  background-color: #0a1428;
  color: var(--rg-text);
}

/* Language selector chip in the card header */
.block-options .form-control {
  background-color: rgba(1, 10, 19, 0.6) !important;
  border-color: var(--rg-line-soft) !important;
  color: var(--rg-text-dim) !important;
}

/* Checkbox ? gold accent */
.custom-control-label::before {
  background-color: rgba(9, 20, 40, 0.8) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 0 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--rg-gold) !important;
  border-color: var(--rg-gold) !important;
}

.custom-control-input:checked ~ .custom-control-label::after {
  filter: brightness(0.1);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 10px rgba(200, 170, 110, 0.3) !important;
}

.custom-control-label {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Signup ? terms must be accepted before Create is usable */
.rg-signup-submit-wrap {
  position: relative;
  display: block;
}

.rg-signup-submit-wrap.is-blocked {
  cursor: not-allowed;
}

#signup-submit:disabled,
#signup-submit[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none !important;
  filter: grayscale(0.35);
  pointer-events: none;
}

#signup-submit:disabled::after,
#signup-submit[aria-disabled="true"]::after {
  display: none;
}

.rg-signup-submit-wrap.is-blocked::before,
.rg-signup-submit-wrap.is-blocked::after {
  position: absolute;
  left: 50%;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.rg-signup-submit-wrap.is-blocked::before {
  content: attr(data-tip);
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(280px, 90vw);
  padding: 8px 12px;
  background: rgba(1, 10, 19, 0.96);
  border: 1px solid var(--rg-line);
  color: var(--rg-gold-bright);
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  white-space: normal;
}

.rg-signup-submit-wrap.is-blocked::after {
  content: "";
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--rg-line);
}

.rg-signup-submit-wrap.is-blocked:hover::before,
.rg-signup-submit-wrap.is-blocked:hover::after,
.rg-signup-submit-wrap.is-blocked:focus-within::before,
.rg-signup-submit-wrap.is-blocked:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rg-signup-submit-wrap.is-blocked::before,
  .rg-signup-submit-wrap.is-blocked::after {
    transition: none;
  }
}

.rg-signup-terms.is-invalid .custom-control-label {
  color: #e85d5d !important;
}

.rg-signup-terms.is-invalid .custom-control-label::before {
  border-color: #e85d5d !important;
  box-shadow: 0 0 10px rgba(232, 93, 93, 0.35) !important;
}

/* Form validation ? field-level errors */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.is-invalid .form-control {
  border-color: var(--rg-danger) !important;
  background-color: rgba(48, 14, 14, 0.55) !important;
  box-shadow: 0 0 14px rgba(232, 93, 93, 0.22) !important;
  color: var(--rg-gold-bright) !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--rg-danger) !important;
  box-shadow: 0 0 16px rgba(232, 93, 93, 0.32), inset 0 -1px 0 var(--rg-danger) !important;
}

.form-control.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback,
.is-invalid > .invalid-feedback,
.is-invalid .invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.45rem 0.7rem;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
  color: #f3c6c6 !important;
  background: var(--rg-danger-soft);
  border: 1px solid var(--rg-danger-line);
  border-left: 3px solid var(--rg-danger);
  animation: rg-field-error-in 0.28s ease both;
}

@keyframes rg-field-error-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast notifications (bootstrap-notify) ? flat navy cards, no glow washes */
[data-notify="container"].alert.rg-notify {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-width: 360px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
  border: 1px solid var(--rg-line) !important;
  border-left: 2px solid var(--rg-gold) !important;
  border-radius: 0 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55) !important;
  color: var(--rg-text) !important;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
}

.rg-notify__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 40px 14px 14px;
}

.rg-notify__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 !important;
  border: 1px solid var(--rg-line-soft);
  background: rgba(1, 10, 19, 0.55);
  color: var(--rg-gold);
  font-size: 13px;
  line-height: 1;
  box-shadow: none !important;
}

.rg-notify__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

.rg-notify__title:empty {
  display: none;
}

.rg-notify__title:not(:empty) {
  display: block;
  margin: 0 0 4px;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-gold);
}

[data-notify="container"].rg-notify [data-notify="message"],
.rg-notify__msg {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--rg-text-dim);
  word-break: break-word;
}

[data-notify="container"].rg-notify .close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  padding: 4px 8px;
  color: var(--rg-text-muted) !important;
  text-shadow: none !important;
  opacity: 0.7;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

[data-notify="container"].rg-notify .close:hover,
[data-notify="container"].rg-notify .close:focus {
  color: var(--rg-gold-bright) !important;
  opacity: 1;
}

/* Progress tick along the bottom */
[data-notify="container"].rg-notify > .progress {
  position: relative;
  height: 2px;
  margin: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

[data-notify="container"].rg-notify > .progress > .progress-bar {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--rg-gold) !important;
  transition: width linear;
}

/* Status variants ? accent border + icon only, no glow */
[data-notify="container"].rg-notify.alert-success {
  border-left-color: var(--rg-success) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].rg-notify.alert-success .rg-notify__icon {
  color: var(--rg-success);
  border-color: rgba(60, 157, 110, 0.4);
  box-shadow: none !important;
}

[data-notify="container"].rg-notify.alert-success [data-notify="message"],
[data-notify="container"].rg-notify.alert-success .rg-notify__msg {
  color: var(--rg-text-dim);
}

[data-notify="container"].rg-notify.alert-success > .progress > .progress-bar {
  background-color: var(--rg-success) !important;
}

[data-notify="container"].rg-notify.alert-danger,
[data-notify="container"].rg-notify.alert-error {
  border-left-color: var(--rg-danger) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].rg-notify.alert-danger .rg-notify__icon,
[data-notify="container"].rg-notify.alert-error .rg-notify__icon {
  color: var(--rg-danger);
  border-color: var(--rg-danger-line);
  box-shadow: none !important;
}

[data-notify="container"].rg-notify.alert-danger [data-notify="message"],
[data-notify="container"].rg-notify.alert-error [data-notify="message"],
[data-notify="container"].rg-notify.alert-danger .rg-notify__msg,
[data-notify="container"].rg-notify.alert-error .rg-notify__msg {
  color: var(--rg-text-dim);
}

[data-notify="container"].rg-notify.alert-danger > .progress > .progress-bar,
[data-notify="container"].rg-notify.alert-error > .progress > .progress-bar {
  background-color: var(--rg-danger) !important;
}

[data-notify="container"].rg-notify.alert-warning {
  border-left-color: var(--rg-gold) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].rg-notify.alert-warning .rg-notify__icon {
  color: var(--rg-gold);
  border-color: rgba(200, 170, 110, 0.4);
  box-shadow: none !important;
}

[data-notify="container"].rg-notify.alert-warning [data-notify="message"],
[data-notify="container"].rg-notify.alert-warning .rg-notify__msg {
  color: var(--rg-text-dim);
}

[data-notify="container"].rg-notify.alert-warning > .progress > .progress-bar {
  background-color: var(--rg-gold) !important;
}

[data-notify="container"].rg-notify.alert-info {
  border-left-color: var(--rg-info) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].rg-notify.alert-info .rg-notify__icon {
  color: var(--rg-info);
  border-color: rgba(143, 180, 217, 0.4);
  box-shadow: none !important;
}

[data-notify="container"].rg-notify.alert-info [data-notify="message"],
[data-notify="container"].rg-notify.alert-info .rg-notify__msg {
  color: var(--rg-text-dim);
}

[data-notify="container"].rg-notify.alert-info > .progress > .progress-bar {
  background-color: var(--rg-info) !important;
}

/* Fallback for notifies that skip the custom template */
[data-notify="container"].alert:not(.rg-notify) {
  max-width: 360px;
  padding: 14px 36px 14px 16px !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
  border: 1px solid var(--rg-line) !important;
  border-left: 2px solid var(--rg-gold) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55) !important;
  color: var(--rg-text) !important;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  border-radius: 0 !important;
}

[data-notify="container"].alert-danger:not(.rg-notify) {
  border-left-color: var(--rg-danger) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].alert-success:not(.rg-notify) {
  border-left-color: var(--rg-success) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].alert-warning:not(.rg-notify) {
  border-left-color: var(--rg-gold) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].alert-info:not(.rg-notify) {
  border-left-color: var(--rg-info) !important;
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
}

[data-notify="container"].alert:not(.rg-notify) [data-notify="message"] {
  display: block;
  color: var(--rg-text-dim);
}

[data-notify="container"].alert-danger:not(.rg-notify) [data-notify="message"],
[data-notify="container"].alert-success:not(.rg-notify) [data-notify="message"] {
  color: var(--rg-text-dim);
}

[data-notify="container"].alert:not(.rg-notify) .close {
  color: var(--rg-text-dim) !important;
  text-shadow: none !important;
  opacity: 0.7;
}

[data-notify="container"].alert:not(.rg-notify) .close:hover {
  color: var(--rg-gold-bright) !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .form-control.is-invalid ~ .invalid-feedback,
  .was-validated .form-control:invalid ~ .invalid-feedback,
  .is-invalid > .invalid-feedback,
  .is-invalid .invalid-feedback {
    animation: none;
  }
}

.rg-terms-inline {
  display: inline;
  margin-left: 4px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rg-gold) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rg-terms-inline:hover,
.rg-terms-inline:focus {
  color: var(--rg-gold-bright) !important;
}

/* ---------- BUTTONS ---------- */

.btn {
  border-radius: 0 !important;
}

.btn-alt-primary,
.btn-primary,
.btn-hero,
.submit-form {
  font-family: var(--rg-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--rg-gold-bright) !important;
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.14) 0%, rgba(200, 170, 110, 0.03) 55%, rgba(200, 170, 110, 0.1) 100%) !important;
  border: 1px solid var(--rg-gold) !important;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding: 10px 24px !important;
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, letter-spacing 0.2s ease !important;
}

/* Light sweep on hover */
.btn-alt-primary::after,
.btn-primary::after,
.btn-hero::after,
.submit-form::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(240, 230, 210, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}

.btn-alt-primary:hover::after,
.btn-primary:hover::after,
.btn-hero:hover::after,
.submit-form:hover::after {
  left: 130%;
}

.btn-alt-primary:hover,
.btn-primary:hover,
.btn-hero:hover,
.submit-form:hover {
  background: var(--rg-gold) !important;
  color: #010a13 !important;
  box-shadow: 0 0 18px rgba(200, 170, 110, 0.4), 0 0 34px rgba(200, 170, 110, 0.15) !important;
  letter-spacing: 0.22em !important;
}

.btn-alt-primary:active,
.btn-primary:active,
.submit-form:active {
  box-shadow: 0 0 22px rgba(200, 170, 110, 0.5) !important;
}

.btn-alt-primary:hover i,
.btn-primary:hover i,
.submit-form:hover i {
  color: #010a13 !important;
}

/* Secondary buttons (captcha refresh, etc.) */
.btn-secondary {
  background-color: rgba(9, 20, 40, 0.7) !important;
  border: 1px solid var(--rg-line-soft) !important;
  color: var(--rg-text-dim) !important;
  border-radius: 0 !important;
}

.btn-secondary:hover {
  border-color: var(--rg-gold) !important;
  color: var(--rg-gold-bright) !important;
}

/* ---------- FOOTER ? match aos_site riot-theme footer ---------- */

#page-footer.rg-site-footer,
#page-footer {
  background: linear-gradient(180deg, #010a13 0%, #000 100%) !important;
  border-top: 1px solid var(--rg-line) !important;
  padding: 48px 24px 28px !important;
  position: relative;
  color: var(--rg-text-muted) !important;
  opacity: 1 !important; /* always visible like aos_site (skip codebase opacity-0 fade) */
}

#page-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 260px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rg-gold), transparent);
  opacity: 0.7;
  pointer-events: none;
}

#page-footer::after {
  display: none !important;
}

#page-footer .rg-site-footer__table,
#page-footer table {
  width: 100%;
  max-width: 1240px !important;
  height: auto !important;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}

#page-footer table tbody tr:first-child td {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rg-line-soft);
}

#page-footer table tbody tr:last-child td {
  padding-top: 22px;
  vertical-align: top;
}

#page-footer .rg-site-footer__nav,
#page-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-footer ul li {
  display: inline-flex;
}

#page-footer ul li a,
#page-footer ul li a.menu {
  font-family: 'Cinzel', 'Philosopher', var(--rg-serif), serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--rg-text-dim) !important;
  margin-right: 0 !important;
  padding: 6px 2px !important;
  position: relative;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  transition: color 0.2s ease !important;
}

#page-footer ul li a.menu::before {
  display: none !important;
}

#page-footer ul li a.menu::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: var(--rg-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

#page-footer ul li a.menu:hover {
  color: var(--rg-gold-bright) !important;
}

#page-footer ul li a.menu:hover::after,
#page-footer ul li a.menu.active::after {
  transform: scaleX(1);
}

#page-footer ul li a.menu.active {
  color: var(--rg-gold) !important;
}

/* Only legal/copyright text ? do NOT target all spans (.rg-lang is a span) */
#page-footer .rg-site-footer__legal,
#page-footer .rg-site-footer__copy {
  color: var(--rg-text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.9 !important;
  text-transform: uppercase;
  display: block;
}

#page-footer .rg-site-footer__copy .js-year-copy {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
}

#page-footer .rg-site-footer__legal-cell {
  width: 70%;
  padding-right: 24px;
}

#page-footer .rg-site-footer__meta {
  width: 30%;
  text-align: right;
  vertical-align: top;
}

#page-footer .rg-site-footer__copy {
  text-align: right;
}

@media (max-width: 900px) {
  #page-footer ul {
    gap: 4px 18px;
  }

  #page-footer table tbody tr:last-child {
    display: block;
  }

  #page-footer table tbody tr:last-child td {
    display: block;
    width: 100% !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  #page-footer .rg-site-footer__copy {
    text-align: center;
  }

  #page-footer .rg-site-footer__legal {
    margin-bottom: 16px;
  }
}

/* =========================================================================
   LOGGED-IN CABINET
   ========================================================================= */

/* ---------- SIDEBAR ---------- */

#sidebar,
#page-container.sidebar-inverse #sidebar {
  background: linear-gradient(180deg, #0a1428 0%, #010a13 55%) !important;
  color: var(--rg-text-dim) !important;
  border-right: 1px solid var(--rg-line-soft);
  box-shadow: 1px 0 0 0 rgba(200, 170, 110, 0.15), 10px 0 30px rgba(0, 0, 0, 0.35);
}

#sidebar .content-header {
  background: transparent !important;
  border-bottom: 1px solid var(--rg-line-soft);
}

#sidebar .text-dual-primary-dark,
#sidebar .text-primary {
  font-family: var(--rg-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-gold-bright) !important;
}

/* Sidebar navigation */
.nav-main a {
  font-family: var(--rg-serif);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-dim) !important;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nav-main a:hover,
.nav-main a:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.06) !important;
  border-left-color: var(--rg-gold);
}

.nav-main a.active,
.nav-main li.open > a.nav-submenu {
  color: var(--rg-gold) !important;
  background: linear-gradient(90deg, rgba(200, 170, 110, 0.12) 0%, rgba(200, 170, 110, 0.05) 60%, transparent 100%) !important;
  border-left-color: var(--rg-gold);
  box-shadow: inset 3px 0 10px -4px rgba(200, 170, 110, 0.55);
}

.nav-main a > i {
  color: var(--rg-gold) !important;
}

.nav-main ul {
  background: rgba(1, 10, 19, 0.5) !important;
}

.nav-main-heading {
  font-family: var(--rg-serif);
  letter-spacing: 0.18em;
  color: var(--rg-text-muted) !important;
  border-bottom: 1px solid var(--rg-line-soft);
}

/* ---------- DROPDOWNS ---------- */

.dropdown-menu {
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
  color: var(--rg-text-dim) !important;
}

.dropdown-item {
  color: var(--rg-text-dim) !important;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.08) !important;
  border-left-color: var(--rg-gold);
}

.dropdown-divider {
  border-top-color: var(--rg-line-soft) !important;
}

/* Header account menu ? anchored under the user button */
#page-header .rg-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1050;
}

#page-header .rg-user-menu__panel.dropdown-menu {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 0;
  margin: 0;
  z-index: 1051;
  overflow: visible;
  animation: rg-user-menu-in 0.18s ease both;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 170, 110, 0.12) !important;
}

#page-header .rg-user-menu__panel.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #0a1428;
  border-left: 1px solid var(--rg-line);
  border-top: 1px solid var(--rg-line);
  transform: rotate(45deg);
  z-index: 2;
}

@keyframes rg-user-menu-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#page-header .rg-user-menu__head {
  position: relative;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--rg-line-soft);
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.08) 0%, transparent 100%);
}

#page-header .rg-user-menu__email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rg-text);
  line-height: 1.35;
}

#page-header .rg-user-menu__items {
  padding: 6px 0;
}

#page-header .rg-user-menu__panel .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-left: 2px solid transparent;
}

#page-header .rg-user-menu__panel .dropdown-item .fa,
#page-header .rg-user-menu__panel .dropdown-item .si {
  width: 16px;
  margin-right: 0 !important;
  text-align: center;
  opacity: 0.75;
}

#page-header .rg-user-menu__panel .dropdown-item:hover .fa,
#page-header .rg-user-menu__panel .dropdown-item:hover .si {
  opacity: 1;
  color: var(--rg-gold);
}

#page-header .rg-user-menu__manager {
  border-top: 1px solid var(--rg-line-soft);
  padding: 6px 0;
}

#page-header .rg-user-menu__manager .h6,
#page-header .rg-user-menu__manager .border-b {
  margin: 0 0 4px !important;
  padding: 8px 16px 6px !important;
  border-bottom: none !important;
  font-family: var(--rg-serif);
  font-size: 9px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-text-muted) !important;
}

.dropdown-header {
  color: var(--rg-gold) !important;
  font-family: var(--rg-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- TABLES ---------- */

.table {
  color: var(--rg-text-dim) !important;
}

.table th {
  font-family: var(--rg-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-gold) !important;
  border-color: var(--rg-line-soft) !important;
}

.table td {
  border-color: var(--rg-line-soft) !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--rg-line-soft) !important;
}

.table-hover tbody tr:hover {
  background: rgba(200, 170, 110, 0.05) !important;
  color: var(--rg-text) !important;
}

.table thead th {
  border-bottom: 1px solid var(--rg-line) !important;
}

/* ---------- TABS ---------- */

.nav-tabs {
  border-bottom: 1px solid var(--rg-line-soft) !important;
}

.nav-tabs .nav-link,
.nav-tabs-block .nav-link {
  font-family: var(--rg-serif);
  font-size: 12px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-text-dim) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs-block .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs-block .nav-link:focus {
  color: var(--rg-gold-bright) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs-block .nav-link.active,
.nav-tabs-block .nav-item.show .nav-link {
  color: var(--rg-gold) !important;
  background: rgba(200, 170, 110, 0.06) !important;
  border-bottom-color: var(--rg-gold) !important;
}

/* ---------- PAGINATION ---------- */

.page-link {
  background: rgba(9, 20, 40, 0.6) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-radius: 0 !important;
  color: var(--rg-text-dim) !important;
  font-family: var(--rg-serif);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-link:hover {
  color: var(--rg-gold-bright) !important;
  border-color: var(--rg-line) !important;
}

.page-item.active .page-link {
  background: rgba(200, 170, 110, 0.12) !important;
  border-color: var(--rg-gold) !important;
  color: var(--rg-gold) !important;
}

/* ---------- MISC UI ---------- */

.input-group-text {
  background: rgba(1, 10, 19, 0.6) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-radius: 0 !important;
  color: var(--rg-text-dim) !important;
}

.list-group-item {
  background: rgba(9, 20, 40, 0.5) !important;
  border-color: var(--rg-line-soft) !important;
  color: var(--rg-text-dim) !important;
}

.badge-primary {
  background-color: var(--rg-gold) !important;
  color: #010a13 !important;
  border-radius: 0 !important;
}

.badge-info {
  background-color: var(--rg-info) !important;
  color: #010a13 !important;
  border-radius: 0 !important;
}

.badge-success {
  border-radius: 0 !important;
}

.progress {
  background-color: rgba(9, 20, 40, 0.8) !important;
  border: 1px solid var(--rg-line-soft);
  border-radius: 0 !important;
}

.progress-bar {
  background: linear-gradient(90deg, #a48a4a 0%, var(--rg-gold) 55%, var(--rg-gold-bright) 100%) !important;
  color: #010a13;
}

hr {
  border-top-color: var(--rg-line-soft) !important;
}

.text-primary,
.text-info {
  color: var(--rg-gold) !important;
}

.text-muted {
  color: var(--rg-text-muted) !important;
}

.bg-body-light {
  background: rgba(1, 10, 19, 0.55) !important;
}

.bg-primary {
  background-color: rgba(200, 170, 110, 0.15) !important;
}

/* Block header option buttons (collapse / refresh icons) */
.block-options .btn-block-option {
  color: var(--rg-text-dim) !important;
}

.block-options .btn-block-option:hover {
  color: var(--rg-gold-bright) !important;
}

/* Codebase toggle switches */
.css-control-primary .css-control-input:checked ~ .css-control-indicator {
  background-color: var(--rg-gold) !important;
  border-color: var(--rg-gold) !important;
}

/* Alerts ? keep semantics, square the corners and darken the field */
.alert {
  border-radius: 0 !important;
  background-color: rgba(9, 20, 40, 0.7) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-left-width: 3px !important;
  color: var(--rg-text-dim) !important;
}

.alert-success { border-left-color: #3c9d6e !important; }
.alert-danger { border-left-color: #c0392b !important; }
.alert-warning { border-left-color: var(--rg-gold) !important; }
.alert-info { border-left-color: #8fb4d9 !important; }

/* Modals */
.modal-backdrop {
  background-color: #010a13 !important;
}

.modal-backdrop.show {
  opacity: 0.82 !important;
}

.modal-dialog {
  margin: 1.75rem auto;
}

#modal-ajax .modal-content .block.block-transparent {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

#modal-ajax .block-header.bg-primary-dark {
  background: rgba(1, 10, 19, 0.55) !important;
  border-bottom: 1px solid var(--rg-line-soft) !important;
}

#modal-ajax .block-header:has(.rg-transfer-title) {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 14px;
}

#modal-ajax .block-header:has(.rg-transfer-title) .block-options {
  margin-top: 2px;
}

#modal-ajax .modal-ajax-footer.bg-body-light {
  background: rgba(1, 10, 19, 0.65) !important;
  border-top: 1px solid var(--rg-line-soft) !important;
}

/* Transfer Credits modal */
#modal-ajax .rg-transfer-title {
  display: block;
  font-family: var(--rg-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-gold-bright);
  line-height: 1.3;
}

#modal-ajax .rg-transfer-title__server {
  display: block;
  margin-top: 4px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

#modal-ajax .block-content.modal-ajax-content:has(.rg-transfer) {
  padding: 22px 26px 8px !important;
}

#modal-ajax .rg-transfer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
}

#modal-ajax .rg-transfer__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

#modal-ajax .rg-transfer__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rg-gold);
}

#modal-ajax .rg-transfer__unit {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rg-text-muted);
  text-transform: uppercase;
}

#modal-ajax .rg-transfer__unit:empty {
  display: none;
}

#modal-ajax .rg-transfer__control,
#modal-ajax .rg-transfer select.form-control,
#modal-ajax .rg-transfer input.form-control {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px !important;
  margin: 0;
  font-family: var(--rg-serif) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#modal-ajax .rg-transfer__currency-row:has(.in-game-title:empty),
#modal-ajax .rg-transfer__currency-row:not(:has(.in-game-title)) {
  display: none;
}

#modal-ajax .rg-transfer__currency {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 12px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-gold-bright);
  background: rgba(228, 197, 113, 0.08);
  border: 1px solid rgba(200, 170, 110, 0.35);
}

#modal-ajax .rg-transfer__currency:empty {
  display: none;
}

#modal-ajax .rg-transfer__note:empty {
  display: none;
}

#modal-ajax .rg-transfer__note {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rg-text-dim);
  background: rgba(1, 10, 19, 0.45);
  border-left: 2px solid var(--rg-gold);
}

#modal-ajax .rg-transfer__alert {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--rg-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rg-gold-bright);
  background: rgba(200, 170, 110, 0.08);
  border: 1px solid rgba(200, 170, 110, 0.28);
}

#modal-ajax .rg-transfer__types {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#modal-ajax .rg-transfer__type {
  display: block;
  margin: 0;
  cursor: pointer;
}

#modal-ajax .rg-transfer__type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#modal-ajax .rg-transfer__type-face {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 14px;
  color: var(--rg-text);
  background: rgba(1, 10, 19, 0.85);
  border: 1px solid var(--rg-line-soft);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

#modal-ajax .rg-transfer__type input:checked + .rg-transfer__type-face {
  color: var(--rg-gold-bright);
  border-color: var(--rg-gold);
  background: rgba(228, 197, 113, 0.08);
}

#modal-ajax .rg-transfer__type:hover .rg-transfer__type-face {
  border-color: rgba(200, 170, 110, 0.45);
}

#modal-ajax .rg-transfer__type-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

#modal-ajax .rg-transfer__type-name {
  font-family: var(--rg-serif);
  font-size: 12px;
  letter-spacing: 0.06em;
}

#modal-ajax .modal-ajax-footer:has(.rg-transfer-footer) {
  padding: 16px 26px 20px !important;
}

#modal-ajax .rg-transfer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

#modal-ajax .rg-transfer-footer__cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#modal-ajax .rg-transfer-footer__cost-label {
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

#modal-ajax .rg-transfer-footer__cost-value {
  font-family: var(--rg-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--rg-gold-bright);
}

#modal-ajax .rg-transfer-footer__btn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 148px;
  white-space: nowrap;
  padding: 11px 22px !important;
}

#modal-ajax .rg-transfer-footer__btn i {
  margin: 0 !important;
  font-size: 13px;
}

@media (max-width: 575.98px) {
  #modal-ajax .block-content.modal-ajax-content:has(.rg-transfer) {
    padding: 18px 16px 6px !important;
  }

  #modal-ajax .modal-ajax-footer:has(.rg-transfer-footer) {
    padding: 14px 16px 18px !important;
  }

  #modal-ajax .rg-transfer-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #modal-ajax .rg-transfer-footer__btn {
    width: 100%;
  }
}

#modal-ajax .form-control,
#modal-ajax select.form-control,
.modal .form-control,
.modal select.form-control {
  background-color: rgba(1, 10, 19, 0.85) !important;
  border: 1px solid var(--rg-line-soft) !important;
  color: var(--rg-text) !important;
  -webkit-text-fill-color: var(--rg-text);
}

#modal-ajax .form-control:focus,
.modal .form-control:focus {
  background-color: rgba(1, 10, 19, 0.95) !important;
  border-color: var(--rg-gold) !important;
  color: var(--rg-gold-bright) !important;
  -webkit-text-fill-color: var(--rg-gold-bright);
}

#modal-ajax .form-control:not(:placeholder-shown):not(:focus),
.modal .form-control:not(:placeholder-shown):not(:focus) {
  background-color: rgba(9, 20, 40, 0.95) !important;
  border-color: rgba(200, 170, 110, 0.42) !important;
  color: var(--rg-gold-bright) !important;
  -webkit-text-fill-color: var(--rg-gold-bright);
}

#modal-ajax .form-control:-webkit-autofill,
#modal-ajax .form-control:-webkit-autofill:hover,
#modal-ajax .form-control:-webkit-autofill:focus,
#modal-ajax .form-control:-webkit-autofill:active,
.modal .form-control:-webkit-autofill,
.modal .form-control:-webkit-autofill:hover,
.modal .form-control:-webkit-autofill:focus,
.modal .form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--rg-gold-bright) !important;
  caret-color: var(--rg-gold-bright);
  border-color: rgba(200, 170, 110, 0.42) !important;
  box-shadow: 0 0 0 1000px #0a1428 inset !important;
  transition: background-color 99999s ease-out 0s;
}

#modal-ajax .input-group-append .btn,
#modal-ajax .input-group-prepend .btn,
.modal .input-group-append .btn,
.modal .input-group-prepend .btn {
  background: rgba(1, 10, 19, 0.85) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-left: 0 !important;
  color: var(--rg-gold) !important;
  border-radius: 0 !important;
}

#modal-ajax .input-group-append .btn:hover,
.modal .input-group-append .btn:hover {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.1) !important;
}

#modal-ajax .input-group .form-control {
  border-right: 0 !important;
}

#modal-ajax .input-group .form-control:focus {
  border-right: 0 !important;
}

/* Password show/hide ? seamless with the input */
.input-group:has(.rg-pw-toggle),
.input-group:has(#eye) {
  align-items: stretch;
}

.rg-pw-toggle,
.btn.rg-pw-toggle,
#eye.btn,
.input-group-append #eye,
.input-group-append .rg-pw-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: rgba(1, 10, 19, 0.85) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-left: 1px solid rgba(200, 170, 110, 0.18) !important;
  border-radius: 0 !important;
  color: var(--rg-text-muted) !important;
  box-shadow: none !important;
  clip-path: none !important;
  letter-spacing: 0 !important;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
}

.rg-pw-toggle .fa,
#eye .fa {
  display: inline-block !important;
  font-size: 14px;
  line-height: 1;
  color: inherit;
}

.rg-pw-toggle:hover,
.rg-pw-toggle:focus,
#eye.btn:hover,
#eye.btn:focus,
.input-group-append #eye:hover,
.input-group-append #eye:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.1) !important;
  border-color: var(--rg-line) !important;
  border-left-color: rgba(200, 170, 110, 0.35) !important;
  outline: none;
}

.input-group:focus-within .rg-pw-toggle,
.input-group:focus-within #eye.btn {
  border-color: var(--rg-gold) !important;
  border-left-color: rgba(200, 170, 110, 0.35) !important;
  color: var(--rg-gold) !important;
}

.input-group .form-control:has(+ .input-group-append .rg-pw-toggle),
.input-group .form-control:has(+ .input-group-append #eye) {
  border-right: 0 !important;
}

#modal-ajax .input-group-append .rg-pw-toggle,
#modal-ajax .input-group-append #eye,
.modal .input-group-append .rg-pw-toggle,
.modal .input-group-append #eye {
  background: rgba(1, 10, 19, 0.85) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-left: 1px solid rgba(200, 170, 110, 0.18) !important;
}

.modal-header {
  border-bottom: 1px solid var(--rg-line-soft) !important;
}

.modal-footer {
  border-top: 1px solid var(--rg-line-soft) !important;
}

/* Semantic buttons ? square corners to match */
.btn-success,
.btn-alt-success,
.btn-danger,
.btn-alt-danger,
.btn-warning,
.btn-alt-warning,
.btn-info,
.btn-alt-info,
.btn-outline-primary,
.btn-dual-secondary {
  border-radius: 0 !important;
}

.btn-outline-primary {
  border-color: var(--rg-gold) !important;
  color: var(--rg-gold) !important;
}

.btn-outline-primary:hover {
  background-color: var(--rg-gold) !important;
  color: #010a13 !important;
}

/* =========================================================================
   LANGUAGE SWITCHER ? flag chip (decorated by riot-panel.js)
   Flag sprite reused from intl-telInput (assets/css/intl-telInput/img/).
   ========================================================================= */

.rg-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Source select stays in the DOM for existing #change_lang hooks — never shown */
.rg-lang select.form-control,
.rg-lang select {
  display: none !important;
}

/* Chip button — same family as .rg-btn-ghost (angled cut, gold hover) */
.rg-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: rgba(9, 20, 40, 0.55);
  border: 1px solid var(--rg-line-soft);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rg-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.rg-lang__btn:hover,
.rg-lang__btn:focus-visible,
.rg-lang.open .rg-lang__btn {
  color: var(--rg-gold-bright);
  border-color: var(--rg-line);
  background: rgba(200, 170, 110, 0.1);
  outline: none;
}

.rg-lang__code {
  line-height: 1;
}

/* Chevron drawn in CSS so it matches the gold text color exactly */
.rg-lang__caret {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.2s ease, margin-top 0.2s ease;
}

.rg-lang.open .rg-lang__caret {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Menu panel — same chrome as the header user dropdown */
.rg-lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1051;
  min-width: 136px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #0a1428;
  border: 1px solid rgba(200, 170, 110, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 170, 110, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.rg-lang.open .rg-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Arrow notch pointing at the chip */
.rg-lang__menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #0a1428;
  border-left: 1px solid var(--rg-line);
  border-top: 1px solid var(--rg-line);
  transform: rotate(45deg);
}

.rg-lang__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rg-text-dim) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rg-lang__opt:hover,
.rg-lang__opt:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.08);
  border-left-color: var(--rg-gold);
  outline: none;
}

.rg-lang__opt.is-active {
  color: var(--rg-gold) !important;
  background: rgba(200, 170, 110, 0.05);
  border-left-color: var(--rg-gold);
}

.rg-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("intl-telInput/img/flags.png");
  background-repeat: no-repeat;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  box-sizing: content-box;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .rg-flag {
    background-image: url("intl-telInput/img/flags@2x.png");
    background-size: 5652px 15px;
  }
}

/* Sprite positions (from intlTelInput.css) for the languages this site ships */
.rg-flag--ru { height: 14px; background-position: -4295px 0; }
.rg-flag--en { height: 10px; background-position: -1775px 0; } /* GB */
.rg-flag--gr { height: 14px; background-position: -2039px 0; }
.rg-flag--es { height: 14px; background-position: -1555px 0; }
.rg-flag--pt { height: 14px; background-position: -4141px 0; }
.rg-flag--cn { height: 14px; background-position: -1049px 0; }
.rg-flag--ko { height: 14px; background-position: -2787px 0; } /* KR */
.rg-flag--uk { height: 14px; background-position: -5175px 0; } /* UA */
.rg-flag--vn { height: 14px; background-position: -5434px 0; }

/* =========================================================================
   READABILITY & PLACEMENT FIXES
   ========================================================================= */

/* Base copy was too small against the serif chrome */
.block-content,
.form-material,
.custom-control-label,
.table td {
  font-size: 14px;
}

.content .pb-20.text-center h1 {
  font-size: 26px;
  line-height: 1.35;
  margin-top: 10px;
}

/* Center the auth card header row; language chip was crowding the title */
.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.block-options {
  margin-left: auto;
}

/* ---------- DONATIONS ---------- */

/* Donation page headings */
.my-10.text-center h2 {
  font-size: 24px;
  letter-spacing: 0.14em;
}

.my-10.text-center .h5 {
  color: var(--rg-text-dim) !important;
  font-family: inherit !important;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Concise TOTAL row ? clean, no glow wash */
.rg-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 20px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--rg-line);
  border-bottom: 1px solid var(--rg-line);
  box-shadow: none;
  clip-path: none;
  transition: border-color 0.2s ease;
}

.rg-total.has-bonus {
  background: transparent;
  box-shadow: none;
}

.rg-total__label {
  font-family: var(--rg-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rg-gold);
  white-space: nowrap;
  text-shadow: none;
}

.rg-total__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.rg-total__sum {
  font-family: var(--rg-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--rg-gold-bright);
  text-shadow: none;
}

.rg-total.has-bonus .rg-total__sum {
  color: var(--rg-gold-bright);
  text-shadow: none;
}

.rg-total__unit {
  font-family: var(--rg-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-gold);
}

.rg-total__bonus {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 4px 9px;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0e6d2 !important;
  background: #0a1428 !important;
  border: 1px solid #c8aa6e !important;
  white-space: nowrap;
}

.rg-total__bonus[hidden] {
  display: none !important;
}

@media (max-width: 575.98px) {
  .rg-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
  }

  .rg-total__value {
    justify-content: flex-start;
  }

  .rg-total__sum {
    font-size: 28px;
  }
}

/* Exchange-rate board */
#calculation_board .row {
  border-bottom-color: var(--rg-line-soft) !important;
  padding-top: 8px;
  padding-bottom: 4px;
  font-size: 14px;
}

#calculation_board .col-3 {
  color: var(--rg-text-dim);
  font-family: var(--rg-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#calculation_board .pull-right {
  color: var(--rg-gold-bright);
  font-weight: 600;
}

/* Bonus item board */
#item_board {
  border-left-color: var(--rg-line-soft) !important;
}

/* Payment method cards ? navy chips, gold frame when selected */
.cc-selector-2 {
  position: relative;
}

.cc-selector-2 input {
  opacity: 0;
}

.drinkcard-cc {
  display: block;
  position: relative;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--rg-line-soft);
  clip-path: none;
  filter: grayscale(0.85) brightness(1.25) opacity(0.75) !important;
  transition: filter 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.drinkcard-cc:hover {
  filter: grayscale(0.3) brightness(1.1) opacity(0.95) !important;
  border-color: var(--rg-line);
}

.cc-selector-2 input:checked + .drinkcard-cc {
  filter: none !important;
  border-color: var(--rg-gold);
  background: transparent;
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.25), inset 0 0 12px rgba(200, 170, 110, 0.1);
}

.drinkcard-cc img {
  border-radius: 0;
}

/* Per-method minimum payment tooltip */
.rg-pay-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 88px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.97) 0%, rgba(1, 10, 19, 0.98) 100%);
  border: 1px solid var(--rg-gold);
  box-shadow: 0 0 18px rgba(200, 170, 110, 0.28), 0 8px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.rg-pay-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--rg-gold);
}

.rg-pay-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -5px;
  margin-top: -1px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(1, 10, 19, 0.98);
  z-index: 1;
}

.drinkcard-cc:hover ~ .rg-pay-tip,
.cc-selector-2:hover .rg-pay-tip,
.cc-selector-2 input:focus + .drinkcard-cc ~ .rg-pay-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.rg-pay-tip__label {
  font-family: var(--rg-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-text-dim);
  line-height: 1;
}

.rg-pay-tip__value {
  font-family: var(--rg-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rg-gold-bright);
  line-height: 1.1;
  white-space: nowrap;
}

.rg-pay-invalid-msg {
  margin-top: 10px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c94f4f;
}

.rg-coin-min-hint {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c94f4f;
}

.rg-coin-min-hint[hidden] {
  display: none !important;
}

.rg-coin-min-hint__label {
  color: var(--rg-text-dim);
  letter-spacing: 0.14em;
}

.rg-coin-min-hint__value {
  color: #c94f4f;
  letter-spacing: 0.06em;
}

#coin.is-invalid-sum {
  border-color: rgba(200, 110, 110, 0.65) !important;
  box-shadow: 0 0 12px rgba(200, 110, 110, 0.18) !important;
}

.submit-form.is-disabled,
.submit-form[disabled] {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  filter: grayscale(0.35);
  animation: none !important;
}

.submit-form.is-disabled::after,
.submit-form[disabled]::after {
  display: none;
}

/* Donate Top-up CTA ? dark framed plaque with soft sparkle life */
.rg-donate-cta,
#donate-submit.rg-donate-cta {
  width: 100%;
  min-height: 56px;
  padding: 16px 28px !important;
  font-size: 14px !important;
  letter-spacing: 0.28em !important;
  color: var(--rg-gold-bright) !important;
  background: #010a13 !important;
  border: 1px solid var(--rg-gold) !important;
  box-shadow: none !important;
  text-shadow: none;
  clip-path: none;
  border-radius: 0 !important;
  animation: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    letter-spacing 0.4s ease,
    transform 0.35s ease !important;
}

/* Gold fill fades in ? solid?gradient can't transition, so opacity does the work */
.rg-donate-cta::before,
#donate-submit.rg-donate-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(180deg, #f0e6d2 0%, #c8aa6e 55%, #a48a4a 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rg-donate-cta__label {
  position: relative;
  z-index: 2;
}

.rg-donate-cta i.fa,
#donate-submit.rg-donate-cta i.fa {
  position: relative;
  z-index: 2;
  color: var(--rg-gold) !important;
  font-size: 15px;
  margin-right: 10px !important;
  transition: color 0.4s ease;
}

/* Soft looping shimmer band */
.rg-donate-cta::after,
#donate-submit.rg-donate-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 28%;
  background: linear-gradient(105deg, transparent, rgba(200, 170, 110, 0.12), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
  animation: rg-donate-shimmer 3.6s ease-in-out infinite;
  transition: background 0.4s ease;
}

.rg-donate-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.rg-donate-sparkles span {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rg-gold);
  opacity: 0;
  border: none !important;
  border-radius: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: rotate(45deg) scale(0.4);
  box-shadow: none;
  animation: rg-donate-sparkle 2.8s ease-in-out infinite;
}

.rg-donate-sparkles span:nth-child(1) {
  top: 28%;
  left: 14%;
  animation-delay: 0s;
}

.rg-donate-sparkles span:nth-child(2) {
  top: 62%;
  left: 28%;
  width: 3px;
  height: 3px;
  animation-delay: 0.7s;
}

.rg-donate-sparkles span:nth-child(3) {
  top: 34%;
  right: 22%;
  left: auto;
  animation-delay: 1.4s;
}

.rg-donate-sparkles span:nth-child(4) {
  top: 68%;
  right: 12%;
  left: auto;
  width: 3px;
  height: 3px;
  animation-delay: 2.1s;
}

@keyframes rg-donate-shimmer {
  0%, 18% {
    left: -40%;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  55% {
    left: 110%;
    opacity: 0.85;
  }
  70%, 100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes rg-donate-sparkle {
  0%, 70%, 100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.35);
  }
  78% {
    opacity: 0.95;
    transform: rotate(45deg) scale(1);
  }
  86% {
    opacity: 0.35;
    transform: rotate(45deg) scale(0.7);
  }
}

.rg-donate-cta:hover,
#donate-submit.rg-donate-cta:hover {
  color: #010a13 !important;
  background: #010a13 !important;
  border-color: var(--rg-gold-bright) !important;
  letter-spacing: 0.32em !important;
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 231, 0.25), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.rg-donate-cta:hover::before,
#donate-submit.rg-donate-cta:hover::before {
  opacity: 1;
}

.rg-donate-cta:hover::after,
#donate-submit.rg-donate-cta:hover::after {
  left: -40%;
  animation: rg-donate-shimmer 1.8s ease-in-out infinite;
  background: linear-gradient(105deg, transparent, rgba(255, 252, 245, 0.35), transparent);
}

.rg-donate-cta:hover i.fa,
#donate-submit.rg-donate-cta:hover i.fa {
  color: #010a13 !important;
}

.rg-donate-cta:hover .rg-donate-sparkles span {
  background: #fff8e7;
  animation-duration: 1.6s;
}

.rg-donate-cta:active,
#donate-submit.rg-donate-cta:active {
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition-duration: 0.15s !important;
}

.rg-donate-cta.is-disabled,
.rg-donate-cta[disabled],
#donate-submit.rg-donate-cta.is-disabled,
#donate-submit.rg-donate-cta[disabled] {
  color: var(--rg-text-muted) !important;
  background: rgba(9, 20, 40, 0.55) !important;
  border-color: var(--rg-line-soft) !important;
  text-shadow: none;
  box-shadow: none !important;
  transform: none;
}

.rg-donate-cta.is-disabled i.fa,
.rg-donate-cta[disabled] i.fa,
#donate-submit.rg-donate-cta.is-disabled i.fa,
#donate-submit.rg-donate-cta[disabled] i.fa {
  color: var(--rg-text-muted) !important;
}

.rg-donate-cta.is-disabled::before,
.rg-donate-cta[disabled]::before,
#donate-submit.rg-donate-cta.is-disabled::before,
#donate-submit.rg-donate-cta[disabled]::before {
  opacity: 0;
  transition: none;
}

.rg-donate-cta.is-disabled::after,
.rg-donate-cta[disabled]::after,
#donate-submit.rg-donate-cta.is-disabled::after,
#donate-submit.rg-donate-cta[disabled]::after,
.rg-donate-cta.is-disabled .rg-donate-sparkles,
.rg-donate-cta[disabled] .rg-donate-sparkles {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rg-donate-cta,
  #donate-submit.rg-donate-cta {
    transition: none !important;
  }

  .rg-donate-cta::before,
  #donate-submit.rg-donate-cta::before {
    transition: none !important;
  }

  .rg-donate-cta::after,
  #donate-submit.rg-donate-cta::after,
  .rg-donate-sparkles span {
    animation: none !important;
  }

  .rg-donate-sparkles {
    display: none;
  }
}

/* In-game currency picker (btn-default labels) */
.btn-group .btn.btn-default {
  background: rgba(9, 20, 40, 0.6) !important;
  border: 1px solid var(--rg-line-soft) !important;
  color: var(--rg-text-dim) !important;
  text-align: left;
}

input[name="type_id"]:checked + .btn-group .btn.btn-default {
  border-color: var(--rg-gold) !important;
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.08) !important;
}

/* Amount slider (ionRangeSlider round skin) */
.irs.irs--round .irs-bar {
  background: linear-gradient(90deg, var(--rg-gold), var(--rg-gold-bright)) !important;
}

.irs.irs--round .irs-single {
  background: var(--rg-gold) !important;
  color: #010a13 !important;
  font-weight: 700;
  border-radius: 0 !important;
}

.irs.irs--round .irs-single::before {
  border-top-color: var(--rg-gold) !important;
}

.irs.irs--round .irs-handle {
  border-color: var(--rg-gold) !important;
  background: #010a13 !important;
  box-shadow: 0 0 10px rgba(200, 170, 110, 0.5) !important;
}

.irs.irs--round .irs-min,
.irs.irs--round .irs-max,
.irs.irs--round .irs-grid-text {
  color: var(--rg-text-dim) !important;
  font-size: 11px !important;
}

.irs.irs--round .irs-line,
.irs.irs--round .irs-grid-pol {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* In-game message under the currency picker */
.in-game-message {
  color: var(--rg-text-dim);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- BONUS TIER STRIP ---------- */

.rg-tiers {
  margin: 4px 0 18px;
}

.rg-tiers__head {
  font-family: var(--rg-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rg-gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rg-tiers__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rg-line), transparent);
}

.rg-tiers__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rg-tier {
  flex: 1 1 90px;
  min-width: 90px;
  padding: 10px 8px 8px;
  text-align: center;
  background: rgba(9, 20, 40, 0.6);
  border: 1px solid var(--rg-line-soft);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.rg-tier__pct {
  font-family: var(--rg-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rg-gold);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.rg-tier__range {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rg-text-muted);
  white-space: nowrap;
}

.rg-tier.is-active {
  border-color: var(--rg-gold);
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(9, 20, 40, 0.7));
  box-shadow: 0 0 18px rgba(200, 170, 110, 0.3);
  transform: translateY(-2px);
}

.rg-tier.is-active .rg-tier__pct {
  color: var(--rg-gold-bright);
  text-shadow: 0 0 12px rgba(200, 170, 110, 0.55);
}

.rg-tier.is-active .rg-tier__range {
  color: var(--rg-text-dim);
}

/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 991px) {
  body::before {
    background-size: auto, auto, auto, auto, cover, auto !important;
    background-position: center top, center top, center bottom, center, top center, center !important;
  }
}

@media (max-width: 767px) {
  .content .pb-20.text-center h1 {
    font-size: 20px;
    letter-spacing: 0.08em;
  }

  h1, h2, h3, .h1, .h2, .h3 {
    letter-spacing: 0.06em;
  }

  .block-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Donations card uses heavy desktop padding */
  .block-content.pl-50,
  .block-content.pr-50 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .block,
  .block.block-themed {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }

  .modal-content {
    clip-path: none !important;
  }

  /* Bigger touch targets */
  .btn-alt-primary,
  .btn-primary,
  .submit-form {
    width: 100%;
    padding: 13px 20px !important;
  }

  .form-control {
    font-size: 16px !important; /* stops iOS zoom-on-focus */
    min-height: 44px;
  }

  .rg-lang__btn {
    height: 38px;
  }

  label {
    font-size: 12px !important;
    letter-spacing: 0.1em;
  }

  /* Auth form footer: stack checkbox and button */
  .form-group.row.mb-0 .col-sm-6 {
    text-align: center !important;
    margin-bottom: 10px;
  }

  /* Bonus tiers scroll horizontally instead of squashing */
  .rg-tiers__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .rg-tier {
    flex: 0 0 100px;
  }

  /* Exchange board rows readable */
  #calculation_board .col-3 {
    font-size: 11px;
  }

  /* Payment logos 2-up */
  .cc-selector-2 {
    margin-bottom: 8px;
  }
}

/* =========================================================================
   DONATIONS v2 ? slider removed, hero amount input, clickable tiers,
   currency flags on the exchange board
   ========================================================================= */

/* Slider stays in the DOM (its prettify() computes the bonus) but is unseen */
.rg-slider-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Hero amount input */
#coin {
  font-family: var(--rg-serif);
  font-size: 22px !important;
  font-weight: 700;
  color: var(--rg-gold-bright) !important;
  height: 54px;
  letter-spacing: 0.04em;
}

/* Number inputs ? hide native spinners; custom .rg-number controls instead */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.rg-number {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.rg-number > input[type="number"] {
  width: 100%;
  padding-right: 34px !important;
}

.rg-number__controls {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 28px;
  overflow: hidden;
  border-left: 1px solid rgba(200, 170, 110, 0.22);
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.95) 0%, rgba(1, 10, 19, 0.98) 100%);
}

.rg-number__btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rg-gold);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.rg-number__btn + .rg-number__btn {
  border-top: 1px solid rgba(200, 170, 110, 0.18);
}

.rg-number__btn:hover,
.rg-number__btn:focus {
  color: var(--rg-gold-bright);
  background: rgba(228, 197, 113, 0.12);
  outline: none;
}

.rg-number__btn:active {
  background: rgba(228, 197, 113, 0.2);
}

.rg-number__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--rg-text-muted);
  background: transparent;
}

.rg-number__btn .fa {
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.rg-number:focus-within .rg-number__controls {
  border-left-color: rgba(200, 170, 110, 0.45);
}

/* Bootstrap input-group expects form-control as a direct child. Our stepper
   wraps the input, so mimic .form-control flex sizing (width: 1%) or the
   prepend/append chips wrap onto their own rows. */
.input-group:has(> .rg-number) {
  flex-wrap: nowrap;
  align-items: stretch;
}

.input-group > .rg-number {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group > .rg-number > input.form-control {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 0;
  border-radius: 0 !important;
}

.input-group > .input-group-prepend + .rg-number > input.form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .rg-number + .input-group-append > .input-group-text,
.input-group > .rg-number + .input-group-append > .btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 54px only for the tall #coin amount bar — not recipient .type_icon etc. */
.rg-donate-ingame .input-group:has(#coin) > .input-group-prepend > .input-group-text,
.rg-donate-ingame .input-group:has(#coin) > .input-group-append > .input-group-text,
.rg-donate-master-amount .input-group > .input-group-prepend > .input-group-text,
.rg-donate-master-amount .input-group > .input-group-append > .input-group-text,
.rg-donate .input-group:has(#coin) > .input-group-prepend > .input-group-text,
.rg-donate .input-group:has(#coin) > .input-group-append > .input-group-text,
.rg-donate-amount .input-group > .input-group-prepend > .input-group-text,
.rg-donate-amount .input-group > .input-group-append > .input-group-text {
  min-height: 54px;
}

/* Donate amount row: currency | value | bonus ? one continuous bar */
.rg-donate-ingame .input-group:has(#coin),
.rg-donate-ingame .input-group:has(.rg-number > #coin),
.rg-donate-master-amount .input-group,
.rg-donate .input-group:has(#coin),
.rg-donate .input-group:has(.rg-number > #coin) {
  flex-wrap: nowrap;
  align-items: stretch;
}

.rg-donate-ingame .input-group-prepend .short_name_icon,
.rg-donate-master-amount .input-group-prepend .short_name_icon,
.rg-donate .input-group-prepend .short_name_icon {
  min-width: 52px;
  height: 54px;
  padding: 0 14px !important;
  font-family: var(--rg-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rg-gold-bright) !important;
  background: rgba(1, 10, 19, 0.55) !important;
}

/* Match the prepend chips to the taller input */
#coin ~ .input-group-append .input-group-text:not(#bonus_sum),
.input-group-prepend .short_name_icon {
  font-family: var(--rg-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Live bonus readout ? stacked chip fused onto the amount bar (no separate
   box: stretches to the field height, single hairline divider on its left) */
#bonus_sum {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 78px;
  width: auto;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch;
  padding: 6px 14px !important;
  background: rgba(1, 10, 19, 0.45) !important;
  border-color: var(--rg-line-soft) !important;
  border-left: 0 !important;
  color: var(--rg-text-muted) !important;
  font-family: var(--rg-serif);
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The stepper arrows float inside the field instead of forming their own
   bordered cell between the amount and the bonus chip. */
.rg-donate-amount .input-group {
  flex-wrap: nowrap;
  align-items: stretch;
}

.rg-donate-amount .rg-number__controls {
  border-left: 0;
  background: transparent;
  right: 4px;
}

.rg-donate-amount .rg-number > input.form-control {
  border-right: 1px solid var(--rg-line-soft) !important;
}

#bonus_sum .rg-bonus__amt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  line-height: 1;
}

#bonus_sum .rg-bonus__lbl {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
  opacity: 0.85;
  line-height: 1;
}

#bonus_sum.has-bonus {
  background: #0a1428 !important;
  border-color: var(--rg-gold) !important;
  color: var(--rg-gold-bright) !important;
  box-shadow: none;
}

#bonus_sum.has-bonus .rg-bonus__amt {
  color: #f0e6d2 !important;
}

#bonus_sum.has-bonus .rg-bonus__lbl {
  color: #c8aa6e !important;
  opacity: 1;
}

.input-group > .input-group-append:has(#bonus_sum) {
  flex: 0 0 auto;
}

/* Tier cards are now the amount picker */
.rg-tier {
  cursor: pointer;
}

.rg-tier:hover {
  border-color: var(--rg-line);
  background: rgba(200, 170, 110, 0.07);
  transform: translateY(-2px);
}

.rg-tier:hover .rg-tier__pct {
  color: var(--rg-gold-bright);
}

.rg-tiers__hint {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rg-text-muted);
}

/* Currency flags on the exchange board */
.rg-flag--us { height: 11px; background-position: -5263px 0; }
.rg-flag--eu { height: 14px; background-position: -1599px 0; }
.rg-flag--br { height: 14px; background-position: -680px 0; }
.rg-flag--ua { height: 14px; background-position: -5175px 0; }

#calculation_board .col-3 {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* =========================================================================
   BRAND LOGO (sidebar + shared)
   ========================================================================= */

.rg-brand {
  display: inline-flex;
  align-items: center;
}

.rg-brand::before {
  display: none !important;
}

.rg-brand__img {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

#sidebar .rg-brand__img {
  height: 40px;
}

/* Mid-width desktops ? slightly tighter nav so it clears auth */
@media (min-width: 992px) and (max-width: 1399px) {
  #page-header .rg-site-header__bar {
    padding: 0 18px !important;
    gap: 12px 16px;
  }

  .nav-main-header.rg-site-nav > li > a,
  .nav-main-header > li > a {
    padding: 0 10px !important;
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
  }

  .nav-main-header.rg-site-nav > li > a::before {
    left: 10px;
    right: 10px;
  }

  #page-header .rg-brand__img {
    height: 52px !important;
    max-height: 52px;
  }
}

@media (min-width: 1400px) {
  #page-header .rg-site-header__bar {
    padding: 0 36px !important;
  }

  .nav-main-header.rg-site-nav > li > a,
  .nav-main-header > li > a {
    padding: 0 16px !important;
    letter-spacing: 0.14em !important;
  }

  .nav-main-header.rg-site-nav > li > a::before {
    left: 16px;
    right: 16px;
  }
}

@media (max-width: 991px) {
  /* Tablet / mobile header ? wrap like aos_site */
  #page-container.page-header-modern #page-header > .content-header.rg-site-header__bar,
  #page-container.main-content-boxed > #page-header > .content-header.rg-site-header__bar,
  #page-container #page-header > .content-header.rg-site-header__bar,
  #page-header .rg-site-header__bar {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    gap: 4px 10px;
    align-items: center !important;
  }

  #page-header .rg-site-header__brand {
    order: 1;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    height: auto;
  }

  #page-header .rg-site-header__utils {
    order: 2;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: auto !important;
    gap: 8px;
    height: auto;
  }

  #page-header .rg-site-header__nav {
    order: 3;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: none;
    overflow: visible;
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    pointer-events: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2px;
  }

  #page-header .rg-site-header__nav .nav-main-header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2px;
    width: 100%;
  }

  #page-header .rg-site-header__nav .nav-main-header > li > a {
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  #page-header .rg-site-header__nav .nav-main-header > li > a::before {
    left: 10px;
    right: 10px;
    bottom: 6px;
  }

  #page-header .rg-brand__img {
    height: 40px !important;
  }

  #page-header .rg-site-header__lang .rg-lang__btn {
    height: 34px;
    padding: 0 8px;
  }

  #page-header .rg-btn-ghost,
  #page-header .rg-btn-cta {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  #page-container.page-header-fixed #main-container {
    padding-top: 100px !important; /* wrapped header is taller */
  }
}

/* =========================================================================
   HEADER AUTH ? Sign In (ghost chip) / Register (aos_site .play CTA)
   ========================================================================= */

.rg-btn-ghost,
.rg-btn-cta {
  font-family: 'Cinzel', 'Philosopher', var(--rg-serif), serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 0 22px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, letter-spacing 0.2s ease !important;
  text-decoration: none !important;
}

.rg-btn-ghost .si,
.rg-btn-ghost .fa,
.rg-btn-cta .si,
.rg-btn-cta .fa {
  display: none;
}

#page-header-user-dropdown.rg-btn-ghost {
  min-width: 40px;
  padding: 0 12px !important;
  letter-spacing: 0 !important;
}

#page-header-user-dropdown.rg-btn-ghost .fa {
  display: inline-block !important;
  line-height: 1;
  vertical-align: middle;
  font-size: 14px;
}

/* Ghost = secondary action (Sign In / Logout) */
.rg-btn-ghost {
  color: var(--rg-text) !important;
  background: rgba(9, 20, 40, 0.55) !important;
  border: 1px solid var(--rg-line-soft) !important;
}

.rg-btn-ghost:hover,
.rg-btn-ghost.active {
  color: var(--rg-gold-bright) !important;
  border-color: var(--rg-line) !important;
  background: rgba(200, 170, 110, 0.1) !important;
}

/* CTA = aos_site header .play (Account) button */
.rg-btn-cta {
  color: var(--rg-gold-bright) !important;
  background: transparent !important;
  border: 1px solid var(--rg-gold) !important;
  text-shadow: none;
}

.rg-btn-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200, 170, 110, 0) 0%, rgba(200, 170, 110, 0) 50%, rgba(200, 170, 110, 0.18) 100%);
  z-index: -1;
}

.rg-btn-cta::after {
  display: none;
}

.rg-btn-cta:hover,
.rg-btn-cta.active {
  color: #010a13 !important;
  background: var(--rg-gold) !important;
  border-color: var(--rg-gold) !important;
  letter-spacing: 0.28em !important;
  box-shadow: none !important;
  text-shadow: none;
}

.rg-btn-ghost i,
.rg-btn-cta i {
  font-size: 13px;
}

/* =========================================================================
   MOTION ? smoother page + element changes
   ========================================================================= */

html {
  scroll-behavior: smooth;
}

@keyframes rg-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Auth pages ? staged fade for headline, then the form card */
@keyframes rg-auth-fade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rg-auth-enter > .pb-20,
.rg-auth-enter > form > .block {
  animation: rg-auth-fade 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rg-auth-enter > .pb-20 {
  animation-delay: 0.1s;
}

.rg-auth-enter > form > .block {
  animation-delay: 0.32s;
}

#main-container {
  animation: rg-page-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Opacity-only ? transform here would break absolute logo/nav/auth zones */
#page-header {
  animation: rg-header-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rg-header-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade-out when leaving (class set by riot-panel.js before navigation) */
body {
  transition: opacity 0.3s ease;
}

body.rg-leaving {
  opacity: 0;
  pointer-events: none;
}

/* Gentle lift on cards */
.block {
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

/* Dropdown open animation */
.dropdown-menu {
  animation: rg-page-in 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #main-container,
  #page-header,
  .dropdown-menu,
  .rg-auth-enter > .pb-20,
  .rg-auth-enter > form > .block {
    animation: none;
  }

  body,
  .block,
  .rg-tier,
  .rg-auth-links__item,
  .rg-auth-links__item i {
    transition: none;
  }
}

/* Mobile: compact auth, icon-forward nav, donate hero */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #page-header .rg-site-header__bar {
    padding: 6px 8px !important;
    gap: 2px 6px;
  }

  #page-header .rg-brand__img {
    height: 32px !important;
  }

  #page-header .rg-btn-ghost,
  #page-header .rg-btn-cta {
    padding: 0 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    height: 32px !important;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  }

  .rg-btn-ghost:not(#page-header-user-dropdown) i,
  .rg-btn-cta i {
    display: none;
  }

  #page-header-user-dropdown.rg-btn-ghost {
    min-width: 32px;
    padding: 0 8px !important;
  }

  #page-header-user-dropdown.rg-btn-ghost .fa {
    display: inline-block !important;
  }

  /* Icon-first nav on phones ? labels stay for a11y but visually compact */
  #page-header .rg-site-header__nav .nav-main-header > li > a {
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    gap: 5px;
  }

  #page-header .rg-site-header__nav .nav-main-header > li > a > i {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  #page-header .rg-site-header__lang .rg-lang__btn {
    height: 32px;
    padding: 0 8px;
    gap: 5px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  #page-header .rg-site-header__utils {
    gap: 6px;
  }

  /* Donate hero */
  .rg-donate-hero {
    margin: 10px auto 8px;
    padding: 2px 12px 4px;
  }

  .rg-donate-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
  }

  .rg-donate-hero__title {
    font-size: 18px !important;
    letter-spacing: 0.08em !important;
    padding-bottom: 14px;
    margin-bottom: 8px !important;
  }

  .rg-donate-hero__subtitle {
    font-size: 12px;
    letter-spacing: 0.04em;
    margin-top: 10px;
    padding: 0 4px;
  }

  /* Footer denser on phones */
  #page-footer.rg-site-footer,
  #page-footer {
    padding: 28px 14px 20px !important;
  }

  #page-footer ul li a.menu {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    padding: 4px 2px !important;
  }

  #page-footer .rg-site-footer__legal,
  #page-footer .rg-site-footer__copy {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.7 !important;
  }
}

/* Very small phones ? icon-only nav labels */
@media (max-width: 420px) {
  #page-header .rg-site-header__nav .sidebar-mini-hide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #page-header .rg-site-header__nav .nav-main-header > li > a {
    padding: 0 12px !important;
    min-width: 40px;
    justify-content: center;
  }

  #page-header .rg-site-header__nav .nav-main-header > li > a > i {
    margin: 0 !important;
  }

  /* Prefer Register CTA; shorten Sign In if both fight for space */
  #page-header .rg-btn-ghost:not(#page-header-user-dropdown) {
    padding: 0 8px !important;
  }
}

/* =========================================================================
   SIDEBAR (left layout only ? top layout no longer renders #sidebar)
   ========================================================================= */


/* ---------- DASHBOARD (/panel) ? account overview ---------- */

/* Stat tiles: navy glass with a gold hairline, like aos_site cards */

.options-container.block {
  background: linear-gradient(180deg, rgba(9, 20, 40, 0.85) 0%, rgba(1, 10, 19, 0.92) 100%) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.options-container.block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rg-line), transparent);
  opacity: 0.6;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.options-container.block:hover {
  border-color: var(--rg-line) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

.options-container.block:hover::before {
  opacity: 1;
}

/* Main account tile: tips must escape the gold hairline clip */
.rg-dash-tile--main.options-container.block {
  overflow: visible;
}

/* Big numbers / values on tiles */

.options-container .font-size-h3 {
  font-family: var(--rg-serif);
  color: var(--rg-gold-bright) !important;
  letter-spacing: 0.02em;
}

/* Tile icons */

.options-container .block-content > .float-right > .fa,
.options-container .block-content > .float-right > .si {
  color: rgba(200, 170, 110, 0.45);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.options-container.block:hover .block-content > .float-right > .fa,
.options-container.block:hover .block-content > .float-right > .si {
  color: var(--rg-gold);
  text-shadow: 0 0 14px rgba(200, 170, 110, 0.45);
}

/* Tile caption/slogan */

.options-container .font-size-sm.text-muted {
  color: var(--rg-text-muted) !important;
  letter-spacing: 0.08em;
  font-size: 10px !important;
}

/* Hover overlays: kill the white/gray sheet, use navy glass */

.options-container .options-overlay,
.options-container .options-overlay.bg-white {
  background: linear-gradient(180deg, rgba(9, 20, 40, 0.97) 0%, rgba(1, 10, 19, 0.98) 100%) !important;
  border-top: 1px solid var(--rg-line);
}

.options-container .options-overlay .nav-link {
  color: var(--rg-text-dim);
}

.options-container .options-overlay .nav-link:hover {
  color: var(--rg-gold-bright);
  background: rgba(200, 170, 110, 0.08);
}

.options-container .options-overlay h3 {
  color: var(--rg-gold);
  font-family: var(--rg-serif);
}

.options-container .options-overlay .badge-secondary {
  background: rgba(200, 170, 110, 0.15);
  color: var(--rg-gold-bright);
  border: 1px solid var(--rg-line);
}

/* Balance + actions: one row when space allows */

.rg-dash-funds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rg-line-soft);
}

.rg-dash-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.rg-dash-balance__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rg-dash-balance__icon {
  font-size: 14px;
  color: rgba(200, 170, 110, 0.55);
}

.rg-dash-balance__value {
  font-family: var(--rg-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--rg-gold-bright);
}

.rg-dash-balance__unit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-dash-balance__eye {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: var(--rg-text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rg-dash-balance__eye:hover,
.rg-dash-balance__eye:focus {
  color: var(--rg-gold-bright);
  border-color: var(--rg-line-soft);
  background: rgba(200, 170, 110, 0.08);
  outline: none;
}

.rg-dash-balance__eye:focus-visible {
  border-color: var(--rg-line);
}

.rg-dash-balance__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rg-text);
  background: rgba(1, 10, 19, 0.95);
  border: 1px solid var(--rg-line-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.rg-dash-balance__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--rg-line-soft);
}

.rg-dash-balance__eye:hover .rg-dash-balance__tip,
.rg-dash-balance__eye:focus .rg-dash-balance__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.rg-dash-balance__discount {
  padding: 3px 8px;
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rg-gold-bright);
  background: rgba(200, 170, 110, 0.1);
  border: 1px solid var(--rg-line-soft);
}

/* Hide balance numbers panel-wide (survives AJAX .balance_html updates) */

html.mw-balance-hidden .mw-balance-display,
html.mw-balance-hidden .balance_html,
html.mw-balance-hidden .balance_html_market,
.rg-dash-balance.is-hidden .rg-dash-balance__value {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  user-select: none;
}

html.mw-balance-hidden .mw-balance-display::after,
html.mw-balance-hidden .balance_html::after,
html.mw-balance-hidden .balance_html_market::after,
.rg-dash-balance.is-hidden .rg-dash-balance__value::after {
  content: '????';
  font-family: var(--rg-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rg-gold-bright);
  vertical-align: baseline;
}

html.mw-balance-hidden .text-success .balance_html::after,
html.mw-balance-hidden .text-success .balance_html_market::after {
  font-size: 14px;
  color: inherit;
}

.rg-dash-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.rg-dash-actions__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--rg-text-dim);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.rg-dash-actions__link .fa,
.rg-dash-actions__link .si {
  font-size: 12px;
  color: var(--rg-gold);
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.rg-dash-actions__link:hover,
.rg-dash-actions__link:focus {
  color: var(--rg-gold-bright);
  outline: none;
}

.rg-dash-actions__link:hover .fa,
.rg-dash-actions__link:hover .si,
.rg-dash-actions__link:focus .fa,
.rg-dash-actions__link:focus .si {
  opacity: 1;
  color: var(--rg-gold-bright);
}

@media (min-width: 768px) {
  .rg-dash-funds {
    flex-wrap: nowrap;
  }

  .rg-dash-actions {
    margin-left: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 767.98px) {
  .rg-dash-balance__value {
    font-size: 24px;
  }

  .rg-dash-actions {
    width: 100%;
  }

  .rg-dash-actions__link span {
    max-width: 9.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Master-account name + privacy eye */

.rg-dash-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.rg-dash-welcome {
  margin-top: 2px;
  font-family: var(--rg-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--rg-text-dim);
}

.rg-welcome {
  position: relative;
  margin: 0 0 14px;
  padding: 18px 22px 18px 26px;
  background:
    linear-gradient(90deg, rgba(228, 197, 113, 0.12), transparent 55%),
    linear-gradient(180deg, #0a1428 0%, #010a13 100%);
  border: 1px solid var(--rg-line);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  animation: rg-welcome-in 0.55s ease both;
}

.rg-welcome::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rg-gold), transparent);
}

.rg-welcome__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rg-gold);
}

.rg-welcome__text {
  margin: 0;
  font-family: var(--rg-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--rg-gold-bright);
}

@keyframes rg-welcome-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .rg-welcome {
    padding: 14px 16px 14px 18px;
  }

  .rg-welcome__text {
    font-size: 15px;
  }
}

.rg-dash-name__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-dash-name__eye {
  position: relative;
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--rg-text-muted) !important;
  background: transparent;
  border: 1px solid var(--rg-line-soft);
  padding: 3px 8px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rg-dash-name__eye:hover,
.rg-dash-name__eye:focus {
  color: var(--rg-gold-bright) !important;
  border-color: var(--rg-line);
  background: rgba(200, 170, 110, 0.08);
  outline: none;
}

.rg-dash-name__eye:focus-visible {
  box-shadow: 0 0 0 2px rgba(200, 170, 110, 0.35);
}

.rg-dash-name__tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  bottom: auto;
  z-index: 20;
  padding: 7px 12px;
  white-space: nowrap;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-gold-bright);
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.97) 0%, rgba(1, 10, 19, 0.98) 100%);
  border: 1px solid var(--rg-gold);
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.25), 0 8px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.rg-dash-name__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  top: auto;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--rg-gold);
  border-top: none;
}

.rg-dash-name__tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  top: auto;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: 0;
  margin-bottom: -1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid rgba(1, 10, 19, 0.98);
  border-top: none;
  z-index: 1;
}

.rg-dash-name__eye:hover .rg-dash-name__tip,
.rg-dash-name__eye:focus .rg-dash-name__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.rg-dash-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-dash-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rg-dash-meta__item .fa {
  opacity: 0.7;
}

.rg-dash-meta__time {
  font-family: var(--rg-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--rg-text-dim);
}

.rg-dash-meta__geo {
  color: var(--rg-text-dim);
}

.rg-dash-meta__flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  object-fit: cover;
  border: 1px solid rgba(200, 170, 110, 0.28);
  flex: 0 0 auto;
}

/* Game account list */

.rg-accounts {
  overflow: visible !important;
  /* Square corners — no chamfer shine nested under every account card */
  clip-path: none !important;
}

.rg-accounts.block::after,
#account_list_info .list_account.block::after {
  content: none;
  display: none;
}

.rg-accounts > .block-content,
.rg-accounts > .rg-accounts__collapse > .block-content {
  padding: 12px 12px 14px !important;
}

.rg-accounts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rg-line-soft);
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.06) 0%, transparent 100%);
}

.rg-accounts__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.rg-accounts__label {
  flex: 1 0 100%;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
  line-height: 1.3;
}

.rg-accounts__server {
  font-family: var(--rg-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-gold);
  line-height: 1.2;
}

.rg-accounts__eye {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: var(--rg-text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rg-accounts__eye:hover,
.rg-accounts__eye:focus {
  color: var(--rg-gold-bright);
  border-color: var(--rg-line-soft);
  background: rgba(200, 170, 110, 0.08);
  outline: none;
}

.rg-accounts__eye:focus-visible {
  border-color: var(--rg-line);
}

.rg-accounts__eye-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rg-text);
  background: rgba(1, 10, 19, 0.95);
  border: 1px solid var(--rg-line-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.rg-accounts__eye-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--rg-line-soft);
}

.rg-accounts__eye:hover .rg-accounts__eye-tip,
.rg-accounts__eye:focus .rg-accounts__eye-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.rg-accounts__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.rg-accounts__count {
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rg-text-muted);
  white-space: nowrap;
}

.rg-accounts__footer {
  display: flex;
  justify-content: center;
  padding: 16px 0 6px;
  border-top: 1px solid var(--rg-line-soft);
  margin-top: 8px;
}

.rg-btn-refresh-accounts,
.btn.rg-btn-refresh-accounts {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px !important;
  margin: 0 !important;
  font-family: var(--rg-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--rg-text-dim) !important;
  background: transparent !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.rg-btn-refresh-accounts .fa {
  display: inline-block !important;
  font-size: 11px;
  line-height: 1;
  color: var(--rg-gold);
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.35s ease;
}

.rg-btn-refresh-accounts:hover,
.rg-btn-refresh-accounts:focus {
  color: var(--rg-gold-bright) !important;
  border-color: var(--rg-line) !important;
  background: rgba(200, 170, 110, 0.08) !important;
  outline: none;
}

.rg-btn-refresh-accounts:hover .fa,
.rg-btn-refresh-accounts:focus .fa {
  opacity: 1;
  transform: rotate(180deg);
}

/* Create game account ? outline gold CTA (matches panel primary buttons) */
.rg-btn-create-account,
.btn.rg-btn-create-account {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 22px !important;
  margin: 0 !important;
  font-family: var(--rg-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--rg-gold-bright) !important;
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.12) 0%, rgba(200, 170, 110, 0.03) 100%) !important;
  border: 1px solid var(--rg-gold) !important;
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  overflow: hidden;
  box-shadow: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, letter-spacing 0.2s ease !important;
}

.rg-btn-create-account::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(240, 230, 210, 0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.4s ease;
  pointer-events: none;
}

.rg-btn-create-account .fa {
  display: inline-block !important;
  position: relative;
  z-index: 1;
  font-size: 11px;
  line-height: 1;
  color: inherit;
  opacity: 1;
}

.rg-btn-create-account > span {
  position: relative;
  z-index: 1;
}

.rg-btn-create-account:hover:not(:disabled),
.rg-btn-create-account:focus:not(:disabled) {
  color: #081020 !important;
  background: var(--rg-gold) !important;
  border-color: var(--rg-gold) !important;
  letter-spacing: 0.18em !important;
  outline: none;
  filter: none;
  box-shadow: none;
}

.rg-btn-create-account:hover:not(:disabled)::after,
.rg-btn-create-account:focus:not(:disabled)::after {
  left: 130%;
}

.rg-btn-create-account:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

@media (max-width: 575px) {
  .rg-accounts__head {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 14px;
  }

  .rg-accounts__actions {
    width: 100%;
    justify-content: space-between;
  }

  .rg-btn-create-account,
  .btn.rg-btn-create-account {
    flex: 1 1 auto;
    width: auto;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  }
}

/* Legacy absolute create-account button (baylee.css) ? neutralize */
.btn-create-account {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* ---------- Per-account cards ---------- */

#account_list_info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#account_list_info .list_account .collapse {
  transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#account_list_info .list_account.block {
  margin-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.72) 0%, rgba(1, 10, 19, 0.88) 100%) !important;
  border: 1px solid var(--rg-line-soft) !important;
  border-left: 2px solid rgba(200, 170, 110, 0.35) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#account_list_info .list_account.open {
  border-color: var(--rg-line) !important;
  border-left-color: var(--rg-gold) !important;
  background: linear-gradient(180deg, rgba(14, 28, 52, 0.85) 0%, rgba(1, 10, 19, 0.92) 100%) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

#account_list_info .list_account .block-header.accordion_account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px !important;
  margin: 0;
  background: transparent !important;
  border-bottom: 1px solid transparent;
}

#account_list_info .list_account.open .block-header.accordion_account {
  border-bottom-color: var(--rg-line-soft);
}

#account_list_info .list_account .rg-account-name,
#account_list_info .list_account .accordion_account > a {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--rg-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rg-gold);
  line-height: 1.3;
}

#account_list_info .list_account .rg-account-name:hover,
#account_list_info .list_account .accordion_account > a:hover {
  color: var(--rg-gold-bright);
  text-decoration: none;
}

.rg-account-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--rg-text-muted);
}

.rg-account-meta__chars {
  font-family: var(--rg-serif);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rg-text-dim);
}

.rg-account-meta__chars .fa {
  color: var(--rg-gold);
  opacity: 0.8;
}

.rg-account-meta__info {
  color: var(--rg-gold) !important;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.rg-account-meta__info:hover {
  opacity: 1;
  color: var(--rg-gold-bright) !important;
}

/* Account info popover (Bootstrap) ? navy glass, not default white */

.popover {
  max-width: 280px;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(9, 20, 40, 0.98) 0%, rgba(1, 10, 19, 0.99) 100%);
  border: 1px solid var(--rg-line);
  border-radius: 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  z-index: 1080;
}

.popover .arrow::before,
.popover .arrow::after {
  border-width: 0.45rem;
}

.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--rg-line);
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
  border-top-color: #010a13;
}

.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--rg-line);
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
  border-bottom-color: rgba(9, 20, 40, 0.98);
}

.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--rg-line);
}

.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
  border-right-color: #010a13;
}

.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--rg-line);
}

.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
  border-left-color: #010a13;
}

.popover-header {
  margin: 0;
  padding: 10px 14px 8px;
  font-family: var(--rg-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-gold-bright);
  background: transparent;
  border-bottom: 1px solid var(--rg-line-soft);
  border-radius: 0;
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 10px 14px 12px;
  color: var(--rg-text-dim);
  font-size: 12px;
  line-height: 1.45;
}

.rg-account-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rg-account-info__row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 8px 12px;
  align-items: baseline;
}

.rg-account-info__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-account-info__value {
  font-family: var(--rg-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--rg-gold-bright);
  word-break: break-word;
}

.rg-account-info__value.is-muted {
  color: var(--rg-text-dim);
  font-weight: 500;
}

.rg-account-info__value.is-ok {
  color: #7dcea0;
}

.rg-account-info__value.is-bad {
  color: #e07070;
}

.rg-account-body {
  padding: 0 !important;
}

.rg-account-empty {
  margin: 0;
  padding: 22px 16px;
  text-align: center;
  font-family: var(--rg-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
  line-height: 1.55;
}

.rg-account-empty-block {
  padding: 28px 18px;
  text-align: center;
  font-family: var(--rg-serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
  border: 1px dashed var(--rg-line-soft);
  background: rgba(1, 10, 19, 0.35);
}

.rg-account-table {
  width: 100%;
  margin: 0 !important;
  table-layout: fixed;
}

.rg-account-table__lvl {
  width: 56px;
  text-align: center;
}

.rg-account-table__status {
  width: 96px;
}

.rg-account-table__last {
  width: 168px;
}

.rg-account-table__age {
  width: 88px;
}

.rg-account-table__actions {
  width: 108px;
  white-space: nowrap;
}

#account_list_info .list_account table th {
  padding: 10px 10px 9px !important;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-muted) !important;
  border-top: 0 !important;
  border-bottom-color: var(--rg-line-soft) !important;
  background: rgba(1, 10, 19, 0.28) !important;
  white-space: nowrap;
}

#account_list_info .list_account table th:first-child,
#account_list_info .list_account table td:first-child {
  padding-left: 16px !important;
}

#account_list_info .list_account table th:last-child,
#account_list_info .list_account table td:last-child {
  padding-right: 12px !important;
}

#account_list_info .list_account table td {
  padding: 11px 10px !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--rg-text-dim);
  vertical-align: middle;
}

.rg-char-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.rg-char-name__text {
  font-family: var(--rg-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rg-text);
}

.rg-char-name__hwid {
  color: var(--rg-gold);
  opacity: 0.75;
}

/* Links to character profile pages (/panel/<char_name>) */
.rg-char-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--rg-line);
}

.rg-char-link:hover,
.rg-char-link:focus {
  color: var(--rg-gold-bright);
  text-decoration: none;
  border-bottom-color: var(--rg-gold);
}

.rg-char-name__meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rg-text-muted);
}

.rg-char-class {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--rg-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rg-text-dim);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rg-char-level {
  font-family: var(--rg-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--rg-gold);
}

.rg-char-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rg-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rg-char-status__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 transparent;
}

.rg-char-status.is-online {
  color: #7dcea0;
}

.rg-char-status.is-online .rg-char-status__dot {
  box-shadow: 0 0 8px rgba(125, 206, 160, 0.65);
}

.rg-char-status.is-offline {
  color: var(--rg-text-muted);
}

.rg-char-status--compact {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--rg-line-soft);
}

.rg-char-last,
.rg-char-age {
  display: block;
  font-family: var(--rg-serif);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--rg-text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rg-char-last.is-muted,
.rg-char-age.is-muted {
  color: var(--rg-text-muted);
  opacity: 0.75;
}

.rg-char-row.is-online .rg-char-name__text {
  color: var(--rg-gold-bright);
}

.rg-account-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 14px;
  margin: 0;
  border-top: 1px solid var(--rg-line-soft);
  background: rgba(1, 10, 19, 0.22);
}

.rg-char-actions {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}

.rg-char-actions > .btn {
  margin: 0 !important;
}

.rg-char-transfer,
.btn.rg-char-transfer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
}

.rg-char-transfer .fa {
  margin: 0 !important;
  font-size: 11px;
  color: var(--rg-gold);
  opacity: 0.95;
}

.rg-char-transfer > span {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
}

.rg-account-btn,
.btn.rg-account-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 12px !important;
  margin: 0 !important;
  font-family: var(--rg-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  white-space: nowrap;
  color: var(--rg-gold) !important;
  background: rgba(1, 10, 19, 0.55) !important;
  border: 1px solid rgba(200, 170, 110, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.rg-account-btn .fa {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 11px;
  line-height: 1;
  color: inherit;
  opacity: 0.9;
}

.rg-account-btn:hover,
.rg-account-btn:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.12) !important;
  border-color: var(--rg-gold) !important;
  outline: none;
  box-shadow: none !important;
}

.rg-account-btn:active {
  background: rgba(200, 170, 110, 0.18) !important;
}

@media (max-width: 991.98px) {
  .rg-account-table__last {
    width: 148px;
  }

  .rg-account-table__age {
    width: 72px;
  }

  .rg-account-table__actions {
    width: 96px;
  }
}

@media (max-width: 575px) {
  #account_list_info .list_account .block-header.accordion_account {
    padding: 12px 12px !important;
  }

  .rg-account-actions {
    padding: 10px 10px 12px;
    gap: 8px;
  }

  .rg-account-btn,
  .btn.rg-account-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 10px 12px !important;
  }

  .rg-account-table__actions {
    width: 84px;
  }
}


/* =========================================================================
   Settings page ? match accounts / donate riot language
   ========================================================================= */

.rg-settings {
  overflow: visible !important;
}

.rg-settings__head {
  padding: 0 8px;
  border-bottom: 1px solid var(--rg-line-soft);
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.06) 0%, transparent 100%);
}

.rg-settings__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 !important;
  border-bottom: none !important;
}

.rg-settings__tabs.nav-tabs-block,
.rg-settings .nav-tabs-block {
  background: transparent !important;
}

.rg-settings__tabs .nav-item {
  margin: 0;
}

.rg-settings__tabs .nav-link {
  position: relative;
  padding: 16px 18px !important;
  font-family: var(--rg-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--rg-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.rg-settings__tabs .nav-link:hover,
.rg-settings__tabs .nav-link:focus {
  color: var(--rg-gold-bright) !important;
  background: rgba(200, 170, 110, 0.05) !important;
}

.rg-settings__tabs .nav-link.active {
  color: var(--rg-gold) !important;
  background: transparent !important;
  border-bottom-color: var(--rg-gold) !important;
}

.rg-settings__body {
  padding: 0 !important;
}

.rg-settings__body > .tab-pane {
  padding: 0 0 8px;
}

.rg-settings__intro {
  padding: 22px 22px 8px;
}

.rg-settings__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-settings__title {
  margin: 0 !important;
  font-family: var(--rg-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--rg-gold) !important;
  text-align: left !important;
}

.rg-settings__sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 14px 18px;
}

.rg-settings-section {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 12px 28px;
  align-items: start;
  padding: 18px 12px;
  border-top: 1px solid var(--rg-line-soft);
}

.rg-settings-section:first-child {
  border-top: none;
}

.rg-settings-section__label {
  font-family: var(--rg-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--rg-gold-bright);
  padding-top: 4px;
}

.rg-settings-section__sub {
  display: block;
  margin-top: 6px;
  font-family: 'Muli', 'Intro', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.45;
  color: var(--rg-text-muted);
}

.rg-settings-section__body {
  min-width: 0;
}

.rg-settings-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rg-text-muted);
}

.rg-settings-hint--lead {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--rg-text-dim);
}

.rg-settings-hint p {
  margin: 0;
}

.rg-settings-code {
  display: block;
  margin-top: 8px;
  padding: 0;
  font-size: 11px;
  color: var(--rg-text-muted);
  background: transparent;
}

.rg-settings-field {
  margin-bottom: 14px;
  max-width: 420px;
}

.rg-settings-field:last-child {
  margin-bottom: 0;
}

.rg-settings-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
}

.rg-settings-form__foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding: 14px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--rg-line-soft);
  background: transparent;
}

.rg-settings-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rg-settings-toggle__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rg-text);
}

.rg-settings-toggle__name .fa {
  color: var(--rg-gold);
}

.rg-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rg-settings-phone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.rg-settings-phone-row__field {
  flex: 1 1 180px;
  min-width: 0;
}

.rg-settings-phone-row__actions {
  flex: 1 1 220px;
}

.rg-settings-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}

.rg-settings-social__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(1, 10, 19, 0.35);
  border: 1px solid var(--rg-line-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rg-settings-social__item:hover {
  border-color: var(--rg-line);
  background: rgba(200, 170, 110, 0.05);
}

.rg-settings-social__avatar {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.rg-settings-social__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rg-line-soft);
  object-fit: cover;
}

.rg-settings-social__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rg-settings-social__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rg-text);
  text-decoration: none;
}

.rg-settings-social__name:hover {
  color: var(--rg-gold-bright);
}

.rg-settings-social__status {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rg-text-muted);
}

.rg-settings-social__action {
  flex: 0 0 auto;
}

.rg-settings-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rg-line-soft);
  background: rgba(1, 10, 19, 0.28);
}

.rg-settings-table,
.rg-settings .rg-settings-table {
  margin: 0 !important;
  background: transparent !important;
}

.rg-settings-table thead th {
  font-family: var(--rg-serif);
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-muted) !important;
  background: rgba(200, 170, 110, 0.05) !important;
  border-bottom: 1px solid var(--rg-line-soft) !important;
  border-top: none !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.rg-settings-table td,
.rg-settings-table th {
  border-color: var(--rg-line-soft) !important;
  padding: 10px 12px !important;
  color: var(--rg-text-dim);
  vertical-align: middle !important;
  background: transparent !important;
}

.rg-settings-table tbody tr:hover td,
.rg-settings-table tbody tr:hover th {
  background: rgba(200, 170, 110, 0.04) !important;
}

.rg-settings-empty {
  padding: 18px 12px !important;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rg-text-muted) !important;
}

/* Settings action buttons ? flush with inputs, no pink/clip-path clash */
.rg-settings-input-group {
  max-width: 420px;
  align-items: stretch;
}

.rg-settings-input-group .form-control {
  height: 38px;
}

.rg-settings-btn,
.btn.rg-settings-btn,
.rg-settings .btn.rg-settings-btn.submit-form {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  margin: 0 !important;
  padding: 0 16px !important;
  font-family: var(--rg-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  line-height: 1 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  overflow: visible;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.rg-settings-btn::after,
.btn.rg-settings-btn::after,
.rg-settings .btn.rg-settings-btn.submit-form::after {
  content: none !important;
  display: none !important;
}

.rg-settings-btn .fa {
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
}

.rg-settings-btn--danger,
.btn.rg-settings-btn--danger,
.rg-settings .btn.rg-settings-btn--danger.submit-form {
  color: var(--rg-danger) !important;
  background: rgba(232, 93, 93, 0.1) !important;
  border: 1px solid var(--rg-danger-line) !important;
}

.rg-settings-btn--danger:hover,
.rg-settings-btn--danger:focus,
.btn.rg-settings-btn--danger:hover,
.btn.rg-settings-btn--danger:focus,
.rg-settings .btn.rg-settings-btn--danger.submit-form:hover,
.rg-settings .btn.rg-settings-btn--danger.submit-form:focus {
  color: #ffb0b0 !important;
  background: rgba(232, 93, 93, 0.2) !important;
  border-color: var(--rg-danger) !important;
  outline: none;
}

.rg-settings-btn--ok,
.btn.rg-settings-btn--ok,
.rg-settings .btn.rg-settings-btn--ok.submit-form {
  color: #7dcea0 !important;
  background: var(--rg-success-soft) !important;
  border: 1px solid rgba(60, 157, 110, 0.45) !important;
}

.rg-settings-btn--ok:hover,
.rg-settings-btn--ok:focus,
.btn.rg-settings-btn--ok:hover,
.btn.rg-settings-btn--ok:focus,
.rg-settings .btn.rg-settings-btn--ok.submit-form:hover,
.rg-settings .btn.rg-settings-btn--ok.submit-form:focus {
  color: #b6efd0 !important;
  background: rgba(60, 157, 110, 0.28) !important;
  border-color: var(--rg-success) !important;
  outline: none;
}

.rg-settings-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.rg-settings-inline-form .form-control {
  width: auto;
  min-width: 160px;
}

/* Logs / invoices panes sit outside section grid */
.rg-settings__body > .tab-pane > .rg-settings-table-wrap {
  margin: 8px 14px 18px;
}

@media (max-width: 767.98px) {
  .rg-settings__intro {
    padding: 18px 16px 6px;
  }

  .rg-settings__sections {
    padding: 4px 8px 14px;
  }

  .rg-settings-section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 8px;
  }

  .rg-settings-form__foot {
    justify-content: stretch;
  }

  .rg-settings-form__foot .btn {
    width: 100%;
  }

  .rg-settings__tabs .nav-link {
    padding: 14px 12px !important;
    font-size: 10px !important;
  }

  .rg-settings__body > .tab-pane > .rg-settings-table-wrap {
    margin: 8px 8px 14px;
  }
}

/* =========================================================================
   AJAX loader ? centered hextech wheel (replaces top header bar)
   Triggered by #page-header-loader.show from mmoweb.js
   ========================================================================= */

#page-header-loader.overlay-header,
#page-header-loader.rg-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 24px !important;
  background: rgba(1, 10, 19, 0.62) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none !important;
  transition: opacity 0.45s ease, visibility 0.45s ease !important;
}

#page-header-loader.overlay-header.show,
#page-header-loader.rg-loader.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
}

#page-header-loader.show .rg-loader__panel {
  opacity: 1;
  transform: none;
}

/* Lift header stacking context so the fixed overlay covers the whole page */
#page-header:has(#page-header-loader.show),
#page-container.page-header-fixed #page-header.rg-site-header:has(#page-header-loader.show) {
  z-index: 200000 !important;
}

#page-header-loader .rg-loader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 120px;
  padding: 28px 32px 22px;
  /* Panel fades/rises in slightly behind the overlay for a staged entrance */
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
  background:
    linear-gradient(180deg, rgba(200, 170, 110, 0.1) 0%, transparent 42%),
    linear-gradient(180deg, rgba(9, 20, 40, 0.96) 0%, rgba(1, 10, 19, 0.98) 100%);
  border: 1px solid var(--rg-line);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(240, 230, 210, 0.06);
}

#page-header-loader .rg-loader__wheel {
  position: relative;
  width: 56px;
  height: 56px;
}

#page-header-loader .rg-loader__ring,
#page-header-loader .rg-loader__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

#page-header-loader .rg-loader__ring {
  border: 2px solid rgba(200, 170, 110, 0.18);
  border-top-color: var(--rg-gold-bright);
  border-right-color: var(--rg-gold);
  box-shadow: 0 0 18px rgba(200, 170, 110, 0.22);
  animation: rg-loader-spin 0.85s linear infinite;
}

#page-header-loader .rg-loader__core {
  inset: 14px;
  border: 2px solid rgba(143, 180, 217, 0.15);
  border-bottom-color: var(--rg-info);
  border-left-color: rgba(143, 180, 217, 0.55);
  animation: rg-loader-spin 1.25s linear infinite reverse;
}

#page-header-loader .rg-loader__label {
  font-family: var(--rg-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rg-gold-bright);
}

@keyframes rg-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-header-loader .rg-loader__ring,
  #page-header-loader .rg-loader__core {
    animation-duration: 2.4s;
  }

  #page-header-loader .rg-loader__panel {
    transition: opacity 0.45s ease;
    transform: none;
  }
}

/* ---------- DASHBOARD — activity widgets (transactions / login history) ---------- */

.rg-activity {
  overflow: visible !important;
  clip-path: none !important;
}

.rg-activity.block::after {
  content: none;
  display: none;
}

.rg-activity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rg-line-soft);
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.06) 0%, transparent 100%);
}

.rg-activity__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rg-activity__icon {
  color: rgba(200, 170, 110, 0.55);
  font-size: 14px;
}

.rg-activity__name {
  font-family: var(--rg-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-gold);
  line-height: 1.2;
}

/* Eye toggle — same look as the accounts eye */

.rg-activity__eye {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: var(--rg-text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rg-activity__eye:hover,
.rg-activity__eye:focus {
  color: var(--rg-gold-bright);
  border-color: var(--rg-line-soft);
  background: rgba(200, 170, 110, 0.08);
  outline: none;
}

.rg-activity__eye:focus-visible {
  border-color: var(--rg-line);
}

.rg-activity__eye-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rg-text);
  background: rgba(1, 10, 19, 0.95);
  border: 1px solid var(--rg-line-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.rg-activity__eye-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--rg-line-soft);
}

.rg-activity__eye:hover .rg-activity__eye-tip,
.rg-activity__eye:focus .rg-activity__eye-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hidden state: smoothly collapse the body, keep the slim header with the
   eye. The height is animated from JS (riot-panel.js animateWrap) because
   Chrome freezes grid-template-rows fr transitions on this page; CSS only
   pins the resting states. */

.rg-activity__collapse {
  overflow: hidden;
}

.rg-activity.is-hidden .rg-activity__collapse,
.rg-accounts.is-collapsed .rg-accounts__collapse {
  height: 0;
}

.rg-activity.is-hidden .rg-activity__head,
.rg-accounts.is-collapsed .rg-accounts__head {
  border-bottom-color: transparent;
}

.rg-activity .rg-activity__body {
  padding: 12px 12px 14px !important;
}

.rg-activity__empty {
  margin: 4px 4px 2px;
  font-size: 12px;
  color: var(--rg-text-muted);
}

/* Table */

.rg-activity-table {
  margin-bottom: 0;
}

.rg-activity-table th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
  border-top: 0;
  border-bottom: 1px solid var(--rg-line-soft);
}

.rg-activity-table td {
  font-size: 12px;
  color: var(--rg-text-dim);
  border-top: 1px solid var(--rg-line-soft);
  vertical-align: middle;
}

.rg-activity-table__date {
  white-space: nowrap;
  color: var(--rg-text-muted);
}

.rg-activity-table__ip {
  font-family: monospace;
  font-size: 11px;
  color: var(--rg-text-muted);
}

.rg-activity-table__amount {
  white-space: nowrap;
  font-weight: 600;
  color: var(--rg-gold-bright);
}

.rg-activity-table__credit {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rg-gold-bright);
}

.rg-activity-table__link {
  margin-left: 6px;
  color: var(--rg-text-muted);
}

.rg-activity-table__link:hover {
  color: var(--rg-gold-bright);
}

/* Type + status chips */

.rg-act-type {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rg-text-dim);
  background: rgba(200, 170, 110, 0.08);
  border: 1px solid var(--rg-line-soft);
}

.rg-act-type--game {
  color: var(--rg-info);
  background: rgba(143, 180, 217, 0.08);
  border-color: rgba(143, 180, 217, 0.25);
}

.rg-act-status {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.rg-act-status--completed {
  color: #7fd98f;
  background: rgba(70, 190, 100, 0.1);
  border-color: rgba(70, 190, 100, 0.3);
}

.rg-act-status--pending,
.rg-act-status--processing {
  color: var(--rg-gold-bright);
  background: rgba(200, 170, 110, 0.1);
  border-color: rgba(200, 170, 110, 0.3);
}

.rg-act-status--failed,
.rg-act-status--expired,
.rg-act-status--cancelled {
  color: #e08585;
  background: rgba(200, 80, 80, 0.1);
  border-color: rgba(200, 80, 80, 0.3);
}

/* ---------- DASHBOARD — storefront widgets (featured / recent trades) ---------- */

.rg-activity__more {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-text-muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.rg-activity__more:hover {
  color: var(--rg-gold-bright);
  text-decoration: none;
}

.rg-shoplist {
  display: flex;
  flex-direction: column;
}

.rg-shoplist__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}

.rg-shoplist__row + .rg-shoplist__row {
  border-top: 1px solid var(--rg-line-soft);
}

.rg-shoplist__icon {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(200, 170, 110, 0.12), transparent 65%),
    #06101e;
  border: 1px solid var(--rg-line);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.rg-shoplist__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rg-shoplist__icon .we-badge {
  font-size: 9px;
  padding: 1px 3px;
}

.rg-shoplist__info {
  flex: 1 1 auto;
  min-width: 0;
}

.rg-shoplist__name {
  font-family: var(--rg-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--rg-gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rg-shoplist__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 3px;
}

.rg-shoplist__time {
  font-size: 11px;
  color: var(--rg-text-muted);
  white-space: nowrap;
}

.rg-shoplist__cta {
  flex: 0 0 auto;
  text-align: right;
}

.rg-shoplist__price {
  font-size: 13px;
  margin-bottom: 4px;
}

.rg-shoplist__btn {
  padding: 3px 12px;
  font-size: 11px;
}

/* ---------- MODAL — fast, cheap open animation ---------- */
/* The theme's popout scale janks on content-heavy dialogs; a short fade +
   small rise is smooth because it only animates transform/opacity. */

.modal.fade .modal-dialog.modal-dialog-popout {
  transform: translateY(14px) !important;
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
  will-change: transform, opacity;
}

.modal.show .modal-dialog.modal-dialog-popout {
  transform: none !important;
  opacity: 1;
}

.modal.fade {
  transition: opacity 0.25s linear !important;
}

/* Character picker — icons can't live in native <option> */
.we-char-pick {
  position: relative;
}

.input-group > .we-char-pick {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.we-char-pick__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.we-char-pick__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.we-char-pick__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.we-char-pick__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.we-char-pick__caret {
  margin-left: auto;
  color: var(--rg-text-muted);
  flex-shrink: 0;
}

.we-char-pick__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

.we-char-pick__menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #0a1428;
  border: 1px solid var(--rg-line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.we-char-pick__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--rg-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.we-char-pick__opt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.we-char-pick__opt:hover:not(:disabled),
.we-char-pick__opt.is-active {
  background: rgba(200, 170, 110, 0.12);
  color: var(--rg-gold-bright);
}

.rg-char-row__icon,
.list-group-item .we-char-pick__icon,
.dd-handle .we-char-pick__icon {
  margin-right: 6px;
}