/* =========================================================
   WARMU — FULL THEME REPLACEMENT FOR WEBENGINE CMS 1.2.5+
   Load AFTER bootstrap.css, BEFORE/INSTEAD of style.css /
   template.css / override.css theme rules. This file is the
   primary visual layer for the new index.php + sidebar files.

   It also recolors generic Bootstrap primitives (.card, .btn,
   .form-control, tables, dropdowns, DataTables controls) so
   whatever WebEngine core module gets injected into
   #module-content (rankings, downloads, register, forum...)
   still reads as part of the same dark/gold WarMu theme,
   even though we don't control that module's markup.
   ========================================================= */

:root {
  --wm-void: #0a0a0c;
  --wm-panel: #16151a;
  --wm-panel-alt: #1c1a20;
  --wm-gold: #c9a24b;
  --wm-gold-dim: rgba(201, 162, 75, 0.35);
  --wm-red: #8a1620;
  --wm-red-bright: #c92a2a;
  --wm-bone: #eae6df;
  --wm-dim: #9a958f;
  --wm-online: #4caf6a;
}

/* ---------- Reset old theme decorations that don't belong here ---------- */
.hero-section .star-area,
.hero-section .rotate-award {
  display: none !important;
}
.card-area, .new-sidebar-panel, .login-panel, .sidebar-banner-box {
  transform: none !important; /* kill the old "tilt" 3D hover effect */
}

/* ---------- Base ---------- */
* {
  font-size: inherit !important;
  cursor: auto !important; /* keep it usable; remove if you want the custom .cur cursor back */
}
html, body {
  background-color: var(--wm-void) !important;
}
body {
  font-family: 'Poppins', sans-serif;
  color: var(--wm-bone);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}
a { text-decoration: none; }

/* Vignette over the site background image (bg-top/bg-bot, untouched) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(138, 22, 32, 0.10), transparent 55%),
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.65) 100%);
}
.container, header, footer, section { position: relative; z-index: 1; }

/* The old theme's utility classes assumed a much taller, more spaced-out
   landing layout (.container had min-height:125vh, .pb-120 added 120px of
   bottom padding). That's what caused the huge empty black gap under the
   nav. We don't use that spacing model, so neutralize it here. */
.hero-section.pb-120 { padding-bottom: 30px !important; }
.hero-section .container { min-height: unset !important; padding-bottom: 0 !important; }

/* Widen the overall content area a bit — the old template capped
   .container at 980px max-width, which made the center column
   (news/social panel) look thin next to the two sidebars. */
@media (min-width: 1200px) { .hero-section .container { max-width: 1180px !important; } }
@media (min-width: 1400px) { .hero-section .container { max-width: 1180px !important; } }

/* Keep the left/right sidebars at their original fixed width, and let
   ONLY the center column grow into the extra space from the wider
   container above. */
@media (min-width: 1200px) {
  .main-wrapper { display: flex; flex-wrap: nowrap; }
  .wm-col-side {
    flex: 0 0 255px;
    max-width: 255px;
    width: 255px;
  }
  .wm-col-center {
    flex: 1 1 auto;
    max-width: none;
    width: auto;
  }
}

/* ---------- WarMu building blocks (used by our new index.php / sidebar markup) ---------- */
.wm-panel {
  position: relative;
  background: linear-gradient(180deg, var(--wm-panel) 0%, #121116 100%);
  border: 1px solid var(--wm-gold-dim);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}
/* Banner images (register/download) are wrapped in an <a>; anchors are
   inline by default so they don't stretch to the panel's full width,
   which left the image sitting narrower than its container (black bars
   left/right). Force the link + image to fill the panel completely. */
.wm-panel > a {
  display: block;
  width: 100%;
  line-height: 0;
}
.wm-panel > a img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none !important;
}
.wm-panel-title {
  padding: 8px 12px;
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  font-weight: 800;
  color: var(--wm-gold);
  background: linear-gradient(90deg, rgba(138, 22, 32, 0.35), rgba(10, 10, 12, 0.4));
  border-bottom: 1px solid var(--wm-gold-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wm-panel-body { padding: 12px; }

.wm-btn {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 11px !important;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 4px;
  border: 1px solid var(--wm-gold);
  transition: all 0.2s ease;
  cursor: pointer;
  color: var(--wm-bone);
}
.wm-btn-primary {
  background: linear-gradient(135deg, var(--wm-red) 0%, var(--wm-red-bright) 100%);
}
.wm-btn-primary:hover {
  box-shadow: 0 0 18px rgba(201, 42, 42, 0.55);
  transform: translateY(-1px);
  color: var(--wm-bone);
}
.wm-btn-outline {
  background: transparent;
  color: var(--wm-gold) !important;
}
.wm-btn-outline:hover {
  background: rgba(201, 162, 75, 0.1);
  color: var(--wm-gold) !important;
}
.wm-btn-block { width: 100%; }

.wm-input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-bone) !important;
  font-size: 13px !important;
}
.wm-input:focus {
  border-color: var(--wm-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.15) !important;
}
.wm-input::placeholder { color: var(--wm-dim); }
.wm-input-group-text {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-gold) !important;
}

