/* General styles */
:root {
  --blood-red: #8b0000;
  --dark-red: #4a0000;
  --crimson: #dc143c;
  --ember: #c41e3a;
  --shadow-black: #0d0d0d;
  --abyss: #1a1a1a;
  --charcoal: #2d2d2d;
  --bone: #e8e4d9;
  --mist: #9a9a9a;
}

body {
  background-color: #000;
  background-image: url("/assets/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #eee;
  font-family: "Segoe UI", sans-serif;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

/**
 * .game-overlay — full-viewport dark overlay that sits above the body
 * background image. Each page customises the gradient via
 * body.game-body .game-overlay { background: ... } in its own <style>.
 * The page container must be position: relative so it renders above this.
 */
.game-overlay {
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 */
  z-index: 0;
  pointer-events: none;
}

/* Every page container that follows a .game-overlay sits above it */
body.game-body > .container,
body.game-body > .container-fluid {
  position: relative;
  z-index: 1;
}

/* When the navbar lives in its own separate container (e.g. alchemist, blacksmith,
   enchant, oracle), that container must paint above the content container so the
   dropdown menu isn't buried behind sibling containers at the same z-index. */
body.game-body > .container:has(.rpg-navbar),
body.game-body > .container-fluid:has(.rpg-navbar) {
  z-index: 2;
}

.btn-img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

/* Login Form Styles */
.login-card {
  background-color: #1c1c1c;
  border: 2px solid #333;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.925);
}

/* Button and Input focus */
.btn-login {
  background-color: #ff4040;
  color: white;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  border: none;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.9);
}

.btn-login:hover {
  background-color: #cc3333;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.9);
}

/* Website hero banner */
.banner {
  background-image: url("/assets/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 10px;
  transition: box-shadow 0.3s ease;
}

.banner-character-image {
  border: 3px solid #333;
}

.banner-link {
  text-decoration: none;
  transition: box-shadow 0.3s ease;
}

.banner-link:hover {
  text-shadow: 4px 4px 4px var(--blood-red);
}

.card-glow {
  transition: box-shadow 0.3s ease;
}

.card-glow:hover {
  box-shadow: 0 0 30px rgba(255, 0, 0, 1);
}

.card-grow {
  transition: transform 0.5s ease;
}

.card-grow:hover {
  transform: scale(1.025);
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.shake-text {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
  text-align: center;
}

/* Resource Icon Styles */
.resource-icon {
  height: 32px;
  width: 32px;
  border: 0.5px solid #555;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: #292525;
  transition: transform 0.1s ease;
}

.resource-icon:hover {
  transform: scale(1.5);
}

.resource-icon-inner {
  max-width: 300px;
  background: #1a1a1a;
  color: #000000;
  border: 1px solid #666;
  border-radius: 8px;
  font-family: "Trebuchet MS", sans-serif;
  text-align: left;
  padding: 10px;
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  height: 75px;
  width: 75px;
}

.resource-item-name {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 5px;
  color: #000000;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  letter-spacing: 0.5px;
}

.resource-description {
  font-weight: bold;
  font-size: 0.75em;
  margin-bottom: 4px;
  color: #000000;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  letter-spacing: 0.5px;
}

/* Item tooltip styles */
.item-icon {
  height: 40px;
  width: 40px;
  border: 0.5px solid #555;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: #292525;
  transition: transform 0.1s ease;
  margin: 2px;
}

.item-icon:hover {
  transform: scale(1.5);
}

.item-icon-inner {
  max-width: 300px;
  background-color: #1a1a1a;
  color: #000000;
  border: 1px solid #666;
  border-radius: 8px;
  text-align: left;
  padding: 10px;
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  height: 75px;
  width: 75px;
}

.item-item-name {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 5px;
  color: #000000;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  letter-spacing: 0.5px;
}

.item-description {
  font-weight: bold;
  font-size: 0.75em;
  margin-bottom: 4px;
  color: #000000;
  letter-spacing: 0.5px;
}

/* Item Styles Comments indicate rarity levels from 1 (common) to 5 (legendary) */
.item-rarity-1 {
  border: 2px solid rgb(116, 110, 110);
}

.item-rarity-2 {
  border: 2px solid rgb(0, 255, 0);
}

.item-rarity-3 {
  border: 2px solid rgb(6, 109, 226);
}

.item-rarity-4 {
  border: 2px solid rgb(152, 25, 255);
}

.item-rarity-5 {
  border: 2px solid rgb(247, 169, 1);
}

/* Equipment Styles*/
.equipment-icon {
  height: 50px;
  width: 50px;
  transition: transform 0.1s ease;
  margin: 3px;
}

.equipment-icon:hover {
  transform: scale(1.5);
}

.equipment-icon-inner {
  max-width: 300px;
  background: #1a1a1a;
  color: #000000;
  border: 1px solid #666;
  border-radius: 8px;
  font-family: "Trebuchet MS", sans-serif;
  text-align: left;
  padding: 10px;
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  height: 75px;
  width: 75px;
}

.equipment-name {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 5px;
  color: #000000;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  letter-spacing: 0.5px;
}

.equipment-description {
  font-weight: bold;
  font-size: 0.75em;
  margin-bottom: 4px;
  color: #000000;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 215, 0, 0.5);
  letter-spacing: 0.5px;
}

.equipment-rarity-1 {
  display: inline-block;
  filter: drop-shadow(4px 1px 2px rgba(255, 255, 255, 0.932));
}

.equipment-rarity-2 {
  display: inline-block;
  filter: drop-shadow(4px 1px 2px rgb(0, 255, 0));
}

.equipment-rarity-3 {
  display: inline-block;
  filter: drop-shadow(4px 1px 2px rgba(33, 47, 243, 0.932));
}

.equipment-rarity-4 {
  display: inline-block;
  filter: drop-shadow(4px 1px 2px rgba(152, 25, 255, 0.932));
}

.equipment-rarity-5 {
  display: inline-block;
  filter: drop-shadow(4px 3px 2px rgba(247, 142, 4, 0.932));
}

/* Attributes Styles*/
.attribute-icon {
  height: 30px;
  width: 30px;
  border-radius: 75%;
  transition: transform 0.1s ease;
  transition: box-shadow 0.3s ease;
}

.attribute-icon:hover {
  transform: scale(1.5);
  box-shadow: 0 0 15px rgba(204, 0, 255, 0.8);
}

/* Monster Rarity Styles Comments indicate rarity levels from 1 (common) to 5 (legendary) */
.monster-rarity-1 {
  display: inline-block;
  filter: drop-shadow(2px 4px 2px rgba(255, 255, 255, 0.932));
}
.monster-rarity-2 {
  display: inline-block;
  filter: drop-shadow(2px 4px 2px rgb(0, 255, 0));
}
.monster-rarity-3 {
  display: inline-block;
  filter: drop-shadow(2px 4px 2px rgba(33, 47, 243, 0.932));
}
.monster-rarity-4 {
  display: inline-block;
  filter: drop-shadow(2px 4px 2px rgba(152, 25, 255, 0.932));
}
.monster-rarity-5 {
  display: inline-block;
  filter: drop-shadow(2px 4px 2px rgba(247, 142, 4, 0.932));
}

/* Dark Fantasy RPG Button Styles */

/* Style 1: Bloodbound Button */
.rpg-btn-blood {
  background: linear-gradient(145deg, #4b0f0f, #7a0c0c);
  border: 2px solid #3a0000;
  color: #f5dada;
  padding: 10px 20px;
  font-family: "Cinzel", serif;
  text-shadow: 1px 1px 3px #000;
  border-radius: 6px;
  transition: 0.2s ease-in-out;
}
.rpg-btn-blood:hover {
  background: linear-gradient(145deg, #7a0c0c, #a80f0f);
  transform: scale(1.05);
  box-shadow: 0 0 10px #ff2e2e;
}
.rpg-btn-blood:active {
  transform: scale(0.95);
  box-shadow: 0 0 5px #800000 inset;
}

/* Style 2: Arcane Mystic Button */
.rpg-btn-arcane {
  background: linear-gradient(145deg, #1b1b29, #2e2e4f);
  border: 2px solid #6a5acd;
  color: #c7c4ff;
  padding: 10px 22px;
  font-family: "Spectral", serif;
  letter-spacing: 1px;
  border-radius: 8px;
  transition: 0.25s ease;
}
.rpg-btn-arcane:hover {
  box-shadow:
    0 0 12px #6a5acd,
    inset 0 0 6px #6a5acd;
  transform: translateY(-2px);
}
.rpg-btn-arcane:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 10px #3d348b;
}

/* Style 3: Druid Nature Button */
.rpg-btn-druid {
  background: linear-gradient(145deg, #2f4f2f, #3b6b3b);
  border: 2px solid #1e331e;
  color: #e0ffe0;
  padding: 12px 26px;
  font-family: "Alegreya", serif;
  border-radius: 10px;
  transition: 0.25s;
}
.rpg-btn-druid:hover {
  background: linear-gradient(145deg, #3b6b3b, #4d8f4d);
  box-shadow: 0 0 10px #4d8f4d;
  transform: scale(1.03);
}
.rpg-btn-druid:active {
  transform: scale(0.94);
  filter: brightness(0.9);
}

/* Style 4: Iron Warrior Button */
.rpg-btn-iron {
  background: linear-gradient(145deg, #3b3b3b, #2a2a2a);
  border: 2px solid #5a5a5a;
  color: #e6e6e6;
  padding: 10px 25px;
  font-family: "Cinzel", serif;
  letter-spacing: 1.5px;
  border-radius: 4px;
  text-transform: uppercase;
  transition: 0.2s ease-in-out;
}
.rpg-btn-iron:hover {
  background: #4b4b4b;
  box-shadow: 0 0 12px #8e8e8e;
  transform: translateY(-2px);
}
.rpg-btn-iron:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 10px #000;
}

/* Style 5: Eldritch Corruption Button */
.rpg-btn-eldritch {
  background: linear-gradient(145deg, #1a0026, #32004b);
  border: 2px solid #6b00bf;
  color: #e7d0ff;
  padding: 11px 28px;
  font-family: "Uncial Antiqua", serif;
  border-radius: 12px;
  transition: 0.25s ease;
}
.rpg-btn-eldritch:hover {
  box-shadow: 0 0 15px #9d4dff;
  transform: rotate(-1deg) scale(1.04);
}
.rpg-btn-eldritch:active {
  transform: rotate(1deg) scale(0.96);
  box-shadow: inset 0 0 10px #4d007a;
}

/* Global smoother transitions for all RPG buttons */
.rpg-btn-blood,
.rpg-btn-arcane,
.rpg-btn-druid,
.rpg-btn-iron,
.rpg-btn-eldritch {
  transition: all 0.35s ease-in-out;
}

/* Style 6: Forge Spark Button */
.rpg-btn-forge {
  position: relative;
  background: linear-gradient(145deg, #4a3a24, #6b4b2b);
  border: 2px solid #2d1e10;
  color: #ffe2b0;
  padding: 12px 30px;
  font-family: "Cinzel", serif;
  border-radius: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s ease-in-out;
}
.rpg-btn-forge:hover {
  background: linear-gradient(145deg, #6b4b2b, #8a6338);
  box-shadow: 0 0 15px #ffb347;
}

/* Spark effect */
.rpg-btn-forge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle,
    #ffea8a 0%,
    #ffae00 60%,
    transparent 100%
  );
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%);
}
.rpg-btn-forge:focus::after {
  animation: forge-spark 0.45s ease-out forwards;
}

@keyframes forge-spark {
  0% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
  40% {
    opacity: 1;
    transform: translateY(-50%) translateX(40px) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(70px) scale(0.5);
  }
}

/* === Forge Button Animation Fix  === */

/* Remove old :focus trigger */
.rpg-btn-forge:focus::after {
  animation: none;
}

/* New class that JS will toggle to retrigger animation */
.rpg-btn-forge.spark::after {
  animation: forge-spark 0.45s ease-out forwards;
}

/* Tips Card Styles */

.tips-card {
  backdrop-filter: blur(8px);
  background: rgba(25, 25, 30, 0.7);
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(0, 150, 255, 0.25),
    inset 0 0 22px rgba(0, 60, 120, 0.35);
  animation: floatCard 7s ease-in-out infinite;
}

.tips-header {
  background: linear-gradient(
    90deg,
    rgba(0, 120, 255, 0.35),
    rgba(0, 200, 180, 0.35)
  );
  border: none;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.tips-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  animation: headerShine 5s linear infinite;
}

.tips-body {
  padding: 18px 20px 22px;
}

.tip-item {
  position: relative;
  padding: 10px 14px 10px 42px;
  margin: 10px 0;
  background: rgba(0, 40, 70, 0.35);
  border: 1px solid rgba(0, 140, 255, 0.35);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3em;
  transition: 0.3s;
}

.tip-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(0, 160, 255, 0.45);
  background: rgba(0, 60, 110, 0.55);
}

.tip-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #5cc9ff;
  text-shadow: 0 0 6px #009dff;
}

.animated-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(0, 140, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(circle at 80% 70%, rgba(0, 200, 170, 0.25), transparent 60%);
  opacity: 0.35;
  animation: pulseBG 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulseBG {
  0%,
  100% {
    filter: hue-rotate(0deg);
    opacity: 0.35;
  }

  50% {
    filter: hue-rotate(40deg);
    opacity: 0.55;
  }
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes headerShine {
  0% {
    left: -40%;
  }

  100% {
    left: 140%;
  }
}

.toggle-tips {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
  transition: 0.25s;
}

.toggle-tips:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Only changes the main menu title */
.header-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow:
    0 0 16px rgba(179, 124, 251, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.9);
}

.status-indicator-online {
  background-color: #0ca400;
  border: 1px solid rgba(134, 255, 81, 0.8);
  border-radius: 50%;
  box-shadow:
    inset 0 20px 4px 1.2px rgba(0, 0, 0, 0.25),
    0 0 10px 3px #3bff0d;
  content: "";
  display: inline-block;
  height: 16px;
  margin-right: 9px;
  width: 16px;
}

.status-indicator-offline {
  background-color: #6c6c6c;
  border: 1px solid rgba(200, 200, 200, 0.6);
  border-radius: 50%;
  box-shadow:
    inset 0 20px 4px 1.2px rgba(0, 0, 0, 0.25),
    0 0 8px 2px #a9a9a9;
  content: "";
  display: inline-block;
  height: 16px;
  margin-right: 9px;
  width: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   EXTRACTED INLINE STYLES — auto-migrated from PHP page files
   ═══════════════════════════════════════════════════════════════ */

/* ═══ navbar.php ═══ */

/* ============================
       RPG Navbar Styles
       All rules scoped to .rpg-navbar to avoid bleeding into page components.
       ============================ */
.rpg-navbar {
  background: linear-gradient(
    180deg,
    rgba(25, 25, 30, 0.95) 0%,
    rgba(15, 15, 20, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
}

/* Brand Logo */
.rpg-navbar .navbar-brand {
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Links — scoped so they don't affect tabs/pills elsewhere on the page */
.rpg-navbar .nav-link {
  color: #bbb !important;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 8px 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.rpg-navbar .nav-link:hover,
.rpg-navbar .nav-link:focus,
.rpg-navbar .nav-link.show {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.rpg-navbar .nav-link.disabled {
  color: #555 !important;
  opacity: 0.6;
}

/* Icons */
.rpg-navbar .nav-icon {
  font-size: 1.1em;
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* Dropdown Menu */
.rpg-navbar .dropdown-menu-rpg {
  /* Bootstrap only sets position:absolute on .navbar-expand-* navbars.
     We handle mobile via offcanvas, so force absolute here always. */
  position: absolute;
  background: rgba(20, 20, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  border-radius: 8px;
  padding: 0.5rem;
  margin-top: 10px;
}

.rpg-navbar .dropdown-item {
  color: #ccc;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.rpg-navbar .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateX(3px);
}

.rpg-navbar .dropdown-divider {
  border-color: rgba(241, 234, 234, 0.1);
  margin: 0.5rem 0;
}

/* Toggler */
.rpg-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.rpg-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.rpg-navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* Mobile */
@media (max-width: 991px) {
  .rpg-navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
  }

  .rpg-navbar .btn-logout {
    width: 100%;
    margin-top: 10px;
  }
}

/* Discord glow button */
.rpg-navbar .btn-discord-glow {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.rpg-navbar .btn-discord-glow::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent 70%);
  animation: rpgNavPulse 1s infinite;
  z-index: -1;
}

@keyframes rpgNavPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}
/* ── Active state ── */
.rpg-navbar .nav-link.nav-active,
.rpg-navbar .dropdown-item.nav-active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.rpg-navbar .dropdown-toggle.nav-active {
  color: #fff !important;
  font-weight: 600;
}

/* ── External link icon ── */
.nav-ext-icon {
  font-size: 0.6em;
  opacity: 0.55;
  vertical-align: super;
}

/* ── Profile pill ── */
.nav-profile-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: #ddd;
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-profile-pill:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.nav-profile-pill.nav-active {
  border-color: rgba(255, 200, 80, 0.45);
  color: #fff;
}
.nav-profile-pill img {
  border-radius: 50%;
  object-fit: cover;
}

/* ── Level badge ── */
.nav-level-badge {
  font-size: 0.7em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 200, 80, 0.18);
  color: #ffc840;
  border: 1px solid rgba(255, 200, 80, 0.3);
  letter-spacing: 0.02em;
}

/* ── Bonus attribute dot ── */
.nav-bonus-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc840;
  box-shadow: 0 0 6px #ffc84088;
  animation: navBonusPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes navBonusPulse {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: .5; transform: scale(1.3); }
}

/* ── Mini HUD ── */
.nav-hud {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-hud-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: #ccc;
  cursor: default;
}
.nav-hud-pill img {
  flex-shrink: 0;
}

/* ── Icon-only button ── */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #aaa;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nav-icon-btn.nav-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ── Level-gated nav link ── */
.nav-locked {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════
   OFFCANVAS (mobile navigation drawer)
   ════════════════════════════════════════════════════ */
.nav-offcanvas {
  background: rgba(14, 14, 18, 0.98);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  width: min(280px, 88vw) !important;
}

/* ── Offcanvas profile header ── */
.oc-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.oc-avatar-wrap img {
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 80, 0.4);
  object-fit: cover;
}
.oc-username {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}
.oc-meta {
  font-size: 0.75rem;
  color: #888;
  display: flex;
  gap: 6px;
}

/* ── HUD row inside offcanvas ── */
.oc-hud-row {
  display: flex;
  gap: 8px;
  padding: 10px 0;
}
.oc-hud-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  color: #ccc;
}

/* ── Divider ── */
.oc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

/* ── Nav list ── */
.oc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.oc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #bbb;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.oc-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  transform: translateX(2px);
}
.oc-link.nav-active {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  font-weight: 600;
}
.oc-link-danger {
  color: #f87171 !important;
}
.oc-link-danger:hover {
  background: rgba(248, 113, 113, 0.1) !important;
  color: #fca5a5 !important;
}

/* ── Section label ── */
.oc-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  padding: 10px 12px 4px;
}

/* ── Lock tag on level-gated offcanvas links ── */
.oc-lock-tag {
  margin-left: auto;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid rgba(255, 100, 100, 0.3);
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* NOTE: panel.php and player.php both define :root variables (--gold, --iron, etc.).
   Both are included here intentionally without deduplication. */

/* ═══ index.php ═══ */

/* ═══════════════════════════════════════════════
           DESIGN TOKENS
        ═══════════════════════════════════════════════ */
body.page-index {
  --c-void: #04030a;
  --c-abyss: #080612;
  --c-deep: #0d0a1a;
  --c-surface: #130f20;
  --c-panel: rgba(15, 11, 26, 0.85);

  --c-blood: #8b0000;
  --c-crimson: #c0182c;
  --c-ember: #e84040;
  --c-gold: #c9932a;
  --c-gold-light: #f0c060;
  --c-rune: #7b4fc4;
  --c-rune-glow: #a06aff;

  --c-bone: #ede8d8;
  --c-mist: #9a96b0;
  --c-fog: #5a5670;

  --border-dim: rgba(255, 255, 255, 0.06);
  --border-gold: rgba(201, 147, 42, 0.4);
  --border-rune: rgba(160, 106, 255, 0.35);

  --font-display: "Cinzel Decorative", serif;
  --font-title: "Cinzel", serif;
  --font-body: "IM Fell English", serif;

  --glow-blood: 0 0 40px rgba(220, 20, 60, 0.5);
  --glow-gold: 0 0 30px rgba(201, 147, 42, 0.6);
  --glow-rune: 0 0 25px rgba(160, 106, 255, 0.5);
}

/* ═══════════════════════════════════════════════
           RESET & BASE
        ═══════════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.page-index {
  font-family: var(--font-body);
  background: var(--c-void);
  color: var(--c-bone);
  overflow-x: hidden;
  min-height: 100vh;
  cursor: default;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--c-abyss);
}

::-webkit-scrollbar-thumb {
  background: var(--c-blood);
  border-radius: 3px;
}

body.page-index h1,
body.page-index h2,
body.page-index h3 {
  font-family: var(--font-title);
}

/* ═══════════════════════════════════════════════
           ANIMATED BACKGROUND LAYERS
        ═══════════════════════════════════════════════ */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Deep background image */
.bg-image {
  background: url("/assets/bg.jpg") center center / cover no-repeat;
  opacity: 0.18;
  filter: saturate(0.4) brightness(0.6);
}

/* Gradient overlay */
.bg-gradient {
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(139, 0, 0, 0.25) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 50% at 20% 80%,
      rgba(123, 79, 196, 0.15) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 100% 80% at 50% 100%,
      var(--c-void) 20%,
      transparent 80%
    ),
    linear-gradient(
      180deg,
      var(--c-void) 0%,
      rgba(4, 3, 10, 0.3) 40%,
      var(--c-void) 100%
    );
}

/* Animated rune particles canvas */
#runeCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
}

/* Vignette */
.bg-vignette {
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 30%,
    var(--c-void) 90%
  );
  z-index: 2;
}

/* Scan-lines for monitor/game effect */
.bg-scanlines {
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* ═══════════════════════════════════════════════
           DECORATIVE RUNE BORDERS (top/bottom)
        ═══════════════════════════════════════════════ */
.rune-border-top,
.rune-border-bot {
  position: fixed;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 1000;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--c-blood) 20%,
    var(--c-gold) 50%,
    var(--c-blood) 80%,
    transparent 100%
  );
  animation: shimmerBar 4s ease-in-out infinite;
}

.rune-border-top {
  top: 0;
}

.rune-border-bot {
  bottom: 0;
}

@keyframes shimmerBar {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
    filter: brightness(1.5);
  }
}

/* ═══════════════════════════════════════════════
           NAVBAR — Launcher-style top bar
        ═══════════════════════════════════════════════ */
body.page-index .navbar {
  position: fixed;
  top: 4px;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 0.6rem 0;
  background: linear-gradient(
    180deg,
    rgba(4, 3, 10, 0.98) 0%,
    rgba(4, 3, 10, 0.7) 100%
  );
  border-bottom: 1px solid var(--border-gold);
  backdrop-filter: blur(20px);
  transition: all 0.3s;
}

body.page-index .navbar.scrolled {
  background: rgba(4, 3, 10, 0.99);
  border-bottom-color: var(--c-blood);
}

body.page-index .navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--c-gold-light) !important;
  text-shadow:
    0 0 20px rgba(240, 192, 96, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 2px;
  text-decoration: none;
}

body.page-index .navbar-brand i {
  color: var(--c-ember);
  filter: drop-shadow(0 0 8px var(--c-ember));
  margin-right: 10px;
}

.nav-link-item {
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-mist) !important;
  text-decoration: none;
  padding: 6px 16px;
  transition: all 0.3s;
  position: relative;
}

