/* =====================================================================
   NOVERIA · PANELS 2026
   Modern red + gold reskin for the side panels, News & footer.
   Drop this file in AFTER css/style.css — it only uses existing
   class hooks, so it works on the live CMS without touching templates.
   ===================================================================== */

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

:root{
  --e-red:#c1895c;
  --e-red-bright:#dea97d;
  --e-red-deep:#67452a;
  --e-gold:#f2c96b;
  --e-gold-bright:#ffe6a6;
  --e-gold-deep:#c8963a;
  --e-ink:#0b0806;
  --e-card-1:rgba(29,22,16,.82);
  --e-card-2:rgba(17,13,10,.86);
  --e-line:rgba(193,137,92,.20);
  --e-line-soft:rgba(255,255,255,.06);
  --e-glow:rgba(193,137,92,.35);
  --e-text:#f1edea;
  --e-muted:#b9a89a;
  --e-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --e-title:'Friz-Quadrata-TT-Regular','Sora',serif;
  --e-r:16px;
}

/* ---------------------------------------------------------------------
   1) SHARED PANEL SHELL  (header + body build one rounded glass card)
   --------------------------------------------------------------------- */
.login-box,.ranking-box,.stats-box,.faq-box,.players-online,.content-box,
.btn-banner-discord{
  position:relative;
  /* NOTE: was `filter:drop-shadow(...)`. A parent `filter` combined with a
     child `backdrop-filter` (used on the header just below) causes a known
     Chromium GPU-compositing glitch (colourful static/noise on repaint).
     box-shadow gives the same visual drop-shadow without creating that
     nested filter context, so it's used here instead. */
  box-shadow:0 18px 34px rgba(0,0,0,.55);
}

/* headers (login/ranking/stats + news + content all reuse these) */
.login-header,.content-header,.news-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px !important;
  background:
    linear-gradient(180deg,rgba(50,36,25,.94),rgba(26,19,14,.94)) !important;
  border:1px solid var(--e-line) !important;
  border-bottom:none !important;
  border-radius:var(--e-r) var(--e-r) 0 0 !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  margin-top:0 !important;
}
/* thin gold hairline under the header */
.login-header::after,.content-header::after,.news-header::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,201,107,.55),transparent);
}
.login-header .name h3,.content-header .name h3,.news-header .name h3{
  font-family:var(--e-title);
  font-size:14px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff !important;
  padding-left:16px !important;
  position:relative;
}
/* left accent bar on every panel title */
.login-header .name h3::before,
.content-header .name h3::before,
.news-header .name h3::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:15px;border-radius:4px;
  background:linear-gradient(180deg,var(--e-gold-bright),var(--e-red));
  box-shadow:0 0 10px rgba(242,201,107,.6);
}
/* "Top 100 »" style pill link */
.login-header .type h4,.content-header .type h4,.news-header .type h4{
  font-family:var(--e-ui) !important;
  font-size:11px !important;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--e-gold) !important;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(242,201,107,.35);
  background:rgba(242,201,107,.08);
  transition:all .25s ease;
}
.login-header .type a:hover h4,.content-header .type a:hover h4{
  color:var(--e-ink) !important;
  background:linear-gradient(180deg,var(--e-gold-bright),var(--e-gold));
  border-color:var(--e-gold);
  box-shadow:0 0 16px rgba(242,201,107,.45);
}