.wm-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wm-gold), transparent);
  margin: 10px 0;
}

.wm-text-gold { color: var(--wm-gold) !important; }
.wm-text-dim { color: var(--wm-dim) !important; }

/* Rank table */
.wm-rank-table { width: 100%; border-collapse: collapse; font-size: 11px !important; table-layout: fixed; }
.wm-rank-table th {
  font-family: 'Cinzel', serif;
  color: var(--wm-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px !important;
  border-bottom: 1px solid var(--wm-gold-dim);
  padding: 6px 8px;
  text-align: left;
}
.wm-rank-table td {
  padding: 6px 4px;
  color: var(--wm-bone);
  overflow: hidden;
}
.wm-rank-table td.wm-name-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* forces the cell to respect table-layout:fixed width */
  font-size: 11px !important;
}
.wm-rank-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.wm-rank-table tr:hover td { background: rgba(201,162,75,0.06); }
.wm-rank-table img {
  border-radius: 4px;
  border: 1px solid var(--wm-gold-dim);
  background: rgba(0,0,0,.4);
  display: block;
}

/* Rank number badge (left of each row) */
.wm-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--wm-red) 0%, var(--wm-red-bright) 100%);
  color: var(--wm-bone);
  font-family: 'Cinzel', serif;
  font-size: 9px !important;
  font-weight: 800;
  box-shadow: 0 0 6px rgba(201,42,42,.4);
  flex-shrink: 0;
}

/* Score pill (right of each row) */
.wm-score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--wm-gold-dim);
  border-radius: 999px;
  padding: 2px 7px;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 10px !important;
  color: var(--wm-gold);
  white-space: nowrap;
  max-width: 100%;
}
.wm-score-pill small {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 7px !important;
  color: var(--wm-dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Rankings tabs */
.wm-tabs { display: flex; background: rgba(0,0,0,.35); border-bottom: 1px solid var(--wm-gold-dim); }
.wm-tab-btn {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(201,162,75,.15);
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wm-dim);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.wm-tab-btn:last-child { border-right: none; }
.wm-tab-btn:hover { color: var(--wm-bone); background: rgba(201,162,75,.06); }
.wm-tab-btn.active {
  color: var(--wm-gold) !important;
  background: linear-gradient(180deg, rgba(138,22,32,.3), transparent) !important;
}
.wm-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 2px;
  background: var(--wm-red-bright);
  box-shadow: 0 0 8px var(--wm-red-bright);
}

/* Connected users widget */
.wm-connected-box {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid var(--wm-gold-dim);
  background: rgba(10, 10, 12, 0.72);
  min-width: 220px;
  border-radius: 4px;
  overflow: hidden;
}
.wm-connected-row {
  padding: 5px 12px;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.wm-connected-row-red {
  color: #ff8f8f;
  background: linear-gradient(90deg, rgba(138, 22, 32, 0.55), rgba(138, 22, 32, 0.15));
  border-bottom: 1px solid var(--wm-gold-dim);
}
.wm-connected-row-red b { color: var(--wm-bone); }
.wm-connected-row-gold {
  color: var(--wm-gold);
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.18), transparent);
}
.wm-connected-row-gold b { color: var(--wm-bone); }