.nav-link-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--c-gold);
  transition: all 0.3s;
}

.nav-link-item:hover {
  color: var(--c-gold-light) !important;
}

.nav-link-item:hover::after {
  left: 10%;
  right: 10%;
}

.btn-enter-nav {
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-gold-light);
  background: transparent;
  border: 1px solid var(--c-gold);
  padding: 7px 22px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn-enter-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 147, 42, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-enter-nav:hover {
  box-shadow: var(--glow-gold);
  color: #fff;
}

.btn-enter-nav:hover::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
           HERO — Full-screen launcher-style
        ═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  padding: 7rem 2rem 4rem;
}

/* Ornamental top separator */
.hero-ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 1.5rem;
  animation: fadeIn 1s ease-out;
}

.ornament-line {
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, var(--c-gold));
}

.ornament-line.right {
  background: linear-gradient(90deg, var(--c-gold), transparent);
}

.ornament-diamond {
  width: 8px;
  height: 8px;
  background: var(--c-gold);
  transform: rotate(45deg);
  box-shadow: var(--glow-gold);
}

.hero-eyebrow {
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--c-gold);
  text-shadow: 0 0 15px rgba(201, 147, 42, 0.6);
  animation: fadeIn 1s ease-out 0.2s backwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  margin: 0.3rem 0 0.5rem;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--c-gold-light) 40%,
    var(--c-gold) 70%,
    var(--c-blood) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.8));
  animation: heroTitleIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.8)) blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.8)) blur(0);
  }
}

.hero-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--c-mist);
  max-width: 620px;
  margin: 0 auto 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  animation: fadeInUp 1s ease-out 0.5s backwards;
  line-height: 1.7;
}

.hero-version {
  font-family: var(--font-title);
  font-size: 0.68rem;
  letter-spacing: 3px;
  color: var(--c-fog);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  animation: fadeInUp 1s ease-out 0.6s backwards;
}

/* CTA button cluster */
.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.7s backwards;
}

.btn-play {
  position: relative;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(
    135deg,
    var(--c-blood) 0%,
    #600000 50%,
    #3a0000 100%
  );
  border: 1px solid var(--c-crimson);
  padding: 16px 48px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.btn-play::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn-play:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 50px rgba(192, 24, 44, 0.7),
    0 0 0 1px var(--c-ember);
  color: #fff;
}

.btn-play:hover::before {
  left: 100%;
}

.btn-play-secondary {
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-gold);
  background: transparent;
  border: 1px solid var(--border-gold);
  padding: 16px 32px;
  cursor: pointer;
  transition: all 0.3s;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  text-decoration: none;
}

.btn-play-secondary:hover {
  background: rgba(201, 147, 42, 0.1);
  border-color: var(--c-gold);
  box-shadow: var(--glow-gold);
  color: var(--c-gold-light);
}

/* Hero scroll arrow */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-fog);
  font-size: 1.2rem;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.4;
  }

  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}

/* Steam auto-login overlay */
#steamLoginOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 3, 10, 0.97);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

#steamLoginOverlay.active {
  display: flex;
}

.steam-logo-anim {
  font-size: 4rem;
  color: #1b9fe4;
  filter: drop-shadow(0 0 20px #1b9fe4);
  animation: pulse 1.5s ease-in-out infinite;
}

.steam-login-text {
  font-family: var(--font-title);
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--c-bone);
  text-align: center;
}

.steam-login-sub {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--c-mist);
  font-size: 1rem;
}

.steam-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(27, 159, 228, 0.2);
  border-top-color: #1b9fe4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 20px #1b9fe4);
  }

  50% {
    filter: drop-shadow(0 0 40px #1b9fe4) brightness(1.3);
  }
}

/* ═══════════════════════════════════════════════
           FEATURES SECTION
        ═══════════════════════════════════════════════ */
.features-section {
  position: relative;
  z-index: 10;
  padding: 5rem 0 6rem;
  background: linear-gradient(
    180deg,
    transparent,
    var(--c-abyss) 10%,
    var(--c-abyss) 90%,
    transparent
  );
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-eyebrow {
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  margin-bottom: 1rem;
}

.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
}

.orn-line {
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--c-crimson));
}

.orn-line.r {
  background: linear-gradient(90deg, var(--c-crimson), transparent);
}

.orn-gem {
  width: 6px;
  height: 6px;
  background: var(--c-crimson);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--c-crimson);
}

/* Feature card */
.feature-card {
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(20, 14, 36, 0.9),
    rgba(10, 8, 20, 0.95)
  );
  border: 1px solid var(--border-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.2rem 1.8rem;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(10px);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-rune), transparent);
  transform: scaleX(0);
  transition: transform 0.4s;
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(160, 106, 255, 0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-rune);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(160, 106, 255, 0.1);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card:hover::after {
  opacity: 1;
}

.feature-icon-wrap {
  width: 56px;
  height: 56px;
  background: linear-gradient(
    135deg,
    rgba(139, 0, 0, 0.3),
    rgba(123, 79, 196, 0.2)
  );
  border: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
  position: relative;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.feature-icon {
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--c-ember), var(--c-rune-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 0.75rem;
}

.feature-desc {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--c-fog);
  font-size: 0.95rem;
  line-height: 1.6;
}

.feature-tag {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-title);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-rune-glow);
  border: 1px solid var(--border-rune);
  padding: 3px 10px;
}

/* ═══════════════════════════════════════════════
           LORE SECTION
        ═══════════════════════════════════════════════ */
.lore-section {
  position: relative;
  z-index: 10;
  padding: 5rem 0;
}

.lore-panel {
  background: linear-gradient(
    135deg,
    rgba(20, 14, 36, 0.6),
    rgba(8, 6, 18, 0.8)
  );
  border: 1px solid var(--border-gold);
  border-top: 2px solid rgba(201, 147, 42, 0.5);
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
}

.lore-panel::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 12rem;
  font-family: var(--font-body);
  color: rgba(201, 147, 42, 0.06);
  line-height: 1;
  pointer-events: none;
}

.lore-text {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 2;
  color: #c8c4b8;
  font-style: italic;
  text-align: center;
  position: relative;
  z-index: 1;
}

.lore-text strong {
  color: var(--c-gold-light);
  font-style: normal;
}

/* ═══════════════════════════════════════════════
           FOOTER
        ═══════════════════════════════════════════════ */
footer {
  position: relative;
  z-index: 10;
  background: var(--c-void);
  border-top: 1px solid var(--border-dim);
  padding: 2.5rem 0;
  text-align: center;
}

.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--c-gold);
  display: block;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(201, 147, 42, 0.4);
}

.social-icons a {
  color: var(--c-fog);
  font-size: 1.3rem;
  margin: 0 10px;
  transition: all 0.3s;
}

.social-icons a:hover {
  color: var(--c-ember);
  text-shadow: var(--glow-blood);
}

.footer-copy {
  font-family: var(--font-title);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--c-fog);
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════
           MODAL — Game launcher portal style
        ═══════════════════════════════════════════════ */
.modal-backdrop {
  backdrop-filter: blur(8px);
}

.modal-content {
  background: linear-gradient(160deg, #16102a 0%, #0c0816 50%, #0d0309 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--c-gold);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.9),
    var(--glow-blood);
  position: relative;
  overflow: hidden;
}

.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse 80% 40% at 50% 0%,
      rgba(201, 147, 42, 0.05),
      transparent
    ),
    radial-gradient(
      ellipse 60% 60% at 80% 100%,
      rgba(139, 0, 0, 0.08),
      transparent
    );
  pointer-events: none;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.2rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
}

.modal-title-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.8rem;
}

.auth-tab-btn {
  flex: 1;
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-fog);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.auth-tab-btn.active {
  color: var(--c-gold-light);
  border-bottom-color: var(--c-gold);
}

.auth-tab-btn:hover:not(.active) {
  color: var(--c-bone);
}

/* Form Elements */
.field-label {
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-mist);
  margin-bottom: 0.4rem;
  display: block;
}

.input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s;
  overflow: hidden;
}

.input-row:focus-within {
  border-color: var(--c-gold);
  background: rgba(201, 147, 42, 0.05);
  box-shadow: 0 0 0 2px rgba(201, 147, 42, 0.1);
}

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  color: var(--c-fog);
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s;
}

.input-row:focus-within .input-icon {
  color: var(--c-gold);
}

.input-field {
  flex: 1;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: var(--c-bone) !important;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65rem 0.9rem;
  box-shadow: none !important;
}

.input-field::placeholder {
  color: var(--c-fog);
  font-style: italic;
}

/* Submit button */
.btn-submit {
  width: 100%;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--c-blood), #500000);
  border: 1px solid var(--c-crimson);
  padding: 13px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.4s;
}

.btn-submit:hover {
  box-shadow: 0 8px 30px rgba(192, 24, 44, 0.6);
}

.btn-submit:hover::before {
  left: 100%;
}

/* OAuth buttons */
.btn-oauth {
  width: 100%;
  font-family: var(--font-title);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-bone);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 11px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-oauth:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-oauth.discord:hover {
  border-color: #5865f2;
  color: #5865f2;
  box-shadow: 0 0 15px rgba(88, 101, 242, 0.3);
}

.btn-oauth.google:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
}

.btn-oauth.steam:hover {
  border-color: #1b9fe4;
  color: #1b9fe4;
  box-shadow: 0 0 15px rgba(27, 159, 228, 0.4);
}

.divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-fog);
  font-family: var(--font-title);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 1.2rem 0;
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

/* ═══════════════════════════════════════════════
           UTILITIES
        ═══════════════════════════════════════════════ */
.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════
           RESPONSIVE
        ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
    letter-spacing: -1px;
  }

  .lore-panel {
    padding: 2rem 1.5rem;
  }

  .threat-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
    bottom: 1rem;
  }

  .btn-play {
    padding: 14px 32px;
    font-size: 0.82rem;
  }
}

/* ═══ panel.php ═══ */

/* ═══════════════════════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════════════════════ */
body.page-panel {
  /* Palette – forged iron + ember gold */
  --gold: #c8962a;
  --gold-hi: #f5c842;
  --gold-dim: rgba(200, 150, 42, 0.13);
  --ember: #e8622a;
  --ember-dim: rgba(232, 98, 42, 0.12);
  --iron: #1c1c24;
  --iron-deep: #0e0e14;
  --steel: #2a2a36;
  --steel-hi: #34344a;

  /* Surfaces */
  --panel: rgba(14, 14, 20, 0.97);
  --panel-raise: rgba(22, 22, 32, 0.97);
  --panel-lift: rgba(30, 30, 44, 0.95);

  /* Type */
  --text: #e2dfd8;
  --text-dim: #8a8880;
  --text-bright: #f4f1ec;

  /* Borders */
  --line: rgba(255, 255, 255, 0.06);
  --line-hi: rgba(255, 255, 255, 0.12);
  --line-gold: rgba(200, 150, 42, 0.28);

  /* Rarity */
  --r1: #9e9e9e;
  --r2: #43a047;
  --r3: #1e88e5;
  --r4: #8e24aa;
  --r5: #ef6c00;

  --tr: 0.22s ease;
  --br: 14px;
}

/* ── Base ── */
body.game-body {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  /* Nunito reads better at 500 on dark BGs */
  color: var(--text);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

body.page-panel .game-overlay {
  background:
    radial-gradient(
      ellipse 120% 60% at 50% -10%,
      rgba(200, 150, 42, 0.07) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(14, 14, 20, 0.6) 0%,
      rgba(6, 6, 10, 0.98) 70%
    ) !important;
}

/* ── Heading style ── */
.cinzel {
  font-family: "Cinzel", serif;
}

/* ── Divider kicker ── */
.kicker {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.kicker::before,
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.kicker::before {
  max-width: 20px;
}

/* ═══════════════════════════════════════════════════════════
       PANEL SHELL
    ═══════════════════════════════════════════════════════════ */
.rpg-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--br);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
  color: var(--text);
  position: relative;
}

