/* ==========================================================
   Custom overrides (Header + Home) - SAFE
   - No PHP logic changes required
   - Load this AFTER style-mobile.css
   ========================================================== */

:root{
  --accent: #d09a26;
  --accent2: #e4933c;
  --border: rgba(255,255,255,.10);
  --borderSoft: rgba(255,255,255,.06);
  --surface: rgba(28,28,29,.92);
  --surface2: rgba(18,19,21,.72);
  --textMuted: rgba(216,208,204,.78);
}

/* Typography / spacing improvements */
body{
  line-height: 1.45; /* original was 1, which makes everything cramped */
}

/* Make fixed-width containers fluid on smaller screens */
@media (max-width: 1240px){
  .container,
  .topPanel-wrapper{
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ================= HEADER / TOP PANEL ================= */

/* Slight glass effect + softer borders */
.topPanel{
  background: linear-gradient(to bottom, rgba(15,17,16,.92), rgba(24,25,20,.70));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Menu link hover: modern + subtle */
.menu li a{
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease;
}
.menu li a:hover{
  background: rgba(208,154,38,.10);
  color: #fff;
}
.menu li:after{ opacity:.45; }

/* Search input feel */
.profileBlock-bottom .sch{
  background: rgba(50,52,63,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}

/* ================= HOME: TOP BLOCK ================= */

.topBlock{
  gap: 24px;
  margin-bottom: 70px;
}

/* Slider + last topics become "cards" */
.sliderHome,
.lastTopicks{
  border: 1px solid var(--borderSoft);
  border-top: 1px solid rgba(208,154,38,.35);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(28,28,29,.92), rgba(17,18,19,.92));
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

/* Slider polish */
.sliderHome{
  height: auto;
  padding: 12px;
}

.slide-link{
  display:block;
  position:relative;
  border-radius: 14px;
  overflow:hidden;
}
.slide-link img{
  display:block;
  width:100%;
  height:346px;
  object-fit:fill;
  border-radius:14px;
}

/* Center play button (remove margin hack) + animate */
.slide-link:before{
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%,-50%) scale(.94);
  transition: .25s ease;
}
.slide-link:hover:before{
  transform: translate(-50%,-50%) scale(1.02);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.55));
}

/* Contrast overlay to improve readability */
.slide-link:after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.15), rgba(0,0,0,.55));
  opacity: .85;
  pointer-events:none;
}

/* Last topics header */
.lastTopicks{ height:auto; }
.lastTopicks-title{ padding: 16px 18px; }
.lastTopicks-title:after{
  left: 18px;
  width: calc(100% - 36px);
  opacity: .65;
}

/* Tabs: pill style */
.lastTopicks-tab{
  gap: 12px;
  margin-right: 0;
}
.lastTopicks-tab li{
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--textMuted);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.lastTopicks-tab li:before{ display:none; }
.lastTopicks-tab li.active{
  color: #fff;
  border-color: rgba(208,154,38,.40);
  background: rgba(208,154,38,.12);
  box-shadow: 0 10px 30px rgba(208,154,38,.12);
}