.wm-online-bar {
  width: 100%;
  height: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wm-gold);
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(201,162,75,.25);
  background-image: url('../img/online_progress_bar.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Dark mask covering the "unfilled" tail of the gradient image, pinned to
   the right edge — as online players grow, the mask shrinks and reveals
   more of the green->yellow->red gradient from the left. */
.wm-online-bar-mask {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: rgba(0,0,0,.88);
  transition: width 2s ease-in-out;
}

/* Nav — templateBuildNavbar() prints each link with inline
   style="width:100%" plus a trailing <br><br>. We can't edit that
   PHP function (it's core WebEngine), so we neutralize both here:
   force the anchors into an inline row and hide the manual <br>s. */
.wm-nav {
  text-align: center;
  display: block;
  padding: 6px 0;
}
.wm-nav br { display: none !important; }
.wm-nav a,
.wm-nav a.btn-gold-press {
  display: inline-flex !important;
  width: auto !important;
  height: 34px !important;
  align-items: center;
  padding: 0 18px !important;
  margin: 4px 4px !important;
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wm-bone) !important;
  text-transform: uppercase;
  vertical-align: middle;
}
.wm-nav a:hover { color: var(--wm-gold) !important; }
/* Language dropdown sits in the same row */
.wm-nav .dropdown { display: inline-flex !important; vertical-align: middle; margin: 4px 4px; }
.wm-nav .dropdown-toggle { width: auto !important; height: 34px !important; }

/* Language selector — pinned top-left corner (moved out of the centered
   nav row). Also fixes the dropdown-menu, which WebEngine's core
   templateLanguageSelector() renders with an inline style="width:100%"
   that otherwise stretches to the whole content column. */
.wm-lang-corner {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
}
.wm-lang-corner .dropdown-toggle {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  background: rgba(10,10,12,.75) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-gold) !important;
}
.wm-lang-corner .dropdown-menu {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-gold-dim) !important;
}
.wm-lang-corner .dropdown-menu li a {
  font-size: 12px !important;
  padding: 6px 10px !important;
}

@media (max-width: 767px) {
  .wm-lang-corner { top: 8px; left: 8px; }
}

/* News ticker */
.news-ticker-container {
  background-color: #08080a !important;
  border-top: 1px solid var(--wm-gold-dim) !important;
  border-bottom: 1px solid var(--wm-gold-dim) !important;
}
.news-ticker {
  color: var(--wm-gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 0.05em;
}

/* Center module container */
.wm-center-box {
  background: linear-gradient(180deg, rgba(22,21,26,.92) 0%, rgba(10,10,12,.95) 100%);
  border: 1px solid var(--wm-gold-dim);
  border-radius: 6px;
  min-height: 350px;
}

/* Footer */
.wm-footer {
  border-top: 1px solid var(--wm-gold-dim);
  background: #08080a;
  padding: 40px 0 20px;
}
.wm-footer a { color: var(--wm-gold) !important; }
.wm-footer a:hover { text-shadow: 0 0 8px rgba(201,162,75,.6); }
.wm-footer-bottom {
  border-top: 1px solid var(--wm-gold-dim);
  padding: 14px 0;
  text-align: center;
  font-size: 11px !important;
  color: var(--wm-dim);
}

/* ---------- Recolor generic Bootstrap so dynamic modules (loadModule output) blend in ---------- */
.card, .card-area {
  background: linear-gradient(180deg, rgba(22,21,26,.92) 0%, rgba(10,10,12,.95) 100%) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-bone) !important;
  border-radius: 6px !important;
}
.card-header {
  background: linear-gradient(90deg, rgba(138,22,32,.35), rgba(10,10,12,.4)) !important;
  color: var(--wm-gold) !important;
  border-bottom: 1px solid var(--wm-gold-dim) !important;
}
.btn, .btn-success, .btn-primary, .btn-outline-primary {
  background: linear-gradient(135deg, var(--wm-red) 0%, var(--wm-red-bright) 100%) !important;
  border: 1px solid var(--wm-gold) !important;
  color: var(--wm-bone) !important;
}
.btn:hover { box-shadow: 0 0 14px rgba(201,42,42,.5) !important; }
.form-control, .input-group-text {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-bone) !important;
}
.form-control:focus {
  border-color: var(--wm-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,75,.15) !important;
  background: rgba(0,0,0,.35) !important;
  color: var(--wm-bone) !important;
}
table { color: var(--wm-bone); }
table thead { color: var(--wm-gold) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,.03) !important;
  color: var(--wm-bone) !important;
}
.dropdown-menu {
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-gold-dim) !important;
}
.dropdown-item { color: var(--wm-bone) !important; }
.dropdown-item:hover { background: rgba(201,162,75,.1) !important; color: var(--wm-gold) !important; }