/* Optional gold top stripe */
.rpg-panel.stripe::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold) 35%,
    var(--ember) 65%,
    transparent 100%
  );
}

/* ═══════════════════════════════════════════════════════════
       PLAYER HERO CARD
    ═══════════════════════════════════════════════════════════ */
.hero-card {
  padding: 28px 22px 22px;
  text-align: center;
}

/* Ember aura behind avatar */
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  top: -30px;
  background: radial-gradient(
    ellipse 70% 40% at 50% 0%,
    rgba(200, 150, 42, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* Avatar */
.avatar-ring {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  z-index: 1;
}

/* Rotating gold ring */
.avatar-ring::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--iron-deep), var(--iron-deep)) padding-box,
    conic-gradient(
        var(--gold) 0deg,
        var(--ember) 90deg,
        transparent 180deg,
        var(--gold) 360deg
      )
      border-box;
  animation: ringRotate 7s linear infinite;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

/* Inner ring pulse */
.avatar-ring::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(200, 150, 42, 0.18);
  animation: ringRotate 12s linear infinite reverse;
}

#card-player-pic {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--iron);
  box-shadow:
    0 0 28px rgba(200, 150, 42, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1;
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}

.avatar-ring:hover #card-player-pic {
  transform: scale(1.05);
  box-shadow:
    0 0 44px rgba(200, 150, 42, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.9);
}

.avatar-picker {
  border-top: 1px solid rgba(200, 150, 42, 0.15);
  padding: 14px 16px 16px;
  text-align: center;
}

.avatar-picker-label {
  font-size: 0.7rem;
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.avatar-picker-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.avatar-option {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(200, 150, 42, 0.2);
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.avatar-option img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.avatar-option:hover {
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(200, 150, 42, 0.35);
}

.avatar-option.active {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(200, 150, 42, 0.5);
}

.hero-name {
  font-family: "Cinzel", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.hero-class {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Level badge */
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 22px;
  background: linear-gradient(135deg, #2e1e00, #180f00);
  border: 1px solid var(--line-gold);
  border-radius: 50px;
  color: var(--gold-hi);
  box-shadow:
    0 0 16px rgba(200, 150, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 16px;
}

/* Currency row */
.currencies {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--line);
  border-radius: 50px;
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 700;
  transition:
    border-color var(--tr),
    background var(--tr);
}

.currency-pill:hover {
  border-color: var(--line-hi);
  background: rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════
       BONUS POINTS CARD
    ═══════════════════════════════════════════════════════════ */
.bonus-card {
  border-color: rgba(200, 150, 42, 0.3) !important;
  background: linear-gradient(
    150deg,
    rgba(28, 18, 0, 0.97),
    rgba(12, 8, 0, 0.98)
  ) !important;
}

.bonus-title {
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 14px;
  animation: blink 2.4s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.add-point-btn {
  cursor: pointer;
  transition:
    transform 0.2s,
    filter 0.2s;
}

.add-point-btn:hover {
  transform: scale(1.28);
  filter: brightness(1.25);
}

/* ═══════════════════════════════════════════════════════════
       STAT ROWS
    ═══════════════════════════════════════════════════════════ */
.stats-block {
  padding: 16px 18px 8px;
}

.stat-row {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--tr);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.stat-icon {
  width: 24px;
  text-align: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.stat-label {
  color: var(--text-dim);
  flex: 1;
  font-size: 0.9rem;
}

.stat-value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-bright);
}

/* XP bar */
.xp-block {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}

.xp-nums {
  display: flex;
  justify-content: space-between;
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.xp-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #7a3a00, var(--gold-hi));
  width: 0%;
  transition: width 0.65s ease;
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.45);
}

/* ═══════════════════════════════════════════════════════════
       PAPER DOLL — EQUIPPED GEAR
    ═══════════════════════════════════════════════════════════ */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px;
  justify-items: center;
}

.equip-slot {
  width: 74px;
  height: 74px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr), filter var(--tr);
}

.equip-slot:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  filter: brightness(1.15);
}

/* Scale up slightly so the PNG's own dark square edge bleeds outside the slot
   and is clipped by overflow:hidden — only the item art remains visible */
.equip-slot img.equipment-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);
}

/* Rarity borders + glows */
.equip-slot.item-rarity-1 {
  border-color: var(--r1);
  box-shadow: 0 0 10px rgba(158, 158, 158, 0.4);
}

.equip-slot.item-rarity-2 {
  border-color: var(--r2);
  box-shadow: 0 0 12px rgba(67, 160, 71, 0.5);
}

.equip-slot.item-rarity-3 {
  border-color: var(--r3);
  box-shadow: 0 0 14px rgba(30, 136, 229, 0.55);
}

.equip-slot.item-rarity-4 {
  border-color: var(--r4);
  box-shadow: 0 0 16px rgba(142, 36, 170, 0.6);
}

.equip-slot.item-rarity-5 {
  border-color: var(--r5);
  box-shadow: 0 0 20px rgba(239, 108, 0, 0.7);
  animation: legendGlow 2.5s ease-in-out infinite;
}

@keyframes legendGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(239, 108, 0, 0.5); }
  50%       { box-shadow: 0 0 30px rgba(239, 108, 0, 0.9); }
}

/* Enchant badge — purple, inside the slot at bottom-right */
.enchant-badge-slot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.8);
  z-index: 1;
  pointer-events: none;
}

/* Set bonus strip */
.set-bonus-strip {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.set-bonus-desc {
  font-size: 0.73rem;
  color: var(--text-dim);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
       INVENTORY BAG
    ═══════════════════════════════════════════════════════════ */
.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.inv-header.full {
  color: #e55;
}

.inv-count {
  font-size: 0.64rem;
  margin-left: 5px;
}

.btn-recycle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: rgba(220, 53, 69, 0.07);
  border: 1px solid rgba(220, 53, 69, 0.22);
  border-radius: 8px;
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #e77;
  cursor: pointer;
  transition:
    background var(--tr),
    border-color var(--tr);
}

.btn-recycle:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.55);
}

.inventory-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 14px 16px;
}

.inventory-item {
  width: 54px;
  height: 54px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    filter 0.15s;
}

.inventory-item:hover {
  transform: scale(1.13) translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
  filter: brightness(1.2);
}

/* Clips the image to rounded corners without clipping lock-btn badges */
.inventory-item .inv-img-wrap {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
}

.inventory-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.18);
}

/* Rarity borders */
.item-rarity-1 {
  border: 2px solid var(--r1) !important;
}

.item-rarity-2 {
  border: 2px solid var(--r2) !important;
}

.item-rarity-3 {
  border: 2px solid var(--r3) !important;
}

.item-rarity-4 {
  border: 2px solid var(--r4) !important;
}

.item-rarity-5 {
  border: 2px solid var(--r5) !important;
  animation: legendItem 2.5s ease-in-out infinite;
}

@keyframes legendItem {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(239, 108, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 12px rgba(239, 108, 0, 0.7);
  }
}

/* ═══════════════════════════════════════════════════════════
       RECYCLE MODAL
    ═══════════════════════════════════════════════════════════ */
#recycleModal .modal-content {
  background: rgba(10, 8, 16, 0.98);
  border: 1px solid rgba(220, 53, 69, 0.28);
  border-radius: 16px;
  overflow: hidden;
}

#recycleModal .modal-content::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc3545, transparent);
}

.recycle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}

.recycle-grid::-webkit-scrollbar {
  width: 3px;
}

.recycle-grid::-webkit-scrollbar-thumb {
  background: rgba(220, 53, 69, 0.45);
  border-radius: 4px;
}

.recycle-item {
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.recycle-item img {
  width: 44px;
  height: 44px;
  transition:
    opacity 0.2s,
    filter 0.2s;
}

.recycle-item.selected {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545 !important;
}

.recycle-item.selected img {
  opacity: 0.4;
  filter: grayscale(1);
}

.recycle-item.selected::after {
  content: "\f2ed";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  color: #dc3545;
  font-size: 20px;
  text-shadow: 0 0 5px #000;
}

/* ═══════════════════════════════════════════════════════════
       RESOURCES
    ═══════════════════════════════════════════════════════════ */
.res-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.resource-item {
  width: 54px;
  height: 54px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.15s;
}

.resource-item:hover {
  transform: scale(1.1);
}

.resource-item img {
  width: 38px;
  height: 38px;
}

.res-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-family: "Cinzel", serif;
  font-size: 0.5rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(200, 150, 42, 0.3);
  color: var(--gold-hi);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
       STAGGERED PAGE REVEAL
    ═══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
       ITEM TOOLTIPS
    ═══════════════════════════════════════════════════════════ */
.tooltip {
  z-index: 200000 !important;
  opacity: 1 !important;
}

.tooltip .tooltip-inner {
  max-width: 270px !important;
  padding: 12px 14px !important;
  background: #0d1520 !important;
  color: #d0cdc6 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(200, 150, 42, 0.35) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  text-align: left !important;
  font-family: "Nunito", system-ui, sans-serif !important;
}

/* ═══ admin.php ═══ */

/* Dashboard Module Card */
.admin-module {
  background: linear-gradient(
    145deg,
    rgba(30, 35, 40, 0.95),
    rgba(20, 20, 25, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.admin-module:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Module Colors */
.module-danger {
  border-left: 4px solid #dc3545;
}

.module-danger i {
  color: #dc3545;
}

.module-success {
  border-left: 4px solid #198754;
}

.module-success i {
  color: #198754;
}

.module-info {
  border-left: 4px solid #0dcaf0;
}

.module-info i {
  color: #0dcaf0;
}

.module-warning {
  border-left: 4px solid #ffc107;
}

.module-warning i {
  color: #ffc107;
}

.module-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.module-title {
  font-family: "Cinzel", serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: #fff;
}

.module-desc {
  font-size: 0.85rem;
  color: #aaa;
}

/* Modal Customization */
.modal-content {
  background: #1a1a1a;
  border: 1px solid #444;
  color: #eee;
}

.modal-header {
  border-bottom: 1px solid #333;
}

.modal-footer {
  border-top: 1px solid #333;
}

/* ═══ player.php ═══ */

/* ══════════════════════════════════════════════════
           DESIGN TOKENS  (identical to panel.php)
        ══════════════════════════════════════════════════ */
body.page-player {
  --gold: #c8962a;
  --gold-hi: #f5c842;
  --gold-dim: rgba(200, 150, 42, 0.13);
  --ember: #e8622a;
  --ember-dim: rgba(232, 98, 42, 0.12);
  --iron: #1c1c24;
  --iron-deep: #0e0e14;
  --steel: #2a2a36;
  --panel: rgba(14, 14, 20, 0.97);
  --panel-raise: rgba(22, 22, 32, 0.97);
  --text: #e2dfd8;
  --text-dim: #8a8880;
  --text-bright: #f4f1ec;
  --line: rgba(255, 255, 255, 0.06);
  --line-hi: rgba(255, 255, 255, 0.12);
  --line-gold: rgba(200, 150, 42, 0.28);
  --r1: #9e9e9e;
  --r2: #43a047;
  --r3: #1e88e5;
  --r4: #8e24aa;
  --r5: #ef6c00;
  --tr: 0.22s ease;
  --br: 14px;
}

body.game-body {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
body.page-player .game-overlay {
  background:
    radial-gradient(
      ellipse 120% 60% at 50% -10%,
      rgba(200, 150, 42, 0.07) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(14, 14, 20, 0.6) 0%,
      rgba(6, 6, 10, 0.98) 70%
    ) !important;
}
.cinzel {
  font-family: "Cinzel", serif;
}

/* ══ Kicker ══ */
.kicker {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.kicker::before,
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.kicker::before {
  max-width: 20px;
}

/* ══ Panel shell ══ */
.rpg-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--br);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
  color: var(--text);
  position: relative;
}
.rpg-panel.stripe::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold) 35%,
    var(--ember) 65%,
    transparent 100%
  );
}

/* ══ Hero card ══ */
.hero-card {
  padding: 28px 22px 22px;
  text-align: center;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  top: -30px;
  background: radial-gradient(
    ellipse 70% 40% at 50% 0%,
    rgba(200, 150, 42, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* Rotating avatar ring */
.avatar-ring {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  z-index: 1;
}
.avatar-ring::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--iron-deep), var(--iron-deep)) padding-box,
    conic-gradient(
        var(--gold) 0deg,
        var(--ember) 90deg,
        transparent 180deg,
        var(--gold) 360deg
      )
      border-box;
  animation: ringRotate 7s linear infinite;
}
.avatar-ring::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(200, 150, 42, 0.18);
  animation: ringRotate 12s linear infinite reverse;
}
@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

#profile-pic {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--iron);
  box-shadow:
    0 0 28px rgba(200, 150, 42, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1;
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.avatar-ring:hover #profile-pic {
  transform: scale(1.05);
  box-shadow:
    0 0 44px rgba(200, 150, 42, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.9);
}

.hero-name {
  font-family: "Cinzel", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.hero-sub {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 22px;
  background: linear-gradient(135deg, #2e1e00, #180f00);
  border: 1px solid var(--line-gold);
  border-radius: 50px;
  color: var(--gold-hi);
  box-shadow:
    0 0 16px rgba(200, 150, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 16px;
}

/* Tags */
.tag-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.hero-tag {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 50px;
  border: 1px solid;
}
.tag-race {
  border-color: rgba(142, 36, 170, 0.5);
  color: #ce93d8;
  background: rgba(142, 36, 170, 0.08);
}
.tag-class {
  border-color: rgba(30, 136, 229, 0.5);
  color: #90caf9;
  background: rgba(30, 136, 229, 0.08);
}
.tag-premium {
  border-color: rgba(200, 150, 42, 0.5);
  color: var(--gold-hi);
  background: rgba(200, 150, 42, 0.08);
}
.tag-reborn {
  border-color: rgba(232, 98, 42, 0.5);
  color: #ffab91;
  background: rgba(232, 98, 42, 0.08);
}

/* ══ XP bar ══ */
.xp-block {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}
.xp-nums {
  display: flex;
  justify-content: space-between;
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.xp-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7a3a00, var(--gold-hi));
  transition: width 0.65s ease;
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.45);
}

/* ══ Stat rows ══ */
.stats-block {
  padding: 16px 18px 8px;
}
.stat-row {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--tr);
}
.stat-row:last-child {
  border-bottom: none;
}
.stat-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.stat-icon {
  width: 24px;
  text-align: center;
  margin-right: 10px;
  flex-shrink: 0;
}
.stat-label {
  color: var(--text-dim);
  flex: 1;
  font-size: 0.9rem;
}
.stat-value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-bright);
}

/* ══ Character info strip ══ */
.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.info-cell {
  background: var(--panel);
  padding: 14px 10px;
  text-align: center;
}
.info-label {
  font-family: "Cinzel", serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.info-val {
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
}

/* ══ Paper-doll equipment ══ */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px;
  justify-items: center;
}
.equip-slot {
  width: 74px;
  height: 74px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    background var(--tr),
    border-color var(--tr),
    box-shadow var(--tr),
    transform var(--tr);
}
.equip-slot:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-hi);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}
.equip-slot img.slot-img {
  width: 44px;
  height: 44px;
}
.equip-slot.empty .slot-ghost {
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.07);
}

/* Slot label */
.slot-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  font-size: 0.44rem;
  font-family: "Cinzel", serif;
  text-align: center;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Enchant badge */
.slot-enchant {
  position: absolute;
  bottom: -7px;
  right: -7px;
  font-family: "Cinzel", serif;
  font-size: 0.5rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--line-gold);
  color: var(--gold-hi);
  z-index: 2;
}

/* Rarity borders */
.equip-slot.rarity-1 {
  border-color: var(--r1) !important;
  box-shadow: 0 0 8px rgba(158, 158, 158, 0.2);
}
.equip-slot.rarity-2 {
  border-color: var(--r2) !important;
  box-shadow: 0 0 10px rgba(67, 160, 71, 0.28);
}
.equip-slot.rarity-3 {
  border-color: var(--r3) !important;
  box-shadow: 0 0 12px rgba(30, 136, 229, 0.32);
}
.equip-slot.rarity-4 {
  border-color: var(--r4) !important;
  box-shadow: 0 0 14px rgba(142, 36, 170, 0.38);
}
.equip-slot.rarity-5 {
  border-color: var(--r5) !important;
  animation: legendGlow 2.5s ease-in-out infinite;
}
@keyframes legendGlow {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(239, 108, 0, 0.45);
  }
  50% {
    box-shadow: 0 0 28px rgba(239, 108, 0, 0.75);
  }
}

/* ══ Set bonus ══ */
.set-strip {
  padding: 0 20px 18px;
  border-top: 1px solid var(--line);
}
.set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.set-row:last-child {
  border-bottom: none;
}
.set-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #444;
  flex-shrink: 0;
  transition:
    background var(--tr),
    box-shadow var(--tr);
}
.set-dot.on {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 6px rgba(200, 150, 42, 0.7);
}
.set-text {
  font-size: 0.78rem;
  color: var(--text-dim);
  flex: 1;
}
.set-text.on {
  color: var(--gold-hi);
  font-weight: 600;
}
.set-req {
  font-size: 0.68rem;
  color: #444;
  font-family: "Cinzel", serif;
}

/* ══ Staggered reveal ══ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ══ Duel button ══ */
.btn-duel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 20px;
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(220, 53, 69, 0.06);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 50px;
  color: #ef9a9a;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.btn-duel:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.6);
  box-shadow: 0 0 16px rgba(220, 53, 69, 0.2);
  color: #ffcdd2;
}

/* ═══ alchemist.php ═══ */