/* News list spacing */
.lastNews{ padding: 6px 0 58px; }
.lastNews li{
  margin: 0 18px;
  min-height: 52px;
  padding: 12px 0;
  height: auto;
  border-bottom: 1px solid rgba(255,255,255,.06);
  align-items: flex-start;
}
.lastNews li a{
  color:#fff;
  margin-left: 12px;
  line-height: 1.25;
}
.lastNews li:hover{ background: rgba(255,255,255,.02); }
.more-news{
  background: rgba(23,24,29,.92);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* News tag pill */
.news-tag{
  display:inline-flex;
  align-items:center;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* ================= HOME: NEW ERA ================= */
/* Works both with your original HTML and with the safer .newBlock-inner patch */
.newBlock,
.newBlock-inner{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.newBlock-info{ padding-top: 90px; }
.newBlock-title{
  letter-spacing: .02em;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.dark-fon{
  height: 170px;
  background: linear-gradient(180deg, rgba(24,22,25,0), rgba(24,22,25,.75));
}

/* ================= HOME: MEDIA ================= */
.mediaBlock-images{
  height: auto;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px 0 10px;
}
.media-img{
  flex: 1 1 280px;
  max-width: 380px;
}
.media-img img{
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: var(--fab-radius);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease, filter .25s ease, border-color .25s ease;
}
/* Avoid "jump" by using scale instead of changing height */
.media-img img:hover{
  transform: scale(1.03);
  filter: brightness(1.05);
  border-color: rgba(208,154,38,.35);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px){
  .topBlock{ flex-direction: column; }
  .sliderHome, .lastTopicks{ width: 100%; }
  .slide-link img{ height: 280px; }

  .newBlock-info{ padding: 60px 0 0; }
  .newBlock-title{ font-size: 58px; }
  .newBlock-title span{ font-size: 40px; }

  .hero{
    opacity: .55;
    width: 520px;
    height: 420px;
    background-size: contain;
    right: -60px;
    bottom: -40px;
  }
}
@media (max-width: 576px){
  .slide-link img{ height: 220px; }
  .hero{ display:none; }
  .buttonPlay{
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 18px;
  }
}

/* ================= MENU DROPDOWN (GLASS) =================
   Works when <li> contains a nested <ul class="menu-dropdown">
   - Transparent + blur
   - Hover + keyboard focus (focus-within)
   ======================================================== */

.menu li { position: relative; } /* ensure anchor for absolute dropdown */

.menu li.has-dd > a{
  padding-right: 46px; /* room for caret */
}
.menu li.has-dd > a:after{
  content: "▾";
  position: absolute;
  right: 3px;
  top: 51%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: .75;
  pointer-events: none;
}

/* Dropdown panel */
.menu-dropdown{
  position: absolute;
  left: 8px;
  top: calc(100% + 2px);
  min-width: 240px;
  margin: 0;
  padding: 12px;
  list-style: none;
  background: rgba(15, 17, 16, .62);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}


.menu-dropdown:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
}
/* Open on hover / focus */
.menu li:hover > .menu-dropdown,
.menu li:focus-within > .menu-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Prevent separators inside dropdown (your theme adds li:after) */
.menu-dropdown li:after{ display: none !important; }

/* Dropdown items */
.menu-dropdown li + li{ margin-top: 4px; }

.menu-dropdown a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  background: transparent;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.menu-dropdown a:hover{
  background: rgba(208, 154, 38, .14);
  border: 1px solid rgba(208, 154, 38, .22);
  color: #fff;
  transform: translateX(2px);
}

/* Optional subtle divider line */
.menu-dropdown .dd-sep{
  height: 1px;
  margin: 8px 6px;
  background: rgba(255,255,255,.08);
}

/* Mobile: keep dropdown readable if the menu becomes stacked */
@media (max-width: 992px){
  .menu-dropdown{
    position: static;
    left: auto;
    top: auto;
    min-width: 100%;
    margin: 8px 0 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .menu li.has-dd > a:after{ display: none; }
}

/* Safety: make sure dropdown isn't clipped */
.topPanel, .topPanel-wrapper, .topPanel-content, .container, .menu{
  overflow: visible !important;
}

/* ================= FOOTER (MODERN GLASS) =================
   - Uses existing markup in view.footer.php
   - Optional helper classes added: .footer--modern, .footerTop--modern, .footerBottom--modern
   ======================================================== */

/* Softer overlay so footer bg image looks richer */
.footer--modern{
  position: relative;
}
.footer--modern:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(8,10,12,.20) 0%,
    rgba(8,10,12,.55) 55%,
    rgba(8,10,12,.75) 100%);
  pointer-events:none;
}
.footer--modern > .container{
  position: relative;
  z-index: 1;
}

/* Top footer layout */
.footerTop--modern{
  padding: 78px 0 56px;
  gap: 28px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Remove hard column dividers, use spacing instead */
.footerTop--modern .footerTop-l,
.footerTop--modern .footerTop-c{
  border-right: 0 !important;
}

.footerTop--modern .footerTop-l{
  padding-right: 18px;
}
.footerTop--modern .footerTop-c{
  padding: 0 18px;
  gap: 22px;
}
.footerTop--modern .footerTop-r{
  padding-left: 18px;
}

/* Titles: add subtle underline accent */
.footerTop--modern .footerTop-title{
  font-size: 13px;
  letter-spacing: .10em;
  opacity: .95;
  margin-bottom: 18px;
}
.footerTop--modern .footerTop-title:after{
  content:"";
  display:block;
  width: 44px;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(208,154,38,.85); /* gold accent */
}

/* Copyright / powered by */
.footerTop--modern .copy{
  margin-top: 10px;
  color: rgba(255,255,255,.55);
}
.footerTop--modern .copy a{
  color: rgba(255,255,255,.80);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.footerTop--modern .copy a:hover{
  color: #fff;
  border-bottom-color: rgba(208,154,38,.55);
}

/* Footer menus */
.footerTop--modern .f-menu{
  border-right: 0 !important;
  margin-top: 0 !important;
}
.footerTop--modern .f-menu li{
  padding: 9px 12px 9px 22px;
  border-radius: 12px;
  transition: background .16s ease;
}
.footerTop--modern .f-menu li:hover{
  background: rgba(255,255,255,.03);
}
.footerTop--modern .f-menu li a{
  color: rgba(255,255,255,.70);
  transition: color .16s ease;
}
.footerTop--modern .f-menu li a:hover{
  color: #fff;
}
/* keep original icon but align better */
.footerTop--modern .f-menu li a:before{
  left: -10px;
  opacity: .75;
}

/* Right credit block */
.footerTop--modern .dn{
  margin-bottom: 18px;
}
.footerTop--modern .dn-design{
  color: rgba(255,255,255,.52);
  line-height: 1.35;
}
.footerTop--modern .dn-design a{
  color: rgba(208,154,38,.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(208,154,38,.35);
}
.footerTop--modern .dn-design a:hover{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.22);
}

/* Bottom footer */
.footerBottom--modern{
  padding: 24px 0;
  color: rgba(255,255,255,.52);
  border-top: 0; /* top border already on footerTop */
}

/* Social buttons: bigger hit area using existing sprite positions */
.footerBottom--modern .socBlock{
  gap: 8px;
}
.footerBottom--modern .socBlock span{
  color: rgba(255,255,255,.55);
}
.footerBottom--modern .socBlock a{
  height: 36px !important;
  width: 40px;
  margin: 0 6px !important;
  border-radius: 12px;
  background-color: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .16s ease, border-color .16s ease, filter .16s ease, background-color .16s ease;
  background-repeat: no-repeat;
  background-position-y: 9px !important; /* vertical align sprite */
}
.footerBottom--modern .socBlock a:hover{
  transform: translateY(-1px);
  background-color: rgba(255,255,255,.06);
  border-color: rgba(208,154,38,.35);
  filter: brightness(120%);
}
/* Adjust X offsets to account for padding (original were 0, -44, -75) */
.footerBottom--modern .tw{ background-position: 10px 9px !important; }
.footerBottom--modern .fb{ background-position: -34px 9px !important; width: 36px; }
.footerBottom--modern .dc{ background-position: -65px 9px !important; width: 42px; }

/* Vote block: small pill */
.footerBottom--modern .voteBlock{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.footerBottom--modern .voteBlock span{
  color: rgba(255,255,255,.60);
}

/* ToTop: modern card, keep icon */
.footerBottom--modern .toTop{
  width: 74px;
  padding-top: 52px;
  border-radius: var(--fab-radius);
  background-color: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  background-position: center 12px;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.footerBottom--modern .toTop:hover{
  transform: translateY(-1px);
  background-color: rgba(255,255,255,.05);
  border-color: rgba(208,154,38,.35);
}
.footerBottom--modern .toTop span{
  background: none !important;
  -webkit-text-fill-color: initial;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

/* Responsive footer */
@media (max-width: 992px){
  .footerTop--modern{
    flex-direction: column;
    padding: 58px 0 40px;
  }
  .footerTop--modern .footerTop-l,
  .footerTop--modern .footerTop-c,
  .footerTop--modern .footerTop-r{
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
  }
  .footerTop--modern .footerTop-c{
    flex-wrap: wrap;
  }
  .footerTop--modern .footerTop-c_block{
    min-width: 190px;
    flex: 1 1 220px;
  }
  .footerBottom--modern{
    flex-direction: column;
    gap: 14px;
  }
  .footerBottom--modern .footerBottom-l,
  .footerBottom--modern .footerBottom-c,
  .footerBottom--modern .footerBottom-r{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ================= FOOTER MENU ALIGNMENT FIX =================
   - Normalizes column paddings from original theme
   - Aligns list indentation + icons consistently
   ============================================================ */

.footerTop--modern .footerTop-c{
  align-items: flex-start;
  justify-content: space-between;
  gap: 34px;
}

/* Original theme has different padding-left per column; normalize it */
.footerTop--modern .footerTop-c_block{
  width: auto !important;
  flex: 1 1 0;
  padding-left: 0 !important;
}
.footerTop--modern .footerTop-c_block:nth-child(1),
.footerTop--modern .footerTop-c_block:nth-child(2),
.footerTop--modern .footerTop-c_block:nth-child(3){
  padding-left: 0 !important;
}

/* List: consistent left edge (keep original arrow icon position) */
.footerTop--modern .f-menu{
  padding: 0 !important;
  margin: 0 !important;
}
.footerTop--modern .f-menu li{
  padding: 7px 10px 7px 12px; /* closer to original alignment */
}

/* Revert icon positioning to original theme so it lines up */
.footerTop--modern .f-menu li a:before{
  left: -18px !important;
  opacity: .75;
}

/* Make hover background feel consistent without shifting layout */
.footerTop--modern .f-menu li:hover{
  background: rgba(255,255,255,.03);
}

/* ================= FLOATING SIDE BUTTONS (V4 - TEMPLATE GOLD) =================
   Cleaner + closer to the theme:
   - No "gold fill" (was ugly)
   - Dark glass buttons with subtle GOLD rim + soft gold glow
   - Bigger size
   - Tooltip kept minimal
   =========================================================================== */

.float-actions{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  --fab-size: 64px;
  --fab-radius: 18px;
  --fab-icon: 26px;

  /* site gold tones */
  --gold: rgba(208,154,38,.95);      /* #d09a26 */
  --gold-soft: rgba(217,193,134,.65);/* #d9c186 */

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual button */
.float-actions .float-btn,
.float-actions .float-btn:visited,
.float-actions button.float-btn{
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--fab-radius);

  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 100% at 30% 15%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(18,19,21,.66);

  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  text-decoration: none;

  position: relative;
  overflow: hidden;

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

/* GOLD rim (subtle) */
.float-actions .float-btn:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(208,154,38,.55), rgba(228,147,60,.25), rgba(255,255,255,.10));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .65;
  transition: opacity .16s ease, filter .16s ease;
  pointer-events:none;
}

/* Bottom gold tint (very light) */
.float-actions .float-btn:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 40%;
  background: linear-gradient(180deg, rgba(208,154,38,0), rgba(208,154,38,.10));
  opacity: .9;
  transition: opacity .16s ease, height .16s ease, filter .16s ease;
  pointer-events:none;
}

.float-actions .float-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(217,193,134,.38);
  box-shadow:
    0 24px 64px rgba(0,0,0,.66),
    0 18px 46px rgba(208,154,38,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  filter: brightness(115%);
}
.float-actions .float-btn:hover:before{
  opacity: .95;
  filter: brightness(110%);
}
.float-actions .float-btn:hover:after{
  opacity: 1;
  height: 55%;
  filter: brightness(116%);
}

.float-actions .float-btn:active{
  transform: translateY(0px) scale(.98);
}

/* SVG icon: gold (not too bright) */
.float-actions .float-btn svg{
  width: var(--fab-icon);
  height: var(--fab-icon);
  fill: rgba(217,193,134,.92);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  transition: transform .16s ease, fill .16s ease;
}
.float-actions .float-btn:hover svg{
  fill: rgba(255,228,209,.95); /* matches the site's gold-ish gradients */
  transform: scale(1.04);
}

@media (max-width: 768px){
  .float-actions{
    top: auto;
    bottom: 16px;
    right: 14px;
    transform: none;

    --fab-size: 58px;
    --fab-icon: 24px;

    gap: 10px;
  }
  .float-actions .float-btn[data-label]::after{
    display: none;
  }
}

/* ================= LOGIN MODAL (VISUAL UPGRADE) =================
   Scoped to login modal only (footer modal). Does NOT change PHP logic.
   ================================================================ */

.modal-overlay[data-modal-id="login"]{
  background: rgba(8,10,12,.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-overlay[data-modal-id="login"] .modal{
  width: min(460px, 100%);
  max-height: calc(100vh - 96px);
  overflow: auto;

  padding: 24px 24px 18px !important;
  border-radius: 22px;

  background:
    radial-gradient(120% 120% at 25% 10%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.86) !important;

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 34px 110px rgba(0,0,0,.72),
    0 18px 46px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Title */
.modal-overlay[data-modal-id="login"] .modalTitle{
  margin: 0 0 12px !important;
  text-align: center;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.modal-overlay[data-modal-id="login"] .modalTitle:after{
  content:"";
  display:block;
  width: 44px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(208,154,38,.80);
  box-shadow: 0 10px 22px rgba(208,154,38,.14);
}

/* Close button (keep existing .modal__close div) */
.modal-overlay[data-modal-id="login"] .modal__close{
  width: 34px !important;
  height: 34px !important;
  right: 18px !important;
  top: 18px !important;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, filter .16s ease;
}
.modal-overlay[data-modal-id="login"] .modal__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(208,154,38,.35);
  filter: brightness(112%);
}
/* X icon (ensure visible) */
.modal-overlay[data-modal-id="login"] .modal__close:before,
.modal-overlay[data-modal-id="login"] .modal__close:after{
  background: rgba(255,255,255,.80) !important;
}

/* Form groups (override the theme's "floating span" style ONLY in this modal) */
.modal-overlay[data-modal-id="login"] .formGroup{
  text-align: left !important;
  margin-bottom: 12px !important;
}
.modal-overlay[data-modal-id="login"] .formGroup span{
  position: static !important;
  margin: 0 0 8px !important;
  text-align: left !important;

  font-size: 12px;
  letter-spacing: .10em;
  color: rgba(255,255,255,.70) !important;
}
.modal-overlay[data-modal-id="login"] .formGroup .input{
  width: 100% !important;
  max-width: none !important;

  height: 44px;
  padding: 0 14px !important;

  border-radius: 14px;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.modal-overlay[data-modal-id="login"] .formGroup .input:focus{
  outline: none;
  border-color: rgba(208,154,38,.55) !important;
  box-shadow:
    0 0 0 3px rgba(208,154,38,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
  filter: brightness(112%);
}

/* Social button(s) */
.modal-overlay[data-modal-id="login"] .soc-buttons{
  margin-bottom: 14px !important;
}
.modal-overlay[data-modal-id="login"] .soc-button a{
  width: 100%;
  border-radius: 14px;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.10);
  background-color: rgba(255,255,255,.04);
  box-shadow: 0 16px 44px rgba(0,0,0,.40);
}
.modal-overlay[data-modal-id="login"] .soc-button a:hover{
  border-color: rgba(208,154,38,.28);
  filter: brightness(112%);
}

/* Captcha image */
.modal-overlay[data-modal-id="login"] #captcha_image{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 6px;
}

/* Footer links area inside modal */
.modal-overlay[data-modal-id="login"] .formInfo{
  margin-top: 10px;
  gap: 14px;
}
.modal-overlay[data-modal-id="login"] .formInfo-left{
  padding-left: 0 !important;
}
.modal-overlay[data-modal-id="login"] .forgot-password a{
  color: rgba(255,255,255,.70) !important;
}
.modal-overlay[data-modal-id="login"] .forgot-password a:hover{
  color: #fff !important;
}
.modal-overlay[data-modal-id="login"] .sign-up a{
  color: rgba(208,154,38,.92) !important;
}
.modal-overlay[data-modal-id="login"] .sign-up a:hover{
  color: #fff !important;
}

/* Sign in button (override sprite to match theme) */
.modal-overlay[data-modal-id="login"] .sign-button .button,
.modal-overlay[data-modal-id="login"] .sign-button button{
  width: 190px;
  min-height: 44px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);

  background-image: none !important;
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(208,154,38,.98), rgba(228,147,60,.92)) !important;

  color: rgba(8,10,12,.95) !important;
  font-weight: 800;
  letter-spacing: .04em;

  box-shadow: 0 18px 46px rgba(0,0,0,.50);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.modal-overlay[data-modal-id="login"] .sign-button .button:hover,
.modal-overlay[data-modal-id="login"] .sign-button button:hover{
  transform: translateY(-1px);
  filter: brightness(108%);
  box-shadow: 0 22px 60px rgba(0,0,0,.60), 0 16px 38px rgba(208,154,38,.18);
}
.modal-overlay[data-modal-id="login"] .sign-button .button:active,
.modal-overlay[data-modal-id="login"] .sign-button button:active{
  transform: translateY(0) scale(.99);
}

/* Responsive */
@media (max-width: 520px){
  .modal-overlay[data-modal-id="login"] .modal{
    padding: 20px 14px 14px !important;
    border-radius: 18px;
  }
  .modal-overlay[data-modal-id="login"] .sign-button .button,
  .modal-overlay[data-modal-id="login"] .sign-button button{
    width: 100%;
  }
  .modal-overlay[data-modal-id="login"] .formInfo{
    flex-direction: column;
    align-items: stretch;
  }
  .modal-overlay[data-modal-id="login"] .formInfo-right{
    width: 100%;
  }
}

/* ================= HOME NEWS AREA (V3 - ELEGANT HEADER + CARDS) =================
   This section is independent from the top slider.
   ============================================================================== */

.homeNewsArea{
  position: relative;
  padding: 46px 0 30px;
  margin-top: 18px;
}

/* subtle backdrop so it doesn't look "unstyled" */
.homeNewsArea:before{
  content:"";
  position:absolute;
  left:0; right:0; top:-18px;
  height: calc(100% + 18px);
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    radial-gradient(520px 220px at 20% 20%, rgba(208,154,38,.10), rgba(208,154,38,0) 60%);
  pointer-events:none;
  opacity: .9;
}

/* Header */
.homeNewsHeader{
  position: relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
}
.homeNewsHeader:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
  opacity:.9;
}

.homeNewsTitle{
  margin: 0;
  font-size: 18px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
}
.homeNewsSub{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.homeNewsAll{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  color: rgba(255,255,255,.88);
  text-decoration:none;

  background:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.55);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);

  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.homeNewsAll:hover{
  transform: translateY(-1px);
  border-color: rgba(208,154,38,.30);
  filter: brightness(112%);
}
.homeNewsAllArrow{
  font-size: 14px;
  transition: transform .16s ease;
}
.homeNewsAll:hover .homeNewsAllArrow{ transform: translateX(2px); }

/* Feed stacked */
.homeNewsArea .homeNewsFeed{
  display:flex !important;
  flex-direction:column !important;
  gap: 18px !important;
  position: relative;
}

/* Card (scoped) */
.homeNewsArea .newsCard{
  display:flex !important;
  gap: 18px;

  padding: 18px;
  border-radius: 24px;

  background:
    radial-gradient(120% 120% at 22% 10%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.78) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);

  overflow:hidden;
  position: relative;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

/* gold accent line (left) */
.homeNewsArea .newsCard:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width: 2px;
  border-radius: 999px;
  background: rgba(208,154,38,.62);
  box-shadow: 0 18px 44px rgba(208,154,38,.10);
  opacity:.95;
}

.homeNewsArea .newsCard:hover{
  transform: translateY(-2px);
  border-color: rgba(208,154,38,.22) !important;
  filter: brightness(112%);
  box-shadow:
    0 34px 110px rgba(0,0,0,.62),
    0 18px 44px rgba(208,154,38,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Thumb */
.homeNewsArea .newsCard-thumb{
  flex: 0 0 320px;
  height: 190px;
  border-radius: 18px;
  overflow:hidden;
  position: relative;
  display:block;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}

.homeNewsArea .newsCard-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
  transition: transform .22s ease, filter .22s ease;
}

.homeNewsArea .newsCard:hover .newsCard-thumb img{
  transform: scale(1.05);
  filter: contrast(106%) brightness(106%);
}

/* Body */
.homeNewsArea .newsCard-body{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
}

.homeNewsArea .newsCard-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.homeNewsArea .newsMetaItem{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  letter-spacing: .02em;
}

/* simple dots as icons */
.homeNewsArea .nmDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  background: rgba(208,154,38,.70);
  box-shadow: 0 10px 22px rgba(208,154,38,.10);
  opacity: .95;
}
.homeNewsArea .nmDot--soft{
  background: rgba(217,193,134,.55);
}

.homeNewsArea .newsCard-title{
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.25;
}
.homeNewsArea .newsCard-title a{
  color: rgba(255,255,255,.96);
  text-decoration:none;
}
.homeNewsArea .newsCard-title a:hover{
  color: rgba(255,255,255,1);
}

.homeNewsArea .newsCard-excerpt{
  margin: 0 0 12px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.6;
}

/* Tags */
.homeNewsArea .newsCard-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: auto;
}

.homeNewsArea .newsTag{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;

  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: border-color .16s ease, filter .16s ease;
}
.homeNewsArea .newsTag:hover{
  border-color: rgba(208,154,38,.24);
  filter: brightness(112%);
}

/* Actions */
.homeNewsArea .newsCard-actions{
  margin-top: 14px;
}

.homeNewsArea .newsReadMore{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  color: rgba(208,154,38,.95);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}
.homeNewsArea .newsReadMore:hover{
  color: rgba(255,255,255,.92);
}
.homeNewsArea .newsReadMore-arrow{
  font-size: 14px;
  transform: translateY(0);
  transition: transform .16s ease;
}
.homeNewsArea .newsReadMore:hover .newsReadMore-arrow{
  transform: translateX(2px);
}

/* Responsive */
@media (max-width: 992px){
  .homeNewsArea .newsCard-thumb{ flex-basis: 280px; height: 170px; }
}
@media (max-width: 768px){
  .homeNewsArea{ padding: 34px 0 22px; }
  .homeNewsHeader{ align-items:flex-start; }
  .homeNewsHeader-right{ display:none; }

  .homeNewsArea .newsCard{
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
  }
  .homeNewsArea .newsCard:before{ display:none; }
  .homeNewsArea .newsCard-thumb{
    flex-basis: auto;
    width: 100%;
    height: 200px;
    border-radius: 16px;
  }
  .homeNewsArea .newsCard-title{ font-size: 16px; }
}

/* ================= HEADER STATS CARD =================
   Single organized card: Online / Accounts / Characters / Guilds
   Safe to keep placeholders ("—") until you implement the PHP.
   ===================================================== */

.topPanel .siteStatsCard,
.header .siteStatsCard{
  width: 100%;
  max-width: 560px;
  margin: 0 0 12px 0;
  padding: 20px 20px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 25% 10%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), rgb(18 19 21 / 73%);
  border: 1px solid rgba(208,154,38,.30);
  outline: 1px solid rgba(208,154,38,.14);
  outline-offset: -4px;
  box-shadow:
    0 22px 70px rgba(0,0,0,.52),
    0 18px 44px rgba(208,154,38,.08),
    inset 0 1px 0 rgba(255,255,255,.08);

  /* Soft blinking glow */
  animation: siteStatsGlow 2.8s ease-in-out infinite;
}

/* Gradient rim (fallback-safe: if mask not supported, the border + glow still looks great) */
.topPanel .siteStatsCard:before,
.header .siteStatsCard:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(208,154,38,.00),
    rgba(208,154,38,.65),
    rgba(217,193,134,.35),
    rgba(208,154,38,.55),
    rgba(208,154,38,.00)
  );
  pointer-events:none;
  opacity: .55;

  /* cut center */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: siteStatsRim 2.8s ease-in-out infinite;
}

/* Subtle moving highlight */
.topPanel .siteStatsCard:after,
.header .siteStatsCard:after{
  content:"";
  position:absolute;
  inset: -40% -30%;
  background: radial-gradient(closest-side, rgba(208,154,38,.10), rgba(208,154,38,0) 70%);
  transform: translateX(-18%) translateY(-10%);
  pointer-events:none;
  opacity: .55;
  filter: blur(2px);
  animation: siteStatsSweep 4.2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .topPanel .siteStatsCard,
  .header .siteStatsCard,
  .topPanel .siteStatsCard:before,
  .header .siteStatsCard:before,
  .topPanel .siteStatsCard:after,
  .header .siteStatsCard:after{
    animation: none !important;
  }
}

@keyframes siteStatsGlow{
  0%, 100%{
    border-color: rgba(208,154,38,.24);
    box-shadow:
      0 22px 70px rgba(0,0,0,.52),
      0 18px 44px rgba(208,154,38,.06),
      inset 0 1px 0 rgba(255,255,255,.08);
    filter: brightness(100%);
  }
  50%{
    border-color: rgba(208,154,38,.66);
    box-shadow:
      0 26px 88px rgba(0,0,0,.60),
      0 22px 72px rgba(208,154,38,.28),
      inset 0 1px 0 rgba(255,255,255,.10);
    filter: brightness(108%);
  }
}
@keyframes siteStatsRim{
  0%, 100%{ opacity: .48; }
  50%{ opacity: .86; }
}
@keyframes siteStatsSweep{
  0%, 100%{
    transform: translateX(-18%) translateY(-10%) rotate(-6deg);
    opacity: .40;
  }
  50%{
    transform: translateX(18%) translateY(12%) rotate(6deg);
    opacity: .62;
  }
}

.topPanel .siteStatsGrid,
.header .siteStatsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.topPanel .siteStat,
.header .siteStat{
  text-align: center;
  padding: 12px 10px;
  border-radius: 16px;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 25% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.03);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease;
}

.topPanel .siteStat:hover,
.header .siteStat:hover{
  transform: translateY(-1px);
  border-color: rgba(208,154,38,.22);
  filter: brightness(112%);
}

.topPanel .siteStatLabel,
.header .siteStatLabel{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  margin-bottom: 7px;
}

.topPanel .siteStatValue,
.header .siteStatValue{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.96);
  line-height: 1;
}

/* Highlight "Online" slightly with a gold dot */
.topPanel .siteStat:first-child .siteStatValue,
.header .siteStat:first-child .siteStatValue{
  text-shadow: 0 10px 28px rgba(208,154,38,.12);
}
.topPanel .siteStat:first-child .siteStatLabel,
.header .siteStat:first-child .siteStatLabel{
  color: rgba(208,154,38,.92);
}

/* Responsive: 2 columns on smaller widths */
@media (max-width: 1200px){
  .topPanel .siteStatsGrid,
  .header .siteStatsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px){
  .topPanel .siteStatsCard{
    max-width: 100%;
    padding: 14px 14px;
  }
  .topPanel .siteStatValue{
    font-size: 18px;
  }
}

/* Place stats card under the main logo in the HEADER (theme uses absolute logo) */
.header .siteStatsCard{
  position: absolute;
  left: 16px;
  top: 542px; /* under logo (logo is at top:190px in theme) */
  z-index: 3;
}

/* Keep it responsive: center on smaller screens */
@media (max-width: 992px){
  .header .siteStatsCard{
    left: 50%;
    transform: translateX(-50%);
    max-width: min(560px, calc(100% - 24px));
  }
}
@media (max-width: 576px){
  .header .siteStatsCard{
    top: 285px;
    padding: 16px 14px;
  }
}

/* Ensure header stats grid responds on smaller screens too */
@media (max-width: 1200px){
  .header .siteStatsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .header .siteStatsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .header .siteStat{
    padding: 11px 9px;
    border-radius: 14px;
  }
  .header .siteStatLabel{
    font-size: 11px;
    letter-spacing: .16em;
  }
  .header .siteStatValue{
    font-size: 19px;
  }
}

/* ================= HEADER MENU (LEGACY CARRYOVER) =================
   This block keeps behavior from older header-menu revisions
   that are not redefined in V5. Safe to remove only after
   verifying the header menu looks identical.
   ================================================================= */

.topPanel-wrapper{
  gap: 14px;
}

.topPanel-wrapper_l{
  flex: 1 1 auto;
  gap: 18px;
  min-width: 0;
}

.topPanel-wrapper_l nav{
  flex: 1 1 auto;
  position: relative;
}

.topPanel-wrapper_l nav .menu{
  align-items: center;
  border-color: rgba(208,154,38,.16);
}

.topPanel-wrapper_l nav .menu > li > a{
  overflow: hidden;
  position: relative;
}

.topPanel-wrapper_l nav .menu > li > a:before{
  background: rgba(208,154,38,.78);
  border-radius: 999px;
  bottom: 7px;
  content: none !important;
  display: none !important;
  height: 2px;
  left: 14px;
  opacity: .0;
  position: absolute;
  right: 14px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease, opacity .18s ease;
}

.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown{
  max-width: min(380px, calc(100vw - 24px)) !important;
  outline: 1px solid rgba(208,154,38,.10);
  outline-offset: -6px;
}

.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown:after{
  content: none !important;
  display: none !important;
}

.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown:before{
  height: 18px !important;
  top: -18px !important;
}

.topPanel-wrapper_l nav .menu > li.has-dd:focus-within > .menu-dropdown li{
  opacity: 1;
  transform: translateY(0);
}

.topPanel-wrapper_l nav .menu > li.has-dd:hover > .menu-dropdown li{
  opacity: 1;
  transform: translateY(0);
}

.topPanel-wrapper_l nav .menu > li:after{
  content: none !important;
}

.topPanel-wrapper_l nav .menu > li:focus-within > a{
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.96) !important;
}

.topPanel-wrapper_l nav .menu > li:focus-within > a:before{
  opacity: .9;
  transform: scaleX(1);
}

.topPanel-wrapper_l nav .menu > li:hover > a{
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.96) !important;
}

.topPanel-wrapper_l nav .menu > li:hover > a:before{
  opacity: .9;
  transform: scaleX(1);
}

.topPanel-wrapper_l nav .menu > li:last-child > .menu-dropdown{
  left: auto;
  right: 0;
}

.topPanel-wrapper_l nav .menu > li:nth-last-child(-n/**/+2).has-dd > .menu-dropdown{
  left: auto !important;
  right: 0 !important;
  transform-origin: top right;
}

.topPanel-wrapper_l nav .menu > li:nth-last-child(-n/**/+2).has-dd > .menu-dropdown:after{
  left: auto;
  right: 22px;
}

.topPanel-wrapper_l nav .menu > li:nth-last-child(2) > .menu-dropdown{
  left: auto;
  right: 0;
}

.topPanel-wrapper_l nav .menu-dropdown{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.78);
  border: 1px solid rgba(208,154,38,.22);
  border-color: rgba(208,154,38,.20);
  border-radius: 18px;
  box-shadow: 0 26px 86px rgba(0,0,0,.62),
    0 18px 44px rgba(208,154,38,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  left: 0;
  max-width: min(360px, calc(100vw - 26px));
  min-width: 240px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 10px);
  transform: translateY(10px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  visibility: hidden;
  z-index: 2500;
}

.topPanel-wrapper_l nav .menu-dropdown a{
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  letter-spacing: .03em;
  padding-left: 30px !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, filter .16s ease !important;
}

