/* Imperium Online theme layer (loaded after style.css / realms.css / custom.css) */

@font-face {
  font-family: "Cinzel Decorative";
  src: url(../fonts/CinzelDecorative-Black.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url(../fonts/CinzelDecorative-Bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url(../fonts/Cinzel.ttf) format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --imp-gold: #f5c542;
  --imp-gold-light: #ffe9a8;
  --imp-gold-dark: #a8741a;
  --imp-crimson: #8e0f0f;
  --imp-blood: #3a0606;
  --imp-night: #160303;
  --imp-panel: linear-gradient(180deg, rgba(58, 6, 6, 0.92) 0%, rgba(26, 3, 3, 0.94) 100%);
  --imp-border: rgba(245, 197, 66, 0.55);
  --imp-glow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 32px rgba(180, 20, 20, 0.25);
}

body {
  background-color: #f0ecdc;
  background-image: url("../img/bg-imperium-clean.webp?v=1");
}

::selection {
  background: rgba(200, 30, 30, 0.75);
  color: #fff;
}

/* ---------- Headings ---------- */
.heading-title,
.files-item__label,
.kit-cards__name,
.servers-list__name,
.hidden-title,
.bonuses-heading,
.footer-copy__heading,
.footer-links__item__header {
  font-family: "Cinzel", var(--ff);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.heading-title {
  font-family: "Cinzel Decorative", "Cinzel", var(--ff);
  font-weight: 900;
  background: linear-gradient(180deg, #fff6cf 0%, #ffd66b 40%, #c98a1c 62%, #ffe08a 70%, #a8741a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 4, 4, 0.9)) drop-shadow(0 0 10px rgba(200, 30, 30, 0.45));
}

.servers-list__icon--alt {
  filter: hue-rotate(-35deg) saturate(1.3);
}
.dropdown-wrapper {
  background: var(--imp-panel);
  border: 1px solid var(--imp-border);
  box-shadow: var(--imp-glow);
}
.dropdown-wrapper a:hover {
  color: var(--imp-gold);
}

/* ---------- Home hero (home page only) ---------- */
.home {
  position: relative;
  z-index: 1;
}
.home-container {
  position: relative;
  z-index: 2;
}
.servers,
.kit,
.events,
.rates {
  position: relative;
  z-index: 3;
}
.home {
  overflow-x: clip;
}
.home-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(72vw, 1382px);
  pointer-events: none;
  z-index: 1;
}
.home-hero__char {
  position: absolute;
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.home-hero__char--male {
  left: max(-1.15%, -22px);
  top: min(5vw, 96px);
  width: min(51.4%, 987px);
}
.home-hero__char--female {
  right: min(4.79%, 92px);
  top: min(5.39vw, 103px);
  width: min(50.06%, 961px);
}
.home-logo {
  max-width: clamp(200px, 18vw, 350px);
}
@media (min-width: 768px) {
  .home-body {
    justify-content: flex-start;
    padding-top: clamp(120px, 11.8vw, 227px);
    min-height: max(940px, 100vh);
  }
}
.home-content {
  margin-top: clamp(12px, 5.6vw, 108px);
}
.home-play {
  margin-top: clamp(0px, 1vw, 19px);
}
.home-socials {
  margin-top: clamp(0px, 0.5vw, 10px);
}
@media (max-width: 1024px) {
  .home-logo { max-width: 150px; }
}
@media (max-width: 767px) {
  .home-hero { display: none; }
}

/* ---------- Panels / boxes (all inner pages) ---------- */
.files-box,
.info-panel.info-panel-full,
section.card,
.card,
.bonuses-container,
.events-discord__box,
.rates-info {
  background: var(--imp-panel) !important;
  border: 1px solid var(--imp-border) !important;
  box-shadow: var(--imp-glow), inset 0 1px 0 rgba(255, 230, 160, 0.12), inset 0 0 60px rgba(120, 10, 10, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.files-box,
.info-panel.info-panel-full {
  position: relative;
}
.files-box::before,
.info-panel.info-panel-full::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffe08a, transparent);
  pointer-events: none;
}
.box {
  border-color: rgba(245, 197, 66, 0.5);
}
.files-item__label {
  color: #fff3d6;
}
.files-box p,
.text p {
  color: #e9d6c0;
}
.card-header {
  background: linear-gradient(180deg, rgba(142, 15, 15, 0.55), rgba(58, 6, 6, 0.2));
  border-bottom: 1px solid rgba(245, 197, 66, 0.35);
  color: var(--imp-gold-light);
  font-family: "Cinzel", var(--ff);
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Sidebar (account area) */
.info-nav {
  background: var(--imp-panel) !important;
  border: 1px solid var(--imp-border) !important;
  box-shadow: var(--imp-glow);
}
.list-group-item {
  border-color: rgba(245, 197, 66, 0.18) !important;
}
.list-group-item-action:hover,
.list-group-item.active {
  background: linear-gradient(90deg, rgba(142, 15, 15, 0.7), rgba(142, 15, 15, 0.1)) !important;
  color: var(--imp-gold-light) !important;
}

/* ---------- Forms ---------- */
.form-label {
  color: #f1dcb8;
  font-family: "Cinzel", var(--ff);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.form-control,
.form-select {
  color: #f5ead6 !important;
  background-color: rgba(10, 1, 1, 0.65) !important;
  border: 1px solid rgba(245, 197, 66, 0.3) !important;
  border-radius: 8px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--imp-gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.18), 0 0 18px rgba(200, 30, 30, 0.35) !important;
}
.form-check-input:checked {
  background-color: var(--imp-crimson);
  border-color: var(--imp-gold);
}
.link-effect,
.lnk {
  color: var(--imp-gold) !important;
}

/* ---------- Tables / ranking ---------- */
.table thead,
.rates-table thead {
  background: linear-gradient(180deg, rgba(142, 15, 15, 0.8), rgba(58, 6, 6, 0.8)) !important;
}
.table thead th,
.rates-table th {
  color: var(--imp-gold) !important;
  font-family: "Cinzel", var(--ff);
  letter-spacing: 0.05em;
}
.rates-table tbody tr:nth-child(odd) { background-color: rgba(70, 8, 8, 0.85); }
.rates-table tbody tr:nth-child(even) { background-color: rgba(40, 4, 4, 0.85); }
.rates-table tbody tr:nth-child(1) { background: linear-gradient(90deg, #a8741a, #6b1010); }

/* ---------- Kits / servers ---------- */
.kit-cards__item {
  transition: transform 300ms ease, filter 300ms ease;
}
.kit-cards__item:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 0 18px rgba(245, 197, 66, 0.45));
}
.servers-list__item {
  transition: filter 250ms ease;
}
.servers-list__item:hover {
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(245, 197, 66, 0.4));
}

/* ---------- Footer ---------- */
.footer {
  background: linear-gradient(180deg, #2a0404 0%, #120202 100%) !important;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--imp-gold), transparent) 1;
  position: relative;
}
.footer-copy-img {
  max-width: 170px;
  flex: 0 0 170px;
  padding-right: 20px;
}
.footer-copy-img img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.footer-copy__heading {
  color: var(--imp-gold);
}
.footer-links__item__header {
  color: var(--imp-gold-light);
}
.footer-links__item:hover {
  color: var(--imp-gold);
}

@media (min-width: 1025px) {
  .nav-list { gap: clamp(14px, 1.2vw, 30px); }
  .header-aside { margin-left: 18px; }
  .nav-link { white-space: nowrap; }
}

/* ---------- CMS pages (About Us etc.) ---------- */
.text-box .lang-block p {
  margin: 0 0 1em;
  line-height: 1.75;
}
.text-box .lang-block h3 {
  font-family: "Cinzel", serif;
  color: var(--imp-gold);
  font-size: 1.2em;
  margin: 1.8em 0 0.6em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.text-box .lang-block h4 {
  color: var(--imp-gold);
  font-size: 1.05em;
  margin: 1.2em 0 0.5em;
}
.text-box .lang-block ul {
  margin: 0 0 1em;
  padding-left: 1.6em;
  list-style: disc;
}
.text-box .lang-block li {
  color: rgb(233, 214, 192);
  font-family: Intro, sans-serif;
  font-size: 14.4px;
  line-height: 1.7;
  margin-bottom: 0.2em;
}
.text-box .lang-block li::marker {
  color: var(--imp-gold);
}
.text-box .lang-ar ul {
  padding-left: 0;
  padding-right: 1.6em;
}
.text-box .page-updated {
  opacity: 0.75;
  font-size: 0.9em;
}
.text-box .lang-ar {
  direction: rtl;
  text-align: right;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 1.05em;
}
.text-box .about-quote,
.text-box .about-welcome {
  text-align: center;
  font-family: "Cinzel", serif;
  color: var(--imp-gold);
  font-size: 1.1em;
  margin-top: 1.6em;
}
.text-box .lang-ar .about-quote,
.text-box .lang-ar .about-welcome {
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c62828, #6b0e0e);
  border: 2px solid #1a0505;
}

@media (max-width: 1024px) {
  .home-logo { max-width: 340px; }
  .home-title { font-size: 20px; }
}