/* ── Tokens ── */
body.page-alchemist {
  --a-green: #2ecc71;
  --a-green-dim: rgba(46, 204, 113, 0.15);
  --a-green-mid: #27ae60;
  --a-green-dark: #1a6b3c;
  --a-gold: #f0c040;
  --a-gold-dim: rgba(240, 192, 64, 0.15);
  --a-red: #e74c3c;
  --a-surface: rgba(14, 20, 14, 0.97);
  --a-raise: rgba(20, 28, 20, 0.96);
  --a-border: rgba(46, 204, 113, 0.12);
  --a-border-hi: rgba(46, 204, 113, 0.3);
  --a-muted: #5a7060;
  --a-text: #d0e8d0;
  --tr: 0.22s ease;
}

body.game-body {
  font-family: "Crimson Text", Georgia, serif;
  color: var(--a-text);
}

body.page-alchemist .game-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(10, 40, 10, 0.35) 0%,
    rgba(3, 8, 3, 0.93) 65%
  ) !important;
}

/* ── NPC hero card ── */
.npc-card {
  position: relative;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(46, 204, 113, 0.06);
  text-align: center;
  padding: 32px 24px 28px;
  margin-bottom: 20px;
}

/* green top accent */
.npc-card::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--a-green),
    var(--a-green-mid),
    transparent
  );
}

/* large ghost icon */
.npc-card .bg-icon {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 7rem;
  color: rgba(46, 204, 113, 0.06);
  pointer-events: none;
  line-height: 1;
}

/* NPC avatar */
.npc-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.npc-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(
      135deg,
      var(--a-green),
      var(--a-green-dark),
      var(--a-green)
    )
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ringRotate 7s linear infinite;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

.npc-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--a-raise);
  box-shadow:
    0 0 24px rgba(46, 204, 113, 0.25),
    0 6px 20px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
}

.npc-name {
  font-family: "Cinzel", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
  margin-bottom: 4px;
}

.npc-quote {
  font-style: italic;
  color: var(--a-green);
  font-size: 1rem;
  opacity: 0.85;
}

/* ── Stat pills ── */
.stat-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  font-size: 1rem;
  transition: border-color var(--tr);
}

.stat-pill:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.stat-pill img {
  border-radius: 4px;
}

.stat-pill .pill-val {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.stat-pill .pill-sub {
  font-size: 0.8rem;
  color: var(--a-muted);
}

/* ── Shop panel ── */
.shop-panel {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(46, 204, 113, 0.05);
}

.shop-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--a-green-mid),
    var(--a-green),
    transparent
  );
}

.shop-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--a-border);
  text-align: center;
}

.shop-title {
  font-family: "Cinzel", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.shop-desc {
  font-size: 0.9rem;
  color: var(--a-muted);
}

.shop-desc .tax-note {
  color: var(--a-gold);
}

.shop-body {
  padding: 24px 28px 28px;
}

/* ── Full alert ── */
.bag-full-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 10px;
  color: #e88;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

/* ── Quantity section ── */
.qty-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.qty-label {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-muted);
}

.unit-price {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--a-gold);
  background: var(--a-gold-dim);
  border: 1px solid rgba(240, 192, 64, 0.25);
  border-radius: 50px;
  padding: 3px 12px;
}

/* Range slider */
.range-wrap {
  position: relative;
  margin-bottom: 10px;
}

.range-track {
  height: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.range-track::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--val, 0%);
  background: linear-gradient(90deg, var(--a-green-dark), var(--a-green));
  border-radius: 5px;
  transition: width 0.06s;
}

.range-wrap input[type="range"] {
  position: absolute;
  inset: -10px 0;
  height: calc(100% + 20px);
  background: transparent;
  -webkit-appearance: none;
  z-index: 2;
  width: 100%;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--a-green);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.7);
  cursor: pointer;
  margin-top: -7px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 22px rgba(46, 204, 113, 0.95);
}

input[type="range"]:disabled::-webkit-slider-thumb {
  border-color: #555;
  box-shadow: none;
  background: #444;
  cursor: not-allowed;
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--a-green);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.7);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  background: transparent;
  height: 8px;
}

.range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}

.range-ticks span {
  font-size: 0.65rem;
  color: var(--a-muted);
  font-family: "Cinzel", serif;
}

/* ── Cost box ── */
.cost-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin: 18px 0;
  transition: border-color var(--tr);
}

.cost-box.danger {
  border-color: rgba(231, 76, 60, 0.4);
}

.cost-label {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-muted);
}

.cost-value {
  font-family: "Cinzel", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--a-gold);
  transition: color var(--tr);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cost-value.danger {
  color: var(--a-red);
}

/* ── Buy button ── */
.btn-buy {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  border-bottom: 3px solid #0d3a1a;
  background: linear-gradient(135deg, var(--a-green-dark) 0%, #0f3d1e 100%);
  color: #c8f0d0;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    transform var(--tr),
    box-shadow var(--tr),
    filter var(--tr);
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-buy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  transform: translateX(-110%);
  transition: transform 0.5s ease;
}

.btn-buy:hover:not(:disabled)::before {
  transform: translateX(110%);
}

.btn-buy:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: brightness(1.15);
  box-shadow: 0 0 36px rgba(46, 204, 113, 0.45);
}

.btn-buy:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-buy:disabled {
  background: linear-gradient(135deg, #222, #1a1a1a);
  border-color: #333;
  color: #555;
  cursor: not-allowed;
  box-shadow: none;
}

/* brew pulse on click */
@keyframes brewPulse {
  0% {
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.2);
  }

  50% {
    box-shadow: 0 0 40px rgba(46, 204, 113, 0.6);
  }

  100% {
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.2);
  }
}

.btn-buy.brewing {
  animation: brewPulse 0.7s ease-in-out infinite;
}

/* ── Inventory bar ── */
.inv-bar-wrap {
  margin-bottom: 20px;
}

.inv-bar-label {
  display: flex;
  justify-content: space-between;
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-muted);
  margin-bottom: 6px;
}

.inv-bar-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.inv-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--a-green-dark), var(--a-green));
  transition: width 0.4s ease;
}

/* ═══ blacksmith.php ═══ */

/* ═══════════════════════════════════════════
           TOKENS
        ═══════════════════════════════════════════ */
body.page-blacksmith {
  --gold: #c9a227;
  --gold-lit: #f0c040;
  --gold-dim: #6b5210;
  --ember: #e05a00;
  --ember-glow: rgba(224, 90, 0, 0.35);
  --forge-dark: #0a080c;
  --forge-deep: #110e16;
  --forge-mid: #1a1622;
  --forge-raise: #221e2e;
  --border-sub: rgba(255, 255, 255, 0.07);
  --border-gold: rgba(201, 162, 39, 0.3);
  --text-muted: #7a7090;
  --text-dim: #4a4460;

  --r1-col: #9e9e9e;
  --r2-col: #4caf50;
  --r3-col: #2196f3;
  --r4-col: #9c27b0;
  --r5-col: #ff9800;

  --tr: 0.22s ease;
}

/* ═══════════════════════════════════════════
           BASE
        ═══════════════════════════════════════════ */
body.game-body {
  font-family: "Crimson Text", Georgia, serif;
  color: #e8dfc8;
}

body.page-blacksmith .game-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(60, 20, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.88) 70%
  ) !important;
}

/* ═══════════════════════════════════════════
           RPG PANEL (base card)
        ═══════════════════════════════════════════ */
body.page-blacksmith .rpg-panel {
  background: linear-gradient(
    160deg,
    rgba(30, 26, 38, 0.97) 0%,
    rgba(14, 12, 20, 0.99) 100%
  );
  border: 1px solid var(--border-sub);
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  color: #e0d8cc;
}

body.page-blacksmith .rpg-panel input,
body.page-blacksmith .rpg-panel select,
body.page-blacksmith .rpg-panel .input-group-text {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e0d8cc !important;
  font-family: "Crimson Text", serif;
}

body.page-blacksmith .rpg-panel input::placeholder {
  color: var(--text-muted);
}

body.page-blacksmith .rpg-panel input:focus,
body.page-blacksmith .rpg-panel select:focus {
  border-color: var(--gold-dim) !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15) !important;
}

/* ═══════════════════════════════════════════
           NPC HERO PANEL
        ═══════════════════════════════════════════ */
.npc-hero {
  position: relative;
  overflow: hidden;
}

/* Forge fire glow at the bottom */
.npc-hero::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 80px;
  background: radial-gradient(
    ellipse,
    rgba(224, 90, 0, 0.22) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: emberGlow 3s ease-in-out infinite alternate;
}

@keyframes emberGlow {
  from {
    opacity: 0.5;
    transform: translateX(-50%) scaleX(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.1);
  }
}

/* NPC avatar ring */
body.page-blacksmith .npc-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}

body.page-blacksmith .npc-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--gold), var(--ember), var(--gold))
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ringRotate 6s linear infinite;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

body.page-blacksmith .npc-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--forge-mid);
  box-shadow:
    0 0 24px rgba(224, 90, 0, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
}

body.page-blacksmith .npc-name {
  font-family: "Cinzel", serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.4);
  margin-bottom: 2px;
}

body.page-blacksmith .npc-quote {
  font-family: "Crimson Text", serif;
  font-style: italic;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 18px;
  opacity: 0.85;
}

/* ── Blacksmith npc-card override ─────────────────────────── */
body.page-blacksmith .npc-card {
  background: var(--forge-deep);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(201, 162, 39, 0.08);
  text-align: center;
  padding: 32px 24px 28px;
  margin-bottom: 16px;
}

body.page-blacksmith .npc-card::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ember),
    var(--gold),
    var(--ember),
    transparent
  );
}

body.page-blacksmith .npc-card .bg-icon {
  color: rgba(224, 90, 0, 0.07);
}

body.page-blacksmith .npc-tag {
  border-color: rgba(201, 162, 39, 0.2);
  color: var(--text-muted);
}

body.page-blacksmith .npc-tag.highlight {
  border-color: var(--border-gold);
  color: var(--gold);
}

/* ── Blacksmith resource-row override ────────────────────── */
body.page-blacksmith .resource-row {
  background: var(--forge-deep);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

body.page-blacksmith .resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 50px;
  font-size: 0.88rem;
  transition: border-color var(--tr);
}

body.page-blacksmith .resource-pill:hover {
  border-color: var(--border-gold);
}

body.page-blacksmith .resource-pill .res-amount {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gold);
}

/* ── Stat chips (blacksmith item cards) ───────────────────── */
.stat-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: .7rem;
  font-family: 'Cinzel', serif;
}

/* ═══════════════════════════════════════════
           MODE TOGGLE
        ═══════════════════════════════════════════ */
.mode-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-gold);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}

.mode-toggle input[type="radio"] {
  display: none;
}

.mode-toggle label {
  padding: 8px 28px;
  border-radius: 50px;
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--tr),
    color var(--tr),
    box-shadow var(--tr);
  white-space: nowrap;
}

.mode-toggle input:checked + label {
  background: linear-gradient(135deg, var(--gold-dim), #3a2800);
  color: var(--gold-lit);
  box-shadow:
    0 0 14px rgba(201, 162, 39, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════
           RESOURCE PILLS
        ═══════════════════════════════════════════ */
.resource-stash {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-sub);
  border-radius: 10px;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  font-size: 0.88rem;
  color: var(--gold-lit);
  font-weight: 600;
  transition:
    border-color var(--tr),
    box-shadow var(--tr);
}

.resource-pill:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.2);
}

.resource-pill img {
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
           TOOLBAR
        ═══════════════════════════════════════════ */
#forge-toolbar .rpg-panel {
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#forge-toolbar .form-check-input:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

#forge-toolbar .btn-outline-light {
  border-color: var(--border-sub);
  color: var(--text-muted);
  transition:
    color var(--tr),
    border-color var(--tr);
}

#forge-toolbar .btn-outline-light:hover {
  color: var(--gold-lit);
  border-color: var(--border-gold);
  background: rgba(201, 162, 39, 0.08) !important;
}

.section-label {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-sub);
}

/* ═══════════════════════════════════════════
           ITEM CARDS
        ═══════════════════════════════════════════ */
.item-card {
  position: relative;
  background: linear-gradient(
    160deg,
    rgba(26, 22, 34, 0.97) 0%,
    rgba(12, 10, 18, 0.99) 100%
  );
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform var(--tr),
    border-color var(--tr),
    box-shadow var(--tr);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.item-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(201, 162, 39, 0.1);
}

/* Rarity top accent line */
.item-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rarity-color, var(--border-sub));
  opacity: 0.7;
}

/* Subtle inner corner ornament */
.item-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle at 100% 100%,
    rgba(201, 162, 39, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Card header strip */
.card-header-strip {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border-sub);
}

.card-icon-frame {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: box-shadow var(--tr);
}

.item-card:hover .card-icon-frame {
  box-shadow: 0 0 14px var(--rarity-color, transparent);
}

.card-icon-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);
}

.refinement-pip {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--forge-dark);
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--gold-lit);
  font-family: "Cinzel", serif;
}

.card-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}

.card-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.badge-type {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-family: "Cinzel", serif;
}

.badge-rarity {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 50px;
  border: 1px solid var(--rarity-color, #555);
  color: var(--rarity-color, #888);
  background: rgba(0, 0, 0, 0.3);
  font-family: "Cinzel", serif;
}

/* Card body */
.card-body-area {
  padding: 12px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-description {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
}

/* Materials / cost section */
.materials-label {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.materials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 0.82rem;
  color: #c8c0b0;
  transition: border-color var(--tr);
}

.mat-chip:hover {
  border-color: var(--border-gold);
}

.mat-chip img {
  border-radius: 4px;
}

.mat-chip .mat-qty {
  color: var(--gold-lit);
  font-weight: 700;
}

/* Equipped badge */
.equipped-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: rgba(46, 125, 50, 0.25);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #81c784;
  border-radius: 50px;
  z-index: 5;
}

/* ═══════════════════════════════════════════
           CARD FOOTER BUTTONS
        ═══════════════════════════════════════════ */
.card-footer-area {
  padding: 0 16px 16px;
  margin-top: auto;
}

.btn-forge-action {
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--tr),
    box-shadow var(--tr),
    filter var(--tr);
}

.btn-forge-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transform: translateX(-110%);
  transition: transform 0.5s ease;
}

.btn-forge-action:hover::before {
  transform: translateX(110%);
}

.btn-forge-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-forge-action:active {
  transform: scale(0.97);
}

.btn-forge-action:disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
  cursor: not-allowed;
  pointer-events: none;
}

/* Craft (fire) button */
.btn-forge-craft {
  background: linear-gradient(135deg, #6b2800 0%, #3a1200 100%);
  color: var(--gold-lit);
  box-shadow:
    0 4px 0 #1a0800,
    0 0 16px rgba(224, 90, 0, 0.25);
  border-bottom: 3px solid #1a0800;
}

.btn-forge-craft:hover {
  box-shadow:
    0 4px 0 #1a0800,
    0 0 28px rgba(224, 90, 0, 0.5);
}

/* Upgrade (anvil) button */
.btn-forge-upgrade {
  background: linear-gradient(135deg, #3a2800 0%, #1e1400 100%);
  color: var(--gold-lit);
  box-shadow:
    0 4px 0 #0e0900,
    0 0 14px rgba(201, 162, 39, 0.2);
  border-bottom: 3px solid #0e0900;
}

.btn-forge-upgrade:hover {
  box-shadow:
    0 4px 0 #0e0900,
    0 0 26px rgba(201, 162, 39, 0.45);
}

/* ═══════════════════════════════════════════
           EMPTY STATE
        ═══════════════════════════════════════════ */
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-dim);
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.empty-state i {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════
           LOADING SHIMMER
        ═══════════════════════════════════════════ */
.shimmer-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--forge-mid);
  border: 1px solid var(--border-sub);
  height: 180px;
  position: relative;
}

.shimmer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: shimmerMove 1.4s ease-in-out infinite;
}

@keyframes shimmerMove {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* ═══════════════════════════════════════════
           CARD ENTER ANIMATION
        ═══════════════════════════════════════════ */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.item-card-wrapper {
  animation: cardIn 0.35s ease both;
}

.item-card-wrapper:nth-child(2) {
  animation-delay: 0.04s;
}

.item-card-wrapper:nth-child(3) {
  animation-delay: 0.08s;
}

.item-card-wrapper:nth-child(4) {
  animation-delay: 0.12s;
}

.item-card-wrapper:nth-child(5) {
  animation-delay: 0.16s;
}

.item-card-wrapper:nth-child(6) {
  animation-delay: 0.2s;
}

.item-card-wrapper:nth-child(7) {
  animation-delay: 0.24s;
}

.item-card-wrapper:nth-child(8) {
  animation-delay: 0.28s;
}

/* ═══ enchant.php ═══ */

/* ── Tokens ── */
body.page-enchant {
  --e-blue: #4fc3f7;
  --e-blue-dim: rgba(79, 195, 247, 0.14);
  --e-blue-mid: #0288d1;
  --e-purple: #9b59f5;
  --e-purple-dim: rgba(155, 89, 245, 0.15);
  --e-gold: #f0c040;
  --e-gold-dim: rgba(240, 192, 64, 0.14);
  --e-surface: rgba(10, 14, 24, 0.97);
  --e-raise: rgba(16, 22, 34, 0.96);
  --e-border: rgba(79, 195, 247, 0.1);
  --e-border-hi: rgba(79, 195, 247, 0.35);
  --e-muted: #4a6080;
  --e-text: #c8ddf0;
  --tr: 0.22s ease;
}

body.game-body {
  font-family: "Crimson Text", Georgia, serif;
  color: var(--e-text);
}

body.page-enchant .game-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 15, 50, 0.4) 0%,
    rgba(2, 4, 12, 0.94) 65%
  ) !important;
}

/* ── NPC card ── */
body.page-enchant .npc-card {
  position: relative;
  background: var(--e-surface);
  border: 1px solid var(--e-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(79, 195, 247, 0.05);
  text-align: center;
  padding: 32px 24px 28px;
  margin-bottom: 16px;
}

body.page-enchant .npc-card::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--e-blue),
    var(--e-purple),
    transparent
  );
}