.topPanel-wrapper_l nav .menu-dropdown a .ddDot{
  background: rgba(208,154,38,.80);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(208,154,38,.12);
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.topPanel-wrapper_l nav .menu-dropdown a:after{
  border-bottom: 2px solid rgba(255,255,255,.55);
  border-right: 2px solid rgba(255,255,255,.55);
  content: none !important;
  display: none !important;
  height: 6px;
  opacity: .0;
  transform: rotate(-45deg);
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
  width: 6px;
}

.topPanel-wrapper_l nav .menu-dropdown a:before{
  content: "" !important;
  display: block !important;
  transition: background .16s ease, height .16s ease;
}

.topPanel-wrapper_l nav .menu-dropdown a:hover{
  color: #fff;
}

.topPanel-wrapper_l nav .menu-dropdown a:hover:after{
  border-color: rgba(255,255,255,.85);
  opacity: .9;
  transform: rotate(-45deg) translateX(2px);
}

.topPanel-wrapper_l nav .menu-dropdown a:hover:before{
  background: rgba(208,154,38,.85);
  height: 16px;
}

.topPanel-wrapper_l nav .menu-dropdown li{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  width: 100%;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(1){
  transition-delay: .00s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(2){
  transition-delay: .02s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(3){
  transition-delay: .04s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(4){
  transition-delay: .06s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(5){
  transition-delay: .08s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(6){
  transition-delay: .10s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(7){
  transition-delay: .12s;
}

.topPanel-wrapper_l nav .menu-dropdown li:nth-child(8){
  transition-delay: .14s;
}

.topPanel-wrapper_l nav .menu-dropdown:after{
  background: rgba(18,19,21,.78);
  border-left: 1px solid rgba(208,154,38,.18);
  border-top: 1px solid rgba(208,154,38,.18);
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
}

.topPanel-wrapper_l nav .menu-dropdown:before{
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  top: -16px;
  width: 100%;
}

.topPanel-wrapper_l nav .menu-dropdown:hover{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  visibility: visible;
}

.topPanel-wrapper_l nav .menu-dropdown:hover li{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1200px){

  .topPanel-wrapper_l nav .menu{
      width: clamp(520px, 60vw, 860px) !important;
  }
  .topPanel-wrapper_l nav .menu > li > a{
      font-size: 12px !important;
      padding: 11px 13px !important;
  }
  .topPanel-wrapper_l nav .menu-dropdown{
      min-width: 220px;
  }
}

@media (max-width: 768px){

  .topPanel-wrapper_l nav .menu{
      border-radius: 16px;
  }
}

@media (max-width: 992px){

  .topPanel-wrapper_l{
      gap: 12px;
  }
  .topPanel-wrapper_l nav .menu{
      gap: 6px;
      max-width: 860px !important;
      padding: 5px;
      width: 100% !important;
  }
  .topPanel-wrapper_l nav .menu > li > a:before{
      left: 12px;
      right: 12px;
  }
}

/* ================= HEADER MENU (V5 - PRO + COMPACT + MATCHES THE THEME) =================
   Replaces the "too wide" bar with a compact premium capsule, and upgrades dropdowns.
   Also improves Login / Registration buttons (guest view).
   ================================================================================ */

/* ---------- MENU BAR (compact, not stretched) ---------- */
.topPanel-wrapper_l nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width: 0;
}

.topPanel-wrapper_l nav .menu{
  display:inline-flex !important;
  width: auto !important;
  max-width: none !important;
  justify-content:flex-start !important;

  padding: 8px 10px !important;
  gap: 8px !important;

  border-radius: 20px !important;

  background:
    radial-gradient(120% 120% at 25% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 58%),
    rgba(18,19,21,.30) !important;

  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 20px 54px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  overflow: visible !important;
}

/* subtle golden rim (professional, not flashy) */
.topPanel-wrapper_l nav .menu{
  position: relative;
}
.topPanel-wrapper_l nav .menu:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(208,154,38,.00),
    rgba(208,154,38,.20),
    rgba(217,193,134,.12),
    rgba(208,154,38,.18),
    rgba(208,154,38,.00)
  );
  pointer-events:none;
  opacity: .85;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.topPanel-wrapper_l nav .menu > li{
  position: relative !important;
}
.topPanel-wrapper_l nav .menu > li:after{
  display:none !important;
}

/* main items */
.topPanel-wrapper_l nav .menu > li > a{
  padding: 12px 16px !important;
  border-radius: 16px !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;

  color: rgba(255,255,255,.90) !important;
  background: transparent !important;
  border: 1px solid transparent !important;

  transition: background .16s ease, border-color .16s ease, filter .16s ease, transform .16s ease;
}

.topPanel-wrapper_l nav .menu > li:hover > a,
.topPanel-wrapper_l nav .menu > li:focus-within > a{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  filter: brightness(112%);
  transform: translateY(-1px);
}

/* caret (if theme adds) */
.topPanel-wrapper_l nav .menu li.has-dd > a:after{
  right: 12px !important;
  opacity: .75;
}

/* ---------- DROPDOWNS (aligned + elegant) ---------- */
.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown{
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 12px) !important;

  transform: translateY(8px) !important;
  transform-origin: top left;

  min-width: 260px !important;
  padding: 12px !important;

  border-radius: 18px !important;

  background:
    radial-gradient(120% 120% at 18% 10%, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
    rgba(14,15,17,.88) !important;

  border: 1px solid rgba(208,154,38,.20) !important;
  box-shadow:
    0 28px 96px rgba(0,0,0,.68),
    0 18px 44px rgba(208,154,38,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  z-index: 3500 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* only the LAST menu item aligns dropdown to the right (avoids that "misaligned" look) */
.topPanel-wrapper_l nav .menu > li:last-child.has-dd > .menu-dropdown{
  left: auto !important;
  right: 0 !important;
  transform-origin: top right;
}

/* hover bridge */
.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown:before{
  content:"";
  position:absolute;
  left:0;
  top:-16px;
  width:100%;
  height:16px;
}

/* small arrow pointer */
.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown:after{
  content:"";
  position:absolute;
  top:-6px;
  left: 22px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(14,15,17,.88);
  border-left: 1px solid rgba(208,154,38,.18);
  border-top: 1px solid rgba(208,154,38,.18);
}
.topPanel-wrapper_l nav .menu > li:last-child.has-dd > .menu-dropdown:after{
  left: auto;
  right: 22px;
}

.topPanel-wrapper_l nav .menu > li.has-dd:hover > .menu-dropdown,
.topPanel-wrapper_l nav .menu > li.has-dd:focus-within > .menu-dropdown,
.topPanel-wrapper_l nav .menu > li.has-dd > .menu-dropdown:hover{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* dropdown items */
.topPanel-wrapper_l nav .menu-dropdown li + li{
  margin-top: 8px;
}
.topPanel-wrapper_l nav .menu-dropdown a{
  display:block !important;

  padding: 12px 12px 12px 38px !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  color: rgba(255,255,255,.92) !important;
  font-size: 13px !important;
  font-weight: 800 !important;

  text-decoration:none !important;

  position: relative;

  transition: background .16s ease, border-color .16s ease, transform .16s ease, filter .16s ease;
}

/* professional dot indicator */
.topPanel-wrapper_l nav .menu-dropdown a:before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(208,154,38,.78);
  box-shadow: 0 10px 24px rgba(208,154,38,.12);
  opacity: .95;
}

.topPanel-wrapper_l nav .menu-dropdown a:hover{
  background: rgba(208,154,38,.14) !important;
  border-color: rgba(208,154,38,.26) !important;
  transform: translateX(2px) !important;
  filter: brightness(112%) !important;
}

/* ---------- LOGIN / REGISTRATION (guest buttons) ---------- */
.topPanel-wrapper_r .profileButtons{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Login button (gold) */
.topPanel-wrapper_r .profileButtons .button.small-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 11px 16px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: rgba(16,17,19,.95) !important;

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92)) !important;
  border: 1px solid rgba(208,154,38,.40) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    0 14px 36px rgba(208,154,38,.16),
    inset 0 1px 0 rgba(255,255,255,.20) !important;

  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.topPanel-wrapper_r .profileButtons .button.small-button:hover{
  transform: translateY(-1px);
  filter: brightness(108%);
  box-shadow:
    0 22px 60px rgba(0,0,0,.44),
    0 18px 44px rgba(208,154,38,.22),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Registration (outline) */
.topPanel-wrapper_r .profileButtons .reg{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 11px 16px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: rgba(255,255,255,.92);
  text-decoration:none;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(208,154,38,.26);

  box-shadow:
    0 18px 44px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition: background .16s ease, border-color .16s ease, filter .16s ease, transform .16s ease;
}

.topPanel-wrapper_r .profileButtons .reg:hover{
  background: rgba(208,154,38,.12);
  border-color: rgba(208,154,38,.34);
  filter: brightness(112%);
  transform: translateY(-1px);
}

/* Responsive safety */
@media (max-width: 992px){
  .topPanel-wrapper_l nav .menu > li > a{
    padding: 11px 14px !important;
    font-size: 12px !important;
  }
}

/* ================= HOME: WAR WINNERS ================= */
.homeWarsArea{
  margin-top: 26px;
  padding: 10px 0 6px;
}
.homeWarsHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.homeWarsTitle{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.96);
}
.homeWarsSub{
  margin: 6px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}

.homeWarsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.warCard{
  position: relative;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;

  background:
    radial-gradient(140% 140% at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.34);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 26px 86px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* subtle gold rim */
.warCard:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(208,154,38,.00),
    rgba(208,154,38,.22),
    rgba(217,193,134,.14),
    rgba(208,154,38,.18),
    rgba(208,154,38,.00)
  );
  pointer-events:none;
  opacity: .85;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.warCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.warCardTitleWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.warCardTitle{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.warIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;

  background:
    radial-gradient(120% 120% at 30% 30%, rgba(208,154,38,.22), rgba(208,154,38,0) 60%),
    rgba(255,255,255,.04);

  border: 1px solid rgba(208,154,38,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.warStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 8px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
}
.warStatus--occupied{
  background: rgba(208,154,38,.16);
  border-color: rgba(208,154,38,.26);
  color: rgba(255,255,255,.92);
}
.warStatus--free{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.74);
}

/* Tabs */
.warTabs{
  position: relative;
  padding: 0 18px 18px;
}
.warTabs input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.warTabBar{
  display:flex;
  gap: 8px;

  padding: 6px;
  border-radius: 999px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.warTabBtn{
  flex: 1 1 0;
  text-align:center;

  padding: 9px 10px;
  border-radius: 999px;

  cursor: pointer;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.72);
  background: transparent;
  border: 1px solid transparent;

  transition: background .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
}

.warTabContent{
  margin-top: 12px;
}

/* Default: hide both panes */
.warPane{ display:none; }

/* Owner tab active */
.warTabs input:nth-of-type(1):checked ~ .warTabBar label:nth-of-type(1){
  background: rgba(208,154,38,.14);
  border-color: rgba(208,154,38,.22);
  color: rgba(255,255,255,.92);
  filter: brightness(110%);
}
.warTabs input:nth-of-type(1):checked ~ .warTabContent .warPane-owner{
  display:block;
}

/* Info tab active */
.warTabs input:nth-of-type(2):checked ~ .warTabBar label:nth-of-type(2){
  background: rgba(208,154,38,.14);
  border-color: rgba(208,154,38,.22);
  color: rgba(255,255,255,.92);
  filter: brightness(110%);
}
.warTabs input:nth-of-type(2):checked ~ .warTabContent .warPane-info{
  display:block;
}

/* Rows */
.warRows{
  display:grid;
  gap: 10px;
}
.warRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 11px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.warKey{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.warVal{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  text-align:right;
}

/* Info pane */
.warInfoMain{
  padding: 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(208,154,38,.18);
  box-shadow:
    0 18px 52px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.warInfoLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.warInfoValue{
  margin-top: 6px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,255,255,.94);
}
.warInfoHint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.56);
}

/* Responsive */
@media (max-width: 1200px){
  .homeWarsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .homeWarsGrid{ grid-template-columns: 1fr; }
  .warCardTop{ padding: 16px 16px 12px; }
  .warTabs{ padding: 0 16px 16px; }
}

/* ================= WAR CARDS: BACKGROUND (BG) =================
   Adds a subtle "bg" per card without needing new images.
   If you want real images later, just replace the background-image in each modifier.
   ============================================================ */

.warCard{
  position: relative;
}

/* put content above the BG overlay */
.warCard > *{
  position: relative;
  z-index: 2;
}

/* BG overlay */
.warCard:after{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 1;
  pointer-events:none;

  /* default bg */
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.22), rgba(208,154,38,0) 55%),
    radial-gradient(90% 90% at 85% 20%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,0) 12px
    );

  opacity: .55;
}

/* Card-specific variants (still within the site palette) */
.warCard--castle:after{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.28), rgba(208,154,38,0) 55%),
    radial-gradient(90% 90% at 85% 15%, rgba(222,89,28,.10), rgba(222,89,28,0) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,0) 12px
    );
  opacity: .58;
}
.warCard--arka:after{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.22), rgba(208,154,38,0) 55%),
    radial-gradient(90% 90% at 85% 15%, rgba(217,193,134,.12), rgba(217,193,134,0) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,0) 12px
    );
  opacity: .54;
}
.warCard--guild:after{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.20), rgba(208,154,38,0) 55%),
    radial-gradient(90% 90% at 85% 15%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,0) 12px
    );
  opacity: .50;
}

/* ================= WAR CARDS: BACKGROUND (CLEAN - NO STRIPES) =================
   Cleaner, more professional BG: only soft gradients (no lines).
   This overrides the previous BG overlay styles.
   ============================================================================ */

.warCard:after{
  /* no stripes, just subtle light + vignette */
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.16), rgba(208,154,38,0) 58%),
    radial-gradient(90% 90% at 86% 18%, rgba(255,255,255,.05), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  opacity: .42;
}

.warCard--castle:after{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.18), rgba(208,154,38,0) 58%),
    radial-gradient(95% 95% at 86% 18%, rgba(222,89,28,.08), rgba(222,89,28,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  opacity: .44;
}

.warCard--arka:after{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.16), rgba(208,154,38,0) 58%),
    radial-gradient(95% 95% at 86% 18%, rgba(217,193,134,.08), rgba(217,193,134,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  opacity: .42;
}

.warCard--guild:after{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.14), rgba(208,154,38,0) 58%),
    radial-gradient(95% 95% at 86% 18%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  opacity: .40;
}

/* ================= HOME: RANKINGS (5 TABS) ================= */
.homeRankingArea{
  margin-top: 26px;
  padding: 10px 0 6px;
}

.rankHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.rankTitle{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.96);
}
.rankSub{
  margin: 6px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}

/* Main ranking card */
.rankCard{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  background:
    radial-gradient(140% 140% at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.34);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 26px 86px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* subtle gold rim */
.rankCard:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(208,154,38,.00),
    rgba(208,154,38,.22),
    rgba(217,193,134,.14),
    rgba(208,154,38,.18),
    rgba(208,154,38,.00)
  );
  pointer-events:none;
  opacity: .85;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.rankTabs{
  position: relative;
  padding: 16px 18px 18px;
}

.rankTabs input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Tabs bar */
.rankTabBar{
  display:flex;
  gap: 8px;

  padding: 6px;
  border-radius: 999px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);

  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
}
.rankTabBar::-webkit-scrollbar{ display:none; }

.rankTabBtn{
  flex: 0 0 auto;
  text-align:center;

  padding: 9px 12px;
  border-radius: 999px;

  cursor: pointer;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.72);
  background: transparent;
  border: 1px solid transparent;

  transition: background .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
  white-space: nowrap;
}

/* Active tab styles (5 inputs / 5 labels) */
.rankTabs input:nth-of-type(1):checked ~ .rankTabBar label:nth-of-type(1),
.rankTabs input:nth-of-type(2):checked ~ .rankTabBar label:nth-of-type(2),
.rankTabs input:nth-of-type(3):checked ~ .rankTabBar label:nth-of-type(3),
.rankTabs input:nth-of-type(4):checked ~ .rankTabBar label:nth-of-type(4),
.rankTabs input:nth-of-type(5):checked ~ .rankTabBar label:nth-of-type(5){
  background: rgba(208,154,38,.14);
  border-color: rgba(208,154,38,.22);
  color: rgba(255,255,255,.92);
  filter: brightness(110%);
}

/* Content panes */
.rankContent{
  margin-top: 12px;
}
.rankPane{ display:none; }

/* Show the correct pane */
.rankTabs input:nth-of-type(1):checked ~ .rankContent .rankPane:nth-of-type(1),
.rankTabs input:nth-of-type(2):checked ~ .rankContent .rankPane:nth-of-type(2),
.rankTabs input:nth-of-type(3):checked ~ .rankContent .rankPane:nth-of-type(3),
.rankTabs input:nth-of-type(4):checked ~ .rankContent .rankPane:nth-of-type(4),
.rankTabs input:nth-of-type(5):checked ~ .rankContent .rankPane:nth-of-type(5){
  display:block;
}

/* Table wrapper for small screens */
.rankTableWrap{
  overflow-x: auto;
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Table */
.rankTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 640px; /* ensures columns don't collapse */
}

.rankTable thead th{
  text-align:left;
  padding: 12px 12px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.62);

  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.rankTable tbody td{
  padding: 12px 12px;
  color: rgba(255,255,255,.90);
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.rankTable tbody tr:hover td{
  background: rgba(208,154,38,.10);
}

.rankColPos, .rankPos{
  width: 64px;
  text-align:center;
}
.rankPos{
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.rankColName, .rankName{
  min-width: 220px;
}
.rankName{
  font-weight: 900;
  letter-spacing: .02em;
}

.rankVal{
  text-align:right;
  width: 120px;
}

/* Highlight Top 3 subtly */
.rankTable tbody tr:nth-child(-n+3) td{
  background: rgba(208,154,38,.06);
}
.rankTable tbody tr:nth-child(-n+3):hover td{
  background: rgba(208,154,38,.12);
}

/* Rounded corners */
.rankTable thead th:first-child{ border-top-left-radius: 18px; }
.rankTable thead th:last-child{ border-top-right-radius: 18px; }
.rankTable tbody tr:last-child td:first-child{ border-bottom-left-radius: 18px; }
.rankTable tbody tr:last-child td:last-child{ border-bottom-right-radius: 18px; }

/* Responsive */
@media (max-width: 768px){
  .rankTabs{ padding: 14px 14px 14px; }
  .rankTable{ min-width: 600px; }
}

/* ================= HOME: MONEY COIN CARD =================
   Replaces the old "Last News" card with an interactive event card (tabs).
   Uses the same tabs system already present in the template.
   ========================================================= */

.moneyCoinCard{
  border-radius: 22px;
  overflow: hidden;

  background:
    radial-gradient(140% 140% at 20% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(18,19,21,.34);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 26px 86px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
}

/* subtle gold rim */
.moneyCoinCard:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(208,154,38,.00),
    rgba(208,154,38,.22),
    rgba(217,193,134,.14),
    rgba(208,154,38,.18),
    rgba(208,154,38,.00)
  );
  pointer-events:none;
  opacity: .85;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.moneyCoinCard-title{
  padding: 14px 14px 10px !important;
  gap: 12px;
}

.moneyCoinCard-title_t{
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 14px;
  color: rgba(255,255,255,.96);
  white-space: nowrap;
}

/* Tabs row */
.moneyCoinCard-tab{
  gap: 8px !important;
  padding: 6px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);

  overflow-x: auto;
  scrollbar-width: none;
}
.moneyCoinCard-tab::-webkit-scrollbar{ display:none; }

.moneyCoinCard-tab li{
  flex: 0 0 auto;
  list-style: none;

  padding: 8px 10px !important;
  border-radius: 999px !important;

  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.74) !important;
  background: transparent !important;
  border: 1px solid transparent !important;

  cursor: pointer;
  white-space: nowrap;
  user-select: none;

  transition: background .16s ease, border-color .16s ease, filter .16s ease, color .16s ease;
}