/* DataTables (used by full Rankings page, #RankingGeneral) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-bone) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--wm-dim) !important;
}
.paginate_button {
  color: var(--wm-gold) !important;
}
.paginate_button.current {
  background: var(--wm-red-bright) !important;
  border-color: var(--wm-gold) !important;
  color: var(--wm-bone) !important;
}

@media (max-width: 991px) {
  .wm-connected-box, .wm-nav { font-size: 10px !important; }
}

/* =========================================================
   RANKING MODULE PAGES (resets.php, guilds.php, killers.php,
   online.php — loaded via $handler->loadModule() inside
   #module-content). These are core WebEngine module files
   that print their own HTML with fixed class names; we only
   restyle those classes here, the PHP/data logic is untouched.
   ========================================================= */

.page-title {
  font-family: 'Cinzel', serif;
  font-size: 18px !important;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wm-gold);
  padding: 10px 4px 14px;
  border-bottom: 1px solid var(--wm-gold-dim);
  margin-bottom: 16px;
}
.page-title i { color: var(--wm-red-bright); margin-right: 6px; }

/* Ranking table header (was Bootstrap's bright blue .bg-primary) */
.general-rank thead.bg-primary,
.general-rank thead.bg-primary th,
.general-rank thead.bg-primary td {
  background: linear-gradient(90deg, rgba(138,22,32,.45), rgba(10,10,12,.5)) !important;
  color: var(--wm-gold) !important;
  border-bottom: 1px solid var(--wm-gold-dim) !important;
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.general-rank { font-size: 12px !important; }
.general-rank tbody tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }
.general-rank tbody tr:hover td { background: rgba(201,162,75,.06) !important; }
.general-rank td { border-color: rgba(201,162,75,.1) !important; color: var(--wm-bone) !important; }

.rankings-table-place {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  color: var(--wm-gold) !important;
}
.rankings-table-place i { color: var(--wm-red-bright); }

/* Character/class avatar in ranking rows */
.rankings-class-image {
  border: 2px solid var(--wm-gold-dim) !important;
  box-shadow: 0 0 6px rgba(0,0,0,.6);
}
.rankings-class-image.default-char-online {
  border-color: var(--wm-online) !important;
  box-shadow: 0 0 10px rgba(76,175,106,.5);
}
.rankings-class-image.default-char-offline {
  border-color: var(--wm-red-bright) !important;
  opacity: .75;
}
.online-status-indicator { width: 14px; height: 14px; vertical-align: middle; margin-left: 4px; }

/* "last updated" note under the table */
.alert-primary {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-dim) !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

/* $Rankings->rankingsMenu() / rankingsFilterMenu() tabs — generic
   Bootstrap buttons/pills, already partly covered by the global
   .btn override above; this tightens spacing/size for this context. */
.page-title + * .btn,
.page-title ~ .btn-group .btn {
  font-size: 11px !important;
  padding: 6px 12px !important;
}

/* rankingsMenu() output: <div class="rankings_menu"><a>...</a></div>
   Force even wrapping so items like "Top Blood Castle" / "Top Devil
   Square" (longer labels) don't awkwardly drop to their own row. */
.rankings_menu {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
.rankings_menu a {
  flex: 0 1 auto;
  white-space: normal;
  text-align: center;
  min-width: 100px;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  background: rgba(0,0,0,.4) !important;
  border: 1px solid var(--wm-gold-dim) !important;
  color: var(--wm-bone) !important;
  font-family: 'Cinzel', serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none !important;
}
.rankings_menu a:hover {
  border-color: var(--wm-gold) !important;
  color: var(--wm-gold) !important;
}
.rankings_menu a.active {
  background: linear-gradient(135deg, var(--wm-red) 0%, var(--wm-red-bright) 100%) !important;
  border-color: var(--wm-gold) !important;
  color: var(--wm-bone) !important;
  box-shadow: 0 0 10px rgba(201,42,42,.4);
}