body.page-enchant .npc-card .bg-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 7rem;
  color: rgba(79, 195, 247, 0.05);
  pointer-events: none;
  line-height: 1;
}

/* Avatar ring */
body.page-enchant .npc-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

body.page-enchant .npc-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(
      135deg,
      var(--e-blue),
      var(--e-purple),
      var(--e-blue)
    )
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ringRotate 6s linear infinite;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

body.page-enchant .npc-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--e-raise);
  box-shadow:
    0 0 28px rgba(79, 195, 247, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
}

body.page-enchant .npc-name {
  font-family: "Cinzel", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 24px rgba(79, 195, 247, 0.4);
  margin-bottom: 4px;
}

body.page-enchant .npc-quote {
  font-style: italic;
  color: var(--e-blue);
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 14px;
}

.npc-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.npc-tag {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(79, 195, 247, 0.2);
  color: var(--e-muted);
}

.npc-tag.highlight {
  border-color: rgba(79, 195, 247, 0.4);
  color: var(--e-blue);
}

/* ── Resource pills ── */
.resource-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--e-surface);
  border: 1px solid var(--e-border);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

body.page-enchant .resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50px;
  font-size: 0.88rem;
  transition: border-color var(--tr);
}

body.page-enchant .resource-pill:hover {
  border-color: rgba(79, 195, 247, 0.25);
}

body.page-enchant .resource-pill img {
  border-radius: 4px;
}

body.page-enchant .resource-pill span {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ── Gear selector ── */
.gear-panel {
  background: var(--e-surface);
  border: 1px solid var(--e-border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.gear-panel-title {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e-muted);
  text-align: center;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.gear-panel-title::before,
.gear-panel-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--e-border);
  max-width: 60px;
}

.equip-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--e-border);
  border-radius: 12px;
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  transition:
    background var(--tr),
    border-color var(--tr),
    transform var(--tr),
    box-shadow var(--tr);
  position: relative;
}

.equip-btn:hover {
  background: var(--e-blue-dim);
  border-color: var(--e-border-hi);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(79, 195, 247, 0.15);
}

.equip-btn:active {
  transform: scale(0.95);
}

.equip-btn.active {
  background: var(--e-blue-dim);
  border-color: var(--e-blue);
  box-shadow: 0 0 18px rgba(79, 195, 247, 0.25);
}

.equip-btn img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 5px rgba(79, 195, 247, 0.25));
  transition: filter var(--tr);
}

.equip-btn:hover img {
  filter: drop-shadow(0 0 10px rgba(79, 195, 247, 0.6));
}

.equip-btn span {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-muted);
  transition: color var(--tr);
}

.equip-btn:hover span,
.equip-btn.active span {
  color: var(--e-blue);
}

/* Enchant level badge on gear btn */
.equip-btn .lvl-pip {
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: "Cinzel", serif;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(79, 195, 247, 0.3);
  color: var(--e-blue);
}

/* ── Enchant panel ── */
.enchant-panel {
  background: var(--e-surface);
  border: 1px solid var(--e-border-hi);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(79, 195, 247, 0.07);
  animation: panelIn 0.35s ease both;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.enchant-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--e-blue),
    var(--e-purple),
    transparent
  );
}

/* Left column — item display */
.item-col {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--e-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ambient glow orb behind item */
.item-col::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(79, 195, 247, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: orbPulse 3s ease-in-out infinite;
}

@keyframes orbPulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.item-img-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

#equipment_image {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(79, 195, 247, 0.45));
  animation: itemFloat 3s ease-in-out infinite;
}

@keyframes itemFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.item-name {
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

.item-desc {
  font-size: 0.82rem;
  color: var(--e-muted);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.enchant-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--e-border-hi);
  border-radius: 50px;
  font-family: "Cinzel", serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--e-blue);
  text-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
  position: relative;
  z-index: 1;
  transition:
    color 0.3s,
    border-color 0.3s;
}

/* Right column — controls */
.controls-col {
  padding: 24px;
}

/* Cost box */
.cost-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.cost-box-title {
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e-muted);
  margin-bottom: 12px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.cost-row + .cost-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cost-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--e-muted);
}

.cost-row-val {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Success chance bar */
.chance-wrap {
  margin-bottom: 14px;
}

.chance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.chance-label {
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-muted);
}

.chance-pct {
  font-family: "Cinzel", serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--e-blue);
}

.chance-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.chance-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--e-blue-mid), var(--e-blue));
  transition: width 0.4s ease;
}

/* Protection toggle */
.protection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin-bottom: 14px;
  transition: border-color var(--tr);
}

.protection-row:has(input:checked) {
  border-color: rgba(155, 89, 245, 0.35);
  background: rgba(155, 89, 245, 0.07);
}

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

.protection-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(155, 89, 245, 0.12);
  border: 1px solid rgba(155, 89, 245, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--e-purple);
}

.protection-text strong {
  display: block;
  font-size: 0.9rem;
  color: var(--e-text);
}

.protection-text small {
  font-size: 0.78rem;
  color: var(--e-muted);
}

/* Custom toggle matching settings page */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition:
    background var(--tr),
    border-color var(--tr);
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  border-radius: 50%;
  background: var(--e-muted);
  transition:
    transform var(--tr),
    background var(--tr),
    box-shadow var(--tr);
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(155, 89, 245, 0.25);
  border-color: rgba(155, 89, 245, 0.55);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
  background: var(--e-purple);
  box-shadow: 0 0 10px rgba(155, 89, 245, 0.7);
}

/* Enchant button */
.btn-enchant {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  border-bottom: 3px solid #050d2a;
  background: linear-gradient(135deg, #0d2060 0%, #050d2a 100%);
  color: #c8e8ff;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    transform var(--tr),
    box-shadow var(--tr),
    filter var(--tr);
  box-shadow: 0 0 22px rgba(79, 195, 247, 0.18);
  position: relative;
  overflow: hidden;
}

.btn-enchant::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  transform: translateX(-110%);
  transition: transform 0.5s ease;
}

.btn-enchant:hover:not(:disabled)::before {
  transform: translateX(110%);
}

.btn-enchant:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: brightness(1.2);
  box-shadow: 0 0 40px rgba(79, 195, 247, 0.45);
}

.btn-enchant:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-enchant:disabled {
  background: linear-gradient(135deg, #1a1a24, #111118);
  border-color: #222;
  color: #444;
  cursor: not-allowed;
  box-shadow: none;
}

/* Channeling pulse */
@keyframes channelPulse {
  0%,
  100% {
    box-shadow: 0 0 22px rgba(79, 195, 247, 0.18);
  }

  50% {
    box-shadow: 0 0 50px rgba(79, 195, 247, 0.7);
  }
}

.btn-enchant.channeling {
  animation: channelPulse 0.6s ease-in-out infinite;
}

/* Result flash on badge */
@keyframes successFlash {
  0% {
    text-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
  }

  50% {
    text-shadow:
      0 0 40px rgba(79, 195, 247, 1),
      0 0 80px rgba(79, 195, 247, 0.5);
  }

  100% {
    text-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
  }
}

.enchant-level-badge.flash {
  animation: successFlash 0.6s ease;
}

@media (max-width: 767px) {
  .item-col {
    border-right: none;
    border-bottom: 1px solid var(--e-border);
  }
}

/* ═══ hunts.php ═══ */

/* Scoped Overlay - Dark Red/Combat Tint */
body.page-hunts .game-overlay {
  background-size: cover !important;
  backdrop-filter: blur(3px);
}

/* Quest Card Container */
.quest-card-container {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  height: 60vh;
  max-height: 600px;
  min-height: 450px;
}

@media (max-width: 576px) {
  .quest-card-container {
    height: 55vw;
    min-height: 260px;
    max-height: 360px;
    border-radius: 10px;
  }
}

.quest-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 10s ease;
}

.carousel-item.active .quest-bg {
  transform: scale(1.1);
}

.quest-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.95) 100%
  );
  z-index: 1;
}

/* Content Layer */
.quest-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 2;
  text-align: center;
}

.quest-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.quest-desc {
  color: #ccc;
  font-size: 0.95rem;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
  margin-bottom: 15px;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/* Badge Styles */
.danger-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid #555;
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.difficulty-easy {
  border-color: #4caf50;
  color: #4caf50;
}

.difficulty-medium {
  border-color: #ff9800;
  color: #ff9800;
}

.difficulty-hard {
  border-color: #f44336;
  color: #f44336;
}

.difficulty-insane {
  border-color: #9c27b0;
  color: #e040fb;
  box-shadow: 0 0 10px #9c27b0;
}

/* Monster Tokens */
.monster-token-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.monster-token {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: #000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.2s,
    border-color 0.2s;
  object-fit: contain;
}

.monster-token:hover {
  transform: scale(1.15) translateY(-5px);
  border-color: #fff;
  z-index: 10;
}

/* Navigation Arrows (Big Icons) */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-arrow:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1);
  border-color: #fff;
}

.nav-prev {
  left: 10px;
}

.nav-next {
  right: 10px;
}

/* Start Button */
.btn-hunt-start {
  background: linear-gradient(180deg, #8b0000 0%, #500000 100%);
  border: 1px solid #a00000;
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.5);
  font-family: "Cinzel", serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.btn-hunt-start:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
  border-color: #ff3333;
  background: linear-gradient(180deg, #a00000 0%, #600000 100%);
}

/* Shimmer effect for the button */
.btn-hunt-start::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  20% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

/* ═══ map.php ═══ */

/* ═══════════════════════════════════════════
           ROOT TOKENS & THEME
        ═══════════════════════════════════════════ */
body.page-map {
  --cell-size: 52px;

  --bg-void: #06060e;
  --bg-deep: #0b0b18;
  --bg-surface: #10101e;
  --bg-raised: #181828;

  --border-dim: #221a38;
  --border-glow: #6b3fa0;
  --border-gold: #8a6820;
  --border-gold-lit: #c9a227;

  /* Terrain palette */
  --grass-a: #162712;
  --grass-b: #1b3016;
  --grass-c: #1f361a;
  --grass-blade: #2a4a20;

  --stone-a: #181820;
  --stone-b: #222230;
  --stone-c: #2a2a3c;

  --water-a: #080e28;
  --water-b: #0c1640;
  --water-c: #0f1e55;
  --water-foam: rgba(80, 130, 220, 0.18);

  --dirt-a: #1e160c;
  --dirt-b: #261c10;

  --accent-purple: #9b59f5;
  --accent-crimson: #c0392b;
  --accent-gold: #c9a227;
  --accent-teal: #1abc9c;

  --text-primary: #e8dfc8;
  --text-secondary: #a09070;
  --text-dim: #4a4060;

  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.95);
  --glow-purple: 0 0 20px rgba(155, 89, 245, 0.4);
  --glow-gold: 0 0 12px rgba(201, 162, 39, 0.5);
  --glow-red: 0 0 16px rgba(192, 57, 43, 0.6);

  --dpad-btn: 62px;
}

/* ═══════════════════════════════════════════
           BASE
        ═══════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html:has(body.page-map) {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.page-map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-void) url("/assets/bg.jpg") center center / cover
    no-repeat fixed;
  display: flex;
  flex-direction: column;
  font-family: "Crimson Text", Georgia, serif;
  color: var(--text-primary);
}

/* Atmospheric background fog */
body.page-map::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 50% at 15% 85%,
      rgba(80, 20, 120, 0.15) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 70% at 85% 15%,
      rgba(30, 8, 70, 0.12) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 40% at 50% 50%,
      rgba(10, 4, 30, 0.4) 0%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
  animation: fogDrift 18s ease-in-out infinite alternate;
}

@keyframes fogDrift {
  0% {
    opacity: 0.7;
    transform: scale(1) translateX(0);
  }

  100% {
    opacity: 1;
    transform: scale(1.04) translateX(6px);
  }
}

/* ═══════════════════════════════════════════
           LAYOUT
        ═══════════════════════════════════════════ */
.game-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.map-scaler {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

/* ═══════════════════════════════════════════
           MAP FRAME — aged parchment border
        ═══════════════════════════════════════════ */
.map-frame {
  position: relative;
  padding: 10px;
  background: linear-gradient(135deg, #2c1c50 0%, #160e28 40%, #2c1c50 100%);
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  box-shadow:
    var(--shadow-deep),
    0 0 0 1px rgba(201, 162, 39, 0.12),
    0 0 40px rgba(80, 20, 120, 0.25),
    inset 0 0 40px rgba(0, 0, 0, 0.7);
}

/* Four corner rune ornaments */
.map-frame::before,
.map-frame::after,
.map-frame .corner-tr,
.map-frame .corner-bl,
.map-frame .corner-br {
  font-size: 13px;
  color: var(--accent-gold);
  text-shadow: var(--glow-gold);
  opacity: 0.8;
  position: absolute;
  pointer-events: none;
}

.map-frame::before {
  content: "✦";
  top: 4px;
  left: 7px;
}

.map-frame::after {
  content: "✦";
  top: 4px;
  right: 7px;
}

/* thin inner glow border */
.map-frame .inner-border {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(107, 63, 160, 0.2);
  border-radius: 2px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
           THE GRID
        ═══════════════════════════════════════════ */
.game_map {
  display: grid;
  gap: 0;
  background: var(--bg-void);
  border: 1px solid rgba(107, 63, 160, 0.25);
  border-radius: 2px;
  width: fit-content;
  position: relative;
  /* Vignette over the whole map */
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.7),
    inset 0 0 80px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════
           CELLS
        ═══════════════════════════════════════════ */
.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  position: relative;
  overflow: hidden;
  /* Subtle noise-like checkerboard using offset gradient */
  background: var(--grass-b);
}

/* Alternating tile shade — more organic than pure checkerboard */
.cell:nth-child(4n) {
  background: var(--grass-a);
}

.cell:nth-child(4n + 2) {
  background: var(--grass-c);
}

/* Micro grass texture on all ground tiles */
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    67deg,
    transparent 0px,
    transparent 5px,
    rgba(255, 255, 255, 0.012) 5px,
    rgba(255, 255, 255, 0.012) 6px
  );
  pointer-events: none;
  z-index: 1;
}

/* Border between cells — faint darker line */
.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* ── TREE ── */
.cell.tree {
  background: radial-gradient(circle at 50% 65%, #162a10 0%, #0a1508 100%);
}

.cell.tree::before {
  /* overrides the grass stripe with a canopy texture */
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(40, 80, 20, 0.25) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(20, 50, 10, 0.2) 0%,
      transparent 60%
    );
}

.cell.tree .cell-icon {
  font-size: 1.55rem;
  filter: saturate(0.5) brightness(0.65)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* shadow blob under tree */
.cell.tree .cell-shadow {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 10%;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  filter: blur(2px);
  z-index: 3;
}

/* ── ROCK ── */
.cell.rock {
  background: radial-gradient(circle at 40% 35%, #282838 0%, #0e0e16 100%);
}

.cell.rock::before {
  background: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 8px,
    rgba(255, 255, 255, 0.015) 8px,
    rgba(255, 255, 255, 0.015) 9px
  );
}

.cell.rock .cell-icon {
  font-size: 1.45rem;
  filter: saturate(0.15) brightness(0.6)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

/* ── WATER ── */
.cell.water {
  background: var(--water-b);
  overflow: hidden;
}

.cell.water::before {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(26, 64, 128, 0.25) 3px,
    rgba(26, 64, 128, 0.25) 4px
  );
  animation: waterFlow 4s linear infinite;
  z-index: 1;
}

/* specular shimmer */
.cell.water::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 40% 15% at 30% 35%,
      rgba(100, 170, 255, 0.18) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 30% 10% at 70% 65%,
      rgba(80, 140, 220, 0.12) 0%,
      transparent 70%
    );
  animation: waterShimmer 3s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes waterFlow {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(8px);
  }
}

@keyframes waterShimmer {
  from {
    opacity: 0.5;
    transform: translateX(-3px);
  }

  to {
    opacity: 1;
    transform: translateX(3px);
  }
}