.moneyCoinCard-tab li.active{
  background: rgba(208,154,38,.14) !important;
  border-color: rgba(208,154,38,.22) !important;
  color: rgba(255,255,255,.92) !important;
  filter: brightness(110%);
}

/* Content */
.moneyCoinCard-content{
  padding: 12px 14px 14px !important;
}

.moneyCoinBody{
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  padding: 12px;

  max-height: 320px;
  overflow: auto;
}

/* scrollbar */
.moneyCoinBody::-webkit-scrollbar{ width: 10px; }
.moneyCoinBody::-webkit-scrollbar-thumb{
  background: rgba(208,154,38,.20);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.moneyCoinBody::-webkit-scrollbar-track{ background: rgba(0,0,0,.18); border-radius: 999px; }

.moneyCoinLead{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.5;
}

.moneyCoinText{
  margin: 8px 0 0;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  line-height: 1.5;
}

.moneyCoinSectionTitle{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 6px;
}

/* Highlights (Overview) */
.moneyCoinHighlights{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mcHighlight{
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mcH-title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
}
.mcH-text{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
}

/* Badges */
.moneyCoinBadges{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mcBadge{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.88);
  background: rgba(208,154,38,.12);
  border: 1px solid rgba(208,154,38,.22);
}

/* Steps */
.moneyCoinSteps{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.mcStep{
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mcStepTitle{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.mcStepText{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
}

/* Conversion */
.mcConvertGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.mcConvertBox{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mcConvertLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.mcConvertRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mcConvertRow:last-child{ border-bottom: none; }
.mcConvertKey{
  color: rgba(255,255,255,.74);
  font-weight: 800;
}
.mcConvertVal{
  color: rgba(255,255,255,.92);
  font-weight: 900;
}
.mcConvertBig{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.94);
}
.mcConvertSmall{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.64);
}
.mcConvertMethods{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mcMethod{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(16,17,19,.95);
  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));
  border: 1px solid rgba(208,154,38,.40);
}

/* Lists */
.moneyCoinList{
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
}
.moneyCoinList li{
  margin: 8px 0;
  line-height: 1.45;
}

@media (max-width: 768px){
  .moneyCoinCard-title{
    flex-direction: column;
    align-items:flex-start !important;
  }
  .mcConvertGrid{ grid-template-columns: 1fr; }
  .moneyCoinBody{ max-height: 360px; }
}

/* ================= HOTFIX: MONEY COIN VISIBILITY =================
   If the card looks too transparent on your background, these overrides
   increase opacity and ensure the BG is always visible.
   ================================================================ */

.moneyCoinCard{
  background:
    radial-gradient(140% 140% at 20% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    rgba(10,11,13,.78) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    0 26px 86px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.moneyCoinCard-tab{
  background: rgba(0,0,0,.32) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.moneyCoinBody{
  background: rgba(12,13,15,.62) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.mcHighlight,
.mcStep,
.mcConvertBox{
  background: rgba(255,255,255,.04) !important;
}

/* ================= UI: FIXED CARD HEIGHTS (NO JUMP ON TAB SWITCH) =================
   Prevents cards from changing height when switching tabs (Money Coin + War cards).
   The content becomes scrollable when it exceeds the fixed height.
   ============================================================================== */

/* -------- Money Coin (tabs) -------- */
.moneyCoinCard-content{
  /* keeps the whole tab panel height stable */
  min-height: 360px;
}
.moneyCoinBody{
  /* fixed panel height (scroll inside) */
  height: 320px;
  max-height: none; /* override */
  overflow: auto;
}

/* keep scrollbar style consistent */
.moneyCoinBody::-webkit-scrollbar{ width: 10px; }
.moneyCoinBody::-webkit-scrollbar-thumb{
  background: rgba(208,154,38,.22);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.28);
}
.moneyCoinBody::-webkit-scrollbar-track{
  background: rgba(0,0,0,.16);
  border-radius: 999px;
}

/* -------- War cards (Owner/Info tabs) -------- */
.warTabContent{
  /* stable height across tabs */
  height: 190px;
  overflow: auto;
  padding-right: 2px; /* space for scrollbar */
}

/* ensure panes can fill the fixed height */
.warPane-owner,
.warPane-info{
  height: 100%;
}

/* subtle scrollbar */
.warTabContent::-webkit-scrollbar{ width: 10px; }
.warTabContent::-webkit-scrollbar-thumb{
  background: rgba(208,154,38,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.warTabContent::-webkit-scrollbar-track{
  background: rgba(0,0,0,.14);
  border-radius: 999px;
}

@media (max-width: 768px){
  .moneyCoinCard-content{ min-height: 410px; }
  .moneyCoinBody{ height: 360px; }

  .warTabContent{ height: 210px; }
}

/* ================= MONEY COIN: MORE HIGHLIGHT + SVG ICONS =================
   Stronger emphasis, better readability, and inline SVG icons.
   Scoped to .moneyCoinCard to avoid impacting the rest of the theme.
   ======================================================================== */

.moneyCoinCard{
  background:
    radial-gradient(140% 140% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    radial-gradient(100% 100% at 85% 15%, rgba(208,154,38,.18), rgba(208,154,38,0) 60%),
    rgba(18,19,21,.42);
  border-color: rgba(208,154,38,.18);
  box-shadow:
    0 32px 110px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 52px rgba(208,154,38,.12);
}

.moneyCoinCard-title{
  align-items: flex-start !important;
}

.moneyCoinCard-title_t{
  display:flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.15;
}

.mcTitleInline{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mcTitleText{
  font-weight: 1000;
  letter-spacing: .05em;
  font-size: 15px;
  color: rgba(255,255,255,.97);
}

.mcSubtitleInline{
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
  max-width: 460px;
}

.mcSubtitleInline strong{
  color: rgba(255,255,255,.92);
}

/* SVG */
.mcSvg{
  width: 18px;
  height: 18px;
  display:inline-block;
  fill: rgba(217,193,134,.96);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.mcSvg--coin{
  width: 22px;
  height: 22px;
  fill: rgba(208,154,38,.98);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
.mcSvg--mini{
  width: 18px;
  height: 18px;
  fill: rgba(208,154,38,.92);
  filter: none;
}

/* Tabs with icons */
.moneyCoinCard-tab li{
  display:flex !important;
  align-items:center;
  gap: 8px;
}
.moneyCoinCard-tab li .mcTabI{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  opacity: .88;
}
.moneyCoinCard-tab li.active .mcTabI{
  opacity: 1;
}

/* Body visuals */
.moneyCoinBody{
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(208,154,38,.10), rgba(208,154,38,0) 58%),
    rgba(255,255,255,.02);
  border-color: rgba(208,154,38,.16);
}

/* Hero */
.mcHero{
  display:flex;
  gap: 12px;
  align-items: stretch;
}
.mcHeroLeft{
  flex: 1 1 auto;
  min-width: 0;
}
.mcHeroKicker{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(16,17,19,.95);
  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));
  border: 1px solid rgba(208,154,38,.42);
  box-shadow: 0 18px 52px rgba(0,0,0,.35);
  margin-bottom: 10px;
}
.moneyCoinLead{
  color: rgba(255,255,255,.90);
}

/* Facts grid */
.mcHeroRight{
  flex: 0 0 280px;
}
.mcFacts{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mcFact{
  display:flex;
  gap: 10px;
  align-items:center;

  padding: 10px 10px;
  border-radius: 16px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mcFactLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.mcFactValue{
  font-size: 12.5px;
  font-weight: 900;
  color: rgba(255,255,255,.94);
}

/* Flow */
.mcFlow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mcFlowItem{
  display:flex;
  gap: 10px;
  align-items:flex-start;

  padding: 11px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mcFlowNum{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 12px;
  font-weight: 1000;
  color: rgba(16,17,19,.95);

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));
  border: 1px solid rgba(208,154,38,.40);
}
.mcFlowText{
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}
.mcFlowText strong{
  color: rgba(255,255,255,.94);
}

/* Callout */
.mcCallout{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;

  background: rgba(208,154,38,.10);
  border: 1px solid rgba(208,154,38,.22);
  box-shadow: 0 18px 52px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.mcCallout--soft{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.mcCalloutTitle{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.mcCalloutText{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.74);
  line-height: 1.4;
}

.mcDivider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}

/* Tips */
.mcTips{
  display:grid;
  gap: 8px;
}
.mcTip{
  display:flex;
  gap: 10px;
  align-items:flex-start;

  padding: 10px 10px;
  border-radius: 16px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-weight: 800;
  line-height: 1.35;
}
.mcTipDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;

  background: rgba(208,154,38,.95);
  box-shadow: 0 0 18px rgba(208,154,38,.28);
}

/* Keep fixed heights from v43, but improve spacing a bit */
.moneyCoinCard-content{
  min-height: 380px;
}
.moneyCoinBody{
  height: 340px;
}

/* Responsive */
@media (max-width: 1200px){
  .mcHeroRight{ flex-basis: 240px; }
  .mcFlow{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .mcHero{ flex-direction: column; }
  .mcHeroRight{ flex-basis: auto; }
  .mcFacts{ grid-template-columns: 1fr 1fr; }

  .moneyCoinCard-content{ min-height: 430px; }
  .moneyCoinBody{ height: 380px; }
}

/* ================= MONEY COIN: FOLD / UNFOLD (CARD REVEAL) =================
   Button on top toggles showing the Money Coin content (like opening a card).
   No JS required (checkbox + CSS).
   ========================================================================= */

.moneyCoinCard{
  position: relative;
}

/* toggle hidden */
.moneyCoinCard .mcFoldToggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Title layout: add space for button */
.moneyCoinCard-title{
  justify-content: space-between !important;
  gap: 12px;
}

/* Reveal button */
.mcFoldBtn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  cursor: pointer;
  user-select: none;

  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(16,17,19,.96);

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));
  border: 1px solid rgba(208,154,38,.44);

  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.12);

  transition: transform .14s ease, filter .14s ease;
}

.mcFoldBtn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.mcFoldBtn:active{
  transform: translateY(0px) scale(.98);
}

.mcFoldBtn-close{ display:none; }

.mcFoldChevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(16,17,19,.86);
  border-bottom: 2px solid rgba(16,17,19,.86);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-left: 2px;
}

/* Toggle label text + chevron rotation */
.mcFoldToggle:checked + .moneyCoinCard-title .mcFoldBtn-open{ display:none; }
.mcFoldToggle:checked + .moneyCoinCard-title .mcFoldBtn-close{ display:inline; }
.mcFoldToggle:checked + .moneyCoinCard-title .mcFoldChevron{ transform: rotate(225deg); }

/* Summary (visible only when closed) */
.mcFoldSummary{
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
}
.mcSumItem{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  color: rgba(255,255,255,.78);
  font-weight: 900;
  letter-spacing: .01em;
}
.mcSumDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(208,154,38,.95);
  box-shadow: 0 0 18px rgba(208,154,38,.26);
  flex: 0 0 auto;
}

/* Body hidden by default */
.moneyCoinCard .mcFoldBody{
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .25s ease;

  pointer-events: none;

  padding: 0 14px 14px;
}

/* Show body when checked */
.moneyCoinCard .mcFoldToggle:checked ~ .mcFoldBody{
  max-height: 2200px; /* safe large value */
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
}

/* Hide summary when open */
.moneyCoinCard .mcFoldToggle:checked ~ .mcFoldSummary{ display:none; }

/* Tabs inside fold body: spacing */
.moneyCoinCard .moneyCoinCard-tab{
  margin: 0 0 10px !important;
}

/* Content blocks: since fold body has padding, keep content padding consistent */
.moneyCoinCard .moneyCoinCard-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fixed heights still apply (from v43/v44). No jump. */

/* ================= MONEY COIN: LOCK OVERLAY (BLUR + CTA BUTTON) =================
   Shows a blurred cover over the Money Coin card with a beautiful button.
   Clicking the button hides the overlay and unlocks the content.
   No JS required (checkbox + label).
   ============================================================================ */

.moneyCoinCard{
  position: relative;
}

/* hidden checkbox */
.moneyCoinCard .mcRevealToggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Blur underlying content while locked */
.moneyCoinCard .moneyCoinCard-title,
.moneyCoinCard .lastTopicks-content{
  filter: blur(2.6px);
  opacity: .86;
  transition: filter .22s ease, opacity .22s ease;
}

/* Unlock */
.moneyCoinCard .mcRevealToggle:checked ~ .moneyCoinCard-title,
.moneyCoinCard .mcRevealToggle:checked ~ .lastTopicks-content{
  filter: none;
  opacity: 1;
}

/* Overlay */
.moneyCoinCard .mcRevealOverlay{
  position:absolute;
  inset: 0;
  z-index: 50;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 16px;
  border-radius: inherit;

  background: rgba(10,10,12,.38);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 80px rgba(0,0,0,.55);

  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;

  overflow: hidden;
}

.moneyCoinCard .mcRevealOverlay:before{
  content:"";
  position:absolute;
  inset: -40%;
  background:
    radial-gradient(closest-side at 30% 25%, rgba(208,154,38,.24), rgba(208,154,38,0) 62%),
    radial-gradient(closest-side at 78% 30%, rgba(217,193,134,.16), rgba(217,193,134,0) 65%),
    radial-gradient(closest-side at 50% 80%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  opacity: .95;
  pointer-events:none;
  filter: blur(0px);
}

/* Hide overlay when unlocked */
.moneyCoinCard .mcRevealToggle:checked ~ .mcRevealOverlay{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

/* CTA button */
.moneyCoinCard .mcRevealBtn{
  position: relative;
  z-index: 2;

  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;

  text-align:center;

  padding: 18px 22px;
  border-radius: 18px;

  cursor: pointer;
  user-select: none;

  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));

  border: 1px solid rgba(208,154,38,.55);

  box-shadow:
    0 26px 86px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10) inset;

  transform: translateY(0);
  transition: transform .14s ease, filter .14s ease;
  max-width: 420px;
}

.moneyCoinCard .mcRevealBtn:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.moneyCoinCard .mcRevealBtn:active{
  transform: translateY(0) scale(.99);
}

.moneyCoinCard .mcRevealBtnTitle{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(16,17,19,.96);
}

.moneyCoinCard .mcRevealBtnSub{
  font-size: 12.5px;
  color: rgba(16,17,19,.80);
  font-weight: 900;
}

/* Soft pulse ring */
.moneyCoinCard .mcRevealBtn:after{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 22px;
  border: 1px solid rgba(208,154,38,.45);
  opacity: .55;
  animation: mcPulseRing 2.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes mcPulseRing{
  0%{ transform: scale(.98); opacity: .55; }
  60%{ transform: scale(1.04); opacity: .18; }
  100%{ transform: scale(.98); opacity: .55; }
}

@media (max-width: 768px){
  .moneyCoinCard .mcRevealBtn{
    width: 100%;
    max-width: 520px;
  }
}

/* ================= HEADER / TOPPANEL: NEW V2 DESIGN =================
   Applies only when <div class="topPanel topPanel--v2"> is present.
   Goal: more professional, elegant, glassy bar; clean pill menu; aligned glass dropdowns.
   =================================================================== */

.topPanel.topPanel--v2{
  position: relative;
  z-index: 999;
  padding: 10px 12px;

  /* floating glass bar */
  background: transparent;
}

/* main bar container */
.topPanel.topPanel--v2 .topPanel-wrapper{
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;

  padding: 12px 14px;
  border-radius: 18px;

  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
    radial-gradient(90% 120% at 85% 10%, rgba(239,78,0,.14), rgba(239,78,0,0) 60%),
    rgba(15,17,16,.78);

  backdrop-filter: blur(12px) saturate(128%);
  -webkit-backdrop-filter: blur(12px) saturate(128%);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 86px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
}

/* bottom glow line (orange -> gold) */
.topPanel.topPanel--v2 .topPanel-wrapper:after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239,78,0,.0), rgba(239,78,0,.55), rgba(208,154,38,.55), rgba(239,78,0,.0));
  opacity: .55;
  pointer-events:none;
  filter: blur(.1px);
}

/* left side spacing */
.topPanel.topPanel--v2 .topPanel-wrapper_l{
  gap: 14px;
}

/* Menu layout */
.topPanel.topPanel--v2 nav{ position: relative; }
.topPanel.topPanel--v2 .menu{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 6px 8px;
  border-radius: 999px;

  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  margin: 0;
}

/* Top-level items as pills */
.topPanel.topPanel--v2 .menu > li{
  position: relative;
  padding-bottom: 10px; /* hover bridge for dropdown */
}
.topPanel.topPanel--v2 .menu > li > a{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.88);
  background: transparent;
  border: 1px solid transparent;

  transition: background .16s ease, border-color .16s ease, transform .16s ease, filter .16s ease;
  white-space: nowrap;
}

/* hover/active */
.topPanel.topPanel--v2 .menu > li:hover > a,
.topPanel.topPanel--v2 .menu > li:focus-within > a{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* dropdown arrow */
.topPanel.topPanel--v2 .menu > li.has-dd > a:after{
  content:"";
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .85;
}
.topPanel.topPanel--v2 .menu > li.has-dd:hover > a:after,
.topPanel.topPanel--v2 .menu > li.has-dd:focus-within > a:after{
  transform: rotate(225deg);
  opacity: 1;
}

/* invisible hover bridge to prevent flicker */
.topPanel.topPanel--v2 .menu > li.has-dd:after{
  content:"";
  position:absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 14px;
}

/* Dropdown container */
.topPanel.topPanel--v2 .menu-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;

  min-width: 260px;
  padding: 10px;

  border-radius: 18px;

  background:
    radial-gradient(120% 140% at 15% 0%, rgba(208,154,38,.10), rgba(208,154,38,0) 58%),
    rgba(8,12,24,.92);

  backdrop-filter: blur(12px) saturate(128%);
  -webkit-backdrop-filter: blur(12px) saturate(128%);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;

  z-index: 9999;
}

/* dropdown caret */
.topPanel.topPanel--v2 .menu-dropdown:before{
  content:"";
  position:absolute;
  top: -7px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: rgba(8,12,24,.92);
  border-left: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.10);
  transform: rotate(45deg);
  backdrop-filter: blur(12px) saturate(128%);
  -webkit-backdrop-filter: blur(12px) saturate(128%);
}