/* bodies */
.login-body-bg,.ranking-body,.stats-body-bg,.content-body,.content-body-bg{
  background:linear-gradient(180deg,var(--e-card-1),var(--e-card-2)) !important;
  border:1px solid var(--e-line) !important;
  border-top:none !important;
  border-radius:0 0 var(--e-r) var(--e-r) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.content-body{border-radius:0 0 var(--e-r) var(--e-r) !important;}
.content-header{margin-top:0 !important;}

/* consistent spacing between stacked panels */
.mb-3{margin-bottom:22px !important;}
.ranking-box,.stats-box,.faq-box{margin-top:0;}
.detailed-section .col-lg-3 .ranking-box,
.detailed-section .col-lg-3 .stats-box{margin-bottom:22px;}
.players-online{margin:22px 0 !important;}

/* ---------------------------------------------------------------------
   2) USER PANEL — glassy inputs w/ icons + gradient buttons
   --------------------------------------------------------------------- */
.login-body{padding:20px 18px 8px !important;}

.login-body input[type='text'],
.login-body input[type='password'],
.login-body input[type='email']{
  width:100%;
  box-sizing:border-box !important;
  font-family:var(--e-ui) !important;
  font-size:13px !important;
  color:#fff !important;
  background:rgba(11,8,6,.7) !important;
  border:1px solid rgba(193,137,92,.22) !important;
  border-bottom:1px solid rgba(193,137,92,.22) !important;
  border-radius:11px !important;
  margin-top:12px !important;
  padding:14px 16px 14px 46px !important;
  background-repeat:no-repeat !important;
  background-position:16px center !important;
  background-size:17px 17px !important;
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
.login-body input[name='username']{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20fill%3D%27%23ccac91%27%20d%3D%27M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z%27%2F%3E%3C%2Fsvg%3E") !important;}
.login-body input[name='password']{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20fill%3D%27%23ccac91%27%20d%3D%27M144%20144l0%2048%20160%200%200-48c0-44.2-35.8-80-80-80s-80%2035.8-80%2080zM80%20192l0-48C80%2064.5%20144.5%200%20224%200s144%2064.5%20144%20144l0%2048%2016%200c35.3%200%2064%2028.7%2064%2064l0%20192c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20256c0-35.3%2028.7-64%2064-64l16%200z%27%2F%3E%3C%2Fsvg%3E") !important;}
.login-body input[name='pin']{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27%23ccac91%27%20d%3D%27M336%20352c97.2%200%20176-78.8%20176-176S433.2%200%20336%200S160%2078.8%20160%20176c0%2018.7%202.9%2036.8%208.3%2053.7L7%20391c-4.5%204.5-7%2010.6-7%2017l0%2080c0%2013.3%2010.7%2024%2024%2024l80%200c13.3%200%2024-10.7%2024-24l0-40%2040%200c13.3%200%2024-10.7%2024-24l0-40%2040%200c6.4%200%2012.5-2.5%2017-7l33.3-33.3c16.9%205.4%2035%208.3%2053.7%208.3zM376%2096a40%2040%200%201%201%200%2080%2040%2040%200%201%201%200-80z%27%2F%3E%3C%2Fsvg%3E") !important;}
.login-body input::placeholder{color:#9c897a !important;}
.login-body input:focus{
  background-color:rgba(21,16,12,.9) !important;
  border-color:rgba(242,201,107,.6) !important;
  box-shadow:0 0 0 3px rgba(193,137,92,.14),0 0 18px rgba(242,201,107,.18) !important;
  outline:none !important;
}

/* recaptcha breathing room */
.login-body .g-recaptcha{margin-top:16px !important;}

/* ---------------------------------------------------------------------
   2b) REGISTER FORM — same glassy dark-input look as the login box
   --------------------------------------------------------------------- */
.register-form{padding:4px 0 0;}
.register-form h3{
  font-family:var(--e-title) !important;
  font-size:16px;color:var(--e-text) !important;
  letter-spacing:.02em;margin:0 0 16px !important;
}
.register-form .single-input-x{margin-top:14px;}
.register-form .single-input-x:first-of-type{margin-top:0;}
.register-form .input-x-outer{position:relative;display:block;}
.register-form .input-x-outer .f-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--e-red) !important;pointer-events:none;z-index:2;
}
.register-form .input-x{
  width:100%;box-sizing:border-box !important;
  font-family:var(--e-ui) !important;font-size:13px !important;
  color:#fff !important;
  background:rgba(11,8,6,.7) !important;
  border:1px solid rgba(193,137,92,.22) !important;
  border-radius:11px !important;
  padding:14px 16px 14px 46px !important;
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
.register-form .input-x::placeholder{color:#9c897a !important;opacity:1;}
.register-form .input-x:focus{
  background-color:rgba(21,16,12,.9) !important;
  border-color:rgba(242,201,107,.6) !important;
  box-shadow:0 0 0 3px rgba(193,137,92,.14),0 0 18px rgba(242,201,107,.18) !important;
  outline:none !important;
}
.register-form .reg-hint{font-size:11.5px;margin:6px 2px 0 !important;}
.register-form .reg-captcha{margin-top:16px !important;}
.register-form .d-flex.justify-content-center{margin-top:20px;}
.register-form .bg-button{
  width:100% !important;height:46px !important;margin:0 !important;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--e-ui) !important;font-weight:700 !important;font-size:12.5px !important;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff !important;
  background:linear-gradient(180deg,var(--e-red-bright),var(--e-red-deep)) !important;
  border:1px solid rgba(242,201,107,.5) !important;
  border-radius:12px !important;
  box-shadow:0 8px 20px rgba(193,137,92,.32),inset 0 1px 0 rgba(255,255,255,.22) !important;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.register-form .bg-button:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(193,137,92,.45),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.register-form .reg-terms{
  margin:16px 0 0 !important;font-size:12px;color:var(--e-muted);text-align:center;
}
.register-form .reg-terms a{color:var(--e-gold) !important;text-decoration:none;}
.register-form .reg-terms a:hover{text-decoration:underline;}

/* button row */
.login-body-submit{
  display:flex !important;gap:12px;
  padding:22px 0 6px !important;justify-content:space-between;
}
.login-body-submit .col-6{padding:0;flex:1;max-width:none;}

.btn-login-box{
  width:100% !important;height:46px !important;margin:0 !important;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--e-ui) !important;font-weight:700 !important;font-size:12.5px !important;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff !important;
  background:linear-gradient(180deg,var(--e-red-bright),var(--e-red-deep)) !important;
  border:1px solid rgba(242,201,107,.5) !important;
  border-radius:12px !important;
  box-shadow:0 8px 20px rgba(193,137,92,.32),inset 0 1px 0 rgba(255,255,255,.22) !important;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn-login-box:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(193,137,92,.45),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-login-box .btn-text-center{position:static;transform:none;color:#fff !important;}

.btn-custom-pin{
  width:100% !important;height:46px !important;margin:0 !important;
  font-family:var(--e-ui) !important;font-weight:700 !important;font-size:12.5px !important;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--e-gold-bright) !important;
  background:rgba(242,201,107,.06) !important;
  border:1px solid rgba(242,201,107,.4) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition:all .2s;
}
.btn-custom-pin:hover{
  color:var(--e-ink) !important;transform:translateY(-1px);
  background:linear-gradient(180deg,var(--e-gold-bright),var(--e-gold)) !important;
  border-color:var(--e-gold) !important;
  box-shadow:0 10px 22px rgba(242,201,107,.3) !important;
}

/* logged-in account menu buttons: round + gold shop accent already handled by style.css,
   just soften corners to match */
#account_block a.btn-account-menu{border-radius:11px !important;}

/* --- PIN removed by request (visual hide; the JS strips it for real) ------ */
.login-body input[name='pin'],
.login-body .form-outline:has(input[name='pin']),
.btn-custom-pin,
.login-body-submit .col-6:has(.btn-custom-pin),
.login-body-submit a[href$="/pin"]{display:none !important;}
/* with the Reset-Pin gone, the Log In button takes the whole row */
.login-body-submit{justify-content:center !important;}
.login-body-submit .col-6:has(.btn-login-box),
.login-body-submit .col-12{flex:1 0 100% !important;max-width:100% !important;}

/* ---------------------------------------------------------------------
   3) RANKINGS — crowns for top 3, empire pills, hover rows
   --------------------------------------------------------------------- */
.ranking-body{box-shadow:none !important;}
.ranking-body .overflow-auto{padding:8px 10px 12px !important;}

.ranking-table{
  background:transparent !important;border:none !important;border-radius:0 !important;
}
.ranking-table td{
  font-family:var(--e-ui) !important;font-size:13px !important;
  padding:11px 12px !important;border:none !important;vertical-align:middle !important;
  color:var(--e-text) !important;
}
/* each row is its own soft chip */
.ranking-table tbody tr{
  background:rgba(255,255,255,.02);
  transition:background .2s,box-shadow .2s,transform .2s;
}
.ranking-table tbody tr td:first-child{
  border-radius:10px 0 0 10px;width:46px;text-align:center;
  font-weight:800;color:var(--e-muted) !important;
}
.ranking-table tbody tr td:last-child{border-radius:0 10px 10px 0;}
.ranking-table tbody tr+tr td{border-top:none !important;}
.ranking-table tbody tr:not(:last-child){box-shadow:0 6px 0 -5px rgba(255,255,255,.05);}
.ranking-table tbody tr:hover{
  background:linear-gradient(90deg,rgba(193,137,92,.16),rgba(193,137,92,.04));
  box-shadow:inset 3px 0 0 var(--e-red);
}
.ranking-table .player{
  font-weight:700 !important;color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
/* the score / level column, right aligned & gold-tinted */
.ranking-table tbody tr td:last-child{
  text-align:right;font-weight:700;color:var(--e-gold) !important;font-size:12.5px !important;
}

/* crowns replace the number for the top 3 (players + guilds) */
.ranking-table tbody tr:nth-child(-n+3) td:first-child{
  font-size:0 !important;position:relative;
}
.ranking-table tbody tr:nth-child(-n+3) td:first-child::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;background-repeat:no-repeat;background-size:contain;
  background-position:center;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.ranking-table tbody tr:nth-child(1) td:first-child::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20576%20512%27%3E%3Cpath%20fill%3D%27%23#F5CB5C%27%20d%3D%27M309%20106c11.4-7%2019-19.7%2019-34c0-22.1-17.9-40-40-40s-40%2017.9-40%2040c0%2014.4%207.6%2027%2019%2034L209.7%20220.6c-9.1%2018.2-32.7%2023.4-48.6%2010.7L72%20160c5-6.7%208-15%208-24c0-22.1-17.9-40-40-40S0%20113.9%200%20136s17.9%2040%2040%2040c.2%200%20.5%200%20.7%200L86.4%20427.4c5.5%2030.4%2032%2052.6%2063%2052.6l277.2%200c30.9%200%2057.4-22.1%2063-52.6L535.3%20176c.2%200%20.5%200%20.7%200c22.1%200%2040-17.9%2040-40s-17.9-40-40-40s-40%2017.9-40%2040c0%209%203%2017.3%208%2024l-89.1%2071.3c-15.9%2012.7-39.5%207.5-48.6-10.7L309%20106z%27%2F%3E%3C%2Fsvg%3E");}
.ranking-table tbody tr:nth-child(2) td:first-child::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20576%20512%27%3E%3Cpath%20fill%3D%27%23#D6DBE1%27%20d%3D%27M309%20106c11.4-7%2019-19.7%2019-34c0-22.1-17.9-40-40-40s-40%2017.9-40%2040c0%2014.4%207.6%2027%2019%2034L209.7%20220.6c-9.1%2018.2-32.7%2023.4-48.6%2010.7L72%20160c5-6.7%208-15%208-24c0-22.1-17.9-40-40-40S0%20113.9%200%20136s17.9%2040%2040%2040c.2%200%20.5%200%20.7%200L86.4%20427.4c5.5%2030.4%2032%2052.6%2063%2052.6l277.2%200c30.9%200%2057.4-22.1%2063-52.6L535.3%20176c.2%200%20.5%200%20.7%200c22.1%200%2040-17.9%2040-40s-17.9-40-40-40s-40%2017.9-40%2040c0%209%203%2017.3%208%2024l-89.1%2071.3c-15.9%2012.7-39.5%207.5-48.6-10.7L309%20106z%27%2F%3E%3C%2Fsvg%3E");}
.ranking-table tbody tr:nth-child(3) td:first-child::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20576%20512%27%3E%3Cpath%20fill%3D%27%23#D08B57%27%20d%3D%27M309%20106c11.4-7%2019-19.7%2019-34c0-22.1-17.9-40-40-40s-40%2017.9-40%2040c0%2014.4%207.6%2027%2019%2034L209.7%20220.6c-9.1%2018.2-32.7%2023.4-48.6%2010.7L72%20160c5-6.7%208-15%208-24c0-22.1-17.9-40-40-40S0%20113.9%200%20136s17.9%2040%2040%2040c.2%200%20.5%200%20.7%200L86.4%20427.4c5.5%2030.4%2032%2052.6%2063%2052.6l277.2%200c30.9%200%2057.4-22.1%2063-52.6L535.3%20176c.2%200%20.5%200%20.7%200c22.1%200%2040-17.9%2040-40s-17.9-40-40-40s-40%2017.9-40%2040c0%209%203%2017.3%208%2024l-89.1%2071.3c-15.9%2012.7-39.5%207.5-48.6-10.7L309%20106z%27%2F%3E%3C%2Fsvg%3E");}
/* subtle gold wash on the #1 row */
.ranking-table tbody tr:nth-child(1){
  background:linear-gradient(90deg,rgba(242,201,107,.14),rgba(242,201,107,.02));
}
.ranking-table tbody tr:nth-child(1) .player{color:var(--e-gold-bright) !important;}

/* empire tags -> pills */
.ranking-table .color-empire-1,
.ranking-table .color-empire-2,
.ranking-table .color-empire-3{
  display:inline-block;font-family:var(--e-ui);font-size:10.5px;font-weight:600;
  letter-spacing:.03em;padding:3px 10px;border-radius:999px;line-height:1.4;
}
.ranking-table .color-empire-1{ /* Shinsoo */
  color:#ebc9ae !important;background:rgba(193,137,92,.14);border:1px solid rgba(193,137,92,.35);
}
.ranking-table .color-empire-2{ /* Chunjo */
  color:#ffd27a !important;background:rgba(242,201,107,.12);border:1px solid rgba(242,201,107,.35);
}
.ranking-table .color-empire-3{ /* Jinno */
  color:#8fb7ff !important;background:rgba(90,130,220,.14);border:1px solid rgba(90,130,220,.38);
}

/* keep the ranking table INSIDE its panel — no left/right scrolling,
   long names get an ellipsis instead of forcing a horizontal scrollbar */
.ranking-body .overflow-auto{overflow-x:hidden !important;}
.ranking-table{table-layout:fixed !important;width:100% !important;}
.ranking-table td{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap !important;
}
.ranking-table tbody tr td:first-child{width:34px !important;padding-left:6px !important;padding-right:4px !important;} /* rank / crown */
.ranking-table tbody tr td:nth-child(3){width:86px !important;text-align:center;padding-left:3px !important;padding-right:3px !important;} /* empire pill */
.ranking-table tbody tr td:last-child{width:62px !important;padding-left:4px !important;padding-right:8px !important;} /* level / score */
.ranking-table .color-empire-1,
.ranking-table .color-empire-2,
.ranking-table .color-empire-3{font-size:10px;padding:3px 8px;white-space:nowrap;}

/* ---------------------------------------------------------------------
   4) STATISTICS — clean rows with gold value pills
   --------------------------------------------------------------------- */
.stats-body-bg{padding:6px 6px 10px;}
.server-stats ul{padding:10px 14px !important;}
.server-stats ul li{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 !important;padding:12px 8px !important;
  font-family:var(--e-ui) !important;font-size:12.5px !important;color:var(--e-text) !important;
  border-bottom:1px solid var(--e-line-soft);
}
.server-stats ul li:last-child{border-bottom:none;}
.server-stats ul li .type{color:var(--e-muted) !important;letter-spacing:.02em;}
.server-stats .value{
  width:auto !important;min-width:64px;float:none !important;margin:0 !important;
  padding:5px 14px !important;text-align:center;
  font-family:var(--e-ui) !important;font-weight:700;font-size:12.5px;
  color:var(--e-gold-bright) !important;
  background:rgba(242,201,107,.08) !important;
  border:1px solid rgba(242,201,107,.28) !important;border-bottom:1px solid rgba(242,201,107,.28) !important;
  border-radius:999px !important;
}

/* ---------------------------------------------------------------------
   5) PLAYERS ONLINE — hero circle with animated ring
   --------------------------------------------------------------------- */
.players-online{
  border:1px solid var(--e-line);border-radius:var(--e-r);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(193,137,92,.20),transparent 60%),
    linear-gradient(180deg,var(--e-card-1),var(--e-card-2));
  overflow:hidden;
}
.players-online-bg{background:none !important;}
.players-online-body{
  padding:28px 20px !important;display:flex;flex-direction:column;align-items:center;
}
.players-online .amount{
  position:relative;display:flex !important;align-items:center;justify-content:center;
  width:104px;height:104px;margin-bottom:12px;border-radius:50%;
  font-family:'Sora',var(--e-ui) !important;font-weight:800 !important;font-size:34px !important;
  color:#fff !important;
  background:radial-gradient(circle at 50% 40%,rgba(193,137,92,.35),rgba(17,13,10,.6));
  box-shadow:inset 0 0 22px rgba(193,137,92,.4);
}
.players-online .amount::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--e-gold),var(--e-red),var(--e-gold),var(--e-red),var(--e-gold));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:e-spin 6s linear infinite;
}
@keyframes e-spin{to{transform:rotate(360deg);}}
.players-online .main-text{
  font-family:var(--e-ui) !important;font-size:12.5px !important;letter-spacing:.05em;
  text-transform:uppercase;color:var(--e-muted) !important;
}
.players-online .main-text .twenty-four{color:var(--e-gold) !important;font-weight:700;}

/* ---------------------------------------------------------------------
   6) DISCORD banner — gradient card w/ logo (no image needed)
   --------------------------------------------------------------------- */
.btn-banner-discord{
  height:112px !important;margin:0 0 22px !important;border-radius:var(--e-r) !important;
  background:
    radial-gradient(70% 120% at 92% 50%,rgba(88,101,242,.20),transparent 60%),
    radial-gradient(120% 90% at 0% 0%,rgba(193,137,92,.18),transparent 60%),
    linear-gradient(180deg,rgba(45,33,23,.96),rgba(21,16,12,.96)) !important;
  border:1px solid rgba(193,137,92,.30) !important;
  overflow:hidden;transition:transform .2s,box-shadow .2s;
}
.btn-banner-discord::after{
  content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:60px;height:60px;opacity:1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20512%27%3E%3Cpath%20fill%3D%27%23#9aa4ff%27%20d%3D%27M524.5%2069.8a1.5%201.5%200%200%200%20-.8-.7A485.1%20485.1%200%200%200%20404.1%2032a1.8%201.8%200%200%200%20-1.9%20.9%20337.5%20337.5%200%200%200%20-14.9%2030.6%20447.8%20447.8%200%200%200%20-134.4%200%20309.5%20309.5%200%200%200%20-15.1-30.6%201.9%201.9%200%200%200%20-1.9-.9A483.7%20483.7%200%200%200%20116.1%2069.1a1.7%201.7%200%200%200%20-.8%20.7C39.1%20183.7%2018.2%20294.7%2028.4%20404.4a2%202%200%200%200%20.8%201.4A487.7%20487.7%200%200%200%20176%20479.9a1.9%201.9%200%200%200%202.1-.7A348.2%20348.2%200%200%200%20208.1%20430.4a1.9%201.9%200%200%200%20-1-2.6%20321.2%20321.2%200%200%201%20-45.9-21.9%201.9%201.9%200%200%201%20-.2-3.1c3.1-2.3%206.2-4.7%209.1-7.1a1.8%201.8%200%200%201%201.9-.3c96.2%2043.9%20200.4%2043.9%20295.5%200a1.8%201.8%200%200%201%201.9%20.2c2.9%202.4%206%204.9%209.1%207.2a1.9%201.9%200%200%201%20-.2%203.1%20301.4%20301.4%200%200%201%20-45.9%2021.8%201.9%201.9%200%200%200%20-1%202.6%20391.1%20391.1%200%200%200%2030%2048.8%201.9%201.9%200%200%200%202.1%20.7A486%20486%200%200%200%20610.7%20405.7a1.9%201.9%200%200%200%20.8-1.4C623.7%20277.6%20590.9%20167.5%20524.5%2069.8zM222.5%20337.6c-29%200-52.8-26.6-52.8-59.2S193.1%20219.1%20222.5%20219.1c29.7%200%2053.3%2026.8%2052.8%2059.2C275.3%20311%20251.9%20337.6%20222.5%20337.6zm195.4%200c-29%200-52.8-26.6-52.8-59.2S388.4%20219.1%20417.9%20219.1c29.7%200%2053.3%2026.8%2052.8%2059.2C470.7%20311%20447.5%20337.6%20417.9%20337.6z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.btn-banner-discord:hover{
  transform:translateY(-2px);filter:none;
  box-shadow:0 14px 30px rgba(193,137,92,.30);
  border-color:rgba(242,201,107,.5) !important;
}
.btn-text-banner-discord-main{
  left:22px !important;top:36px !important;
  font-family:var(--e-ui) !important;font-weight:800 !important;font-size:17px !important;
  letter-spacing:.02em;color:#fff !important;text-shadow:0 2px 8px rgba(0,0,0,.5) !important;
}
.btn-text-banner-discord-second{
  left:22px !important;top:64px !important;
  font-family:var(--e-ui) !important;font-size:11.5px !important;
  color:#ddcdc0 !important;
}

/* Register / Vote banner (if the template shows one) -> modern red+gold card,
   replaces the old red PNG so it never looks like a raw red bar */
.btn-banner-register{
  height:112px !important;margin:0 0 22px !important;border-radius:var(--e-r) !important;
  background:
    radial-gradient(80% 120% at 100% 50%,rgba(242,201,107,.16),transparent 60%),
    linear-gradient(180deg,rgba(50,36,25,.96),rgba(21,16,12,.96)) !important;
  border:1px solid rgba(242,201,107,.32) !important;
  overflow:hidden;position:relative;transition:transform .2s,box-shadow .2s;
}
.btn-banner-register::after{
  content:"";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:54px;height:54px;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20512%27%3E%3Cpath%20fill%3D%27%23#f2c96b%27%20d%3D%27M96%20128a128%20128%200%201%201%20256%200A128%20128%200%201%201%2096%20128zM0%20482.3C0%20383.8%2079.8%20304%20178.3%20304l91.4%200C368.2%20304%20448%20383.8%20448%20482.3c0%2016.4-13.3%2029.7-29.7%2029.7L29.7%20512C13.3%20512%200%20498.7%200%20482.3zM504%20312l0-64-64%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l64%200%200-64c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024l0%2064%2064%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-64%200%200%2064c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.btn-banner-register:hover{transform:translateY(-2px);filter:none;box-shadow:0 14px 30px rgba(242,201,107,.22);}
.btn-text-banner-register-main{
  left:22px !important;top:36px !important;
  font-family:var(--e-ui) !important;font-weight:800 !important;font-size:17px !important;
  letter-spacing:.02em;color:#fff !important;text-shadow:0 2px 8px rgba(0,0,0,.5) !important;
}
.btn-text-banner-register-second{
  left:22px !important;top:64px !important;
  font-family:var(--e-ui) !important;font-size:11.5px !important;color:#ddcdc0 !important;
}

/* ---------------------------------------------------------------------
   7) NEWS (center) + FAQ box
   --------------------------------------------------------------------- */
#custom-content-center{padding:0 22px !important;}
.content-header .name h3{font-size:18px !important;letter-spacing:.1em;}
.content-header .name h3 i{color:var(--e-gold) !important;margin-right:8px;}
.content-body{
  padding:22px !important;color:var(--e-text) !important;
  font-family:var(--e-ui) !important;font-size:14px;min-height:280px;
}
.content-body-bg{background:transparent !important;}

/* pretty empty-state (optional: wrap the CMS empty text in .news-empty) */
.news-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:260px;color:var(--e-muted);
}
.news-empty .ne-icon{
  width:64px;height:64px;margin-bottom:16px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--e-gold);
  background:rgba(242,201,107,.08);border:1px solid rgba(242,201,107,.25);
}
.news-empty h4{font-family:var(--e-title);color:#fff;font-size:16px;letter-spacing:.06em;margin-bottom:6px;text-transform:uppercase;}
.news-empty p{font-size:13px;color:var(--e-muted);max-width:320px;}

.faq-box{margin-top:22px;overflow:hidden;border-radius:var(--e-r);}
.faq-body-bg{
  background:linear-gradient(180deg,var(--e-card-1),var(--e-card-2)) !important;
  border:1px solid var(--e-line);border-radius:var(--e-r);
}
/* if the FAQ box has a title bar (a .login-header) above the question,
   join the header and body into ONE card instead of a floating red bar */
.faq-box:has(.login-header) .faq-body-bg{
  border-top:none !important;border-radius:0 0 var(--e-r) var(--e-r) !important;
}
.faq-box .login-header{border-radius:var(--e-r) var(--e-r) 0 0 !important;}
/* the accordion questions become clean rows, never overflowing */
#faq-accordion .card{background:transparent !important;padding:6px 4px !important;overflow:hidden;}
#faq-accordion .btn.btn-link{white-space:normal !important;text-align:left;padding:12px 14px !important;}
#faq-accordion .btn.btn-link{
  font-family:var(--e-ui) !important;font-size:13px !important;font-weight:600;
  color:var(--e-text) !important;text-decoration:none !important;
}
#faq-accordion .btn.btn-link:hover{color:var(--e-gold-bright) !important;}
#faq-accordion .card-body{font-family:var(--e-ui) !important;color:var(--e-muted) !important;font-size:13px !important;}

/* ---------------------------------------------------------------------
   8) FOOTER
   --------------------------------------------------------------------- */
footer{
  background:linear-gradient(180deg,rgba(12,9,7,.6),rgba(5,4,3,.92)) !important;
  border-top:1px solid var(--e-line) !important;
}
footer .first-footer{position:relative;}
footer .first-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,201,107,.5),transparent);
}
.top-footer ul{width:auto !important;flex-wrap:wrap;gap:8px 36px;}
.top-footer ul li{padding-right:0 !important;}
.top-footer ul li a{
  font-family:var(--e-ui) !important;font-size:12.5px !important;font-weight:600;
  letter-spacing:.08em;color:var(--e-muted) !important;
}
.top-footer ul li a:hover{color:var(--e-gold-bright) !important;text-shadow:0 0 12px rgba(242,201,107,.45) !important;}
.second-footer{
  background:rgba(0,0,0,.35) !important;border-top:1px solid var(--e-line-soft) !important;
}
.second-footer p{font-family:var(--e-ui) !important;color:var(--e-muted) !important;font-size:12px !important;}
.second-footer a{color:var(--e-gold) !important;}
.second-footer a:hover{color:var(--e-gold-bright) !important;}

/* scrollbars inside panels */
.overflow-auto::-webkit-scrollbar{width:8px;}
.overflow-auto::-webkit-scrollbar-thumb{background:rgba(193,137,92,.35);border-radius:10px;}
.overflow-auto::-webkit-scrollbar-thumb:hover{background:rgba(242,201,107,.5);}

/* ---------------------------------------------------------------------
   9) SAFETY — never let the page scroll sideways
   --------------------------------------------------------------------- */
html,body{max-width:100% !important;overflow-x:clip !important;}
.detailed-section,.detailed-section .container{max-width:100%;overflow-x:clip;}
.detailed-section .row{margin-left:0 !important;margin-right:0 !important;}
img{max-width:100%;}

/* ---------------------------------------------------------------------
   10) RESPONSIVE polish
   --------------------------------------------------------------------- */
@media (max-width:991px){
  #custom-content-center{padding:0 0 !important;}
  .login-box,.ranking-box,.stats-box,.content-box,.players-online,.faq-box{margin-bottom:22px;}
}