/* ── PICKET FENCE ── */
.cell.picket_fence {
  background: radial-gradient(circle at 50% 50%, #1e160a 0%, #110c06 100%);
}

.cell.picket_fence .cell-icon {
  font-size: 1.3rem;
  filter: saturate(0.4) brightness(0.65);
}

/* ── CRATE ── */
.cell.crate .cell-icon {
  font-size: 1.3rem;
  filter: saturate(0.6) brightness(0.7);
}

/* ── BUSH ── */
.cell.bush {
  background: radial-gradient(circle at 50% 60%, #112210 0%, #090e08 100%);
}
.cell.bush::before {
  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(30, 70, 15, 0.3) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 65% 65%,
      rgba(20, 55, 10, 0.2) 0%,
      transparent 55%
    );
}
.cell.bush .cell-icon {
  font-size: 1.4rem;
  filter: saturate(0.6) brightness(0.55)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* ── DEAD TREE ── */
.cell.dead_tree {
  background: radial-gradient(circle at 50% 65%, #160f0a 0%, #09080a 100%);
}
.cell.dead_tree::before {
  background: repeating-linear-gradient(
    30deg,
    transparent 0px,
    transparent 10px,
    rgba(80, 60, 40, 0.06) 10px,
    rgba(80, 60, 40, 0.06) 11px
  );
}
.cell.dead_tree .cell-shadow {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  height: 8%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  filter: blur(2px);
  z-index: 3;
}
.cell.dead_tree .cell-icon {
  font-size: 1.5rem;
  filter: grayscale(1) brightness(0.4) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

/* ── MUSHROOM ── */
.cell.mushroom {
  background: radial-gradient(circle at 50% 60%, #140d1e 0%, #08060e 100%);
}
.cell.mushroom::before {
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(100, 50, 180, 0.12) 0%,
    transparent 70%
  );
}
.cell.mushroom .cell-icon {
  font-size: 1.35rem;
  filter: saturate(0.7) brightness(0.75)
    drop-shadow(0 0 4px rgba(140, 60, 200, 0.6));
}

/* ── CRYSTAL ── */
.cell.crystal {
  background: radial-gradient(circle at 45% 40%, #0d1230 0%, #06080e 100%);
}
.cell.crystal::before {
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(80, 120, 255, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      rgba(60, 90, 200, 0.1) 0%,
      transparent 50%
    );
  animation: crystalGlow 3s ease-in-out infinite alternate;
}
@keyframes crystalGlow {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
.cell.crystal .cell-icon {
  font-size: 1.25rem;
  filter: hue-rotate(200deg) saturate(1.2) brightness(0.7)
    drop-shadow(0 0 5px rgba(80, 140, 255, 0.7));
}

/* ── PILLAR ── */
.cell.pillar {
  background: radial-gradient(circle at 50% 30%, #282430 0%, #0e0c12 100%);
}
.cell.pillar::before {
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 6px,
    rgba(255, 255, 255, 0.025) 6px,
    rgba(255, 255, 255, 0.025) 7px
  );
}
.cell.pillar .cell-icon {
  font-size: 1.4rem;
  filter: grayscale(0.7) brightness(0.55)
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.9));
}

/* ── BONES ── */
.cell.bones {
  background: radial-gradient(circle at 50% 55%, #1a1410 0%, #0b0908 100%);
}
.cell.bones .cell-icon {
  font-size: 1.25rem;
  filter: saturate(0.1) brightness(0.6)
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

/* ── GRASS (walkable decoration) ── */
.cell.grass {
  background: linear-gradient(135deg, var(--grass-b) 0%, var(--grass-c) 100%);
}
.cell.grass::before {
  background: repeating-linear-gradient(
    80deg,
    transparent 0px,
    transparent 4px,
    rgba(50, 100, 25, 0.15) 4px,
    rgba(50, 100, 25, 0.15) 5px
  );
}
.cell.grass .cell-icon {
  font-size: 1.1rem;
  filter: saturate(0.7) brightness(0.65);
}

/* Shared cell-icon helper (replaces CSS ::after emoji hacks) */
.cell-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  line-height: 1;
  pointer-events: none;
  will-change: transform;
}

/* ═══════════════════════════════════════════
           ENTITIES
        ═══════════════════════════════════════════ */
.player,
.monster {
  width: 76%;
  height: 76%;
  position: absolute;
  top: 12%;
  left: 12%;
  z-index: 10;
}

/* Player avatar */
.player-inner-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a2e;
  border: 2px solid var(--border-gold);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.2),
    0 0 10px rgba(201, 162, 39, 0.25),
    inset 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Premium glow */
.premium-player .player-inner-img {
  border-color: var(--accent-purple);
  box-shadow:
    0 0 0 1px rgba(155, 89, 245, 0.35),
    0 0 18px rgba(155, 89, 245, 0.65),
    0 0 40px rgba(155, 89, 245, 0.22);
  animation:
    premiumPulse 2.5s ease-in-out infinite,
    idleFloat 2s ease-in-out infinite;
}

@keyframes premiumPulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(155, 89, 245, 0.65),
      0 0 40px rgba(155, 89, 245, 0.22);
  }

  50% {
    box-shadow:
      0 0 28px rgba(155, 89, 245, 0.95),
      0 0 60px rgba(155, 89, 245, 0.38);
  }
}

/* Monster */
.monster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(192, 57, 43, 0.65))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
}

/* Idle float */
.floating {
  animation: idleFloat 2.2s ease-in-out infinite;
}

@keyframes idleFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* ── City ── */
.city-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.city-icon {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  object-fit: cover;
  box-shadow:
    var(--glow-gold),
    0 0 0 1px rgba(201, 162, 39, 0.18);
  filter: saturate(0.75) brightness(0.9);
}

.city-name {
  font-family: "Cinzel", serif;
  font-size: 0.42rem;
  font-weight: 600;
  color: var(--accent-gold);
  text-shadow:
    0 0 6px rgba(201, 162, 39, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.9);
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ── Portal ── */
.portal-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-wrapper::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(155, 89, 245, 0.35) 0%,
    transparent 70%
  );
  animation: portalPulse 2s ease-in-out infinite;
}

@keyframes portalPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.portal-icon {
  width: 62%;
  height: 62%;
  animation: portalSpin 7s linear infinite;
  filter: drop-shadow(0 0 10px rgba(155, 89, 245, 1))
    drop-shadow(0 0 20px rgba(155, 89, 245, 0.5));
  position: relative;
  z-index: 1;
}

@keyframes portalSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.12);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ═══════════════════════════════════════════
           MOVEMENT FEEDBACK
        ═══════════════════════════════════════════ */
.blocked-shake {
  animation: blockedShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes blockedShake {
  10%,
  90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(3px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-5px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(5px, 0, 0);
  }
}

.encounter-flash {
  animation: encounterFlash 0.4s ease-out;
}

@keyframes encounterFlash {
  0% {
    filter: brightness(1);
  }

  30% {
    filter: brightness(3.5) saturate(2) hue-rotate(-20deg);
  }

  100% {
    filter: brightness(1);
  }
}

/* ═══════════════════════════════════════════
           D-PAD CONTROLS
        ═══════════════════════════════════════════ */
.controls-ui {
  width: 100%;
  padding: 14px 10px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  background: linear-gradient(to top, rgba(6, 6, 14, 0.98) 50%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  position: relative;
}

.controls-ui::before {
  content: "──── ✦ ────";
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  margin-bottom: 2px;
}

.d-pad {
  display: grid;
  grid-template-columns: repeat(3, var(--dpad-btn));
  grid-template-rows: repeat(2, var(--dpad-btn));
  gap: 8px;
}

.btn-move {
  width: var(--dpad-btn);
  height: var(--dpad-btn);
  border-radius: 14px;
  background: linear-gradient(160deg, #22183a 0%, #130e22 100%);
  border: 1px solid var(--border-glow);
  color: var(--text-primary);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow:
    0 5px 0 #060410,
    0 0 14px rgba(107, 63, 160, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    background 0.1s,
    transform 0.1s,
    box-shadow 0.1s;
  position: relative;
  overflow: hidden;
}

/* shimmer */
.btn-move::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  transition: left 0.4s;
}

.btn-move:hover::before {
  left: 160%;
}

.btn-move:hover {
  border-color: var(--accent-purple);
  box-shadow:
    0 5px 0 #060410,
    0 0 22px rgba(155, 89, 245, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-move:active,
.btn-move.pressed {
  transform: translateY(5px) scale(0.95);
  box-shadow:
    0 0 0 #060410,
    0 0 10px rgba(155, 89, 245, 0.2);
  background: linear-gradient(160deg, #2e2048 0%, #1c163a 100%);
}

.up {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 2;
}

.down {
  grid-column: 2;
  grid-row: 2;
}

.right {
  grid-column: 3;
  grid-row: 2;
}

/* ═══════════════════════════════════════════
           ENCOUNTER OVERLAY
        ═══════════════════════════════════════════ */
.encounter-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 999;
  transition: background 0.2s;
}

.encounter-overlay.active {
  pointer-events: all;
  background: radial-gradient(
    ellipse at center,
    rgba(192, 57, 43, 0.12) 0%,
    rgba(60, 0, 0, 0.78) 100%
  );
  animation: encounterVignette 0.5s ease-out;
}

@keyframes encounterVignette {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════
           COORDINATE BADGE
        ═══════════════════════════════════════════ */
.coord-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: "Cinzel", serif;
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 5;
}

/* ═══════════════════════════════════════════
           MINI-MAP LEGEND (bottom-left of frame)
        ═══════════════════════════════════════════ */
.map-title-badge {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Cinzel", serif;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--accent-gold);
  text-shadow: var(--glow-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 8px;
  background: linear-gradient(135deg, #2c1c50, #160e28, #2c1c50);
}

/* ═══════════════════════════════════════════
           FOG OF WAR — cells flagged .fog by JS
        ═══════════════════════════════════════════ */
.cell.fog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 14, 0.72);
  z-index: 20;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
           LOADING STATE
        ═══════════════════════════════════════════ */
.map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 200px;
  color: var(--text-dim);
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  gap: 10px;
}

.map-loading::before {
  content: "⟳";
  display: inline-block;
  animation: spin 1.2s linear infinite;
  font-size: 1.1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════
           MOVE RIPPLE
        ═══════════════════════════════════════════ */
.move-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.35);
  animation: rippleOut 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 20;
}

@keyframes rippleOut {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════
           STEP COUNTER BADGE (top-left of frame)
        ═══════════════════════════════════════════ */
.step-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Cinzel", serif;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  padding: 0 8px;
  background: linear-gradient(135deg, #2c1c50, #160e28, #2c1c50);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
           PRE-ENCOUNTER OVERLAY
        ═══════════════════════════════════════════ */
.pre-encounter {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 950;
  background: rgba(0, 0, 0, 0.72);
  animation: preEncFadeIn 0.25s ease-out;
}

@keyframes preEncFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pre-encounter img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(220, 50, 50, 0.9));
  animation: preEncBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes preEncBounce {
  0%   { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  65%  { transform: scale(1.18) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

.pre-encounter-excl {
  font-family: "Cinzel", serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ff4040;
  text-shadow: 0 0 16px rgba(255, 50, 50, 0.8);
  animation: preEncPulse 0.35s ease-out 0.3s both;
}

@keyframes preEncPulse {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ═══════════════════════════════════════════
           CITY / PORTAL TOOLTIPS
        ═══════════════════════════════════════════ */
.city-wrapper[data-tooltip],
.portal-wrapper[data-tooltip] {
  position: relative;
}

.city-wrapper[data-tooltip]::after,
.portal-wrapper[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 6, 18, 0.96);
  color: var(--accent-gold);
  font-family: "Cinzel", serif;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 30;
}

.city-wrapper[data-tooltip]:hover::after,
.portal-wrapper[data-tooltip]:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════
           PLAYER SELF-CELL HIGHLIGHT
        ═══════════════════════════════════════════ */
.cell.player-self-cell {
  background: rgba(201, 162, 39, 0.07) !important;
  position: relative;
}

.cell.player-self-cell::before {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 2px;
  pointer-events: none;
  animation: playerCellPulse 2.2s ease-in-out infinite;
  z-index: 1;
}

@keyframes playerCellPulse {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.7; }
}

/* ═══════════════════════════════════════════
           BLOCK FLASH (per-cell)
        ═══════════════════════════════════════════ */
@keyframes blockedFlash {
  0%   { background-color: rgba(192, 57, 43, 0.5) !important; }
  100% { background-color: transparent; }
}

.cell.blocked-flash {
  animation: blockedFlash 0.38s ease-out forwards;
}

/* ═══════════════════════════════════════════
           MONSTER SPAWN ANIMATION
        ═══════════════════════════════════════════ */
@keyframes monsterSpawn {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  65%  { transform: scale(1.2) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.cell.monster-spawn .monster {
  animation: monsterSpawn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════
           MAP FADE TRANSITION
        ═══════════════════════════════════════════ */
.game_map {
  transition: opacity 0.22s ease;
}

.game_map.map-fade-out {
  opacity: 0;
}

/* ═══════════════════════════════════════════
           D-PAD MOVING STATE
        ═══════════════════════════════════════════ */
.btn-move.moving {
  opacity: 0.45;
}

/* ═══════════════════════════════════════════
           RESPONSIVE
        ═══════════════════════════════════════════ */
@media (max-width: 400px) {
  body.page-map {
    --cell-size: 44px;
    --dpad-btn: 56px;
  }
}

@media (max-height: 600px) {
  body.page-map {
    --cell-size: 40px;
  }

  .controls-ui {
    padding: 8px 10px 12px;
  }
}

/* ═══ oracle.php ═══ */

/* ── Tokens ── */
body.page-oracle {
  --o-purple: #9b59f5;
  --o-purple-dim: rgba(155, 89, 245, 0.15);
  --o-purple-mid: #7b1fa2;
  --o-purple-dark: #3d0070;
  --o-pink: #e040fb;
  --o-gold: #f0c040;
  --o-gold-dim: rgba(240, 192, 64, 0.14);
  --o-surface: rgba(12, 8, 20, 0.97);
  --o-raise: rgba(20, 14, 32, 0.96);
  --o-border: rgba(155, 89, 245, 0.12);
  --o-border-hi: rgba(155, 89, 245, 0.4);
  --o-muted: #6a5080;
  --o-text: #ddd0f0;
  --tr: 0.22s ease;
}

body.game-body {
  font-family: "Crimson Text", Georgia, serif;
  color: var(--o-text);
}

body.page-oracle .game-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(30, 0, 60, 0.45) 0%,
    rgba(6, 2, 14, 0.94) 65%
  ) !important;
}

/* ── NPC card ── */
body.page-oracle .npc-card {
  position: relative;
  background: var(--o-surface);
  border: 1px solid var(--o-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(155, 89, 245, 0.06);
  text-align: center;
  padding: 36px 24px 28px;
  margin-bottom: 20px;
}

body.page-oracle .npc-card::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--o-purple),
    var(--o-pink),
    transparent
  );
}

body.page-oracle .npc-card .bg-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 8rem;
  color: rgba(155, 89, 245, 0.05);
  pointer-events: none;
  line-height: 1;
  animation: bgIconDrift 8s ease-in-out infinite alternate;
}

@keyframes bgIconDrift {
  from {
    transform: rotate(-8deg) scale(1);
  }

  to {
    transform: rotate(8deg) scale(1.08);
  }
}

/* Stars particle layer */
body.page-oracle .npc-card .stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

body.page-oracle .npc-card .stars::before,
body.page-oracle .npc-card .stars::after {
  content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";
  position: absolute;
  font-size: 0.55rem;
  color: rgba(155, 89, 245, 0.18);
  letter-spacing: 18px;
  white-space: nowrap;
  animation: starsDrift 12s linear infinite;
}

body.page-oracle .npc-card .stars::before {
  top: 18%;
  left: -100%;
  animation-delay: 0s;
}

body.page-oracle .npc-card .stars::after {
  top: 72%;
  left: -100%;
  animation-delay: 4s;
}

@keyframes starsDrift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(200vw);
  }
}

/* Avatar ring */
body.page-oracle .npc-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

body.page-oracle .npc-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(
      135deg,
      var(--o-purple),
      var(--o-pink),
      var(--o-purple)
    )
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ringRotate 6s linear infinite;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

body.page-oracle .npc-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--o-raise);
  box-shadow:
    0 0 32px rgba(155, 89, 245, 0.4),
    0 6px 24px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1;
}

body.page-oracle .npc-name {
  font-family: "Cinzel", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 28px rgba(155, 89, 245, 0.5);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

body.page-oracle .npc-quote {
  font-style: italic;
  color: #d1c4e9;
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.npc-tag {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(155, 89, 245, 0.25);
  color: var(--o-muted);
  position: relative;
  z-index: 1;
}

/* ── Service cards grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.service-card {
  position: relative;
  background: var(--o-surface);
  border: 1px solid var(--o-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--tr),
    border-color var(--tr),
    box-shadow var(--tr);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--o-border-hi);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(155, 89, 245, 0.1);
}

.service-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c, var(--o-purple)),
    transparent
  );
}

/* card top section */
.card-icon-area {
  padding: 28px 24px 20px;
  text-align: center;
  border-bottom: 1px solid var(--o-border);
}

.icon-orb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--o-purple-dim);
  border: 1px solid rgba(155, 89, 245, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 20px rgba(155, 89, 245, 0.2);
  animation: orbPulse 3.5s ease-in-out infinite;
}

@keyframes orbPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(155, 89, 245, 0.2);
  }

  50% {
    box-shadow: 0 0 40px rgba(155, 89, 245, 0.45);
  }
}

.icon-orb img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.card-title {
  font-family: "Cinzel", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 0.88rem;
  color: var(--o-muted);
  line-height: 1.6;
}

.card-desc strong {
  color: var(--o-text);
}

/* card bottom section */
.card-action-area {
  padding: 18px 22px 22px;
  margin-top: auto;
}

/* cost/requirement box */
.requirement-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 14px;
}

.req-label {
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o-muted);
}

.req-value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* locked state for reborn */
.requirement-box.locked {
  border-color: rgba(231, 76, 60, 0.3);
}

.requirement-box.locked .req-value {
  color: #e74c3c;
}

.requirement-box.unlocked {
  border-color: rgba(46, 204, 113, 0.3);
}

.requirement-box.unlocked .req-value {
  color: #2ecc71;
}

/* action buttons */
.btn-oracle {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  border-bottom: 3px solid var(--o-purple-dark);
  background: linear-gradient(
    135deg,
    var(--o-purple-mid) 0%,
    var(--o-purple-dark) 100%
  );
  color: #e8d0ff;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    transform var(--tr),
    box-shadow var(--tr),
    filter var(--tr);
  box-shadow: 0 0 20px rgba(155, 89, 245, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-oracle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transform: translateX(-110%);
  transition: transform 0.5s ease;
}

.btn-oracle:hover:not(:disabled)::before {
  transform: translateX(110%);
}

.btn-oracle:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: brightness(1.2);
  box-shadow: 0 0 36px rgba(155, 89, 245, 0.55);
}

.btn-oracle:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-oracle:disabled {
  background: linear-gradient(135deg, #1e1826, #130d1c);
  border-color: #251c33;
  color: #4a3a5a;
  cursor: not-allowed;
  box-shadow: none;
}

/* mystic pulse while loading */
@keyframes mysticPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(155, 89, 245, 0.2);
  }

  50% {
    box-shadow: 0 0 50px rgba(155, 89, 245, 0.7);
  }
}

.btn-oracle.consulting {
  animation: mysticPulse 0.7s ease-in-out infinite;
}

/* ── Confirm modal ── */
.oracle-modal .modal-content {
  background: var(--o-surface);
  border: 1px solid var(--o-border-hi);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(155, 89, 245, 0.1);
}