/* show dropdown */
.topPanel.topPanel--v2 .menu > li.has-dd:hover > .menu-dropdown,
.topPanel.topPanel--v2 .menu > li.has-dd:focus-within > .menu-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

/* dropdown links */
.topPanel.topPanel--v2 .menu-dropdown li{ list-style:none; }
.topPanel.topPanel--v2 .menu-dropdown a{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 10px 12px;
  border-radius: 14px;

  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .01em;

  color: rgba(255,255,255,.86);
  border: 1px solid transparent;

  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.topPanel.topPanel--v2 .menu-dropdown a:hover{
  background: rgba(208,154,38,.14);
  border-color: rgba(208,154,38,.22);
  transform: translateX(2px);
  color: rgba(255,255,255,.95);
}

/* Right side buttons */
.topPanel.topPanel--v2 .profileButtons{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Login as gold button */
.topPanel.topPanel--v2 .profileButtons .button.small-button{
  display: inline-flex !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(16,17,19,.96) !important;

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92)) !important;
  border: 1px solid rgba(208,154,38,.44) !important;

  box-shadow: 0 22px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12) !important;

  transition: transform .14s ease, filter .14s ease;
}
.topPanel.topPanel--v2 .profileButtons .button.small-button:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.topPanel.topPanel--v2 .profileButtons .button.small-button:active{
  transform: translateY(0px) scale(.99);
}

/* Registration as outline pill */
.topPanel.topPanel--v2 .profileButtons a.reg{
  padding: 10px 14px !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.88) !important;

  background: rgba(0,0,0,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.topPanel.topPanel--v2 .profileButtons a.reg:hover{
  background: rgba(239,78,0,.14) !important;
  border-color: rgba(239,78,0,.26) !important;
  transform: translateY(-1px);
  color: rgba(255,255,255,.94) !important;
}

/* Discord button: keep but make it consistent */
.topPanel.topPanel--v2 .discordBlock a.discord{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Make menu less cramped on mid screens */
@media (max-width: 1200px){
  .topPanel.topPanel--v2 .menu{ gap: 6px; }
  .topPanel.topPanel--v2 .menu > li > a{ padding: 9px 12px; }
}

/* Mobile: keep existing behavior, just soften wrapper */
@media (max-width: 992px){
  .topPanel.topPanel--v2{ padding: 6px 8px; }
  .topPanel.topPanel--v2 .topPanel-wrapper{
    border-radius: 16px;
    padding: 10px 12px;
  }
}

/* dropdown edge alignment */
.topPanel.topPanel--v2 .menu > li:last-child > .menu-dropdown,
.topPanel.topPanel--v2 .menu > li:nth-last-child(2) > .menu-dropdown{
  left: auto;
  right: 0;
}
.topPanel.topPanel--v2 .menu > li:last-child > .menu-dropdown:before,
.topPanel.topPanel--v2 .menu > li:nth-last-child(2) > .menu-dropdown:before{
  left: auto;
  right: 22px;
}

/* list reset */
.topPanel.topPanel--v2 .menu,
.topPanel.topPanel--v2 .menu li{
  list-style: none;
}

/* ================= TOPPANEL V2 HOTFIX =================
   Fixes: (1) unexpected BLUE tint (2) huge Login button (small-button is 170x70 by default)
          (3) items wrapping / misaligned
   Only affects .topPanel--v2
   ====================================================== */

/* Remove the blue tint and the fixed 1200px/70px template sizing */
.topPanel.topPanel--v2 .topPanel-wrapper{
  height: auto !important; /* overrides theme height:70px */
  width: 100% !important;  /* overrides theme width:1200px */
  max-width: 1220px !important; /* keep it close to theme width, not ultra-wide */
  padding: 12px 14px !important;

  background:
    radial-gradient(110% 140% at 18% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
    radial-gradient(90% 120% at 85% 12%, rgba(239,78,0,.16), rgba(239,78,0,0) 62%),
    radial-gradient(90% 120% at 40% 0%, rgba(208,154,38,.14), rgba(208,154,38,0) 60%),
    rgba(15,17,16,.78) !important; /* dark neutral (NO BLUE) */
}

/* Stop wrapping that makes everything jump to new lines */
.topPanel.topPanel--v2 .topPanel-wrapper.flex-s-c{
  flex-wrap: nowrap !important;
}
.topPanel.topPanel--v2 .topPanel-wrapper_l.flex-c,
.topPanel.topPanel--v2 .topPanel-wrapper_r.flex-c{
  flex-wrap: nowrap !important;
}

/* Let nav shrink properly in flex layouts */
.topPanel.topPanel--v2 nav{ min-width: 0; }
.topPanel.topPanel--v2 .menu{
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Fix HUGE login button coming from .small-button (170x70 + background image) */
.topPanel.topPanel--v2 .profileButtons .button.small-button{
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92)) !important;
  background-image: none !important;
  background-size: auto !important;

  line-height: 1 !important;
}

/* Make Registration look like a real button (not underlined link) */
.topPanel.topPanel--v2 .profileButtons .reg{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 10px 14px !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em;
  text-transform: uppercase;

  text-decoration: none !important;

  color: rgba(255,255,255,.88) !important;
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}
.topPanel.topPanel--v2 .profileButtons .reg:hover{
  background: rgba(208,154,38,.12) !important;
  border-color: rgba(208,154,38,.24) !important;
  filter: brightness(1.02);
  transform: translateY(-1px);
}
.topPanel.topPanel--v2 .profileButtons .reg:active{
  transform: translateY(0);
}

/* Slightly reduce menu pill padding (prevents pushing layout) */
@media (max-width: 1280px){
  .topPanel.topPanel--v2 .menu > li > a{ padding: 9px 12px; }
}
@media (max-width: 992px){
  /* on smaller screens allow the menu group to scroll rather than break layout */
  .topPanel.topPanel--v2 .menu{
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topPanel.topPanel--v2 .menu::-webkit-scrollbar{ display:none; }
}

/* ================= TOPPANEL V3 (CLEAN + PROFESSIONAL, NO BLUE) =================
   This is a full redesign of the entire header bar (toppanel).
   Enable by using: <div class="topPanel topPanel--v3">
   Scoped to .topPanel--v3 so it won't affect other parts of the theme.
   ============================================================================ */

.topPanel.topPanel--v3{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  background: rgba(15, 17, 16, .86);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);

  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.58);
  z-index: 99;
}

.topPanel.topPanel--v3:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(208,154,38,0),
    rgba(208,154,38,.85),
    rgba(217,193,134,.55),
    rgba(208,154,38,.85),
    rgba(208,154,38,0)
  );
  opacity: .95;
  pointer-events:none;
}

/* Hard reset wrapper sizing from template (it is fixed 1200x70 by default) */
.topPanel--v3 .topPanel-wrapper{
  width: min(1320px, calc(100% - 28px)) !important;
  max-width: 1320px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;

  /* Replace template flex helpers with a stable grid layout */
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;

  position: relative;
}

/* Stop template flex-wrap that breaks the layout */
.topPanel--v3 .flex-c,
.topPanel--v3 .flex-s-c{
  flex-wrap: nowrap !important;
}

.topPanel--v3 .topPanel-wrapper_l,
.topPanel--v3 .topPanel-wrapper_r{
  display:flex !important;
  align-items:center !important;
  gap: 14px;
  min-width: 0;
}

.topPanel--v3 nav{
  justify-self: center;
  min-width: 0;
}

/* Menu */
.topPanel--v3 .menu{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap: 6px;
  flex-wrap: nowrap !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Remove template separators between items */
.topPanel--v3 .menu > li:after{
  display:none !important;
}

.topPanel--v3 .menu > li{
  position: relative;
}

/* Main links (compact + premium) */
.topPanel--v3 .menu > li > a{
  display:flex !important;
  align-items:center !important;
  gap: 8px;

  padding: 10px 14px !important;

  border-radius: 12px;
  background: transparent !important;

  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.86) !important;

  transition: transform .14s ease, background .14s ease, color .14s ease;
  white-space: nowrap;
}

.topPanel--v3 .menu > li > a:hover{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96) !important;
  transform: translateY(-1px);
}



/* Dropdown */
.topPanel--v3 .menu-dropdown{
  position:absolute;
  top: calc(100% + 10px) !important;
  left: 0 !important;

  min-width: 260px;
  margin: 0 !important;
  padding: 10px !important;
  list-style: none !important;

  border-radius: 16px;

  background: rgba(15, 17, 16, .86);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 28px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);

  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;

  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.topPanel--v3 .has-dd:hover > .menu-dropdown,
.topPanel--v3 .has-dd:focus-within > .menu-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.topPanel--v3 .menu-dropdown li{
  width: 100%;
}

.topPanel--v3 .menu-dropdown a{
  display:flex !important;
  align-items:center !important;

  padding: 10px 12px !important;
  border-radius: 12px;

  font-size: 12px !important;
  font-weight: 900 !important;

  color: rgba(255,255,255,.80) !important;
  background: transparent !important;

  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.topPanel--v3 .menu-dropdown a:hover{
  background: rgba(208,154,38,.14) !important;
  color: rgba(255,255,255,.95) !important;
  transform: translateX(2px);
}

/* Right side: Login/Register */
.topPanel--v3 .profileButtons{
  display:flex !important;
  align-items:center !important;
  gap: 10px;
  flex-wrap: nowrap !important;
}

/* Kill the template fixed 170x70 image button */
.topPanel--v3 .profileButtons .button.small-button{
  width: auto !important;
  height: auto !important;
  min-width: 120px;
  min-height: 42px;

  padding: 10px 16px !important;

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.90)) !important;
  background-size: auto !important;

  border-radius: 14px !important;
  border: 1px solid rgba(208,154,38,.45) !important;

  color: rgba(16,17,19,.96) !important;

  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em;

  box-shadow: 0 22px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}

.topPanel--v3 .profileButtons .button.small-button:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.topPanel--v3 .profileButtons .reg{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding: 10px 14px !important;
  min-height: 42px;

  border-radius: 14px;

  text-decoration: none !important;
  text-transform: uppercase;

  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em;

  color: rgba(217,193,134,.96) !important;

  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(208,154,38,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.topPanel--v3 .profileButtons .reg:hover{
  background: rgba(208,154,38,.10) !important;
  border-color: rgba(208,154,38,.40);
}

/* Discord icon alignment */
.topPanel--v3 .discordBlock{
  display:flex !important;
  align-items:center !important;
}
.topPanel--v3 .discordBlock .discord{
  width: 30px;
  height: 33px;
  /* border-radius: 12px; */
  /* background-color: rgba(255,255,255,.06); */
  /* border: 1px solid rgba(255,255,255,.10); */
  /* box-shadow: inset 0 1px 0 rgba(255,255,255,.06); */
}
.topPanel--v3 .discordBlock .discord:hover{
  background-color: rgba(208,154,38,.12);
  border-color: rgba(208,154,38,.22);
}

/* Responsive: allow horizontal scroll for menu instead of breaking layout */
@media (max-width: 1200px){
  .topPanel--v3 .topPanel-wrapper{
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .topPanel--v3 nav{
    overflow: hidden;
  }
  .topPanel--v3 .menu{
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topPanel--v3 .menu::-webkit-scrollbar{ display:none; }
}

@media (max-width: 768px){
  .topPanel--v3 .topPanel-wrapper{
    width: calc(100% - 18px) !important;
    gap: 10px;
  }
  .topPanel--v3 .profileButtons .reg{
    display:none !important; /* keep mobile clean, user can open from menu */
  }
}

/* ================= TOPPANEL V3: ALIGNMENT + SPACING PATCH =================
   - More spacing between menu items
   - Right side actions (Discord + Login + Registration) aligned to the right
   - Keeps layout stable with the template container
   ======================================================================= */

.topPanel--v3 .topPanel-wrapper{
  /* extra breathing room between the 3 columns */
  gap: 22px !important;
  grid-template-columns: auto 1fr auto !important;
}

/* Menu: more space between items */
.topPanel--v3 .menu{
  gap: 14px !important;
}

/* Slightly larger hit area without changing font sizes */
.topPanel--v3 .menu > li > a{
  padding: 10px 14px !important;
}

/* Right side: force alignment to the far right */
.topPanel--v3 .topPanel-wrapper_r{
  justify-self: end !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* Keep Discord + buttons on one line */
.topPanel--v3 .discordBlock,
.topPanel--v3 .profileButtons,
.topPanel--v3 .profile{
  flex: 0 0 auto;
}

/* Buttons group spacing */
.topPanel--v3 .profileButtons{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}

/* Registration button: align with login height */
.topPanel--v3 .profileButtons .reg{
  display:inline-flex !important;
  align-items:center !important;
  height: 42px !important;
  padding: 10px 14px !important;
}

/* On mid widths: avoid squeezing menu too much */
@media (max-width: 1200px){
  .topPanel--v3 .topPanel-wrapper{ gap: 16px !important; }
  .topPanel--v3 .menu{ gap: 10px !important; }
}

/* ================= TOPPANEL V3: MOBILE NAV (CSS-ONLY TOGGLE) =================
   - Uses #tpNavToggle checkbox + label burger
   - Prevents overflow and makes navigation usable on small screens
   - No JS required
   ========================================================================== */

.topPanel--v3 .tpNavToggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Burger + mobile logo */
.topPanel--v3 .btn-button.btn-drop.mobile-block{
  display: none;
  width: 44px;
  height: 40px;
  border-radius: 12px;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;

  cursor: pointer;
  user-select: none;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.topPanel--v3 .small-logo-mobile.mobile-block{ display:none; }

.topPanel--v3 .btn-button.btn-drop.mobile-block span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 99px;
  transition: transform .18s ease, opacity .18s ease;
}

/* Animate burger into X when open */
.topPanel--v3 .tpNavToggle:checked + .btn-button.btn-drop.mobile-block span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.topPanel--v3 .tpNavToggle:checked + .btn-button.btn-drop.mobile-block span:nth-child(2){
  opacity: 0;
}
.topPanel--v3 .tpNavToggle:checked + .btn-button.btn-drop.mobile-block span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile dropdown panel */
@media (max-width: 992px){
  .topPanel.topPanel--v3{
    padding: 10px 12px;
  }

  /* show burger + mobile logo */
  .topPanel--v3 .btn-button.btn-drop.mobile-block{ display:flex; }
  .topPanel--v3 .small-logo-mobile.mobile-block{ display:flex; align-items:center; }
  .topPanel--v3 .small-logo{ display:none !important; }

  /* wrapper becomes a drop panel under the bar */
  .topPanel--v3 .topPanel-wrapper{
    position: absolute !important;
    top: calc(100% + 10px);
    left: 12px;
    right: 12px;

    border-radius: 18px;
    background: rgba(15, 17, 16, .94);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);

    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 26px 86px rgba(0,0,0,.65);

    padding: 12px;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;

    transition: max-height .26s ease, opacity .20s ease, transform .20s ease;
  }

  /* Open state */
  .topPanel--v3 .tpNavToggle:checked ~ .topPanel-wrapper{
    max-height: 80vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* nav / menu vertical */
  .topPanel--v3 .topPanel-nav{ width: 100%; }
  .topPanel--v3 .topPanel-nav .menu{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    overflow: auto;
    max-height: 48vh;
    padding-right: 2px;
  }
  .topPanel--v3 .topPanel-nav .menu > li{
    width: 100%;
  }
  .topPanel--v3 .menu > li > a{
    width: 100%;
    justify-content: space-between;
    padding: 12px 12px !important;
    border-radius: 14px;
  }

  /* dropdowns become nested lists so touch works (no hover needed) */
  .topPanel--v3 .menu > li.has-dd .menu-dropdown{
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;

    display: block !important;

    margin-top: 6px;
    padding: 8px 6px 6px 10px;

    background: rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }

  .topPanel--v3 .menu > li.has-dd .menu-dropdown li a{
    padding: 10px 10px !important;
    border-radius: 12px;
  }

  /* right actions become full width row */
  .topPanel--v3 .topPanel-wrapper_r{
    width: 100%;
    justify-content: space-between !important;
    gap: 10px;
    flex-wrap: nowrap !important;
  }

  .topPanel--v3 .discordBlock{
    flex: 0 0 auto;
  }

  .topPanel--v3 .profileButtons{
    flex: 1 1 auto;
    display:flex !important;
    justify-content: flex-end;
    gap: 10px;
  }

  .topPanel--v3 .profileButtons .button.small-button{
    min-width: 140px !important;
  }
  .topPanel--v3 .profileButtons .reg{
    display:inline-flex !important;
    padding: 10px 14px !important;
  }
}

/* Extra-small: stack actions */
@media (max-width: 520px){
  .topPanel--v3 .topPanel-wrapper_r{
    flex-direction: column;
    align-items: stretch;
  }
  .topPanel--v3 .profileButtons{
    justify-content: stretch;
  }
  .topPanel--v3 .profileButtons .button.small-button,
  .topPanel--v3 .profileButtons .reg{
    width: 100% !important;
    justify-content:center;
  }
}

/* ==========================================================
   ACCOUNT PANEL (dmn-accpanel-page)
   - Premium look, scoped to account panel only
   - Fixed tab-content height (no jump between tabs)
   ========================================================== */

.dmn-accpanel-page .dmn-page-box.dmn-accpanel{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 58%),
    rgba(12,12,14,.55);
  box-shadow:
    0 28px 120px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* title */
.dmn-accpanel-page .dmn-page-title{
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.dmn-accpanel-page .dmn-page-title h1{
  margin: 0 !important;
  font-weight: 1000;
  letter-spacing: .04em;
  font-size: 18px;
  color: rgba(255,255,255,.94);
}

/* Tabs (pill style, scrollable on mobile) */
.dmn-accpanel-page #acc-panel-tabs.nav-tabs{
  border-bottom: none !important;
  padding: 12px 12px 10px !important;
  gap: 10px !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;

  background: rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dmn-accpanel-page #acc-panel-tabs.nav-tabs::-webkit-scrollbar{ height: 8px; }
.dmn-accpanel-page #acc-panel-tabs.nav-tabs::-webkit-scrollbar-thumb{
  background: rgba(208,154,38,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.dmn-accpanel-page #acc-panel-tabs .nav-item{ flex: 0 0 auto !important; margin: 0 !important; }

.dmn-accpanel-page #acc-panel-tabs .nav-link{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 999px !important;

  padding: 10px 14px !important;
  line-height: 1 !important;

  font-weight: 1000 !important;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.74) !important;

  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
}

.dmn-accpanel-page #acc-panel-tabs .nav-link:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  border-color: rgba(208,154,38,.22) !important;
}

.dmn-accpanel-page #acc-panel-tabs .nav-link.active{
  color: rgba(16,17,19,.96) !important;

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92)) !important;
  border-color: rgba(208,154,38,.55) !important;

  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Fixed height tab content (no jump) */
.dmn-accpanel-page #myTabContent.tab-content{
  --accpanel-height: 620px;
  height: var(--accpanel-height) !important;
  overflow: hidden !important;

  padding: 0 !important;
  background: rgba(255,255,255,.02);
}

/* each pane scrolls inside */
.dmn-accpanel-page #myTabContent .tab-pane{
  height: 100% !important;
  overflow: auto !important;
  padding: 16px 16px 18px !important;
}
.dmn-accpanel-page #myTabContent .tab-pane::-webkit-scrollbar{ width: 10px; }
.dmn-accpanel-page #myTabContent .tab-pane::-webkit-scrollbar-thumb{
  background: rgba(208,154,38,.20);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.dmn-accpanel-page #myTabContent .tab-pane::-webkit-scrollbar-track{
  background: rgba(0,0,0,.14);
  border-radius: 999px;
}