.oracle-modal .modal-content::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--o-purple),
    var(--o-pink),
    transparent
  );
}

.oracle-modal .modal-header {
  border-bottom: 1px solid var(--o-border);
  padding: 18px 22px;
}

.oracle-modal .modal-title {
  font-family: "Cinzel", serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

.oracle-modal .modal-body {
  padding: 22px;
  color: var(--o-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.oracle-modal .modal-body .warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 14px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 10px;
  color: #e88;
  font-size: 0.88rem;
}

.oracle-modal .modal-footer {
  border-top: 1px solid var(--o-border);
  padding: 16px 22px;
  gap: 10px;
}

.btn-oracle-cancel {
  padding: 10px 24px;
  border: 1px solid var(--o-border);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  color: var(--o-muted);
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--tr),
    color var(--tr);
}

.btn-oracle-cancel:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--o-text);
}

/* ═══ pvp.php ═══ */

body.page-pvp {
  --gold: #c8962a;
  --gold-hi: #f5c842;
  --ember: #e8622a;
  --iron: #1c1c24;
  --iron-deep: #0e0e14;
  --panel: rgba(14, 14, 20, 0.97);
  --text: #e2dfd8;
  --text-dim: #8a8880;
  --text-bright: #f4f1ec;
  --line: rgba(255, 255, 255, 0.06);
  --line-gold: rgba(200, 150, 42, 0.28);
  --tr: 0.22s ease;
  --br: 14px;
}

body.game-body {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 500;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body.page-pvp .game-overlay {
  background:
    radial-gradient(
      ellipse 120% 60% at 50% -10%,
      rgba(200, 150, 42, 0.07) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(14, 14, 20, 0.6) 0%,
      rgba(6, 6, 10, 0.98) 70%
    ) !important;
}

/* ══ Panel ══ */
.rpg-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--br);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
  color: var(--text);
  position: relative;
}

.rpg-panel.stripe::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold) 35%,
    var(--ember) 65%,
    transparent
  );
}

/* ══ Kicker ══ */
.kicker {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.kicker::before,
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.kicker::before {
  max-width: 20px;
}

/* ══ Tabs ══ */
.pvp-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.pvp-tab {
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 22px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color var(--tr),
    border-color var(--tr);
}

.pvp-tab.active {
  color: var(--gold-hi, #f5c842);
  border-bottom-color: var(--gold);
}

.pvp-tab:hover:not(.active) {
  color: var(--text);
}

/* ══ My stat bar ══ */
.my-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(200, 150, 42, 0.03);
}

.my-bar-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--line-gold);
  flex-shrink: 0;
}

.my-bar-name {
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-bright);
}

.my-bar-tier {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.my-bar-pts {
  font-family: "Cinzel", serif;
  font-size: 1.05rem;
  font-weight: 900;
  margin-left: auto;
}

.my-bar-pts-label {
  font-size: 0.62rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ══ Search bar ══ */
.lobby-search {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 14px;
  font-size: 0.85rem;
  width: 100%;
  transition: border-color var(--tr);
}

.lobby-search:focus {
  outline: none;
  border-color: rgba(200, 150, 42, 0.35);
}

.lobby-search::placeholder {
  color: var(--text-dim);
}

/* ══ Player card grid ══ */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.player-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  transition:
    background var(--tr),
    border-color var(--tr),
    transform 0.15s;
  position: relative;
}

.player-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.player-card.is-me {
  opacity: 0.45;
  pointer-events: none;
}

.pc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--line);
  margin-bottom: 8px;
}

.pc-name {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-level {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.pc-tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Cinzel", serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid;
  margin-bottom: 8px;
}

.pc-pts {
  font-family: "Cinzel", serif;
  font-size: 0.9rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.btn-challenge {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg, #3a0808, #200404);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #ff9a9a;
  cursor: pointer;
  transition:
    background var(--tr),
    box-shadow var(--tr),
    transform 0.15s;
  width: 100%;
}

.btn-challenge:hover {
  background: linear-gradient(135deg, #6b1010, #3a0808);
  box-shadow: 0 0 18px rgba(220, 53, 69, 0.35);
  transform: translateY(-1px);
}

/* ══ Leaderboard rows ══ */
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  transition: background var(--tr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.lb-row:last-child {
  border-bottom: none;
}

.lb-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.lb-rank-num {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.8rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-dim);
}

.lb-rank-num.top {
  color: var(--gold-hi, #f5c842);
}

.lb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.lb-name {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
}

.lb-pts {
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-bright);
}

.lb-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lb-row.is-me {
  background: rgba(200, 150, 42, 0.06);
  border-color: rgba(200, 150, 42, 0.15);
}

.lb-row.lb-row-sep {
  border-top: 2px dashed rgba(255, 255, 255, 0.08);
  margin-top: 4px;
}

/* ══ Challenge preview overlay ══ */
#challenge-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

#challenge-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.challenge-modal {
  width: min(680px, 95vw);
  background: rgba(10, 8, 18, 0.98);
  border: 1px solid rgba(200, 150, 42, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.95);
}

.challenge-modal-header {
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--ember),
    transparent
  );
}

.challenge-modal-body {
  padding: 22px 24px;
}

/* ══ VS layout ══ */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
}

.fighter {
  padding: 20px 16px 16px;
  text-align: center;
  position: relative;
}

.fighter.challenger {
  background: linear-gradient(135deg, rgba(200, 150, 42, 0.04), transparent);
}

.fighter.opponent {
  background: linear-gradient(225deg, rgba(232, 98, 42, 0.04), transparent);
}

.avatar-ring {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  z-index: 1;
}

.avatar-ring::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--iron-deep), var(--iron-deep)) padding-box,
    conic-gradient(
        var(--tier-color, var(--gold)) 0deg,
        transparent 180deg,
        var(--tier-color, var(--gold)) 360deg
      )
      border-box;
  animation: ringRotate 7s linear infinite;
}

@keyframes ringRotate {
  to {
    transform: rotate(360deg);
  }
}

.fighter-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--iron);
  box-shadow:
    0 0 22px var(--tier-glow, rgba(200, 150, 42, 0.2)),
    0 4px 14px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1;
}

.fighter-name {
  font-family: "Cinzel", serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 4px;
}

.fighter-level {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  border: 1px solid;
  margin-bottom: 8px;
}

.rank-pts {
  font-family: "Cinzel", serif;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.rank-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fstat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
  font-size: 0.78rem;
}

.fstat-row + .fstat-row {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.fstat-icon {
  width: 16px;
  text-align: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.fstat-label {
  color: var(--text-dim);
  flex: 1;
  font-size: 0.75rem;
}

.fstat-val {
  font-family: "Cinzel", serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-bright);
}

.vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 14px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.vs-text {
  font-family: "Cinzel", serif;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(200, 150, 42, 0.4);
}

.vs-divider-line {
  width: 1px;
  flex: 1;
  background: var(--line);
}

.rank-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  text-align: center;
}

.preview-win {
  color: #4caf50;
}

.preview-lose {
  color: #ef5350;
}

.btn-fight {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #6b1010, #3a0808);
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: #ff8a8a;
  box-shadow:
    0 0 18px rgba(220, 53, 69, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    background var(--tr),
    box-shadow var(--tr),
    transform 0.15s;
}

.btn-fight:hover:not(:disabled) {
  background: linear-gradient(135deg, #8b1515, #5a1010);
  box-shadow: 0 0 30px rgba(220, 53, 69, 0.4);
  transform: translateY(-2px);
}

.btn-fight:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.fight-spinner {
  display: none;
}

.fighting .fight-spinner {
  display: inline-block;
}

.fighting .fight-text {
  display: none;
}

.btn-close-sm {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    color var(--tr),
    background var(--tr);
}

.btn-close-sm:hover {
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.06);
}

/* ══ Fight result overlay ══ */
#fight-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

#fight-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.fight-modal {
  width: min(700px, 95vw);
  background: rgba(10, 8, 18, 0.98);
  border: 1px solid rgba(200, 150, 42, 0.25);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.95);
}

.fight-modal-header {
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--ember),
    transparent
  );
}

.fight-modal-body {
  padding: 24px 28px;
}

.log-area {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.83rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.log-area::-webkit-scrollbar {
  width: 3px;
}

.log-area::-webkit-scrollbar-thumb {
  background: rgba(200, 150, 42, 0.4);
  border-radius: 3px;
}

.log-entry {
  padding: 3px 6px;
  border-radius: 4px;
  animation: logIn 0.25s ease both;
  color: var(--text-dim);
}

.log-entry.crit {
  color: #ef5350;
  font-weight: 700;
  background: rgba(239, 83, 80, 0.08);
}

.log-entry.dodge {
  color: #42a5f5;
  font-style: italic;
}

.log-entry.result {
  color: var(--gold-hi, #f5c842);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 6px;
}

@keyframes logIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.result-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.result-side {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.result-side.winner {
  border-color: rgba(200, 150, 42, 0.4);
  background: rgba(200, 150, 42, 0.06);
}

.result-side.loser {
  border-color: rgba(239, 83, 80, 0.3);
  background: rgba(239, 83, 80, 0.05);
}

.result-label {
  font-family: "Cinzel", serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.result-label.winner-l {
  color: var(--gold);
}

.result-label.loser-l {
  color: #ef5350;
}

.result-name {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.result-rank-change {
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  font-weight: 900;
}

.result-rank-change.up {
  color: #4caf50;
}

.result-rank-change.down {
  color: #ef5350;
}

.result-rank-new {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.btn-close-modal {
  display: block;
  width: 100%;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background var(--tr),
    color var(--tr);
}

.btn-close-modal:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-bright);
}

/* ══ Reveal ══ */
body.page-pvp .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

body.page-pvp .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Combat log: hit ── */
.log-entry.hit {
  color: #e0e0e0;
  background: rgba(255, 255, 255, 0.04);
}

/* ── Rank-change animated pop ── */
@keyframes rankPop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.8); }
  60%  { transform: translateY(-4px) scale(1.1); }
  100% { opacity: 1; transform: none; }
}

.result-rank-change {
  animation: rankPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Tier progress bar ── */
.tier-progress-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin: 0;
}

.tier-progress-fill {
  height: 100%;
  transition: width 0.65s ease;
}

.tier-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-dim);
  padding: 5px 18px 10px;
}

/* ── Tier filter pills ── */
.tier-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tier-pill {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background var(--tr),
    border-color var(--tr),
    color var(--tr);
}

.tier-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.tier-pill.active {
  background: color-mix(in srgb, var(--tc, #c8962a) 15%, transparent);
  border-color: color-mix(in srgb, var(--tc, #c8962a) 50%, transparent);
  color: var(--tc, var(--gold));
}

/* ── Difficulty badge ── */
.pc-diff {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.pc-diff.diff-easy { color: #66bb6a; background: rgba(102, 187, 106, 0.12); }
.pc-diff.diff-even { color: #ffd54f; background: rgba(255, 213, 79,  0.10); }
.pc-diff.diff-hard { color: #ef5350; background: rgba(239, 83,  80,  0.12); }

/* ── Cooldown challenge button state ── */
.btn-challenge.btn-challenge-cd {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Recent matches ── */
.recent-matches {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 14px;
  overflow: hidden;
}

.rm-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.rm-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
}

.rm-entry:last-child { border-bottom: none; }

.rm-outcome {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 0.7rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.rm-entry.rm-win  .rm-outcome { color: #66bb6a; }
.rm-entry.rm-loss .rm-outcome { color: #ef5350; }

.rm-opp {
  flex: 1;
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-rc {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.rm-rc.up   { color: #66bb6a; }
.rm-rc.down { color: #ef5350; }

/* ── Anti-farm result note ── */
.result-farm-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-dim);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
}

/* ── Tier-change banner ── */
.tier-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tier-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tier-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  background: rgba(8, 6, 16, 0.97);
  border: 1px solid var(--tc, var(--gold));
  border-radius: 50px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.85),
    0 0 28px color-mix(in srgb, var(--tc, var(--gold)) 50%, transparent);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--tc, var(--gold));
  white-space: nowrap;
}

/* ═══ rankings.php ═══ */

/* Scoped Overlay */
body.page-rankings .game-overlay {
  background: radial-gradient(
    circle at top,
    rgba(20, 20, 30, 0.6) 0%,
    rgba(5, 5, 10, 0.95) 100%
  ) !important;
}

/* Obsidian Panel */
body.page-rankings .rpg-panel {
  background: linear-gradient(
    160deg,
    rgba(28, 28, 32, 0.95) 0%,
    rgba(10, 10, 15, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  color: #eee;
  height: 100%;
  overflow: hidden;
}

/* Panel Headers */
.panel-header {
  padding: 15px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

.header-gold {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  border-bottom-color: rgba(255, 215, 0, 0.2);
}

.header-level {
  color: #4fc3f7;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.3);
  border-bottom-color: rgba(79, 195, 247, 0.2);
}

.header-reborn {
  color: #e040fb;
  text-shadow: 0 0 10px rgba(224, 64, 251, 0.3);
  border-bottom-color: rgba(224, 64, 251, 0.2);
}

.header-tower {
  color: #ff5252;
  text-shadow: 0 0 10px rgba(255, 82, 82, 0.3);
  border-bottom-color: rgba(255, 82, 82, 0.2);
}

.header-online {
  color: #69f0ae;
  text-shadow: 0 0 10px rgba(105, 240, 174, 0.3);
  border-bottom-color: rgba(105, 240, 174, 0.2);
}

.header-pvp {
  color: #ef9a9a;
  text-shadow: 0 0 10px rgba(239, 83, 80, 0.35);
  border-bottom-color: rgba(239, 83, 80, 0.25);
}

.pvp-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 50px;
  border: 1px solid;
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
}

/* Rank Row */
.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}

.rank-row:last-child {
  border-bottom: none;
}

.rank-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Player Info */
.player-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-small {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #555;
  object-fit: cover;
}

.rank-val {
  font-weight: bold;
  font-family: monospace;
  font-size: 1.1em;
}

/* Status Dots */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
  box-shadow: 0 0 5px currentColor;
}

.status-dot.online {
  background-color: #00e676;
  box-shadow: 0 0 8px #00e676;
}

.status-dot.offline {
  background-color: #616161;
}

/* Filters */
.filter-drop-shadow {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* ═══ settings.php ═══ */

/* ── Tokens ── */
body.page-settings {
  --s-bg: #08090f;
  --s-surface: rgba(18, 20, 28, 0.97);
  --s-raise: rgba(26, 28, 40, 0.95);
  --s-border: rgba(255, 255, 255, 0.07);
  --s-gold: #c9a227;
  --s-gold-lit: #f0c040;
  --s-blue: #4a9eff;
  --s-blue-dim: rgba(74, 158, 255, 0.15);
  --s-green: #2ecc71;
  --s-red: #e74c3c;
  --s-muted: #6a7080;
  --s-text: #d8dce8;
  --tr: 0.22s ease;
}

/* ── Base ── */
body.game-body {
  font-family: "Crimson Text", Georgia, serif;
  color: var(--s-text);
}

body.page-settings .game-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(20, 30, 60, 0.3) 0%,
    rgba(4, 5, 10, 0.93) 65%
  ) !important;
}

/* ── Settings card ── */
.settings-card {
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* Top accent bar */
.settings-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--s-gold) 30%,
    var(--s-blue) 70%,
    transparent 100%
  );
}

/* ── Card header ── */
.settings-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--s-border);
  text-align: center;
}

.settings-title {
  font-family: "Cinzel", serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.settings-subtitle {
  font-size: 0.82rem;
  color: var(--s-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Control rows ── */
.settings-body {
  padding: 24px 32px 28px;
}

.control-row {
  background: var(--s-raise);
  border: 1px solid var(--s-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  transition:
    border-color var(--tr),
    box-shadow var(--tr);
}

.control-row:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.control-row:last-of-type {
  margin-bottom: 0;
}

/* ── Volume row ── */
.vol-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vol-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--s-text);
}

.vol-label i {
  color: var(--s-blue);
  font-size: 1.1rem;
}

.vol-badge {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--s-blue-dim);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: var(--s-blue);
  min-width: 54px;
  text-align: center;
  transition:
    color var(--tr),
    background var(--tr);
}

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  padding: 0;
  margin: 0;
}

.range-track {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  /* clip the fill pseudo */
}

/* We set the fill via JS on --val */
.range-track::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--val, 70%);
  background: linear-gradient(90deg, var(--s-blue), #79c5ff);
  border-radius: 4px;
  transition: width 0.08s;
}

.range-wrap {
  position: relative;
  padding: 10px 0;
}

.range-wrap input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--s-blue);
  box-shadow: 0 0 10px rgba(74, 158, 255, 0.6);
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 18px rgba(74, 158, 255, 0.9);
}

input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--s-blue);
  box-shadow: 0 0 10px rgba(74, 158, 255, 0.6);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  background: transparent;
  height: 6px;
}

input[type="range"]:focus {
  outline: none;
}

.range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}

.range-ticks span {
  font-size: 0.68rem;
  color: var(--s-muted);
  font-family: "Cinzel", serif;
}

/* ── Mute toggle row ── */
.mute-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mute-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mute-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border: 1px solid var(--s-border);
  transition:
    background var(--tr),
    border-color var(--tr),
    color var(--tr);
  flex-shrink: 0;
}

.mute-icon.on {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.35);
  color: var(--s-green);
}

.mute-icon.off {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.35);
  color: var(--s-red);
}

.mute-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--s-text);
}

.mute-text small {
  font-size: 0.82rem;
  transition: color var(--tr);
}

.mute-text small.enabled {
  color: var(--s-green);
}

.mute-text small.disabled {
  color: var(--s-red);
}

/* Custom toggle switch */
.toggle-wrap {
  flex-shrink: 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--s-border);
  cursor: pointer;
  transition:
    background var(--tr),
    border-color var(--tr);
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  bottom: 3px;
  border-radius: 50%;
  background: var(--s-muted);
  transition:
    transform var(--tr),
    background var(--tr),
    box-shadow var(--tr);
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(46, 204, 113, 0.2);
  border-color: rgba(46, 204, 113, 0.5);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(26px);
  background: var(--s-green);
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}

.toggle-switch input:not(:checked) + .toggle-slider {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.4);
}

.toggle-switch input:not(:checked) + .toggle-slider::before {
  background: var(--s-red);
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--s-blue);
  outline-offset: 3px;
}


/* ── Divider ── */
.settings-divider {
  height: 1px;
  background: var(--s-border);
  margin: 22px 0;
}

/* ── Save button ── */
.btn-settings-save {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a5c38 0%, #0f3a22 100%);
  border-bottom: 3px solid #0a2416;
  color: #fff;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    transform var(--tr),
    box-shadow var(--tr),
    filter var(--tr);
  box-shadow: 0 0 18px rgba(25, 135, 84, 0.25);
  position: relative;
  overflow: hidden;
}

.btn-settings-save::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  transform: translateX(-110%);
  transition: transform 0.5s ease;
}

.btn-settings-save:hover::before {
  transform: translateX(110%);
}

.btn-settings-save:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 0 28px rgba(25, 135, 84, 0.5);
}

.btn-settings-save:active {
  transform: scale(0.97);
}

.btn-settings-save:disabled {
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Section label ── */
.section-label {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin-bottom: 12px;
}

/* ── Display mode pill buttons ── */
.mode-group {
  display: flex;
  gap: 10px;
}

.mode-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--s-border);
  background: var(--s-raise);
  color: var(--s-muted);
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--tr);
}

.mode-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--s-text);
}

.mode-btn.active {
  background: var(--s-blue-dim);
  border-color: rgba(74, 158, 255, 0.5);
  color: var(--s-blue);
  box-shadow: 0 0 14px rgba(74, 158, 255, 0.2);
}

/* Saved checkmark flash */
@keyframes savedFlash {
  0% {
    box-shadow: 0 0 0 rgba(46, 204, 113, 0);
  }

  40% {
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.6);
  }

  100% {
    box-shadow: 0 0 18px rgba(25, 135, 84, 0.25);
  }
}

.btn-settings-save.saved {
  animation: savedFlash 0.6s ease;
}

/* ═══ tower.php ═══ */

/* --- BACKGROUND LAYERS --- */
body.page-tower {
  overflow: hidden;
  /* Prevent scrolling during battle */
  background-color: #000;
  height: 100vh;
  width: 100vw;
}

.battle-bg {
  background-image: var(--battle-bg-image);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.battle-overlay-tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  backdrop-filter: blur(2px);
}

/* --- CONTENT LAYER --- */
.battle-container {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
}

/* --- ANIMATIONS --- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-15px) rotate(1deg);
  }
}

@keyframes boss-pulse {
  0% {
    filter: drop-shadow(0 0 6px #f00) drop-shadow(0 0 2px #600);
    scale: 1;
  }
  50% {
    filter: drop-shadow(0 0 28px #f00) drop-shadow(0 0 10px #a00);
    scale: 1.06;
  }
  100% {
    filter: drop-shadow(0 0 6px #f00) drop-shadow(0 0 2px #600);
    scale: 1;
  }
}

@keyframes hit-shake {
  0% {
    transform: translate(0) scale(1);
  }
  12% {
    transform: translate(-9px, 5px) scale(0.96);
  }
  28% {
    transform: translate(9px, -7px) scale(1.04);
  }
  44% {
    transform: translate(-7px, 7px) scale(0.97);
  }
  60% {
    transform: translate(7px, -4px) scale(1.02);
  }
  78% {
    transform: translate(-3px, 2px) scale(1);
  }
  100% {
    transform: translate(0) scale(1);
  }
}

/* --- SCREEN FLASH (attack) --- */
#screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
}
#screen-flash.active {
  animation: flash-out 0.32s ease-out forwards;
}
@keyframes flash-out {
  0% {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
  }
  100% {
    opacity: 0;
    background: rgba(255, 255, 255, 0);
  }
}
#screen-flash.crit-flash.active {
  animation: flash-out-crit 0.45s ease-out forwards;
}
@keyframes flash-out-crit {
  0% {
    opacity: 1;
    background: rgba(255, 220, 0, 0.28);
  }
  60% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}

/* --- PLAYER HIT VIGNETTE + SHAKE --- */
#player-hit-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(190, 0, 0, 0.75) 100%
  );
}
#player-hit-vignette.active {
  animation: vignette-out 0.65s ease-out forwards;
}
@keyframes vignette-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes screen-shake {
  0% {
    transform: translate(0, 0);
  }
  18% {
    transform: translate(-6px, 3px);
  }
  36% {
    transform: translate(6px, -3px);
  }
  54% {
    transform: translate(-4px, 4px);
  }
  72% {
    transform: translate(3px, -2px);
  }
  88% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.screen-shaking {
  animation: screen-shake 0.38s ease-out;
}

/* --- LOW HP WARNING --- */
#low-hp-warning {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(200, 0, 0, 0.35) 100%
  );
  transition: opacity 0.6s;
}
#low-hp-warning.active {
  animation: low-hp-pulse 1.4s ease-in-out infinite;
}
@keyframes low-hp-pulse {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
}

/* --- PARTICLES --- */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 50, 50, 0.6);
  border-radius: 50%;
  bottom: -10px;
  animation: rise 10s infinite ease-in;
  z-index: 5;
  pointer-events: none;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(-110vh) scale(0.5);
    opacity: 0;
  }
}

/* --- MONSTER STAGE --- */
.monster-stage {
  height: 40vh;
  /* Fixed height to prevent layout shifting */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 20px;
}

.monster-sprite {
  max-height: 100%;
  max-width: 90%;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.8));
  transition: all 0.2s ease;
  animation: float 4s ease-in-out infinite;
}

.monster-sprite.is-boss {
  animation: boss-pulse 3s infinite ease-in-out;
}

.monster-sprite.hit {
  animation: hit-shake 0.3s;
  filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5);
}

.monster-sprite.dead {
  opacity: 0;
  transform: scale(0.1);
  filter: grayscale(1);
  transition: all 0.8s;
}

/* --- HUD ELEMENTS --- */
.hud-card {
  background: rgba(20, 10, 10, 0.85);
  border: 1px solid #444;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  border-radius: 10px;
}

.hud-card.boss-frame {
  border-color: #d00;
  box-shadow: 0 0 20px rgba(200, 0, 0, 0.3);
}

.tower-badge {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #555;
  padding: 8px 20px;
  border-radius: 20px;
  font-family: "Cinzel", serif;
  font-weight: bold;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
}

.badge-boss {
  border-color: #f00;
  color: #f55;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
  text-shadow: 0 0 5px red;
}

/* --- WAVE PROGRESS DOTS --- */
.wave-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wave-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #555;
  transition: all 0.3s;
}

.wave-dot.done {
  background: #4caf50;
  border-color: #4caf50;
  box-shadow: 0 0 6px #4caf50;
}
.wave-dot.boss {
  background: #f44336;
  border-color: #f44336;
  box-shadow: 0 0 8px #f44336;
  width: 13px;
  height: 13px;
}
.wave-dot.current {
  border-color: #ffcc00;
  box-shadow: 0 0 6px #ffcc00;
}

/* --- DAMAGE NUMBERS --- */
.dmg-number {
  position: fixed;
  font-weight: 900;
  font-size: 1.5rem;
  color: #ff5555;
  text-shadow:
    0 0 10px #900,
    0 2px 0 #000;
  pointer-events: none;
  z-index: 200;
  font-family: monospace;
  animation: dmg-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  white-space: nowrap;
}
.dmg-number.crit {
  font-size: 2.2rem;
  color: #ffe033;
  text-shadow:
    0 0 16px #da0,
    0 0 6px #f80,
    0 2px 0 #000;
}
.dmg-number.mob {
  color: #e06060;
  font-size: 1.05rem;
  text-shadow: 0 1px 0 #000;
}
@keyframes dmg-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  18% {
    opacity: 1;
    transform: translateY(-18px) scale(1.25);
  }
  65% {
    opacity: 1;
    transform: translateY(-64px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-90px) scale(0.85);
  }
}

/* --- HP BAR TRANSITIONS --- */
#monster-health-bar,
#player-health-bar {
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- LOG POP ANIMATION --- */
@keyframes log-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#quick-log {
  transition: color 0.15s;
}
#quick-log.pop {
  animation: log-pop 0.28s ease-out forwards;
}

/* --- ASCENSION OVERLAY --- */
#ascendOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 0, 0, 0.96);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reward-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 200, 0, 0.2);
  border-radius: 12px;
  padding: 16px 28px;
  display: flex;
  gap: 32px;
  margin: 20px 0;
}

.reward-stat {
  text-align: center;
}
.reward-stat .rs-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.reward-stat .rs-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}
.reward-stat .rs-lbl {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #888;
  text-transform: uppercase;
}

/* --- DEATH OVERLAY --- */
#deathOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.6s;
}

#deathOverlay.show {
  background: rgba(0, 0, 0, 0.92);
}

@keyframes death-text {
  0% {
    opacity: 0;
    transform: scale(2) translateY(-20px);
  }
  40% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.death-title {
  font-size: 4rem;
  font-weight: 900;
  color: #c00;
  text-shadow:
    0 0 40px #f00,
    0 0 80px #800;
  letter-spacing: 8px;
  text-transform: uppercase;
  animation: death-text 0.8s ease-out forwards;
}

/* ═══ tower_select.php ═══ */

body.page-tower-select {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient Particles */
.particle {
  position: fixed;
  border-radius: 50%;
  animation: float-up linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes float-up {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) scale(1.5);
    opacity: 0;
  }
}

/* --- Card --- */
.tower-card {
  background: rgba(12, 2, 2, 0.92);
  border: 1px solid #600;
  box-shadow:
    0 0 60px rgba(120, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 80, 80, 0.07);
  backdrop-filter: blur(12px);
  margin-top: 5vh;
}

.tower-title {
  font-family: "Cinzel", serif;
  background: linear-gradient(to bottom, #ff6666, #880000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3px;
}

/* --- Stats Row --- */
body.page-tower-select .stat-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78rem;
  color: #bbb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.page-tower-select .stat-pill .val {
  color: #fff;
  font-weight: 700;
}

/* --- Checkpoint Container --- */
.checkpoint-container {
  background: linear-gradient(135deg, #1a0000, #0d0000);
  border: 1px solid #500;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.floor-display {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 30px rgba(255, 60, 60, 0.5);
}

.floor-label {
  font-size: 0.68rem;
  letter-spacing: 3px;
  color: #777;
  text-transform: uppercase;
}

.form-select-dark {
  background-color: #110000;
  color: #fff;
  border: 1px solid #500;
  text-align: center;
  font-family: monospace;
  font-weight: bold;
  font-size: 1rem;
}

.form-select-dark:focus {
  background-color: #1a0000;
  color: #fff;
  border-color: #a00;
  box-shadow: 0 0 12px rgba(180, 0, 0, 0.4);
  outline: none;
}

/* --- Reward Preview --- */
.reward-preview {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 180, 0, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.reward-preview.milestone {
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 20px rgba(255, 200, 0, 0.08);
}

.reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.reward-item .r-label {
  color: #888;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.reward-item .r-value {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.reward-item .r-sub {
  color: #666;
  font-size: 0.7rem;
}

.milestone-badge {
  display: none;
  background: linear-gradient(90deg, #7a5c00, #c49a00, #7a5c00);
  background-size: 200%;
  animation: shimmer 2s linear infinite;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
}
.reward-preview.milestone .milestone-badge {
  display: inline-block;
}

/* --- Enter Button --- */
.btn-enter {
  background: linear-gradient(90deg, #7a0000, #c00000, #7a0000);
  background-size: 200% 100%;
  border: 1px solid #ff4444;
  color: white;
  transition: all 0.3s;
  animation: shimmer 3s infinite linear;
  letter-spacing: 2px;
}

.btn-enter:hover:not(:disabled) {
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.55);
  transform: translateY(-1px) scale(1.01);
  color: #fff;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.divider-glow {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #500, transparent);
  opacity: 0.6;
  margin: 14px 0;
}

/* ═══ premium.php ═══ */

body.page-premium {
  --vip-purple: #9c27b0;
  --vip-magenta: #e040fb;
  --vip-gold: #ffd54f;
  --vip-bg: #0d0d14;
  --card-bg: rgba(18, 14, 32, 0.97);
  --line: rgba(224, 64, 251, 0.18);
}

body.page-premium .game-overlay {
  /* Gradient only — body already carries the bg.jpg */
  background:
    radial-gradient(
      ellipse 140% 50% at 50% -5%,
      rgba(156, 39, 176, 0.12) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.96) 100%);
}

/* ── Hero Title ── */
.page-title {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #fff;
  text-shadow:
    0 0 30px rgba(224, 64, 251, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.05em;
}

/* ── Shared card shell ── */
.vip-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  padding: 28px 24px;
}

/* ── VIP Status card ── */
.status-card {
  border-top: 3px solid var(--vip-magenta);
}
.vip-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a0070, #aa00ff);
  border: 2px solid var(--vip-magenta);
  box-shadow: 0 0 20px rgba(224, 64, 251, 0.4);
  font-family: "Cinzel", serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.vip-level-badge.lv0 {
  background: linear-gradient(135deg, #1c1c1c, #333);
  border-color: #555;
  box-shadow: none;
  color: #888;
}

/* ── Progress bar ── */
.vip-progress-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50px;
  height: 18px;
  overflow: hidden;
}
.vip-progress-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, #7b1fa2, #e040fb);
  box-shadow: 0 0 10px rgba(224, 64, 251, 0.6);
  transition: width 0.6s ease;
}
.vip-progress-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Bonus pills ── */
.bonus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
}
.bonus-xp {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #81c784;
}
.bonus-drop {
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.4);
  color: #64b5f6;
}
.bonus-loot {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  color: #ffd54f;
}
.bonus-bag {
  background: rgba(156, 39, 176, 0.15);
  border: 1px solid rgba(156, 39, 176, 0.4);
  color: #ce93d8;
}
.bonus-zero {
  opacity: 0.4;
}

/* ── Donation card ── */
.donate-card {
  border-top: 3px solid var(--vip-gold);
}

.amount-input-wrap {
  position: relative;
}
.amount-input-wrap .euro-sign {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vip-gold);
  pointer-events: none;
}
#donateAmount {
  padding-left: 32px;
  font-size: 1.2rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #fff;
  border-radius: 10px;
}
#donateAmount:focus {
  border-color: var(--vip-gold);
  box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.15);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.quick-amounts button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ccc;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.quick-amounts button:hover,
.quick-amounts button.active {
  background: rgba(255, 193, 7, 0.15);
  border-color: var(--vip-gold);
  color: var(--vip-gold);
}
.pts-preview {
  font-size: 2rem;
  font-weight: 900;
  color: var(--vip-magenta);
  font-family: "Cinzel", serif;
  text-shadow: 0 0 15px rgba(224, 64, 251, 0.5);
}

.btn-donate {
  background: linear-gradient(90deg, #aa00ff, #e040fb);
  border: none;
  color: #fff;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1rem;
  box-shadow: 0 5px 20px rgba(170, 0, 255, 0.4);
  transition: all 0.3s;
  width: 100%;
}
.btn-donate:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(224, 64, 251, 0.7);
}

/* ── Level projection table ── */
.tier-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
}
.tier-table thead th {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
  font-weight: 600;
}
.tier-row td {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
}
.tier-row td:first-child {
  border-radius: 10px 0 0 10px;
}
.tier-row td:last-child {
  border-radius: 0 10px 10px 0;
}
.tier-row.reached td {
  background: rgba(156, 39, 176, 0.14);
}
.tier-row.current td {
  background: rgba(224, 64, 251, 0.18);
  border: 1px solid rgba(224, 64, 251, 0.35);
}
.tier-lv {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--vip-magenta);
}
.tier-lv.unreached {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Section label ── */
.section-kicker {
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

/* ═══ offline.php ═══ */

body.page-offline {
  background-color: #1a1a1a;
  /* Matches your manifest background */
  color: #ffffff;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.page-offline .container {
  padding: 20px;
  max-width: 600px;
}

body.page-offline img {
  width: 128px;
  height: 128px;
  margin-bottom: 2rem;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

body.page-offline h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #f0f0f0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.page-offline p {
  font-size: 1.1rem;
  color: #a0a0a0;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

.btn-retry {
  background-color: #0d6efd;
  /* Bootstrap primary blue, or change to your game's accent color */
  color: white;
  border: none;
  padding: 15px 40px;
  font-size: 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 600;
}

.btn-retry:hover {
  background-color: #0b5ed7;
}

.btn-retry:active {
  transform: scale(0.98);
}

/* ═══ privacy.php ═══ */

/* Simple Dark Theme to match Vahnora's aesthetic */
body.page-privacy {
  background-color: #121212;
  color: #e0e0e0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

body.page-privacy .container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

body.page-privacy h1,
body.page-privacy h2,
body.page-privacy h3 {
  color: #ffffff;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

body.page-privacy h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

body.page-privacy a {
  color: #8a2be2;
  text-decoration: none;
}

/* Purple accent for fantasy vibe */
body.page-privacy a:hover {
  text-decoration: underline;
}

.footer {
  text-align: center;
  margin-top: 40px;
  font-size: 0.8em;
  color: #777;
}

/* ── Embed mode (in-game iframe) ── */
body.is-embed {
  background: transparent !important;
  min-height: unset;
}
body.is-embed .game-overlay { display: none !important; }
body.is-embed .container:first-of-type { padding-top: 0 !important; }
body.is-embed .mt-4 { margin-top: .5rem !important; }