/* Tables */
.dmn-accpanel-page table.table{
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.dmn-accpanel-page table.table th,
.dmn-accpanel-page table.table td{
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.84);
}
.dmn-accpanel-page table.table th{
  width: 34%;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.02);
}
.dmn-accpanel-page table.table td{
  font-weight: 800;
}

/* Buttons inside account panel */
.dmn-accpanel-page .btn{
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 1000 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px !important;
}

.dmn-accpanel-page .btn.btn-sm{
  padding: 8px 12px !important;
  font-size: 10.5px !important;
  float: right !important;
}

.dmn-accpanel-page .btn.btn-primary{
  color: rgba(16,17,19,.96) !important;
  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92)) !important;
  border-color: rgba(208,154,38,.55) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}

.dmn-accpanel-page .btn.btn-primary:hover{ filter: brightness(1.05); }

.dmn-accpanel-page .btn.btn-secondary,
.dmn-accpanel-page .btn.btn-info,
.dmn-accpanel-page .btn.btn-success,
.dmn-accpanel-page .btn.btn-warning,
.dmn-accpanel-page .btn.btn-danger{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
}

.dmn-accpanel-page .btn.btn-secondary:hover,
.dmn-accpanel-page .btn.btn-info:hover,
.dmn-accpanel-page .btn.btn-success:hover,
.dmn-accpanel-page .btn.btn-warning:hover,
.dmn-accpanel-page .btn.btn-danger:hover{
  filter: brightness(1.08);
  border-color: rgba(208,154,38,.20) !important;
}

/* Small helper alignment */
.dmn-accpanel-page .float-right,
.dmn-accpanel-page .float-rig{
  float: none !important;
}
.dmn-accpanel-page .text-right{
  text-align: right;
}

/* Mobile */
@media (max-width: 768px){
  .dmn-accpanel-page #myTabContent.tab-content{
    --accpanel-height: 72vh;
  }
  .dmn-accpanel-page #acc-panel-tabs.nav-tabs{
    padding: 10px 10px 8px !important;
  }
  .dmn-accpanel-page #myTabContent .tab-pane{
    padding: 14px 12px 16px !important;
  }
}

/* ================= ACCOUNT PANEL: MODERN HERO + FIXED TAB HEIGHT =================
   Scoped to .dmn-accpanel-page so it won't affect other pages.
   ============================================================================== */

.dmn-accpanel-page .dmn-page-box{
  border-radius: 22px !important;
  overflow: hidden;
  background: rgb(18 19 21 / 80%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 110px rgba(0,0,0,.55) !important;
}

.dmn-accpanel-page .dmn-page-title{
  padding: 18px 18px 10px !important;
}

.dmn-accpanel-page .dmn-page-title h1{
  font-weight: 1000 !important;
  letter-spacing: .04em;
}

/* --- Hero --- */
.dmn-accpanel-page .accHero{
  margin: 6px 0 14px;
  padding: 14px;
  border-radius: 18px;

  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    radial-gradient(100% 100% at 85% 10%, rgba(208,154,38,.18), rgba(208,154,38,0) 62%),
    rgba(0,0,0,.18);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 70px rgba(0,0,0,.40);

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.dmn-accpanel-page .accHero-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

.dmn-accpanel-page .accAvatar{
  width: 56px;
  height: 56px;
  border-radius: 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(100% 120% at 30% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(208,154,38,.96), rgba(217,193,134,.84));

  border: 1px solid rgba(208,154,38,.42);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
  flex: 0 0 auto;
}

.dmn-accpanel-page .accAvatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.dmn-accpanel-page .accAvatar span{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .04em;
  color: rgba(16,17,19,.96);
}

.dmn-accpanel-page .accHero-meta{
  min-width: 0;
}

.dmn-accpanel-page .accHero-topRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.dmn-accpanel-page .accHero-name{
  font-size: 16px;
  font-weight: 1000;
  color: rgba(255,255,255,.96);
  letter-spacing: .02em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 360px;
}

.dmn-accpanel-page .accVipBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 7px 10px;
  border-radius: 999px;

  background: rgba(208,154,38,.14);
  border: 1px solid rgba(208,154,38,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);

  color: rgba(255,255,255,.92);
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
}

.dmn-accpanel-page .accVipBadge--free{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
}

.dmn-accpanel-page .accVipGem{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.90));
  box-shadow: 0 0 18px rgba(208,154,38,.24);
}

.dmn-accpanel-page .accHero-sub{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: 12.5px;
}

.dmn-accpanel-page .accHero-dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  display:inline-block;
}

.dmn-accpanel-page .accHero-chips{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dmn-accpanel-page .accChip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.80);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.dmn-accpanel-page .accChip--gold{
  color: rgba(16,17,19,.95);
  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));
  border-color: rgba(208,154,38,.45);
}

/* Actions */
.dmn-accpanel-page .accHero-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  flex: 0 0 auto;
}

.dmn-accpanel-page .accActionBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding: 10px 12px !important;
  border-radius: 14px !important;

  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;

  color: rgba(16,17,19,.96) !important;
  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92)) !important;
  border: 1px solid rgba(208,154,38,.55) !important;

  box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
  text-decoration: none !important;

  transition: transform .14s ease, filter .14s ease;
}

.dmn-accpanel-page .accActionBtn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.dmn-accpanel-page .accActionBtn--outline{
  color: rgba(255,255,255,.90) !important;
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ---- Tabs: fixed height so it doesn't jump when switching ---- */
.dmn-accpanel-page #myTabContent.tab-content{
  --accpanel-height: 620px;
  border-radius: 18px !important;
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  min-height: var(--accpanel-height) !important;
  height: var(--accpanel-height) !important;
  overflow: hidden !important;
}

.dmn-accpanel-page #myTabContent.tab-content > .tab-pane{
  height: 100% !important;
  overflow: auto !important;
  padding: 14px !important;
}

.dmn-accpanel-page #myTabContent.tab-content > .tab-pane::-webkit-scrollbar{ width: 10px; }
.dmn-accpanel-page #myTabContent.tab-content > .tab-pane::-webkit-scrollbar-thumb{
  background: rgba(208,154,38,.20);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.dmn-accpanel-page #myTabContent.tab-content > .tab-pane::-webkit-scrollbar-track{
  background: rgba(0,0,0,.14);
  border-radius: 999px;
}

/* Table polish */
.dmn-accpanel-page .dmn-account-table{
  border-radius: 16px !important;
  overflow:hidden;
  background: rgba(255,255,255,.02) !important;
}
.dmn-accpanel-page .dmn-account-table th{
  width: 34%;
  font-weight: 1000;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.20) !important;
}
.dmn-accpanel-page .dmn-account-table td{
  color: rgba(255,255,255,.80);
}

/* Mobile */
@media (max-width: 768px){
  .dmn-accpanel-page .accHero{
    flex-direction: column;
    align-items:flex-start;
  }
  .dmn-accpanel-page .accHero-actions{
    width: 100%;
    justify-content:flex-start;
  }
  .dmn-accpanel-page .accActionBtn{
    width: 100%;
  }
  .dmn-accpanel-page #myTabContent.tab-content{
    --accpanel-height: 72vh;
  }
}

/* ================= HEADER (LOGGED-IN PROFILE): MODERN USER INFO =================
   Improves the logged-in user block (avatar, username, wallet chips, dropdown).
   Scoped to topPanel to avoid affecting other pages.
   ============================================================================== */

.topPanel .topPanel-wrapper_r .profile{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 8px 10px;
  border-radius: 18px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Avatar */
.topPanel .topPanel-wrapper_r .profileAva span{
  display:block;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow:hidden;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(208,154,38,.28);

  box-shadow:
    0 16px 44px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.topPanel .topPanel-wrapper_r .profileAva img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Top line (name + account panel trigger) */
.topPanel .topPanel-wrapper_r .profileBlock-top{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.topPanel .topPanel-wrapper_r .nickname{
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .01em;
  color: rgba(255,255,255,.95);

  max-width: 160px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topPanel .topPanel-wrapper_r .accPanel{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 14px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.86);
  font-weight: 1000;
  font-size: 12px;

  text-decoration: none !important;
  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.topPanel .topPanel-wrapper_r .accPanel:after{
  content:"";
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(217,193,134,.95);
  border-bottom: 2px solid rgba(217,193,134,.95);
  transform: rotate(45deg);
  margin-left: 2px;
  opacity: .95;
}

.topPanel .topPanel-wrapper_r .accPanel:hover{
  background: rgba(208,154,38,.10);
  border-color: rgba(208,154,38,.22);
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Wallet chips (WCoins / Credits) */
.topPanel .topPanel-wrapper_r .profileBlock-bottom{
  display:flex;
  align-items:center;
  gap: 10px;

  margin-top: 8px;
  padding-top: 8px;

  border-top: 1px solid rgba(255,255,255,.08);
}

.topPanel .topPanel-wrapper_r .profileBlock-bottom .b-block{
  display:flex;
  align-items: baseline;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 14px;

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.72);

  white-space: nowrap;
}

.topPanel .topPanel-wrapper_r .profileBlock-bottom .b-block span{
  font-size: 12.5px;
  font-weight: 1000;
  color: rgba(255,255,255,.95);
}

.topPanel .topPanel-wrapper_r .profileBlock-bottom .dream:before,
.topPanel .topPanel-wrapper_r .profileBlock-bottom .zen:before{
  content:"";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(208,154,38,.92);
  box-shadow: 0 0 18px rgba(208,154,38,.22);
  flex: 0 0 auto;
}

/* logout icon button (if used) */
.topPanel .topPanel-wrapper_r .profileBlock-bottom .exit{
  display:inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 14px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.topPanel .topPanel-wrapper_r .profileBlock-bottom .exit:hover{
  background: rgba(208,154,38,.10);
  border-color: rgba(208,154,38,.22);
  transform: translateY(-1px);
}

/* Dropdown panel */
.topPanel .topPanel-wrapper_r #account_panel{
  position: absolute;
  right: 62px;
  top: calc(100% + 10px);
  z-index: 9999;
  min-width: 190px;
  max-width: 260px;
  padding: 10px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(208,154,38,.12), rgba(208,154,38,0) 58%),
    rgba(12,13,15,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 90px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Coins strip inside dropdown (it's a DIV inside UL in this template) */
.topPanel .topPanel-wrapper_r #account_panel .acp-coins{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(208,154,38,.10);
  border: 1px solid rgba(208,154,38,.22);

  margin: 0 0 8px 0;
}

.topPanel .topPanel-wrapper_r #account_panel .coins-title{
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}

.topPanel .topPanel-wrapper_r #account_panel .coins{
  font-size: 13px;
  font-weight: 1000;
  color: rgba(255,255,255,.95);
}

/* Dropdown links */
.topPanel .topPanel-wrapper_r #account_panel li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.topPanel .topPanel-wrapper_r #account_panel li a{
  display:flex;
  align-items:center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 14px;

  color: rgba(255,255,255,.86);
  font-weight: 950;
  font-size: 12.5px;

  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.00);

  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.topPanel .topPanel-wrapper_r #account_panel li a:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* Make the dropdown easier to read (tight list) */
.topPanel .topPanel-wrapper_r #account_panel li + li{ margin-top: 4px; }

/* Mobile: stack and avoid overflow */
@media (max-width: 768px){
  .topPanel .topPanel-wrapper_r .profile{
    width: 100%;
    justify-content: space-between;
  }
  .topPanel .topPanel-wrapper_r .nickname{ max-width: 45vw; }
  .topPanel .topPanel-wrapper_r .profileBlock-bottom{
    flex-wrap: wrap;
    gap: 8px;
  }
  .topPanel .topPanel-wrapper_r .profileBlock-bottom .b-block{
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .topPanel .topPanel-wrapper_r #account_panel{
    right: 0;
    left: 0;
    max-width: none;
    min-width: 0;
  }
}

/* ================= HEADER LOGGED-IN: COMPACT HEIGHT (FIT TOP BAR) =================
   Fix: logged-in block was taller than the top menu bar.
   This override keeps everything inside the same bar height (no vertical overflow),
   while still looking premium and aligned to the right.
   Apply by loading this after your theme CSS (and after any previous profile patch).
   ================================================================================ */

.topPanel.topPanel--v3 .topPanel-wrapper{
  height: 70px !important;
}

/* Ensure right block is vertically centered within the bar */
.topPanel.topPanel--v3 .topPanel-wrapper_r{
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
}

/* Profile container: remove extra padding that makes it taller */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profile{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  max-height: 70px !important;
}

/* Avatar: compact */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileAva{
  padding-right: 10px !important;
}
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileAva img{
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.35) !important;
}

/* Text block: keep it compact and centered */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock{
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* Top row: nickname + account panel */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-top{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.topPanel.topPanel--v3 .topPanel-wrapper_r .nickname{
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  margin: 0 !important;

  max-width: 170px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: rgba(255,255,255,.95) !important;
}

.topPanel.topPanel--v3 .topPanel-wrapper_r a.accPanel{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 7px 10px !important;
  border-radius: 12px !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  color: rgba(255,255,255,.86) !important;
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Bottom row: wallet chips (compact) */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  flex-wrap: nowrap !important;
}

.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .b-block{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;

  padding: 6px 9px !important;
  border-radius: 12px !important;

  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.70) !important;

  white-space: nowrap !important;
}

.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .b-block span{
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: rgba(217,193,134,.95) !important;
}

/* Exit icon: keep in line without increasing height */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .exit{
  margin-left: 6px !important;
  transform: translateY(0) !important;
}

/* Mobile: allow wrapping without breaking the bar */
@media (max-width: 768px){
  .topPanel.topPanel--v3 .topPanel-wrapper{
    height: auto !important;
  }
  .topPanel.topPanel--v3 .topPanel-wrapper_r{
    height: auto !important;
  }
  .topPanel.topPanel--v3 .topPanel-wrapper_r .profile{
    max-height: none !important;
  }
  .topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom{
    flex-wrap: wrap !important;
  }
  .topPanel.topPanel--v3 .topPanel-wrapper_r .nickname{
    max-width: 220px !important;
  }
}

/* ================= HEADER (LOGGED-IN) PREMIUM V2 =================
   Fixes: ugly compact look + prevents overflow WITHOUT shrinking the whole header.
   - Removes forced header height (if any previous patch forced it)
   - Converts logged-in info to a single elegant "user capsule" row (avatar + name + coins + logout)
   - Uses gold/dark palette (no blue/purple/green)
   ================================================================= */

/* 1) Do NOT force the top bar height (let the template decide). */
.topPanel.topPanel--v3 .topPanel-wrapper{
  height: auto !important;
  min-height: 70px; /* template baseline */
}
.topPanel.topPanel--v3 .topPanel-wrapper_r{
  height: auto !important;
}

/* 2) Logged-in capsule */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profile{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 7px 10px !important;
  margin: 0 !important;

  border-radius: 999px !important;

  background:
    radial-gradient(120% 160% at 25% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    rgba(0,0,0,.18) !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  max-width: 520px;
}

/* Avatar */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileAva{
  padding: 0 !important;
  margin: 0 !important;
}
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileAva span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;

  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    rgba(0,0,0,.20);

  border: 1px solid rgba(208,154,38,.35);
  box-shadow:
    0 18px 56px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileAva img{
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display:block;
}

/* Make profile content a SINGLE ROW (no stacked lines) */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;

  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-top,
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 0 !important;
  margin: 0 !important;

  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Username */
.topPanel.topPanel--v3 .topPanel-wrapper_r .nickname{
  margin: 0 !important;

  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;

  color: rgba(255,255,255,.95) !important;

  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Optional VIP badge support (if you add <span class="vipBadge vipBadge--on">VIP</span> near nickname) */
.topPanel.topPanel--v3 .topPanel-wrapper_r .vipBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 22px;
  padding: 0 8px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(16,17,19,.96);

  background: linear-gradient(135deg, rgba(208,154,38,.98), rgba(217,193,134,.92));
  border: 1px solid rgba(208,154,38,.45);
  box-shadow: 0 16px 52px rgba(0,0,0,.28);
}
.topPanel.topPanel--v3 .topPanel-wrapper_r .vipBadge--off{ display:none; }

/* Account Panel button (compact, premium) */
.topPanel.topPanel--v3 .topPanel-wrapper_r a.accPanel{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 10px !important;
  border-radius: 14px !important;

  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  height: auto !important;
  width: auto !important;
}

/* Coins chips (Dream/Zen) */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .b-block{
  display:inline-flex !important;
  align-items:center !important;
  gap: 6px !important;

  padding: 7px 10px !important;
  border-radius: 14px !important;

  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.70) !important;

  white-space: nowrap !important;
}
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .b-block span{
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: rgba(217,193,134,.95) !important;
}

/* Logout icon */
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .exit{
  margin-left: 4px !important;
  transform: none !important;

  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  opacity: .95;
}
.topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock-bottom .exit:hover{
  opacity: 1;
  filter: brightness(1.06);
}

/* Dropdown of account panel: align and elevate */
.topPanel.topPanel--v3 .topPanel-wrapper_r .hidden-block.account_panel{
  margin-top: -18px !important;
  right: 48px !important;
  left: auto !important;
  background: rgba(12,12,14,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 120px rgba(0,0,0,.65) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Mobile: allow wrapping and full width */
@media (max-width: 768px){
  .topPanel.topPanel--v3 .topPanel-wrapper_r .profile{
    width: 100%;
    max-width: none;
    border-radius: 18px !important;
    justify-content: space-between;
  }
  .topPanel.topPanel--v3 .topPanel-wrapper_r .profileBlock{
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    row-gap: 10px !important;
  }
  .topPanel.topPanel--v3 .topPanel-wrapper_r .nickname{
    max-width: 220px;
  }
}

/* ==========================================================
   War Winners (Home) — Live data panes + server switcher
   Drop-in patch (keep your template colors)
========================================================== */

.homeWarsArea .homeWarsHeader{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px;
}

.homeWarsArea .homeWarsServer{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 10px;
	border-radius:12px;
	background:rgba(0,0,0,0.25);
	border:1px solid rgba(255,255,255,0.10);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.homeWarsArea .homeWarsServerLabel{
	font-size:12px;
	letter-spacing:0.06em;
	text-transform:uppercase;
	opacity:0.9;
	white-space:nowrap;
}

.homeWarsArea .homeWarsServerSelect{
	min-width:160px;
	height:34px;
	padding:0 10px;
	border-radius:10px;
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.12);
	color:inherit;
	outline:none;
}

.homeWarsArea .homeWarsServerSelect:focus{
	border-color: rgba(255,255,255,0.25);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}

/* Card body layout */
.homeWarsArea .warTabs{ position:relative; }

.homeWarsArea .warTabBodies{
	/* keeps height stable when switching tabs */
	min-height: 248px;
}

.homeWarsArea .warOwnerRow{
	display:flex;
	gap:14px;
	align-items:center;
}

.homeWarsArea .warMark{
	width:64px;
	height:64px;
	border-radius:16px;
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.10);
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 64px;
	overflow:hidden;
}

.homeWarsArea .warMarkImg{
	width:60px;
	height:60px;
	object-fit:contain;
	image-rendering: pixelated; /* guild marks */
}

.homeWarsArea .warMarkFallback{
	font-size:22px;
	opacity:0.9;
}

.homeWarsArea .warOwnerInfo{ flex:1; min-width:0; }
.homeWarsArea .warLine{
	display:flex;
	gap:8px;
	align-items:baseline;
	line-height:1.25;
	padding:4px 0;
	border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.homeWarsArea .warLine:last-child{ border-bottom:0; }

.homeWarsArea .warLabel{
	font-size:12px;
	opacity:0.75;
	white-space:nowrap;
}
.homeWarsArea .warValue{
	font-size:13px;
	font-weight:600;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* Info tab */
.homeWarsArea .warInfoBlock{ display:flex; flex-direction:column; gap:10px; }

.homeWarsArea .warInfoTitle{
	font-size:12px;
	letter-spacing:0.06em;
	text-transform:uppercase;
	opacity:0.85;
}

.homeWarsArea .warScroll{
	max-height: 92px;
	overflow:auto;
	padding-right:4px;
}

.homeWarsArea .warPills{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.homeWarsArea .warPill{
	font-size:12px;
	line-height:1;
	padding:8px 10px;
	border-radius:999px;
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.10);
	white-space:nowrap;
}

.homeWarsArea .warEmpty{
	font-size:12px;
	opacity:0.75;
	padding:8px 0;
}

/* Countdown */
.homeWarsArea .warCountdown{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:10px 12px;
	border-radius:14px;
	background:rgba(0,0,0,0.18);
	border:1px solid rgba(255,255,255,0.08);
}

.homeWarsArea .warCountdownLabel{
	font-size:12px;
	opacity:0.75;
	white-space:nowrap;
}

.homeWarsArea .warCountdownValue{
	font-size:13px;
	font-weight:700;
	letter-spacing:0.02em;
}

/* Mobile */
@media (max-width: 767px){
	.homeWarsArea .homeWarsHeader{
		align-items:flex-start;
	}
	.homeWarsArea .homeWarsServerSelect{
		min-width: 140px;
	}
	.homeWarsArea .warTabBodies{
		min-height: 260px;
	}
	.homeWarsArea .warLine{
		flex-direction:column;
		align-items:flex-start;
		gap:2px;
	}
	.homeWarsArea .warValue{
		white-space:normal;
	}
}


/* ==========================================================
   HOME: Rankings (dynamic via App.populateSidebarRanking)
   Scoped to .homeRankingArea so it won't affect other pages.
   ========================================================== */

.homeRankingArea.homeSection{
  margin-top: 28px;
}

.homeRankingArea .homeSectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 12px;
}

.homeRankingArea .homeSectionEyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.homeRankingArea .homeSectionTitle{
  margin: 6px 0 0 0;
  font-size: 22px;
  font-weight: 900;
  color: rgba(243,241,231,.95);
}

.homeRankingArea .homeSectionSub{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.60);
}

/* Right-side server selector */
.homeRankingArea .homeRankServer{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.homeRankingArea .homeRankServerLabel{
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.homeRankingArea .homeRankSelect{
  height: 40px;
  min-width: 180px;
  padding: 8px 12px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);

  color: rgba(243,241,231,.92);
  outline: none;
}

/* Main card */
.homeRankingArea .homeRankCard{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(218,165,32,.22);
  background: rgba(0,0,0,.34);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Tabs */
.homeRankingArea .homeRankTabs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 14px 14px 0 14px;
  margin: 0;
  list-style: none;
}

.homeRankingArea .homeRankTab{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(243,241,231,.86);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .02em;

  cursor: pointer;
  user-select: none;

  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.homeRankingArea .homeRankTabIcon{
  display:inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  align-items:center;
  justify-content:center;
  background: rgba(218,165,32,.14);
  border: 1px solid rgba(218,165,32,.22);
  font-size: 14px;
}

.homeRankingArea .homeRankTab:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.homeRankingArea .homeRankTab.is-active{
  background: rgba(218,165,32,.16);
  border-color: rgba(218,165,32,.40);
  color: rgba(255,248,232,.98);
}

/* Panes (fixed height to avoid layout jump) */
.homeRankingArea .homeRankPanes{
  padding: 14px;
}

.homeRankingArea .homeRankPane{
  display:none;
}

.homeRankingArea .homeRankPane.is-active{
  display:block;
}

.homeRankingArea .homeRankPaneInner{
  height: 420px;              /* fixed height requested */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  overflow: hidden;
  position: relative;
}

/* Injected content area */
.homeRankingArea .homeRankInjected{
  height: 100%;
  overflow: auto;
  padding: 10px;
}

/* Generic fallback */
.homeRankingArea .homeRankFallback{
  display:none;
  position:absolute;
  inset:0;
  padding: 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
}

.homeRankingArea .homeRankFallbackTitle{
  font-size: 14px;
  font-weight: 950;
  color: rgba(243,241,231,.95);
}

.homeRankingArea .homeRankFallbackDesc{
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}

/* ----------------------------------------------------------
   Styling for whatever App.populateSidebarRanking injects
   (table OR list). We keep it resilient.
   ---------------------------------------------------------- */

.homeRankingArea .homeRankInjected table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.homeRankingArea .homeRankInjected thead{ display:none; }

.homeRankingArea .homeRankInjected tbody tr{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

.homeRankingArea .homeRankInjected td{
  padding: 10px 12px;
  font-size: 12.5px;
  color: rgba(243,241,231,.90);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.homeRankingArea .homeRankInjected tr td:first-child{
  border-left: 1px solid rgba(255,255,255,.08);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  width: 52px;
  font-weight: 950;
  color: rgba(255,231,170,.95);
  text-align:center;
}

.homeRankingArea .homeRankInjected tr td:last-child{
  border-right: 1px solid rgba(255,255,255,.08);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  text-align:right;
  white-space:nowrap;
}

/* Lists injected */
.homeRankingArea .homeRankInjected ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.homeRankingArea .homeRankInjected li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(243,241,231,.88);
  font-size: 12.5px;
}

/* Scrollbar */
.homeRankingArea .homeRankInjected::-webkit-scrollbar{
  width: 10px;
}
.homeRankingArea .homeRankInjected::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}
.homeRankingArea .homeRankInjected::-webkit-scrollbar-thumb{
  background: rgba(218,165,32,.26);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.30);
}

/* Mobile */
@media (max-width: 991px){
  .homeRankingArea .homeSectionHeader{
    align-items:flex-start;
    flex-direction:column;
  }
  .homeRankingArea .homeRankSelect{
    min-width: 100%;
  }
  .homeRankingArea .homeRankPaneInner{
    height: 380px;
  }
}


/* =====================================================================
   MODAL FIX (Login modal not appearing)
   - Ensures overlay is visible when .modal-overlay_visible is added
   - Fixes z-index and pointer-events
   - Adds background blur and premium look in template palette
   ===================================================================== */

.modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.modal-overlay.modal-overlay_visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Centering table helpers (keep template structure) */
.modal-table{ width: 100%; height: 100%; display: table; }
.modal-table-cell{ display: table-cell; vertical-align: middle; padding: 0 16px; text-align: center; }

/* Modal panel */
.modal-overlay .modal{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 460px;
  text-align: left;

  padding: 26px 24px 22px;
  border-radius: 18px;

  background:
    radial-gradient(120% 140% at 18% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    rgba(15, 17, 16, 0.92) !important;

  border: 1px solid rgba(202,150,25,.28);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

/* Close button */
.modal-overlay .modal__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
}
.modal-overlay .modal__close:before,
.modal-overlay .modal__close:after{
  content:"";
  position:absolute;
  left: 50%;
  top: 11%;
  width: 16px;
  height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  transform-origin: center;
}
.modal-overlay .modal__close:before{transform: translate(-50%,-50%) rotate(45deg);}
.modal-overlay .modal__close:after{ transform: translate(-50%,-50%) rotate(-45deg); }
.modal-overlay .modal__close:hover{ background: rgba(202,150,25,.10); border-color: rgba(202,150,25,.28); }

/* Prevent background scrolling while open */
.modal-open{ overflow: hidden !important; }

/* Make inputs inside modal match your glass style */
.modal-overlay .modal input[type="text"],
.modal-overlay .modal input[type="password"],
.modal-overlay .modal input[type="email"],
.modal-overlay .modal select{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,211,153,.16) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
.modal-overlay .modal input:focus,
.modal-overlay .modal select:focus{
  border-color: rgba(202,150,25,.55) !important;
  box-shadow: 0 0 0 3px rgba(202,150,25,.14) !important;
}

/* =====================================================================
   CENTER + COMPACT (override)
   - Forces modal to be perfectly centered
   - Prevents huge height: caps and makes internal scroll when needed
   ===================================================================== */

/* Centering: switch table layout to flex (keeps HTML unchanged) */
.modal-overlay .modal-table{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
}
.modal-overlay .modal-table-cell{
  display: block !important;
  width: 100% !important;
  padding: 0 16px !important;
  text-align: center !important;
}

/* Modal size: fixed max height + scroll */
.modal-overlay .modal{
  max-height: min(620px, calc(100vh - 120px)) !important;
  overflow: auto !important;
  padding: 18px 18px 16px !important;
  border-radius: 18px !important;
}

/* Slightly tighter typography/spacing */
.modal-overlay .modalTitle{
  font-size: 18px !important;
  margin-bottom: 12px !important;
}
.modal-overlay .formGroups{
  gap: 10px !important;
}
.modal-overlay .formGroup{
  margin-bottom: 10px !important;
}
.modal-overlay .formInfo{
  margin-top: 14px !important;
  gap: 10px !important;
}

/* Make the main login button not gigantic */
.modal-overlay .sign-button .button,
.modal-overlay .sign-button button{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

/* Keep close button aligned with reduced padding */
.modal-overlay .modal__close{
  top: 12px !important;
  right: 12px !important;
}

/* Mobile: use more of the screen but still centered */
@media (max-width: 480px){
  .modal-overlay .modal{
    max-height: calc(100vh - 90px) !important;
    padding: 16px 14px 14px !important;
  }
}

/* ==========================================================
   HOME: Rankings (dynamic via App.populateSidebarRanking)
   Scoped to .homeRankingArea so it won't affect other pages.
   ========================================================== */

.homeRankingArea.homeSection{
  margin-top: 28px;
}

.homeRankingArea .homeSectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 12px;
}

.homeRankingArea .homeSectionEyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.homeRankingArea .homeSectionTitle{
  margin: 6px 0 0 0;
  font-size: 22px;
  font-weight: 900;
  color: rgba(243,241,231,.95);
}

.homeRankingArea .homeSectionSub{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.60);
}

/* Right-side server selector */
.homeRankingArea .homeRankServer{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.homeRankingArea .homeRankServerLabel{
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.homeRankingArea .homeRankSelect{
  height: 40px;
  min-width: 180px;
  padding: 8px 12px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);

  color: rgba(243,241,231,.92);
  outline: none;
}

/* Main card */
.homeRankingArea .homeRankCard{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(218,165,32,.22);
  background: rgba(0,0,0,.34);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Tabs */
.homeRankingArea .homeRankTabs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 14px 14px 0 14px;
  margin: 0;
  list-style: none;
}

.homeRankingArea .homeRankTab{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(243,241,231,.86);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .02em;

  cursor: pointer;
  user-select: none;

  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.homeRankingArea .homeRankTabIcon{
  display:inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  align-items:center;
  justify-content:center;
  background: rgba(218,165,32,.14);
  border: 1px solid rgba(218,165,32,.22);
  font-size: 14px;
}

.homeRankingArea .homeRankTab:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.homeRankingArea .homeRankTab.is-active{
  background: rgba(218,165,32,.16);
  border-color: rgba(218,165,32,.40);
  color: rgba(255,248,232,.98);
}

/* Panes (fixed height to avoid layout jump) */
.homeRankingArea .homeRankPanes{
  padding: 14px;
}

.homeRankingArea .homeRankPane{
  display:none;
}

.homeRankingArea .homeRankPane.is-active{
  display:block;
}

.homeRankingArea .homeRankPaneInner{
  height: 420px;              /* fixed height requested */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  overflow: hidden;
  position: relative;
}

/* Injected content area */
.homeRankingArea .homeRankInjected{
  height: 100%;
  overflow: auto;
  padding: 10px;
}

/* Generic fallback */
.homeRankingArea .homeRankFallback{
  display:none;
  position:absolute;
  inset:0;
  padding: 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
}

.homeRankingArea .homeRankFallbackTitle{
  font-size: 14px;
  font-weight: 950;
  color: rgba(243,241,231,.95);
}

.homeRankingArea .homeRankFallbackDesc{
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}

/* ----------------------------------------------------------
   Styling for whatever App.populateSidebarRanking injects
   (table OR list). We keep it resilient.
   ---------------------------------------------------------- */

.homeRankingArea .homeRankInjected table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.homeRankingArea .homeRankInjected thead{ display:none; }

.homeRankingArea .homeRankInjected tbody tr{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

.homeRankingArea .homeRankInjected td{
  padding: 10px 12px;
  font-size: 12.5px;
  color: rgba(243,241,231,.90);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.homeRankingArea .homeRankInjected tr td:first-child{
  border-left: 1px solid rgba(255,255,255,.08);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  width: 52px;
  font-weight: 950;
  color: rgba(255,231,170,.95);
  text-align:center;
}

.homeRankingArea .homeRankInjected tr td:last-child{
  border-right: 1px solid rgba(255,255,255,.08);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  text-align:right;
  white-space:nowrap;
}

/* Lists injected */
.homeRankingArea .homeRankInjected ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.homeRankingArea .homeRankInjected li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(243,241,231,.88);
  font-size: 12.5px;
}

/* Scrollbar */
.homeRankingArea .homeRankInjected::-webkit-scrollbar{
  width: 10px;
}
.homeRankingArea .homeRankInjected::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}
.homeRankingArea .homeRankInjected::-webkit-scrollbar-thumb{
  background: rgba(218,165,32,.26);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.30);
}

/* Mobile */
@media (max-width: 991px){
  .homeRankingArea .homeSectionHeader{
    align-items:flex-start;
    flex-direction:column;
  }
  .homeRankingArea .homeRankSelect{
    min-width: 100%;
  }
  .homeRankingArea .homeRankPaneInner{
    height: 380px;
  }
}

/* ==========================================================
   DYNAMIC RANKING MARKUP (DIV TABLE) SUPPORT
   Your injected ranking uses classes:
   .table / .tHead / .tBody / .tRow
   So we style those too (scoped to Home Ranking only).
   ========================================================== */

.homeRankingArea .homeRankInjected .table{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  box-shadow: 0 12px 38px rgba(0,0,0,.32);
}

/* Header wrapper */
.homeRankingArea .homeRankInjected .tHead{
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.20));
  border-bottom: 1px solid rgba(208,154,38,.18);
}

/* Body wrapper */
.homeRankingArea .homeRankInjected .tBody{
  background: transparent;
}

/* Rows (works for div rows OR tr rows) */
.homeRankingArea .homeRankInjected .tRow{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, max-content);
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);

  color: rgba(243,241,231,.88);
  height: 36px;
}

/* Make the 2nd column flexible (usually player name) */
.homeRankingArea .homeRankInjected .tRow > :nth-child(2){
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  justify-self: start;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
}

/* Position (usually first col) */
.homeRankingArea .homeRankInjected .tRow > :nth-child(1){
  justify-self: center;
  font-weight: 1000;
  color: rgba(255,255,255,.88);
}

/* Stats (other cols) */
.homeRankingArea .homeRankInjected .tRow > :nth-child(n+3){
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  color: rgba(255,255,255,.74);
}

/* Header row typography */
.homeRankingArea .homeRankInjected .tHead .tRow{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 1000;
  color: rgba(255,255,255,.82);

}

/* Zebra + hover (body only) */
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(odd){
  background: rgba(255,255,255,.02);

}
.homeRankingArea .homeRankInjected .tBody .tRow:hover{
  background: rgba(208,154,38,.05);

}

/* Remove last border */
.homeRankingArea .homeRankInjected .tBody .tRow:last-child{
  border-bottom: 0;

}

/* Mobile: tighter columns */
@media (max-width: 768px){
  .homeRankingArea .homeRankInjected .tRow{
    grid-auto-columns: minmax(84px, max-content);
    padding: 11px 12px;
  }
}

/* ==========================================================
   Home Ranking - extra polish
   ========================================================== */

/* Slightly tighter, more premium table surface */
.homeRankingArea .homeRankInjected .table{
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
    rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
}

/* Column sizing: make Name wider, keep numeric cols compact */
.homeRankingArea .homeRankInjected .tRow{
  grid-template-columns: 64px 1fr repeat(4, minmax(78px, max-content));
  grid-auto-flow: unset;
  grid-auto-columns: unset;
}

/* If fewer columns exist, grid will still work; for many columns, allow overflow gracefully */
.homeRankingArea .homeRankInjected .table{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Position badge look for top 3 */
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(1) > :first-child,
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(2) > :first-child,
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(3) > :first-child{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(1) > :first-child{
  background: linear-gradient(135deg, rgba(208,154,38,.92), rgba(255,255,255,.16));
  color: rgba(16,17,19,.96);
  border-color: rgba(208,154,38,.45);
}
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(2) > :first-child{
  background: linear-gradient(135deg, rgba(217,193,134,.70), rgba(255,255,255,.10));
  color: rgba(16,17,19,.96);
}
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(3) > :first-child{
  /* background: linear-gradient(135deg, rgba(208,154,38,.55), rgba(0,0,0,.10)); */
  /* color: rgba(255,255,255,.92); */
  /* border-color: rgba(208,154,38,.24); */
}

/* Header: slightly more compact */
.homeRankingArea .homeRankInjected .tHead .tRow{
  padding: 11px 14px;
}

/* Better spacing between rows on hover */
.homeRankingArea .homeRankInjected .tBody .tRow{
  transition: background .14s ease, filter .14s ease;
}
.homeRankingArea .homeRankInjected .tBody .tRow:hover{
  filter: brightness(1.05);
}


/* ==========================================================
   Home Ranking (DIV table) - Fit 10 rows in fixed height
   - Reduces row paddings/fonts
   - Shrinks Top-3 badge so rows don't get taller
   - Removes desktop scroll (keeps mobile scroll)
   ========================================================== */

/* Keep fixed-height pane, but make the inner content use space efficiently */
.homeRankingArea .homeRankPaneInner{
  /* keep your fixed height; if you want a bit more room uncomment below */
  /* height: 440px; */
}

/* Desktop: no scroll needed if 10 rows fit */
.homeRankingArea .homeRankInjected{
  padding: 8px;
  overflow: hidden;
}

/* Header row: compact */
.homeRankingArea .homeRankInjected .tHead .tRow{
  padding: 9px 12px;
  font-size: 10px;
  letter-spacing: .14em;
}

/* Body rows: compact */
.homeRankingArea .homeRankInjected .tBody .tRow{
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
}

/* Reduce TOP 3 badge height (so it doesn't inflate row height) */
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(1) > :first-child,
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(2) > :first-child,
.homeRankingArea .homeRankInjected .tBody .tRow:nth-child(3) > :first-child{
  min-width: 36px;
  height: 22px;
  padding: 0 8px;
}

/* Slightly tighter overall table */
.homeRankingArea .homeRankInjected .table{
  border-radius: 16px;
}

/* Mobile: allow scrolling again (10 rows won't fit on small heights) */
@media (max-width: 768px){
  .homeRankingArea .homeRankInjected{
    overflow: auto;
  }
}

.input2{
  width: 100% !important;
  max-width: none !important;

  height: 44px;
  padding: 0 14px !important;

  border-radius: 14px;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.input2:focus{
  outline: none;
  border-color: rgba(208,154,38,.55) !important;
  box-shadow:
    0 0 0 3px rgba(208,154,38,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
  filter: brightness(112%);
} 

/* =======================================================================
   Files page - Grouped Downloads (Installer / Files)
   Minimal + professional + template-friendly
   Scope: only inside .dmn-files-page
   ======================================================================= */

.dmn-files-page .dmn-section-title{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

/* Groups grid */
.dmn-files-page .dmn-dl-groups{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

/* Group card */
.dmn-files-page .dmn-dl-group-card{
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(140% 160% at 18% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 58%),
    rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 44px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.dmn-files-page .dmn-dl-group-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.dmn-files-page .dmn-dl-group-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dmn-files-page .dmn-dl-group-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(202,150,25,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.dmn-files-page .dmn-dl-group-title{
  font-size: 13px;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
}

.dmn-files-page .dmn-dl-group-hint{
  font-size: 12px;
  color: rgba(255,255,255,.62);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.dmn-files-page .dmn-dl-group-right{
  flex: 0 0 auto;
}

.dmn-files-page .dmn-dl-group-count{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Items list */
.dmn-files-page .dmn-dl-group-body{
  padding: 8px;
}

.dmn-files-page .dmn-dl-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
}

.dmn-files-page .dmn-dl-item + .dmn-dl-item{
  margin-top: 8px;
}

.dmn-files-page .dmn-dl-item:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(202,150,25,.28);
  background: rgba(0,0,0,.22);
}

@keyframes dmnIconPulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.92;
    box-shadow:
      0 0 0 0 rgba(201,161,71, 0.00),
      0 0 0 0 rgba(30,255,0,   0.00);
    filter: brightness(1) saturate(1);
  }

  45% {
    transform: scale(1.12);
    opacity: 1;
    box-shadow:
      0 0 10px 2px rgba(201,161,71, 0.55),
      0 0 22px 6px rgba(201,161,71, 0.45),
      0 0 18px 4px rgba(30,255,0,   0.55),
      0 0 35px 10px rgba(30,255,0,  0.35);
    filter: brightness(1.35) saturate(1.35);
  }

  100% {
    transform: scale(1);
    opacity: 0.92;
    box-shadow:
      0 0 0 0 rgba(201,161,71, 0.00),
      0 0 0 0 rgba(30,255,0,   0.00);
    filter: brightness(1) saturate(1);
  }
}

/* (Opcional) ring “explodindo” pra ficar mais impactante */
@keyframes dmnIconRing {
  0%   { box-shadow: 0 0 0 0 rgba(201,161,71, 0.35); }
  100% { box-shadow: 0 0 0 16px rgba(201,161,71, 0.00); }
}

.dmn-files-page .dmn-dl-item-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  border: 2px solid rgb(201 161 71);
  color: rgb(30 255 0);
  flex: 0 0 40px;

  will-change: transform, opacity, box-shadow, filter;

  /* pulse + ring sincronizados */
  animation:
    dmnIconPulseGlow 1.25s cubic-bezier(.2,.8,.2,1) infinite,
    dmnIconRing 1.25s ease-out infinite;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .dmn-files-page .dmn-dl-item-icon{ animation: none; }
}

.dmn-files-page .dmn-dl-item-main{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dmn-files-page .dmn-dl-item-title{
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmn-files-page .dmn-dl-item-desc{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}

.dmn-files-page .dmn-dl-item-host{
  font-size: 11px;
  color: rgba(255,255,255,.46);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmn-files-page .dmn-dl-item-meta{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dmn-files-page .dmn-pill{
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.80);
  white-space: nowrap;
}

.dmn-files-page .dmn-dl-item-arrow{
  opacity: .65;
  font-weight: 1000;
  transition: transform .14s ease, opacity .14s ease;
}

.dmn-files-page .dmn-dl-item:hover .dmn-dl-item-arrow{
  opacity: .92;
  transform: translateX(2px);
}

/* Responsive */
@media (max-width: 991px){
  .dmn-files-page .dmn-dl-groups{
    grid-template-columns: 1fr;
  }
  .dmn-files-page .dmn-dl-group-hint{
    max-width: 240px;
  }
}

@media (max-width: 520px){
  .dmn-files-page .dmn-dl-item{
    flex-wrap: wrap;
  }
  .dmn-files-page .dmn-dl-item-meta{
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}


/* ==========================================================
   Download item meta: provider + size
   ========================================================== */
.dmn-files-page .dmn-dl-item-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.dmn-files-page .dmn-pill{
  font-size: 10.5px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

.dmn-files-page .dmn-pill--soft{
  border-color: rgba(202,150,25,.20);
  background: rgba(202,150,25,.08);
  color: rgba(255,255,255,.86);
}

@media (max-width: 520px){
  .dmn-files-page .dmn-dl-item{
    flex-wrap: wrap;
  }
  .dmn-files-page .dmn-dl-item-meta{
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* ==========================================================
   System Requirements - clean, aligned
   ========================================================== */
.dmn-files-page .dmn-req-wrap{
  margin-top: 18px;
}

.dmn-files-page .dmn-req-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dmn-files-page .dmn-req-card{
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
    rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 44px rgba(0,0,0,.26);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.dmn-files-page .dmn-req-card--rec{
  border-color: rgba(202,150,25,.18);
}

.dmn-files-page .dmn-req-head{
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.dmn-files-page .dmn-req-title{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

.dmn-files-page .dmn-req-note{
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.dmn-files-page .dmn-req-list{
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.dmn-files-page .dmn-req-list li{
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.82);
}

.dmn-files-page .dmn-req-list li:last-child{
  border-bottom: 0;
}

.dmn-files-page .dmn-req-list span{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.dmn-files-page .dmn-req-list strong{
  font-size: 12.5px;
  font-weight: 900;
  color: rgba(255,255,255,.90);
}

@media (max-width: 991px){
  .dmn-files-page .dmn-req-grid{
    grid-template-columns: 1fr;
  }
}

.profile .account_panel li.pulse > a{
  position: relative;
  padding-left: 32px;
}
.profile .account_panel li.pulse > a::before{
  content: "●";
  position: absolute;
  left: 12px;
  top: 48%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 204, 51, 0.25);
  animation: pulseMarkerGold 0.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulseMarkerGold{
  0%,100%{ opacity: .25; color: rgba(255, 204, 51, .25); }
  50%    { opacity: 1;   color: rgba(255, 204, 51, 1); }
}

.profile .account_panel li.marker > a{
  position: relative;
  padding-left: 32px;
}
.profile .account_panel li.marker > a::before{
  content: "●";
  position: absolute;
  left: 12px;
  top: 48%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  pointer-events: none;
  animation: none !important;
}


/* ================= HEADER TIMERS (MATCH siteStatsCard) =================
   Makes the #timers block visually identical to .siteStatsCard, using the
   same glow + rim + sweep animations, and maps:
   - #timer_div_time      -> .siteStatsGrid
   - .timmer_inner_block  -> .siteStat
   - .title               -> .siteStatLabel
   - .count               -> .siteStatValue
   ====================================================================== */

.topPanel #timers,
.header #timers{
  width: 480px;
  max-width: 560px;
  margin: 0 0 12px 0;
  padding: 20px 20px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 25% 10%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), rgb(18 19 21 / 73%);
  border: 1px solid rgba(208,154,38,.30);
  outline: 1px solid rgba(208,154,38,.14);
  outline-offset: -4px;
  box-shadow:
    0 22px 70px rgba(0,0,0,.52),
    0 18px 44px rgba(208,154,38,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: siteStatsGlow 2.8s ease-in-out infinite;
  z-index: 3;
}

.topPanel #timers:before,
.header #timers:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(208,154,38,.00),
    rgba(208,154,38,.65),
    rgba(217,193,134,.35),
    rgba(208,154,38,.55),
    rgba(208,154,38,.00)
  );
  pointer-events:none;
  opacity: .55;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: siteStatsRim 2.8s ease-in-out infinite;
}

.topPanel #timers:after,
.header #timers:after{
  content:"";
  position:absolute;
  inset: -40% -30%;
  background: radial-gradient(closest-side, rgba(208,154,38,.10), rgba(208,154,38,0) 70%);
  transform: translateX(-18%) translateY(-10%);
  pointer-events:none;
  opacity: .55;
  filter: blur(2px);
  animation: siteStatsSweep 4.2s ease-in-out infinite;
}

.topPanel #timers #timer_div_title,
.header #timers #timer_div_title{
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(208,154,38,.92);
  text-shadow: 0 10px 28px rgba(208,154,38,.12);
}

.topPanel #timers #timer_div_time,
.header #timers #timer_div_time{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 114px;
}

.topPanel #timers .timmer_inner_block,
.header #timers .timmer_inner_block{
  text-align: center;
  padding: 9px 10px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  width: 92px !important;
  height: 74px !important;
  background:
    radial-gradient(120% 120% at 25% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease;
}

.topPanel #timers .timmer_inner_block:hover,
.header #timers .timmer_inner_block:hover{
  transform: translateY(-1px);
  border-color: rgba(208,154,38,.22);
  filter: brightness(112%);
}

.topPanel #timers .timmer_inner_block .title,
.header #timers .timmer_inner_block .title{
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  margin-bottom: 0px;
}

.topPanel #timers .timmer_inner_block .count,
.header #timers .timmer_inner_block .count{
  display: block;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.96);
  line-height: 0.8;
}

/* Responsive: 2 columns on smaller widths */
@media (max-width: 1200px){
  .topPanel #timers #timer_div_time,
  .header #timers #timer_div_time{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .topPanel #timers{
    max-width: 100%;
    padding: 14px 14px;
  }
  .topPanel #timers .timmer_inner_block .count{
    font-size: 18px;
  }
}

@media (max-width: 520px){
  .header #timers #timer_div_time{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .header #timers .timmer_inner_block{
    padding: 11px 9px;
    border-radius: 14px;
  }
  .header #timers .timmer_inner_block .title{
    font-size: 11px;
    letter-spacing: .16em;
  }
  .header #timers .timmer_inner_block .count{
    font-size: 19px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .topPanel #timers,
  .header #timers,
  .topPanel #timers:before,
  .header #timers:before,
  .topPanel #timers:after,
  .header #timers:after{
    animation: none !important;
  }
}
/* ==========================================================
   HOME: News Type Tabs (improves usability + visual)
   ========================================================== */
.homeNewsTabs{
  margin-top: 14px;
}

.homeNewsTabBar{
  position: relative;

  display:flex;
  align-items:center;
  gap: 8px;

  padding: 6px;
  border-radius: 999px;

  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(0,0,0,.26);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.homeNewsTabBar::-webkit-scrollbar{ display:none; }

.homeNewsTab{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;

  color: rgba(255,255,255,.74);

  font-weight: 900;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;

  padding: 11px 14px;
  border-radius: 999px;

  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}

.homeNewsTab:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);

  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

.homeNewsTab:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(var(--theme-color), .35),
    0 0 0 5px rgba(0,0,0,.55);
}

.homeNewsTab.is-active{
  color: rgba(16,17,19,.96);

  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%),
    linear-gradient(135deg,
      rgba(var(--theme-color), .98),
      rgba(var(--theme-color2, var(--theme-color)), .88)
    );

  border-color: rgba(var(--theme-color), .55);

  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.homeNewsPanes{ margin-top: 14px; }
.homeNewsPane{ display:none; }
.homeNewsPane.is-active{ display:block; }

@media (max-width: 700px){
  .homeNewsTabBar{ border-radius: 18px; padding: 6px; }
  .homeNewsTab{ padding: 10px 12px; font-size: 10.5px; }
}

/* Type "pill" inside the card meta */
.newsTypePill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .75px;
}
.homeNewsArea .newsCard-meta{
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 700px){
  .homeNewsTabBar{ border-radius: 16px; }
  .homeNewsTab{ padding: 9px 12px; }
}

/* ==========================================================
   FIX: style.css global button styles were overriding the
   Home News tab buttons (background !important, fixed width/height).
   These rules force the tabs to look like modern pills.
   ========================================================== */
.homeNewsTabs .homeNewsTabBar{
  padding: 6px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(0,0,0,.26) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 18px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.homeNewsTabs .homeNewsTabBar .homeNewsTab{
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 11px 14px !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;

  color: rgba(255,255,255,.74) !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  box-shadow: none !important;
  filter: none !important; /* cancels style.css hover filter */
  transform: none;
}

.homeNewsTabs .homeNewsTabBar .homeNewsTab:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  filter: none !important;
  transform: translateY(-1px);
}

.homeNewsTabs .homeNewsTabBar .homeNewsTab.is-active{
  color: rgba(16,17,19,.96) !important;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(208,154,38,.98), rgba(228,147,60,.92)) !important;
  border-color: rgba(208,154,38,.58) !important;
  box-shadow: 0 16px 55px rgba(0,0,0,.45) !important;
}

.homeNewsTabs .homeNewsTabBar .homeNewsTab:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(208,154,38,.35),
    0 0 0 5px rgba(0,0,0,.55) !important;
}

@media (max-width: 700px){
  .homeNewsTabs .homeNewsTabBar{ border-radius: 18px !important; }
  .homeNewsTabs .homeNewsTabBar .homeNewsTab{ padding: 10px 12px !important; font-size: 10.5px !important; }
}


/* HOME: SliderHome extra linked banners (Discord / Downloads) */
.sliderHome .homeSliderLinks{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sliderHome .homeSliderLink{
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  transform: translateZ(0);
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.sliderHome .homeSliderLink img{
  display:block;
  width:100%;
  height:auto;
}

.sliderHome .homeSliderLink:after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  opacity: .75;
  pointer-events:none;
}

.sliderHome .homeSliderLink:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  border-color: rgba(var(--theme-color), .35);
  box-shadow: 0 26px 95px rgba(0,0,0,.55);
}

@media (max-width: 800px){
  .sliderHome .homeSliderLinks{ grid-template-columns: 1fr; }
}