/* ==========================================================================
   ROHAN REWORK NEW — ELITE MMORPG THEME
   Namespace: rohan-
   ========================================================================== */

:root {
  /* Obsidian Bronze & Gold Palette (Rohan Signature) */
  --rohan-bg: #090604;
  --rohan-bg-surface: #140e0a;
  --rohan-bg-card: rgba(22, 16, 11, 0.94);
  --rohan-border: #3b2a1d;
  --rohan-border-light: #5a422d;
  --rohan-border-gold: #c59b56;

  --rohan-gold: #f7dba9;
  --rohan-gold-light: #fbe3a1;
  --rohan-gold-primary: #e5b66b;
  --rohan-gold-dark: #8c6a28;
  --rohan-gold-glow: rgba(247, 219, 169, 0.45);
  --rohan-gold-grad: linear-gradient(180deg, #ffffff 0%, #fbe3a1 25%, #e5b66b 70%, #9e742e 100%);

  /* Ruby Bevel Accent */
  --rohan-ruby-grad: linear-gradient(160deg, #7a1f1f 0%, #4a0d0d 100%);
  --rohan-ruby-border: #b33939;

  /* Gold Bevel Accent (matching play button luxury metal) */
  --rohan-gold-btn-grad: linear-gradient(160deg, #e0d2aa 0%, #cbb784 35%, #b59f6b 70%, #957f49 100%);
  --rohan-gold-btn-grad2: linear-gradient(160deg, #2f2a1a 0%, #94886a 35%, #7a6e51 70%, #957f49 100%);
  --rohan-gold-btn-border: #d4be88;

  /* Typography */
  --rohan-text: #dbd2b2;
  --rohan-text-muted: #8b8070;
  --rohan-text-heading: #fcf1dc;

  /* Colors */
  --rohan-green: #22c55e;
  --rohan-blue: #9ee6ff;
  --rohan-accent-cyan: #9ee6ff;
  --rohan-champion-blue: #9ee6ff;
  --rohan-purple: #a855f7;
  --rohan-discord: #5865f2;

  --rohan-radius: 6px;
  --rohan-radius-lg: 10px;
}

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #080503;
  color: var(--rohan-text);
  line-height: 1.6;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(95, 62, 32, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(50, 32, 18, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(35, 20, 10, 0.2) 0%, transparent 60%);
  background-attachment: fixed;
}

body.has-textured-bg {
  background-color: #140e0a;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(95, 62, 32, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(50, 32, 18, 0.15) 0%, transparent 60%),
    url('../images/bg.jpg');
  background-position: center top;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

/* Spacing Utilities for Icons & Elements */
.mr-1 {
  margin-right: 3px !important;
}

.mr-2 {
  margin-right: 0px !important;
}

.mr-3 {
  margin-right: 0px !important;
}

.mr-4 {
  margin-right: 8px !important;
}

.ml-1 {
  margin-left: 3px !important;
}

.ml-2 {
  margin-left: 5px !important;
}

.ml-3 {
  margin-left: 8px !important;
}

.mb-1 {
  margin-bottom: 2px !important;
}

.mb-2 {
  margin-bottom: 4px !important;
}

.mb-3 {
  margin-bottom: 8px !important;
}

.mt-1 {
  margin-top: 2px !important;
}

.mt-2 {
  margin-top: 4px !important;
}

.mt-3 {
  margin-top: 8px !important;
}

/* ==========================================================================
   1. ROHAN FLOATING TRANSLUCENT TOPBAR
   ========================================================================== */
.rohan-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(12, 8, 5, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(70, 53, 26, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  transition: all 0.3s ease;
}

.rohan-topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand Logo */
.rohan-brand {
  display: flex;
  align-items: center;
}

.rohan-brand-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: transform 0.25s ease;
}

.rohan-brand-link:hover {
  transform: scale(1.05);
}

.rohan-brand-logo {
  height: 58px;
  width: auto;
  display: block;
  /* filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(229, 182, 107, 0.35)); */
  transition: filter 0.25s ease;
}

.rohan-brand-link:hover .rohan-brand-logo {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(247, 219, 169, 0.65));
}

/* Periodic Glint / Shimmer Effect on R Logo (5s Continuous Loop) */
.rohan-brand-glint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: url('../images/rohan-r.png');
  mask-image: url('../images/rohan-r.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.rohan-brand-glint::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80px;
  width: 45px;
  height: 200%;
  transform: skewX(-22deg);
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 245, 190, 0.45) 20%,
      rgba(255, 255, 255, 0.98) 50%,
      rgba(255, 245, 190, 0.45) 80%,
      rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 16px 3px rgba(255, 235, 170, 0.85);
  animation: rohanLogoPeriodicShimmer 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rohanLogoPeriodicShimmer {
  0% {
    left: -80px;
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  28% {
    opacity: 1;
  }

  30% {
    left: calc(100% + 50px);
    opacity: 0;
  }

  31% {
    left: -80px;
    opacity: 0;
  }

  100% {
    left: -80px;
    opacity: 0;
  }
}

/* Navigation Links */
.rohan-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.25vw, 20px);
}

.rohan-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 6px 4px;
}

.rohan-nav-hangul {
  font-family: 'Song Myung', serif;
  font-size: 13px;
  color: rgba(247, 219, 169, 0.55);
  line-height: 1.1;
  letter-spacing: 1px;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}

.rohan-nav-text {
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.rohan-nav-link:hover .rohan-nav-text,
.rohan-nav-link.active .rohan-nav-text {
  color: var(--rohan-gold);
  text-shadow: 0 0 10px rgba(247, 219, 169, 0.6);
}

.rohan-nav-link:hover .rohan-nav-hangul,
.rohan-nav-link.active .rohan-nav-hangul {
  color: var(--rohan-gold-primary);
  transform: translateY(-1px);
}

.rohan-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--rohan-gold-primary);
  box-shadow: 0 0 8px var(--rohan-gold-primary);
  transition: width 0.25s ease;
}

.rohan-nav-link:hover::after,
.rohan-nav-link.active::after {
  width: 70%;
}

/* Right Actions */
.rohan-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language Dropdown */
.rohan-lang-dropdown {
  position: relative;
}

.rohan-lang-btn {
  background: rgba(22, 16, 11, 0.85);
  border: 1px solid var(--rohan-border-gold);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--rohan-radius);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rohan-lang-btn:hover {
  border-color: var(--rohan-gold);
  color: var(--rohan-gold);
  background: rgba(35, 25, 17, 0.95);
}

.rohan-flag-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.rohan-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: 95vw;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: #140d08;
  border: 1px solid #5a4025;
  border-radius: var(--rohan-radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
  padding: 8px 6px;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 4px;
  z-index: 1000;
}

.rohan-lang-menu::-webkit-scrollbar {
  width: 5px;
}

.rohan-lang-menu::-webkit-scrollbar-track {
  background: rgba(20, 13, 8, 0.9);
}

.rohan-lang-menu::-webkit-scrollbar-thumb {
  background: #5a4025;
  border-radius: 3px;
}

.rohan-lang-menu::-webkit-scrollbar-thumb:hover {
  background: var(--rohan-gold-primary);
}

.rohan-lang-menu.show {
  display: grid;
}

.rohan-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #dbd2b2;
  border-bottom: none;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.rohan-lang-item:last-child {
  border-bottom: none;
}

.rohan-lang-item:hover {
  background: rgba(229, 182, 107, 0.14);
  color: #ffe5a3;
}

.rohan-lang-item.active {
  background: rgba(45, 30, 16, 0.95);
  border: 1px solid rgba(229, 182, 107, 0.22);
  color: #e5b66b;
  font-weight: 600;
}

@media (max-width: 480px) {
  .rohan-lang-menu {
    width: 275px;
    padding: 6px 4px;
    gap: 2px 2px;
  }
  .rohan-lang-item {
    padding: 5px 8px;
    font-size: 12px;
    gap: 8px;
  }
  .rohan-flag-img {
    width: 18px;
    height: 18px;
  }
}

.rohan-auth-btn {
  background: linear-gradient(180deg, #cf9b3a 0%, #a46f1d 50%, #764b0e 100%);
  border: 1px solid #dca745;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: #fff6e0;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 20px;
  letter-spacing: 0.6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 235, 170, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  transition: filter 0.15s ease;
  position: relative;
}

.rohan-auth-btn i {
  color: #ffe8b0;
  font-size: 13px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.rohan-auth-btn:hover {
  filter: brightness(1.08);
}

.rohan-user-btn {
  background: linear-gradient(180deg, #cf9b3a 0%, #a46f1d 50%, #764b0e 100%) !important;
  border: 1px solid #dca745 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: #fff6e0 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 9px 20px !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 235, 170, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95) !important;
  transition: filter 0.15s ease, transform 0.15s ease !important;
  text-decoration: none !important;
}

.rohan-user-btn:hover {
  filter: brightness(1.12);
  color: #ffffff !important;
  text-decoration: none !important;
}

.rohan-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--rohan-border);
  color: var(--rohan-gold);
  font-size: 18px;
  padding: 6px 12px;
  border-radius: var(--rohan-radius);
  cursor: pointer;
}

/* ==========================================================================
   2. LOGIN MODAL (ROHAN POP-UP ARCHITECTURE)
   ========================================================================== */
.rohan-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.rohan-modal-backdrop.show {
  display: flex;
}

.rohan-modal-box {
  background-color: #150f0a;
  /* background-image:  */
  /* radial-gradient(ellipse at top, rgba(229, 182, 107, 0.15) 0%, transparent 70%), */
  /* linear-gradient(180deg, rgba(18, 12, 8, 0.70) 0%, rgba(14, 9, 6, 0.88) 55%, rgba(10, 6, 4, 0.96) 100%), */
  /* url('../images/backgrounds/login_bg.jpg'); */
  background-image:
    radial-gradient(ellipse at top, rgba(229, 182, 107, 0.15) 0%, #000000e8 70%),
    linear-gradient(180deg, rgba(18, 12, 8, 0.70) 0%, rgba(14, 9, 6, 0.88) 55%, rgba(10, 6, 4, 0.96) 100%),
    url(../images/backgrounds/login_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  border: 1px solid var(--rohan-border-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(229, 182, 107, 0.2);
  border-radius: var(--rohan-radius-lg);
  max-width: 440px;
  width: 100%;
  padding: 34px 30px 28px;
  position: relative;
  animation: rohanModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rohanModalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(15px);
  }

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

.rohan-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  color: var(--rohan-text-muted);
  font-size: 26px;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}

.rohan-modal-close:hover {
  color: #ffffff;
}

.rohan-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.rohan-modal-hangul {
  font-family: 'Song Myung', serif;
  font-size: 16px;
  color: var(--rohan-gold-primary);
  text-shadow: 0 0 10px rgba(247, 219, 169, 0.6);
  display: block;
  margin-bottom: 4px;
}

.rohan-modal-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
}

.rohan-modal-sub {
  font-size: 12px;
  color: var(--rohan-text-muted);
  margin: 4px 0 0;
}

.rohan-form-field {
  margin-bottom: 16px;
}

.rohan-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rohan-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.rohan-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rohan-input-icon {
  position: absolute;
  left: 14px;
  color: var(--rohan-gold-dark);
  font-size: 14px;
}

.rohan-input {
  width: 100%;
  background: #0d0906;
  border: 1px solid var(--rohan-border);
  color: #ffffff;
  padding: 12px 14px 12px 38px;
  border-radius: var(--rohan-radius);
  font-size: 13.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rohan-input:focus {
  outline: none;
  border-color: var(--rohan-gold-primary);
  box-shadow: 0 0 12px rgba(229, 182, 107, 0.35);
}

.rohan-btn-block {
  width: 100%;
  background: var(--rohan-gold-grad);
  border: 1px solid #ffe1a6;
  color: #1a1208;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 800;
  padding: 13px;
  border-radius: var(--rohan-radius);
  cursor: pointer;
  letter-spacing: 0.5px;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(229, 182, 107, 0.4);
  transition: all 0.25s ease;
}

.rohan-btn-block:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(229, 182, 107, 0.6);
  transform: translateY(-1px);
}

/* Modal Login Button — Sprite Variant (main_button2.png) */
.rohan-btn-block.is-sprite {
  width: 218px !important;
  height: 56px !important;
  max-width: 218px !important;
  background-image: url('../images/main_button2.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: 654px 56px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65) !important;
  margin: 10px auto 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #fff2db !important;
  font-family: 'Cinzel', serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: filter 0.15s ease, transform 0.08s ease !important;
}

.rohan-btn-block.is-sprite i {
  font-size: 14px !important;
  color: #ffe5a3 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) !important;
  flex-shrink: 0 !important;
}

.rohan-btn-block.is-sprite:hover {
  background-position: -218px 0 !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75) !important;
}

.rohan-btn-block.is-sprite:active {
  background-position: -436px 0 !important;
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}


.rohan-modal-footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 18px;
  font-size: 12px;
}

.rohan-muted-link {
  color: var(--rohan-text-muted);
}

.rohan-muted-link:hover {
  color: #ffffff;
}

.rohan-gold-link {
  color: var(--rohan-gold-primary);
  font-weight: 700;
}

.rohan-gold-link:hover {
  color: #ffffff;
}

.rohan-modal-pin-link {
  text-align: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: var(--rohan-text-muted);
}

.rohan-modal-pin-link span {
  color: var(--rohan-text-muted);
}

.rohan-modal-pin-link a {
  font-weight: 700;
  color: var(--rohan-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.rohan-modal-pin-link a:hover {
  color: #ffffff;
}

/* ==========================================================================
   2.1. SWEETALERT2 POPUP ELEVATION & MMORPG THEME HARMONY (LUXURY EDITION)
   ========================================================================== */
.swal2-container {
  z-index: 99999 !important;
  background-color: rgba(6, 4, 3, 0.86) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

.swal2-popup {
  background-color: #080504 !important;
  background-image:
    /* linear-gradient(180deg,  */
    /* rgba(8, 5, 3, 0.28) 0%,  */
    /* rgba(8, 5, 3, 0.48) 40%,  */
    /* rgba(8, 5, 3, 0.80) 75%,  */
    /* rgba(5, 3, 2, 0.90) 100%), */
    /* url('../images/LoginBoard/modal_bg_pagoda.jpg') !important; */
    linear-gradient(180deg,
      rgb(0 0 0 / 77%) 0%,
      rgb(20 17 15 / 78%) 40%,
      rgb(10 8 6 / 79%) 75%,
      rgb(0 0 0 / 97%) 100%),
    url('../images/LoginBoard/modal_bg_pagoda.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  border: 2px solid #e5b66b !important;
  color: var(--rohan-text) !important;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.98),
    0 0 35px rgba(229, 182, 107, 0.45) !important;
  border-radius: 12px !important;
  padding: 28px 24px 24px !important;
  max-width: 440px !important;
  width: 90% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ornate Inner Double Border Ring */
.swal2-popup::before {
  content: '' !important;
  position: absolute !important;
  inset: 6px !important;
  border: 1px solid rgba(229, 182, 107, 0.4) !important;
  border-radius: 8px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Ornate Corner Accents */
.swal2-popup::after {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 10px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 6px 6px, #f7dba9 2px, #855b20 3px, transparent 4px) top left,
    radial-gradient(circle at calc(100% - 6px) 6px, #f7dba9 2px, #855b20 3px, transparent 4px) top right,
    radial-gradient(circle at 6px calc(100% - 6px), #f7dba9 2px, #855b20 3px, transparent 4px) bottom left,
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #f7dba9 2px, #855b20 3px, transparent 4px) bottom right !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  z-index: 2 !important;
}

/* Header & Korean Subtitle Badge */
.swal2-header {
  position: relative;
  z-index: 3;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.swal2-header::before {
  content: 'ROHAN2 알림';
  font-family: 'Song Myung', serif;
  font-size: 15px;
  color: #e5b66b;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(247, 219, 169, 0.8), 0 2px 4px #000;
  display: block;
  margin-bottom: 2px;
  text-align: center;
}

/* Title — Cinzel Luxury Metallic Gold */
.swal2-title {
  color: #ffffff !important;
  font-family: 'Cinzel', serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 6px auto 4px !important;
  display: block !important;
  width: 100% !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbe3a1 28%, #e5b66b 72%, #9e742e 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 10px rgba(229, 182, 107, 0.45)) !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Ornate Gold Symmetrical Divider Under Title */
.swal2-title::after {
  content: '' !important;
  display: block !important;
  width: 140px !important;
  height: 1px !important;
  margin: 6px auto 8px !important;
  background: linear-gradient(90deg, transparent, #c59b56, transparent) !important;
}

/* Content / Message Body — Frosted Dark Glass for 100% Crisp Typography */
.swal2-content {
  background: rgba(10, 6, 4, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(229, 182, 107, 0.35) !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  margin: 6px auto 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  color: #ded3b8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ERROR & WARNING ICON — 3D Gold Exclamation Relic (exclamation.png) */
.swal2-icon.swal2-error,
.swal2-icon.swal2-warning,
.swal2-icon.swal2-info {
  width: 90px !important;
  height: 82px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent url('../images/icons/exclamation.png') no-repeat center center / contain !important;
  box-shadow: none !important;
  margin: 8px auto 14px !important;
  position: relative !important;
  animation: rohanExclamationGlow 2.5s infinite ease-in-out !important;
}

@keyframes rohanExclamationGlow {

  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 14px rgba(229, 182, 107, 0.4)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
  }

  50% {
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 0 25px rgba(229, 182, 107, 0.8)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95));
  }
}

.swal2-icon.swal2-error [class^=swal2-x-mark],
.swal2-icon.swal2-error .swal2-x-mark,
.swal2-icon.swal2-warning .swal2-icon-text,
.swal2-icon.swal2-info .swal2-icon-text {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Strict Hide for Inactive SweetAlert2 Icons */
.swal2-icon[style*="display: none"],
.swal2-popup .swal2-icon[style*="display: none"],
.swal2-icon.swal2-success[style*="display: none"],
.swal2-icon.swal2-error[style*="display: none"] {
  display: none !important;
}

/* SUCCESS ICON — Rohan2 Official Golden Check Badge (Matches .rohan-field-status / .rohan-mirror-check) */
.swal2-icon.swal2-success {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  border: 2px solid #e5b66b !important;
  background: radial-gradient(circle at center, rgba(229, 182, 107, 0.35) 0%, rgba(26, 17, 10, 0.95) 75%, rgba(14, 9, 5, 0.98) 100%) !important;
  box-shadow:
    0 0 22px rgba(229, 182, 107, 0.55),
    0 0 8px rgba(255, 230, 168, 0.4),
    inset 0 0 14px rgba(229, 182, 107, 0.4) !important;
  margin: 8px auto 14px !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  animation: rohanSuccessPulse 2.6s ease-in-out infinite !important;
}

.swal2-icon.swal2-success::before {
  content: "\f00c";
  font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-size: 34px;
  color: #ffe5a3 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(229, 182, 107, 0.95),
    0 0 18px rgba(229, 182, 107, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.9);
  transform: translateY(1px);
  animation: rohanSuccessCheckIn 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Hide all default SweetAlert2 green lines, circular background cutouts, and rings */
.swal2-icon.swal2-success [class^=swal2-success-line],
.swal2-icon.swal2-success .swal2-success-ring,
.swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-icon.swal2-success .swal2-success-fix {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes rohanSuccessPulse {

  0%,
  100% {
    box-shadow:
      0 0 20px rgba(229, 182, 107, 0.55),
      0 0 8px rgba(255, 230, 168, 0.4),
      inset 0 0 14px rgba(229, 182, 107, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow:
      0 0 30px rgba(229, 182, 107, 0.85),
      0 0 12px rgba(255, 230, 168, 0.6),
      inset 0 0 18px rgba(229, 182, 107, 0.55);
    transform: scale(1.03);
  }
}

@keyframes rohanSuccessCheckIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }

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

/* Action Area */
.swal2-actions {
  margin-top: 14px !important;
  position: relative;
  z-index: 3;
  display: flex !important;
  justify-content: center !important;
}

/* CONFIRM BUTTON — Rohan2 Official Button (button-gold.png) */
.swal2-styled.swal2-confirm {
  width: 190px !important;
  height: 46px !important;
  max-width: 220px !important;
  background: url('../images/button-gold.png') no-repeat center center / 100% 100% !important;
  background-color: transparent !important;
  border: 1px solid rgba(229, 182, 107, 0.45) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 235, 180, 0.25) !important;
  margin: 6px auto 0 !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff2db !important;
  font-family: 'Cinzel', serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: filter 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease !important;
  outline: none !important;
}

.swal2-styled.swal2-confirm:hover {
  filter: brightness(1.22) contrast(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 20px rgba(229, 182, 107, 0.45) !important;
  color: #ffffff !important;
}

.swal2-styled.swal2-confirm:active {
  transform: translateY(1px) !important;
  filter: brightness(0.95) !important;
}

/* ==========================================================================
   3. ROHAN HERO SECTION
   ========================================================================== */
.rohan-hero-section {
  position: relative;
  width: 100%;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 30px;
  text-align: center;
  background: none;
  overflow: hidden;
}

.rohan-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #090e1f url('../images/backgrounds/rohan-hero-epic.jpg') no-repeat center top;
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* Roaring Ice Dragon Video Background Layer (Cinematic Metin2 Dragon Architecture) */
.rohan-hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
}

.rohan-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  filter: brightness(0.96) contrast(1.08);
}

.rohan-hero-video-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 5, 3, 0) 0%, rgba(8, 5, 3, 0.72) 65%, #080503 100%);
}

.rohan-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 5, 3, 0.45) 0%,
      rgba(7, 5, 3, 0.0) 25%,
      rgba(7, 5, 3, 0.0) 65%,
      rgba(8, 5, 3, 0.5) 85%,
      rgba(8, 5, 3, 0.95) 98%,
      #080503 100%),
    radial-gradient(ellipse at center, transparent 38%, rgba(7, 5, 3, 0.4) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Rohan Cinematic Weapon & Aura Effects Canvas Layer */
.rohan-hero-fx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}




.rohan-hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  padding: 0 20px;
  margin: 0 auto;
}

/* Emblem */
.rohan-hero-emblem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  background: rgba(22, 16, 11, 0.88);
  border: 1px solid var(--rohan-border-gold);
  border-radius: 40px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(247, 219, 169, 0.2);
  margin-bottom: 52px;
}

.rohan-hangul-rune {
  font-family: 'Song Myung', serif;
  font-size: 16px;
  color: var(--rohan-gold);
  text-shadow: 0 0 10px rgba(247, 219, 169, 0.7);
}

.rohan-emblem-sep {
  color: var(--rohan-gold-primary);
  font-size: 10px;
  opacity: 0.8;
}

.rohan-emblem-text {
  font-family: 'Cinzel', serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

/* Title & Description */
.rohan-hero-title {
  margin: 0 0 14px;
  font-family: 'Cinzel', serif;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.15;
  background: var(--rohan-gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.95));
}

.rohan-hero-desc {
  font-size: 16px;
  color: #dbd2b2;
  max-width: 680px;
  margin: 0 auto 28px;
  line-height: 1.65;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.rohan-server-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 30px;
  margin-bottom: 34px;
}

.rohan-pulse-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rohan-green);
  box-shadow: 0 0 10px var(--rohan-green);
  animation: rohanPulse 2s infinite;
}

.rohan-status-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}

/* Hero Flank Action Buttons (Left & Right Wings directly above Stats Ribbon) */
.rohan-hero-flank-bar {
  width: 100%;
  max-width: 1360px;
  margin: auto auto 15px;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 15;
}

.rohan-flank-left {
  display: flex;
  justify-content: flex-start;
}

.rohan-flank-right {
  display: flex;
  justify-content: flex-end;
}

.rohan-btn-download {
  /* background: var(--rohan-gold-btn-grad); */
  background: var(--rohan-gold-btn-grad2);
  border: 1px solid var(--rohan-gold-btn-border);
  /* clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  width: 275px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 12px rgba(60, 45, 20, 0.6);
  box-shadow: 0 6px 20px rgba(120, 95, 45, 0.4);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.rohan-btn-download:hover {
  filter: brightness(1.15);
  box-shadow: 0 8px 25px rgba(220, 185, 115, 0.6);
  transform: translateY(-2px);
}

.rohan-btn-register {
  background: var(--rohan-ruby-grad);
  border: 1px solid var(--rohan-ruby-border);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  width: 275px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 6px 20px rgba(120, 20, 20, 0.4);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.rohan-btn-register:hover {
  filter: brightness(1.18);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.55);
  transform: translateY(-2px);
}

/* ==========================================================================
   PERIODIC BUTTON LIGHT SWEEP / SHIMMER EFFECT (5s Continuous Loop)
   Inspired by premium MMORPG action buttons (e.g. Tarantin2 mobile/store glare)
   ========================================================================== */
@keyframes rohanButtonShimmer {
  0% {
    left: -110px;
    opacity: 0;
  }

  2% {
    opacity: 0.95;
  }

  28% {
    opacity: 0.95;
  }

  30% {
    left: calc(100% + 50px);
    opacity: 0;
  }

  31% {
    left: -110px;
    opacity: 0;
  }

  100% {
    left: -110px;
    opacity: 0;
  }
}

.rohan-btn-download::after,
.rohan-btn-register::after,
.rohan-btn-register-sm::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -110px;
  width: 70px;
  height: 200%;
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 5;
  animation: rohanButtonShimmer 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.rohan-btn-download::after {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 245, 190, 0.3) 20%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 245, 190, 0.3) 80%,
      rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 20px 4px rgba(255, 230, 150, 0.75);
}

.rohan-btn-register::after,
.rohan-btn-register-sm::after {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 210, 210, 0.3) 20%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 210, 210, 0.3) 80%,
      rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 20px 4px rgba(255, 140, 140, 0.7);
}

/* ==========================================================================
   HELIOS2 LIVE STATS RIBBON
   ========================================================================== */
.rohan-stats-ribbon-container {
  width: 100%;
  max-width: 1360px;
  margin: -40px auto 26px;
  position: relative;
  z-index: 20;
}

.rohan-stats-ribbon {
  background: linear-gradient(180deg, rgba(28, 20, 14, 0.96) 0%, rgba(16, 11, 8, 0.98) 100%);
  border: 1px solid #4a3622;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(247, 219, 169, 0.18);
  border-radius: var(--rohan-radius);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}

.rohan-stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rohan-stat-hangul {
  font-family: 'Song Myung', serif;
  font-size: 24px;
  color: rgba(247, 219, 169, 0.45);
  line-height: 1;
}

.rohan-stat-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #140e0a;
  border: 1px solid #4a3622;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rohan-gold-primary);
  font-size: 15px;
}

.rohan-stat-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rohan-stat-val {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.rohan-stat-lbl {
  font-size: 11px;
  color: var(--rohan-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rohan-stat-divider {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, #4a3622, transparent);
}

.rohan-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rohan-green);
  box-shadow: 0 0 10px var(--rohan-green);
  animation: rohanPulse 2s infinite;
}

@keyframes rohanPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 14px var(--rohan-green);
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* ==========================================================================
   4. CONTENT SECTIONS (FULL-WIDTH MODERN VITRIN)
   ========================================================================== */
.rohan-page-wrapper {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.rohan-section {
  margin-bottom: 70px;
}

.rohan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid #6f5541;
  padding-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.rohan-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rohan-section-hangul {
  font-family: 'Song Myung', serif;
  font-size: 26px;
  color: var(--rohan-gold);
  text-shadow: 0 0 14px rgba(247, 219, 169, 0.7);
  line-height: 1;
}

.rohan-section-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 800;
  /* color: #ffffff; */
  letter-spacing: 1px;
}

.rohan-section-btn {
  background: rgba(22, 16, 11, 0.85);
  border: 1px solid var(--rohan-border);
  color: var(--rohan-gold-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--rohan-radius);
  transition: all 0.2s ease;
}

.rohan-section-btn:hover {
  background: #251b11;
  border-color: var(--rohan-gold-primary);
  color: #ffffff;
}

.rohan-section-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--rohan-gold-primary);
  /* background: rgba(229, 182, 107, 0.12); */
  background: rgba(22, 16, 11, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.35);
  padding: 5px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   NEWS SECTION GRID
   ========================================================================== */
.rohan-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 25px;
}

.rohan-news-card {
  background: var(--rohan-bg-card);
  border: 1px solid var(--rohan-border);
  border-radius: var(--rohan-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  transition: all 0.28s ease;
}

.rohan-news-card:hover {
  border-color: var(--rohan-border-gold);
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.9), 0 0 16px rgba(229, 182, 107, 0.2);
}

.rohan-news-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.rohan-news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.rohan-news-card:hover .rohan-news-img {
  transform: scale(1.05);
}

.rohan-news-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.tag-update {
  background: linear-gradient(135deg, rgba(14, 28, 48, 0.92) 0%, rgba(8, 16, 30, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.tag-event {
  background: linear-gradient(135deg, rgba(12, 38, 22, 0.92) 0%, rgba(6, 22, 12, 0.96) 100%);
  border: 1px solid rgba(74, 222, 128, 0.5);
  color: #86efac;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.tag-announce {
  background: linear-gradient(135deg, rgba(38, 26, 12, 0.92) 0%, rgba(20, 14, 6, 0.96) 100%);
  border: 1px solid rgba(229, 182, 107, 0.6);
  color: #ffd88a;
  text-shadow: 0 0 8px rgba(229, 182, 107, 0.5);
}

.rohan-news-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rohan-news-date {
  font-size: 11.5px;
  color: var(--rohan-text-muted);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rohan-news-date i {
  color: var(--rohan-gold-primary);
  font-size: 12px;
}

.rohan-news-headline {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
}

.rohan-news-summary {
  font-size: 12.5px;
  color: var(--rohan-text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.rohan-news-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--rohan-gold-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rohan-news-link:hover {
  color: var(--rohan-gold);
  gap: 10px;
}

/* Forum Topics Strip */
.rohan-forum-box {
  position: relative;
  background-color: #120c08;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.10) 0%, transparent 60%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.85) 18%, rgba(14, 9, 6, 0.85) 82%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.75) 100%),
    url('../images/backgrounds/bg_product.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(185, 142, 82, 0.35);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.92), 0 0 24px rgba(229, 182, 107, 0.08), inset 0 1px 0 rgba(247, 219, 169, 0.15);
  border-radius: var(--rohan-radius);
  overflow: hidden;
}

.rohan-forum-box-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28, 18, 11, 0.75) 0%, rgba(14, 9, 6, 0.88) 100%),
    url('../images/menu_bar.png') repeat-x center center;
  background-size: auto 100%;
  min-height: 46px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(229, 182, 107, 0.2);
  padding: 12px 20px;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--rohan-gold-light, #f7db97);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
}

.rohan-forum-box-header i.fas.fa-scroll {
  color: var(--rohan-gold-light, #f7db97) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(229, 182, 107, 0.4));
  font-size: 14px;
}

.rohan-forum-box-header span {
  color: var(--rohan-gold-light, #f7db97);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
}

.rohan-forum-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.rohan-forum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(70, 53, 26, 0.3);
  border-right: 1px solid rgba(70, 53, 26, 0.3);
  font-size: 12.5px;
  color: #ffffff;
  transition: background 0.15s ease;
  gap: 14px;
  min-width: 0;
}

.rohan-forum-row:nth-child(2n) {
  border-right: none;
}

.rohan-forum-row:hover {
  background: rgba(229, 182, 107, 0.08);
  color: var(--rohan-gold);
}

.rohan-forum-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rohan-forum-title i {
  flex-shrink: 0;
}

.rohan-forum-title .rohan-forum-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rohan-forum-date {
  font-size: 11px;
  color: var(--rohan-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rohan-forum-date i {
  color: var(--rohan-gold-primary);
  font-size: 11.5px;
  flex-shrink: 0;
}

/* ==========================================================================
   ABOUT / SYSTEMS SECTION
   ========================================================================== */
.rohan-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items: stretch;
}

.rohan-features-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rohan-feature-item {
  background: var(--rohan-bg-card);
  border: 1px solid var(--rohan-border);
  border-radius: var(--rohan-radius);
  padding: 18px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.25s ease;
}

.rohan-feature-item:hover {
  border-color: var(--rohan-gold-primary);
  background: #1c140d;
  transform: translateY(-2px);
}

.rohan-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--rohan-radius);
  background: #110d09;
  border: 1px solid var(--rohan-border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rohan-gold-primary);
  font-size: 18px;
  flex-shrink: 0;
}

.rohan-feature-text h4 {
  margin: 0 0 5px;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.rohan-feature-text p {
  margin: 0;
  font-size: 12px;
  color: var(--rohan-text-muted);
  line-height: 1.5;
}

.rohan-showcase-card {
  position: relative;
  border-radius: var(--rohan-radius);
  border: 1px solid var(--rohan-border-gold);
  overflow: hidden;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0d0805;
}

.rohan-showcase-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.85);
}

.rohan-showcase-overlay {
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg, transparent 0%, rgba(9, 6, 4, 0.92) 50%, #090604 100%);
  padding: 24px;
}

.rohan-showcase-tag {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--rohan-gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.rohan-showcase-title {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
}

.rohan-showcase-desc {
  font-size: 12.5px;
  color: #dbd2b2;
  margin: 0 0 16px;
  line-height: 1.5;
}

.rohan-btn-register-sm {
  background: var(--rohan-ruby-grad);
  border: 1px solid var(--rohan-ruby-border);
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--rohan-radius);
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   RANKINGS & PODIUM SECTION
   ========================================================================== */
.rohan-ranking-wrapper {
  background: var(--rohan-bg-card);
  border: 1px solid var(--rohan-border);
  border-radius: var(--rohan-radius);
  padding: 30px 26px;
}

/* ==========================================================================
   RANKINGS: DUAL-GRID CHAMPION SPOTLIGHT (MMORPG STAGE) & LEADERBOARD
   ========================================================================== */
.rohan-ranking-dual-grid {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

@media screen and (max-width: 1160px) {
  .rohan-ranking-dual-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Spotlight Card (Left) */
.rohan-rank-spotlight-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.rohan-rank-spotlight-card .rohan-card-header {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(10, 6, 4, 0.40) 0%, rgba(10, 6, 4, 0.10) 60%, transparent 100%),
    linear-gradient(180deg, rgba(8, 5, 3, 0.15) 0%, rgba(8, 5, 3, 0.55) 100%),
    url('../images/ranking/ranking_banner.png') no-repeat center top;
  background-size: 100% auto;
  padding: 16px 16px 14px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

@media screen and (max-width: 576px) {
  .rohan-rank-spotlight-card .rohan-card-header {
    background-size: cover;
    min-height: 115px;
    padding: 14px 12px 12px;
  }
}

.rohan-rank-spotlight-card .rohan-panel-heading {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--rohan-gold);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9), 0 0 25px rgba(229, 182, 107, 0.5);
}

/* Leaderboard & Ranking Card Header with menu_bar.png (Variant 2: Obsidian-Gold Luxury Blend) */
.rohan-ranking-table-card .rohan-card-header,
.rohan-card.rohan-ranking-table-card .rohan-card-header,
.rohan-center-column>.rohan-card:has(.rohan-ranking-grid) .rohan-card-header,
.rohan-ranking-grid-card .rohan-card-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28, 18, 11, 0.75) 0%, rgba(14, 9, 6, 0.88) 100%),
    url('../images/menu_bar.png') repeat-x center center;
  background-size: auto 100%;
  min-height: 46px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(229, 182, 107, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rohan-ranking-table-card .rohan-panel-title h1,
.rohan-ranking-table-card .rohan-panel-title h5,
.rohan-card.rohan-ranking-table-card .rohan-panel-title h1,
.rohan-card.rohan-ranking-table-card .rohan-panel-title h5,
.rohan-center-column>.rohan-card:has(.rohan-ranking-grid) .rohan-panel-title h1,
.rohan-center-column>.rohan-card:has(.rohan-ranking-grid) .rohan-panel-title h5,
.rohan-ranking-grid-card .rohan-panel-title h1,
.rohan-ranking-grid-card .rohan-panel-title h5 {
  color: var(--rohan-gold-light, #f7db97) !important;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
}

.rohan-spotlight-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  margin-top: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(229, 182, 107, 0.12) 0%, rgba(20, 14, 8, 0.75) 100%);
  border: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 240, 180, 0.15);
  transition: all 0.3s ease;
}

.rohan-spotlight-header-badge.badge-rank-1 {
  border-color: rgba(229, 182, 107, 0.55);
  background: linear-gradient(180deg, rgba(229, 182, 107, 0.18) 0%, rgba(26, 17, 9, 0.8) 100%);
  box-shadow: 0 0 14px rgba(229, 182, 107, 0.28), inset 0 1px 0 rgba(255, 240, 180, 0.25);
}

.rohan-spotlight-header-badge.badge-rank-2 {
  border-color: rgba(226, 232, 240, 0.45);
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.14) 0%, rgba(20, 22, 26, 0.8) 100%);
  box-shadow: 0 0 14px rgba(226, 232, 240, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.rohan-spotlight-header-badge.badge-rank-3 {
  border-color: rgba(224, 149, 74, 0.45);
  background: linear-gradient(180deg, rgba(224, 149, 74, 0.15) 0%, rgba(28, 16, 10, 0.8) 100%);
  box-shadow: 0 0 14px rgba(224, 149, 74, 0.22), inset 0 1px 0 rgba(255, 200, 150, 0.25);
}

.rohan-spotlight-header-badge .rohan-mirror-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rohan-spotlight-header-badge .rohan-mirror-check i {
  font-size: 9px;
}

.rohan-spotlight-header-badge.badge-rank-2 .rohan-mirror-check {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #a0aec0 70%, #4a5568 100%);
  border-color: #cbd5e1;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.45);
  color: #0f172a;
}

.rohan-spotlight-header-badge.badge-rank-3 .rohan-mirror-check {
  background: radial-gradient(circle at 35% 35%, #fbd38d 0%, #dd6b20 70%, #7b341e 100%);
  border-color: #ed8936;
  box-shadow: 0 0 8px rgba(224, 149, 74, 0.45);
  color: #270e04;
}

.rohan-spotlight-header-badge .rohan-spotlight-rank-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}

.rohan-spotlight-header-badge .rohan-spotlight-ordinal {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.rohan-spotlight-header-badge .rohan-spotlight-ordinal.ordinal-1 {
  color: #ffd74c;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.6);
}

.rohan-spotlight-header-badge .rohan-spotlight-ordinal.ordinal-2 {
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(226, 232, 240, 0.5);
}

.rohan-spotlight-header-badge .rohan-spotlight-ordinal.ordinal-3 {
  color: #fbd38d;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(224, 149, 74, 0.5);
}

.rohan-spotlight-header-badge .rohan-spotlight-word {
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #d4a853;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1;
  transition: color 0.3s ease;
}

.rohan-spotlight-header-badge.badge-rank-2 .rohan-spotlight-word {
  color: #cbd5e1;
}

.rohan-spotlight-header-badge.badge-rank-3 .rohan-spotlight-word {
  color: #ed8936;
}

/* Obsolete / Legacy Spotlight Rank Label */
.rohan-spotlight-rank-label {
  display: none !important;
}

.rohan-rank-stage-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 450px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #0c0805;
  background-image:
    linear-gradient(180deg, rgba(12, 8, 5, 0.45) 0%, rgba(12, 8, 5, 0.15) 35%, rgba(12, 8, 5, 0.55) 70%, rgba(12, 8, 5, 0.95) 100%),
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(45, 28, 14, 0.3) 0%, rgba(12, 8, 5, 0.6) 100%),
    url('../images/backgrounds/Kian-Castle_3.jpg');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom-left-radius: var(--rohan-radius);
  border-bottom-right-radius: var(--rohan-radius);
}

.rohan-rank-stage-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

/* Carousel Warrior Slots */
.rohan-carousel-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.rohan-carousel-warrior {
  position: absolute;
  bottom: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform-origin: bottom center;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, filter 0.5s ease;
  will-change: transform, left;
}

.rohan-carousel-warrior.slot-front {
  left: 50%;
  transform: translateX(-50%) translateY(0) scale(1.42);
  z-index: 4;
  opacity: 1;
  filter: brightness(1.05);
  pointer-events: auto;
}

.rohan-carousel-warrior.slot-back-left {
  left: 18%;
  transform: translateX(-50%) translateY(-20px) scale(0.98);
  z-index: 2;
  opacity: 0.72;
  filter: brightness(0.68);
}

.rohan-carousel-warrior.slot-back-right {
  left: 82%;
  transform: translateX(-50%) translateY(-20px) scale(0.98);
  z-index: 2;
  opacity: 0.72;
  filter: brightness(0.68);
}

.rohan-warrior-label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3px;
  pointer-events: auto;
  user-select: none;
}

.rohan-warrior-guild {
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffc700;
  /* Metin2 classic in-game guild gold */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
  letter-spacing: 0.2px;
  margin-bottom: 1px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  white-space: nowrap;
  line-height: 1.2;
}

.rohan-warrior-label {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  margin-bottom: 0;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: opacity 0.3s ease;
}

.rohan-warrior-level {
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #7df787;
  /* Metin2 classic in-game level light green */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.rohan-warrior-level.is-champion {
  color: var(--rohan-champion-blue, #9ee6ff) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 0 8px rgba(158, 230, 255, 0.55);
}

.rohan-warrior-name {
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  /* Metin2 classic in-game player name white */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
  text-decoration: none;
  letter-spacing: 0.2px;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.rohan-warrior-name:hover {
  color: #ffe066;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 0 6px rgba(255, 224, 102, 0.7);
}

/* Front Warrior Sizing */
.slot-front .rohan-warrior-guild {
  font-size: 13px;
  color: #ffd700;
}

.slot-front .rohan-warrior-level {
  font-size: 14px;
}

.slot-front .rohan-warrior-level.is-champion {
  font-size: 14px;
  color: var(--rohan-champion-blue, #9ee6ff) !important;
}

.slot-front .rohan-warrior-name {
  font-size: 14px;
}

/* Back Warrior Sizing */
.slot-back-left .rohan-warrior-guild,
.slot-back-right .rohan-warrior-guild {
  font-size: 10.5px;
}

.slot-back-left .rohan-warrior-level,
.slot-back-right .rohan-warrior-level {
  font-size: 11px;
}

.slot-back-left .rohan-warrior-name,
.slot-back-right .rohan-warrior-name {
  font-size: 11px;
}

/* 3D WebGL Model Podium Integration */
.rohan-podium-3d-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: auto;
  cursor: grab;
}

.rohan-podium-3d-canvas:active {
  cursor: grabbing;
}

.has-3d-podium .rohan-carousel-warrior {
  bottom: auto !important;
  pointer-events: none !important;
  transform-origin: top center !important;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, filter 0.5s ease !important;
}

.has-3d-podium .rohan-carousel-warrior.slot-front {
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) scale(1.0) !important;
  z-index: 6 !important;
}

.has-3d-podium .rohan-carousel-warrior.slot-back-left {
  top: 40px !important;
  left: 20% !important;
  transform: translateX(-50%) scale(0.88) !important;
  z-index: 5 !important;
}

.has-3d-podium .rohan-carousel-warrior.slot-back-right {
  top: 40px !important;
  left: 80% !important;
  transform: translateX(-50%) scale(0.88) !important;
  z-index: 5 !important;
}

.has-3d-podium .rohan-char-sprite,
.has-3d-podium .rohan-podium-shadow,
.has-3d-podium .rohan-podium-pedestal-glow,
.has-3d-podium [class*="sprite-"] {
  display: none !important;
  background-image: none !important;
}

.has-3d-podium .rohan-warrior-label-group {
  z-index: 6;
  position: relative;
  pointer-events: auto;
}

/* Character Sprites (24 Metin2 WebP Renders) */
.rohan-char-sprite {
  width: 180px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: 0 0;
  will-change: background-position;
}

.sprite-warrior-f-1 {
  background-image: url('../images/ranking_sprites/warrior_f_1.5d228e75.webp');
  background-size: 1800px 1400px;
}

.sprite-warrior-f-2 {
  background-image: url('../images/ranking_sprites/warrior_f_2.df9eccb2.webp');
  background-size: 1800px 3000px;
}

.sprite-warrior-f-3 {
  background-image: url('../images/ranking_sprites/warrior_f_3.af16c5ee.webp');
  background-size: 1800px 4600px;
}

.sprite-warrior-m-1 {
  background-image: url('../images/ranking_sprites/warrior_m_1.b434df47.webp');
  background-size: 1800px 2000px;
}

.sprite-warrior-m-2 {
  background-image: url('../images/ranking_sprites/warrior_m_2.3c4e1486.webp');
  background-size: 1800px 3200px;
}

.sprite-warrior-m-3 {
  background-image: url('../images/ranking_sprites/warrior_m_3.28920c6d.webp');
  background-size: 1800px 3200px;
}

.sprite-ninja-f-1 {
  background-image: url('../images/ranking_sprites/ninja_f_1.8b4ef75a.webp');
  background-size: 1800px 3200px;
}

.sprite-ninja-f-2 {
  background-image: url('../images/ranking_sprites/ninja_f_2.b68ad0cf.webp');
  background-size: 1800px 4000px;
}

.sprite-ninja-f-3 {
  background-image: url('../images/ranking_sprites/ninja_f_3.d368d2ab.webp');
  background-size: 1800px 2200px;
}

.sprite-ninja-m-1 {
  background-image: url('../images/ranking_sprites/ninja_m_1.4850c120.webp');
  background-size: 1800px 3000px;
}

.sprite-ninja-m-2 {
  background-image: url('../images/ranking_sprites/ninja_m_2.4ab3c839.webp');
  background-size: 1800px 5200px;
}

.sprite-ninja-m-3 {
  background-image: url('../images/ranking_sprites/ninja_m_3.d40d0784.webp');
  background-size: 1800px 2800px;
}

.sprite-shaman-f-1 {
  background-image: url('../images/ranking_sprites/shaman_f_1.badd555b.webp');
  background-size: 1800px 2200px;
}

.sprite-shaman-f-2 {
  background-image: url('../images/ranking_sprites/shaman_f_2.a3344f31.webp');
  background-size: 1800px 2200px;
}

.sprite-shaman-f-3 {
  background-image: url('../images/ranking_sprites/shaman_f_3.7a856871.webp');
  background-size: 1800px 4000px;
}

.sprite-shaman-m-1 {
  background-image: url('../images/ranking_sprites/shaman_m_1.367bf6ad.webp');
  background-size: 1800px 2800px;
}

.sprite-shaman-m-2 {
  background-image: url('../images/ranking_sprites/shaman_m_2.e89d2c32.webp');
  background-size: 1800px 3200px;
}

.sprite-shaman-m-3 {
  background-image: url('../images/ranking_sprites/shaman_m_3.d457e199.webp');
  background-size: 1800px 3200px;
}

.sprite-sura-f-1 {
  background-image: url('../images/ranking_sprites/sura_f_1.48d4cd1d.webp');
  background-size: 1800px 4600px;
}

.sprite-sura-f-2 {
  background-image: url('../images/ranking_sprites/sura_f_2.b153f728.webp');
  background-size: 1800px 4200px;
}

.sprite-sura-f-3 {
  background-image: url('../images/ranking_sprites/sura_f_3.f8cd38e6.webp');
  background-size: 1800px 3600px;
}

.sprite-sura-m-1 {
  background-image: url('../images/ranking_sprites/sura_m_1.a1f3efbd.webp');
  background-size: 1800px 3400px;
}

.sprite-sura-m-2 {
  background-image: url('../images/ranking_sprites/sura_m_2.1d744f71.webp');
  background-size: 1800px 4800px;
}

.sprite-sura-m-3 {
  background-image: url('../images/ranking_sprites/sura_m_3.612deec9.webp');
  background-size: 1800px 4000px;
}

/* Podium Shadow & Feet Glow */
.rohan-podium-shadow {
  position: absolute;
  bottom: 4px;
  width: 130px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 75%);
  filter: blur(5px);
  z-index: -1;
  pointer-events: none;
}

.rohan-podium-pedestal-glow {
  position: absolute;
  bottom: -2px;
  width: 140px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(229, 182, 107, 0.35) 0%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slot-front .rohan-podium-pedestal-glow {
  opacity: 1;
}

/* Carousel Dots (1, 2, 3) */
.rohan-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.rohan-carousel-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid rgba(140, 110, 75, 0.4);
  color: rgba(212, 168, 83, 0.6);
  background: linear-gradient(145deg, rgba(35, 25, 18, 0.9), rgba(15, 11, 7, 0.95));
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  outline: none;
}

.rohan-carousel-dot:hover {
  transform: scale(1.12);
  border-color: rgba(229, 182, 107, 0.8);
  color: #ffffff;
}

.rohan-carousel-dot.dot-1.active {
  color: #2b1d02;
  background: linear-gradient(145deg, #ffe066, #c9952c);
  border-color: #ffd74c;
  box-shadow: 0 0 10px rgba(255, 200, 50, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

.rohan-carousel-dot.dot-2.active {
  color: #1a1a1a;
  background: linear-gradient(145deg, #ffffff, #94a3b8);
  border-color: #e2e8f0;
  box-shadow: 0 0 10px rgba(226, 232, 240, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transform: scale(1.08);
}

.rohan-carousel-dot.dot-3.active {
  color: #1f0f00;
  background: linear-gradient(145deg, #f59e0b, #9a3412);
  border-color: #ea580c;
  box-shadow: 0 0 10px rgba(234, 88, 12, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

/* Leaderboard Table Card (Right) */
.rohan-ranking-table-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rohan-table-header-tag {
  display: inline-flex;
  align-items: center;
}

.rohan-tag-gold {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--rohan-gold-light);
  background: rgba(212, 168, 83, 0.12);
  border: 1px solid rgba(212, 168, 83, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}

.rohan-rank-table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 16px;
  background: rgba(10, 7, 4, 0.7);
  border-top: 1px solid rgba(212, 168, 83, 0.18);
  border-bottom-left-radius: var(--rohan-radius);
  border-bottom-right-radius: var(--rohan-radius);
}

.rohan-rank-view-more {
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rohan-gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.rohan-rank-view-more:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* Legacy Fallback Support (if flag is 0) */
.rohan-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 20px;
  align-items: flex-end;
  max-width: 820px;
  margin: 0 auto 34px;
}

.rohan-podium-card {
  background: #110d09;
  border: 1px solid var(--rohan-border);
  border-radius: var(--rohan-radius);
  padding: 22px 16px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s ease;
}

.rohan-podium-card.rank-first {
  background: linear-gradient(180deg, #1f160e 0%, #110d09 100%);
  border-color: var(--rohan-border-gold);
  transform: translateY(-14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(229, 182, 107, 0.25);
  padding: 28px 18px;
}

.rohan-podium-crown {
  height: 26px;
  width: auto;
  margin-bottom: 8px;
}

.rohan-podium-avatar-wrap {
  position: relative;
  margin-bottom: 12px;
}

.rohan-podium-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rohan-border-gold);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.rank-first .rohan-podium-avatar {
  width: 72px;
  height: 72px;
  border-width: 3px;
  border-color: var(--rohan-gold-primary);
  box-shadow: 0 0 18px rgba(229, 182, 107, 0.5);
}

.rohan-podium-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
}

.rohan-podium-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 3px;
}

.rohan-podium-lvl {
  font-size: 12px;
  color: var(--rohan-text-muted);
  margin-bottom: 8px;
}

.rohan-podium-rank-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--rohan-text-muted);
}

.rohan-podium-rank-tag.gold {
  background: rgba(229, 182, 107, 0.2);
  color: var(--rohan-gold);
  border: 1px solid rgba(229, 182, 107, 0.4);
}

/* ==========================================================================
   5. QUICK ACTION GRID & COMMUNITY
   ========================================================================== */
.rohan-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.rohan-action-box {
  background: linear-gradient(180deg, #1c130b 0%, #120c08 60%, #0d0805 100%);
  border: 1px solid rgba(180, 138, 78, 0.32);
  border-radius: var(--rohan-radius);
  padding: 26px 20px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(229, 182, 107, 0.18);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  display: block;
}

.rohan-action-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(229, 182, 107, 0.55) 50%, transparent 100%);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.rohan-action-box:hover {
  transform: translateY(-5px);
  border-color: rgba(229, 182, 107, 0.65);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 22px rgba(229, 182, 107, 0.22), inset 0 1px 0 rgba(247, 219, 169, 0.35);
}

.rohan-action-box:hover::after {
  opacity: 1;
}

.rohan-box-hangul {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Song Myung', serif;
  font-size: 14px;
  color: rgba(247, 219, 169, 0.22);
  line-height: 1;
  pointer-events: none;
  transition: color 0.25s ease;
}

.rohan-action-box:hover .rohan-box-hangul {
  color: rgba(247, 219, 169, 0.45);
}

/* MMORPG Forged Medallion Icon */
.rohan-box-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a1c11 0%, #130d08 100%);
  border: 1px solid rgba(229, 182, 107, 0.42);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(247, 219, 169, 0.3);
  font-size: 24px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rohan-box-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(229, 182, 107, 0.22);
  transition: all 0.4s ease;
}

.rohan-box-icon i {
  color: var(--rohan-gold-light);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 8px rgba(229, 182, 107, 0.4));
  transition: all 0.25s ease;
}

.rohan-action-box:hover .rohan-box-icon {
  transform: translateY(-2px) scale(1.08);
  border-color: var(--rohan-gold-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 20px rgba(229, 182, 107, 0.45), inset 0 1px 2px rgba(247, 219, 169, 0.5);
}

.rohan-action-box:hover .rohan-box-icon::before {
  border-color: rgba(229, 182, 107, 0.5);
  transform: rotate(45deg);
}

.rohan-action-box:hover .rohan-box-icon i {
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(247, 219, 169, 0.75));
  transform: scale(1.05);
}

/* Themed Subtle Ambient Accents on Hover */
.ds-box:hover .rohan-box-icon i {
  color: #fff5e0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(114, 137, 218, 0.65));
}

.wiki-box:hover .rohan-box-icon i {
  color: #fff5e0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.65));
}

.support-box:hover .rohan-box-icon i {
  color: #fff5e0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(56, 189, 248, 0.65));
}

.vote-box:hover .rohan-box-icon i {
  color: #fff5e0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(234, 179, 8, 0.75));
}

.rohan-box-title {
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--rohan-gold-light);
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  transition: color 0.25s ease;
}

.rohan-action-box:hover .rohan-box-title {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(229, 182, 107, 0.45);
}

.rohan-box-sub {
  font-size: 12px;
  color: #a89f91;
  transition: color 0.25s ease;
}

.rohan-action-box:hover .rohan-box-sub {
  color: #cbd5e1;
}

/* ==========================================================================
/* ==========================================================================
   6. FOOTER (SEAMLESS DARK FANTASY MMORPG ARCHITECTURE)
   ========================================================================== */
.rohan-footer {
  position: relative;
  background-color: #070503;
  background-image:
    linear-gradient(90deg, #070503 0%, rgba(7, 5, 3, 0.45) 6%, transparent 16%, transparent 84%, rgba(7, 5, 3, 0.45) 94%, #070503 100%),
    linear-gradient(180deg, #070503 0%, rgba(8, 5, 3, 0.6) 20%, rgba(8, 5, 3, 0.88) 75%, #050302 100%),
    url('../images/footer/rohan-footer-bg.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  border-top: 1px solid rgba(229, 182, 107, 0.45);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(247, 219, 169, 0.25);
  padding: 55px 24px 30px;
  margin-top: 60px;
  z-index: 10;
  overflow: visible;
}

/* Ambient Rising Embers (Standard - GPU Compositor Embers) */
.rohan-footer-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.rohan-footer-embers i {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffe6ad;
  box-shadow:
    0 0 4px 1px rgba(255, 205, 120, 0.65),
    0 0 10px 2.5px rgba(255, 140, 40, 0.2);
  opacity: 0;
  will-change: transform, opacity;
  animation: rohanFooterEmber var(--d) linear var(--t) infinite;
}

@keyframes rohanFooterEmber {
  0% {
    transform: translate3d(0, 0, 0) scale(0.5);
    opacity: 0;
  }

  12% {
    opacity: 0.60;
  }

  32% {
    transform: translate3d(calc(var(--a) * 0.6), calc(var(--r) * 0.3), 0) scale(0.9);
  }

  50% {
    opacity: 0.35;
  }

  62% {
    transform: translate3d(calc(var(--a) * -0.45), calc(var(--r) * 0.62), 0) scale(0.8);
    opacity: 0.50;
  }

  80% {
    opacity: 0.20;
  }

  100% {
    transform: translate3d(calc(var(--a) * 0.25), var(--r), 0) scale(0.3);
    opacity: 0;
  }
}

.rohan-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 85%);
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffe5a3 50%, transparent);
  box-shadow: 0 0 16px rgba(229, 182, 107, 0.7);
  pointer-events: none;
  z-index: 2;
}

/* Style Top Divider Soul Crest (Living Flame Rune: soul_01.png & soul_02.png) */
.rohan-footer-crest {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -97%);
  width: 110px;
  height: 65px;
  z-index: 12;
  pointer-events: none;
  display: block;
}

/* Ambient radial glow behind the soul mark */
.rohan-footer-crest::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -97%);
  width: 140px;
  height: 70px;
  /* background: radial-gradient(ellipse at center, rgba(229, 182, 107, 0.32) 0%, rgba(200, 130, 35, 0.12) 45%, transparent 72%); */
  /* border-radius: 50%; */
  pointer-events: none;
  z-index: 1;
}

.rohan-footer-crest-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.rohan-footer-crest-base {
  z-index: 2;
  opacity: 0.95;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.9));
}

.rohan-footer-crest-glow {
  z-index: 3;
  opacity: 0.55;
  animation: rohanSoulPulse 3.5s ease-in-out infinite alternate;
}

@keyframes rohanSoulPulse {
  0% {
    opacity: 0.35;
    filter: drop-shadow(0 0 6px rgba(229, 182, 107, 0.45));
    transform: scale(0.98);
  }

  50% {
    opacity: 0.92;
    filter: drop-shadow(0 0 14px rgba(240, 160, 40, 0.85)) drop-shadow(0 0 24px rgba(229, 182, 107, 0.55));
    transform: scale(1.02);
  }

  100% {
    opacity: 0.45;
    filter: drop-shadow(0 0 8px rgba(229, 182, 107, 0.5));
    transform: scale(0.99);
  }
}

.rohan-footer-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 18px;
  margin-bottom: 45px;
  position: relative;
  z-index: 2;
}

.rohan-ornament-line {
  height: 1px;
  flex: 1;
  max-width: 320px;
  background: linear-gradient(90deg, transparent, rgba(229, 182, 107, 0.6), transparent);
}

.rohan-ornament-center {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(28, 18, 11, 0.95) 0%, rgba(14, 9, 6, 0.98) 100%);
  border: 1px solid rgba(229, 182, 107, 0.45);
  padding: 8px 26px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(247, 219, 169, 0.25), 0 0 18px rgba(229, 182, 107, 0.2);
}

.rohan-ornament-hangul {
  font-family: 'Song Myung', serif;
  font-size: 15.5px;
  letter-spacing: 2px;
  background: var(--rohan-gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.rohan-ornament-gem {
  color: var(--rohan-gold);
  font-size: 13px;
  text-shadow: 0 0 10px rgba(247, 219, 169, 0.8);
  animation: pulseGem 3s infinite alternate;
}

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

  100% {
    transform: scale(1.15);
    opacity: 1;
    text-shadow: 0 0 14px rgba(247, 219, 169, 1);
  }
}

.rohan-footer-container {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr 1.3fr;
  gap: 40px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.rohan-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rohan-footer-logo-link {
  display: inline-block;
  margin-bottom: 16px;
  transition: transform 0.25s ease;
}

.rohan-footer-logo-link:hover {
  transform: translateY(-2px);
}

.rohan-footer-logo {
  height: 68px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(229, 182, 107, 0.3));
}

.rohan-footer-desc {
  font-size: 13.5px;
  color: #b5a591;
  line-height: 1.75;
  margin: 0 0 20px;
}

.rohan-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rohan-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  background: linear-gradient(180deg, rgba(28, 20, 13, 0.9) 0%, rgba(16, 11, 7, 0.95) 100%);
  border: 1px solid rgba(229, 182, 107, 0.35);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #e5b66b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(247, 219, 169, 0.15);
  transition: all 0.25s ease;
}

.rohan-footer-badge:hover {
  border-color: #f0c97d;
  background: rgba(35, 23, 14, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 14px rgba(229, 182, 107, 0.35);
}

.rohan-footer-badge .rohan-mirror-check {
  width: 17px;
  height: 17px;
  font-size: 8.5px;
}

/* Headings */
.rohan-footer-heading-wrap {
  margin-bottom: 18px;
  position: relative;
}

.rohan-footer-heading {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--rohan-gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rohan-heading-line {
  display: block;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, #e5b66b 0%, rgba(229, 182, 107, 0.15) 100%);
  border-radius: 2px;
}

/* Lists & Links */
.rohan-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rohan-footer-list li {
  margin: 0;
}

.rohan-footer-list a {
  font-size: 13.5px;
  color: #c9bea9;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.22s ease;
}

.rohan-footer-arrow {
  color: var(--rohan-gold-primary);
  font-size: 11px;
  transition: transform 0.22s ease, color 0.22s ease;
  flex-shrink: 0;
  opacity: 0.85;
}

.rohan-footer-list a:hover {
  color: #ffffff;
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(247, 219, 169, 0.5);
}

.rohan-footer-list a:hover .rohan-footer-arrow {
  transform: translateX(4px);
  color: #ffe5a3;
  opacity: 1;
}

.rohan-pill-tag {
  display: none !important;
}

/* Social Column */
.rohan-social-text {
  font-size: 12.5px;
  color: #a39580;
  line-height: 1.6;
  margin: 0 0 16px;
}

.rohan-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 260px;
}

.rohan-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1f160e 0%, #110b07 100%);
  border: 1px solid rgba(229, 182, 107, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5b66b;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(247, 219, 169, 0.15);
  flex-shrink: 0;
}

.rohan-social-btn:hover {
  transform: translateY(-3px);
  border-color: #d96a28;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 15px rgba(229, 182, 107, 0.45);
}

.rohan-social-btn.fb:hover {
  background: #d96a28;
  border-color: #60a5fa;
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.45);
}

.rohan-social-btn.fbg:hover {
  /* background: linear-gradient(135deg, #1877f2 0%, #0d52b3 100%); */
  background: #d96a28;
  border-color: #60a5fa;
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.5);
}

.rohan-social-btn.ds:hover {
  background: #d96a28;
  border-color: #818cf8;
  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.45);
}

.rohan-social-btn.ig:hover {
  /* background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); */
  background: #d96a28;
  border-color: #f43f5e;
  box-shadow: 0 6px 18px rgba(220, 39, 67, 0.45);
}

.rohan-social-btn.yt:hover {
  background: #d96a28;
  border-color: #ef4444;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
}

.rohan-social-btn.tt:hover {
  background: #d96a28;
  border-color: #010101;
  box-shadow: 0 6px 18px rgba(37, 244, 238, 0.4), 0 0 12px rgba(254, 44, 85, 0.4);
}

.rohan-social-btn.wa:hover {
  background: #d96a28;
  border-color: #4ade80;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

/* ==========================================================================
   PEGI 12 Footer Rating Block (Blizzard World of Warcraft Architecture)
   ========================================================================== */
.rohan-footer-pegi-bar {
  border: none;
  background: transparent;
  padding: 0 0 22px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(197, 155, 86, 0.2);
  position: relative;
  z-index: 2;
}

.rohan-footer-pegi-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.rohan-pegi-badges {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.rohan-pegi-badge {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  border-radius: 3px;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.rohan-pegi-badge:hover {
  transform: translateY(-3px);
  filter: brightness(1.12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(229, 182, 107, 0.4);
}

.rohan-pegi-age img {
  width: 65px;
  height: 79px;
  display: block;
  object-fit: contain;
  border-radius: 3px;
}

.rohan-pegi-desc img {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: cover;
  border-radius: 3px;
}

.rohan-pegi-info {
  flex: 1;
  min-width: 300px;
}

.rohan-pegi-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

/* Rohan Theme Matched PEGI 12 Box */
.rohan-pegi-rating-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  background: linear-gradient(180deg, rgba(38, 26, 16, 0.95) 0%, rgba(18, 12, 7, 0.98) 100%);
  border: 1px solid rgba(229, 182, 107, 0.6);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #ffe5a3;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(247, 219, 169, 0.35), 0 0 12px rgba(229, 182, 107, 0.25);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  transition: all 0.25s ease;
}

.rohan-pegi-rating-tag:hover {
  border-color: #ffd88a;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 235, 190, 0.5), 0 0 16px rgba(229, 182, 107, 0.45);
  transform: translateY(-1px);
}

.rohan-pegi-summary {
  font-size: 13.5px;
  font-weight: 700;
  color: #e5b66b;
  letter-spacing: 0.4px;
}

.rohan-pegi-desc-text {
  font-size: 12px;
  color: #a89f91;
  line-height: 1.6;
  margin: 0;
  max-width: 820px;
}

/* Partner & Security Certification Badges (Unity & DMCA - Pure Form) */
.rohan-footer-cert-badges {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.rohan-cert-badge {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.22s ease, opacity 0.22s ease;
}

.rohan-cert-unity-badge {
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.rohan-cert-unity-badge:hover {
  transform: translateY(-2px);
  opacity: 1;
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.35)) brightness(1.15);
}

.rohan-cert-unity-badge img {
  display: block;
  width: 96px;
  height: 35px;
  object-fit: contain;
}

.rohan-cert-dmca-badge {
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.rohan-cert-dmca-badge:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8), 0 0 10px rgba(78, 196, 53, 0.4);
}

.rohan-cert-dmca-badge img {
  display: block;
  width: 135px;
  height: 27px;
  border-radius: 3px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .rohan-footer-pegi-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
  }

  .rohan-pegi-age img {
    width: 54px;
    height: 66px;
  }

  .rohan-pegi-desc img {
    width: 46px;
    height: 46px;
  }

  .rohan-footer-cert-badges {
    margin-left: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 8px;
  }
}

/* Bottom Copyright Bar */
.rohan-footer-bottom {
  border-top: 1px solid rgba(197, 155, 86, 0.25);
  padding-top: 24px;
  position: relative;
  z-index: 2;
}

.rohan-footer-bottom-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.rohan-copyright-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rohan-copyright {
  font-size: 12.5px;
  color: #d1c4b0;
}

.rohan-copyright strong {
  color: var(--rohan-gold-primary);
}

.rohan-legal-disclaimer {
  font-size: 11px;
  color: #786c5c;
}

.rohan-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.rohan-footer-legal-links a {
  color: #9c8e79;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rohan-footer-legal-links a:hover {
  color: var(--rohan-gold);
}

.rohan-legal-sep {
  color: #4a3622;
}

.rohan-scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 122px;
  height: 38px;
  padding: 0 18px;
  border-radius: 5px;
  background: url('../images/button-gold.png') no-repeat center center / 100% 100%;
  border: none;
  color: #fff2db;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 225, 170, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

.rohan-scroll-top i {
  font-size: 11px;
  color: #fce1a9;
  text-shadow: 0 1px 2px #000;
  transition: transform 0.25s ease, color 0.25s ease;
}

.rohan-scroll-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-25deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.rohan-scroll-top:hover {
  filter: brightness(1.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.85), 0 0 16px rgba(229, 182, 107, 0.4);
  color: #ffffff;
}

.rohan-scroll-top:hover i {
  transform: translateY(-2px);
  color: #ffffff;
}

.rohan-scroll-top:hover::after {
  left: 140%;
}

.rohan-scroll-top:active {
  transform: translateY(0);
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   RESPONSIVE DESIGN (Core Web Vitals & Mobile)
   ========================================================================== */
@media (max-width: 1250px) {
  .rohan-nav {
    gap: clamp(8px, 1vw, 14px);
  }

  .rohan-nav-text {
    font-size: 14px;
  }

  .rohan-nav-hangul {
    font-size: 12px;
  }
}

@media (max-width: 1100px) {
  .rohan-news-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rohan-about-grid {
    grid-template-columns: 1fr;
  }

  .rohan-features-col {
    grid-template-columns: 1fr;
  }

  .rohan-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rohan-footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .rohan-nav {
    display: none;
  }

  .rohan-hamburger {
    display: block;
  }

  .rohan-hero-title {
    font-size: 38px;
  }

  .rohan-stats-ribbon {
    flex-direction: column;
    align-items: flex-start;
  }

  .rohan-stat-divider {
    display: none;
  }

  .rohan-news-grid {
    grid-template-columns: 1fr;
  }

  .rohan-podium {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rohan-podium-card.rank-first {
    transform: none;
  }

  .rohan-action-grid {
    grid-template-columns: 1fr;
  }

  .rohan-footer-container {
    grid-template-columns: 1fr;
  }

  .rohan-forum-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SUBPAGE & PORTAL LAYOUT SUPPORT (Download, Register, Ranking, Support)
   ========================================================================== */
.rohan-subpage-hero {
  position: relative;
  width: 100%;
  height: 220px;
  background-color: #080503;
  background-image: url('../images/backgrounds/rohan-hero-epic.jpg');
  background-position: center 18%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  margin-bottom: 50px;
  border-bottom: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85);
  overflow: visible;
}

.rohan-subpage-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 5, 3, 0.55) 0%, rgba(8, 5, 3, 0.1) 40%, rgba(8, 5, 3, 0.75) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(8, 5, 3, 0.6) 100%);
  pointer-events: none;
}

/* Premium MMORPG Subpage Divider — Line sits precisely at hero bottom border */
.rohan-subpage-hero-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.rohan-subpage-divider-line {
  flex: 1;
  height: 2px;
  box-shadow: 0 0 12px rgba(229, 182, 107, 0.6);
}

.rohan-subpage-divider-line.left {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(229, 182, 107, 0.05) 15%,
      rgba(229, 182, 107, 0.35) 50%,
      #e5b66b 85%,
      #ffd88a 100%);
}

.rohan-subpage-divider-line.right {
  background: linear-gradient(90deg,
      #ffd88a 0%,
      #e5b66b 15%,
      rgba(229, 182, 107, 0.35) 50%,
      rgba(229, 182, 107, 0.05) 85%,
      transparent 100%);
}

.rohan-subpage-divider-gem {
  width: 118px;
  height: 103px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}

.rohan-subpage-divider-gem .rohan-rmain-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 136px;
  height: 136px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.rohan-subpage-divider-gem img {
  width: 118px;
  height: 103px;
  object-fit: contain;
  display: block;
  transform: none;
  filter: drop-shadow(0 0 14px rgba(229, 182, 107, 0.85)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.95));
  position: relative;
  z-index: 2;
}

.rohan-subpage-divider-gem img.is-animated {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.4s ease;
  will-change: opacity, transform, filter;
}

.rohan-subpage-divider-gem img.is-animated.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 16px rgba(229, 182, 107, 0.95)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.95));
}

.rohan-subpage-divider-gem:hover img.is-animated.is-visible {
  transform: scale(1.04);
  filter: drop-shadow(0 0 22px rgba(255, 216, 138, 1)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.95));
}

.rohan-subpage-hero-inner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rohan-subpage-hero-logo {
  height: 130px;
  width: auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(229, 182, 107, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.rohan-subpage-hero-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 1)) drop-shadow(0 0 45px rgba(229, 182, 107, 0.75));
}

.rohan-subpage-wrap {
  min-height: calc(100vh - 750px);
  padding: 0 24px 70px;
  position: relative;
  z-index: 10;
}

.rohan-subpage-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.rohan-subpage-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}

.rohan-subpage-korean {
  font-family: 'Song Myung', serif;
  font-size: 38px;
  /* color: var(--rohan-gold-primary); */
  color: #a49b85;
  line-height: 1;
  /* text-shadow: 0 0 12px rgba(229, 182, 107, 0.5); */
  text-shadow: 0 0 8px rgba(137, 132, 109, 0.45);
}

.rohan-subpage-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 800;
  /* color: #ffffff; */
  letter-spacing: 1px;
}

.rohan-main-section {
  max-width: 1400px;
  margin: 0 auto 40px;
  padding: 105px 24px 30px;
  position: relative;
  z-index: 10;
}

.rohan-grid-layout {
  display: grid;
  grid-template-columns: 290px 1fr 310px;
  gap: 22px;
  align-items: start;
}

.rohan-sidebar-left,
.rohan-sidebar-right {
  display: flex;
  flex-direction: column;
}

.rohan-center-column {
  width: 100%;
  min-width: 0;
}

.rohan-card {
  position: relative;
  background-color: #120c08;
  /* background-image:  */
  /* radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.12) 0%, transparent 60%), */
  /* linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.85) 18%, rgba(14, 9, 6, 0.85) 82%, rgba(14, 9, 6, 0.35) 100%), */
  /* linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.70) 100%), */
  /* url('../images/backgrounds/bg_product.jpg'); */

  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.12) 0%, transparent 60%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgb(14 9 6 / 46%) 18%, rgb(14 9 6 / 57%) 82%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.70) 100%),
    url(../images/backgrounds/bg_product.jpg);

  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(185, 142, 82, 0.35);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.92), 0 0 24px rgba(229, 182, 107, 0.08), inset 0 1px 0 rgba(247, 219, 169, 0.15);
  border-radius: var(--rohan-radius);
  margin-bottom: 22px;
  overflow: hidden;
}

body:not(.has-card-bg-product) .rohan-card {
  background-image: none;
  background: var(--rohan-bg-card);
}

.rohan-card-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28, 18, 11, 0.75) 0%, rgba(14, 9, 6, 0.88) 100%),
    url('../images/menu_bar.png') repeat-x center center;
  background-size: auto 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(229, 182, 107, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rohan-panel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rohan-panel-title img {
  height: 24px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.rohan-panel-title i {
  font-size: 19px;
  color: var(--rohan-gold-light);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(229, 182, 107, 0.45));
}

.rohan-panel-title h5,
.rohan-panel-title span {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--rohan-gold-light, #f7db97) !important;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
}

.rohan-card-body {
  padding: 16px;
  position: relative;
}

.rohan-page-box {
  position: relative;
  background-color: #120c08;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.12) 0%, transparent 60%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.85) 18%, rgba(14, 9, 6, 0.85) 82%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.70) 100%),
    url('../images/backgrounds/bg_product.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(185, 142, 82, 0.35);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.92), 0 0 24px rgba(229, 182, 107, 0.08), inset 0 1px 0 rgba(247, 219, 169, 0.15);
  border-radius: var(--rohan-radius);
  padding: 28px 30px;
  margin-bottom: 25px;
}

body:not(.has-card-bg-product) .rohan-page-box {
  background-image: none;
  background: var(--rohan-bg-card);
}

.rohan-page-title {
  margin: 0 0 22px;
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  border-bottom: 1px solid var(--rohan-border);
  padding-bottom: 12px;
  letter-spacing: 1px;
}

.rohan-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.rohan-table {
  width: 100%;
  border-collapse: collapse;
}

.rohan-table th {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--rohan-gold);
  border-bottom: 1px solid var(--rohan-border);
  padding: 11px 12px;
  text-align: left;
}

.rohan-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(70, 53, 26, 0.35);
  font-size: 13px;
  color: #ffffff;
}

.rohan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--rohan-radius);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.rohan-btn-primary {
  background: var(--rohan-gold-grad);
  color: #1a1208;
  border: 1px solid #ffe1a6;
  box-shadow: 0 2px 8px rgba(229, 182, 107, 0.35);
}

.rohan-btn-primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.rohan-btn-secondary {
  background: rgba(22, 16, 11, 0.85);
  border: 1px solid var(--rohan-border);
  color: var(--rohan-gold-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--rohan-radius);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.rohan-btn-secondary:hover {
  background: #251b11;
  border-color: var(--rohan-gold-primary);
  color: #ffffff;
}

/* ============================================================
   AAA MMORPG Ranking Navigation Tabs (Forged Metal & Gold Relic)
   ============================================================ */
.rohan-ranking-tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
  justify-content: center;
  align-items: center;
  padding: 6px 0 14px;
}

.rohan-rank-tab,
.rohan-ranking-tabs-wrap .rohan-btn-secondary,
.rohan-ranking-tabs-wrap a:not(.active):not(.rohan-btn-primary) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 22px !important;
  font-family: 'Cinzel', serif;
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  color: #dfd2be !important;
  background: linear-gradient(180deg, #24170e 0%, #170f09 45%, #0e0905 100%) !important;
  border: 1px solid #785527 !important;
  border-radius: 3px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(247, 219, 169, 0.25),
    inset 0 0 14px rgba(0, 0, 0, 0.7);
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: visible;
}

/* Subtle Inset Filigree Border on Inactive */
.rohan-rank-tab::before,
.rohan-ranking-tabs-wrap .rohan-btn-secondary::before,
.rohan-ranking-tabs-wrap a:not(.active):not(.rohan-btn-primary)::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(229, 182, 107, 0.18);
  border-radius: 2px;
  pointer-events: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.rohan-rank-tab i,
.rohan-ranking-tabs-wrap .rohan-btn-secondary i,
.rohan-ranking-tabs-wrap a:not(.active):not(.rohan-btn-primary) i {
  font-size: 13.5px;
  color: #f0c37b;
  filter: drop-shadow(0 0 6px rgba(240, 195, 123, 0.6));
  transition: transform 0.25s ease, filter 0.25s ease, color 0.25s ease;
}

/* Inactive Hover */
.rohan-rank-tab:hover,
.rohan-ranking-tabs-wrap .rohan-btn-secondary:hover,
.rohan-ranking-tabs-wrap a:not(.active):not(.rohan-btn-primary):hover {
  background: linear-gradient(180deg, #3d2817 0%, #26180e 45%, #150d07 100%) !important;
  border-color: #d49e4b !important;
  color: #ffffff !important;
  box-shadow:
    0 0 18px rgba(229, 182, 107, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    0 6px 18px rgba(0, 0, 0, 0.85);
  transform: translateY(-2px);
}

.rohan-rank-tab:hover::before,
.rohan-ranking-tabs-wrap .rohan-btn-secondary:hover::before,
.rohan-ranking-tabs-wrap a:not(.active):not(.rohan-btn-primary):hover::before {
  border-color: rgba(229, 182, 107, 0.45);
  box-shadow: inset 0 0 8px rgba(229, 182, 107, 0.2);
}

.rohan-rank-tab:hover i,
.rohan-ranking-tabs-wrap .rohan-btn-secondary:hover i,
.rohan-ranking-tabs-wrap a:not(.active):not(.rohan-btn-primary):hover i {
  transform: scale(1.2);
  color: #ffe4a0;
  filter: drop-shadow(0 0 10px rgba(255, 228, 160, 0.95));
}

/* Active Category Tab (Lustrous 3D Forged Gold Relic) */
.rohan-rank-tab.active,
.rohan-ranking-tabs-wrap .rohan-btn-primary,
.rohan-ranking-tabs-wrap a.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 24px !important;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: default;
  color: #120801 !important;
  background: linear-gradient(180deg, #fff2c4 0%, #ffd06b 20%, #d4942b 55%, #a66a15 85%, #7a4608 100%) !important;
  border: 1px solid #fff3cf !important;
  box-shadow:
    0 0 24px rgba(229, 182, 107, 0.75),
    0 6px 18px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(70, 36, 0, 0.75) !important;
  transform: translateY(-2px);
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.7);
  overflow: visible;
}

/* Inner Filigree Inset Frame on Active */
.rohan-rank-tab.active::before,
.rohan-ranking-tabs-wrap .rohan-btn-primary::before,
.rohan-ranking-tabs-wrap a.active::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  pointer-events: none;
}

.rohan-rank-tab.active i,
.rohan-ranking-tabs-wrap .rohan-btn-primary i,
.rohan-ranking-tabs-wrap a.active i {
  font-size: 14px;
  color: #120801 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 245, 210, 0.6));
}

/* Active Floating Diamond Crest Indicator */
.rohan-rank-tab.active::after,
.rohan-ranking-tabs-wrap .rohan-btn-primary::after,
.rohan-ranking-tabs-wrap a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: #ffe299;
  border: 1px solid #5a3507;
  box-shadow: 0 0 10px #ffd06b, 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 5;
}

.rohan-quick-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #110d09;
  border: 1px solid rgba(70, 53, 26, 0.45);
  border-radius: var(--rohan-radius);
  text-decoration: none;
  color: #dbd2b2;
  transition: all 0.22s ease;
}

.rohan-quick-link-item:hover {
  background: #1f1610;
  border-color: var(--rohan-gold-primary);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(229, 182, 107, 0.18);
}

.rohan-form-group {
  margin-bottom: 14px;
}

.rohan-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--rohan-text-muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.rohan-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rohan-input-icon {
  position: absolute;
  left: 12px;
  color: var(--rohan-gold-dark);
  font-size: 14px;
}

.rohan-input {
  width: 100%;
  background: #0f0a07;
  border: 1px solid var(--rohan-border);
  border-radius: var(--rohan-radius);
  padding: 10px 12px 10px 34px;
  color: #ffffff;
  font-size: 13px;
  transition: all 0.2s ease;
}

.rohan-input:focus {
  outline: none;
  border-color: var(--rohan-gold-primary);
  box-shadow: 0 0 10px rgba(229, 182, 107, 0.25);
}

.rohan-btn-block {
  width: 100%;
  background: var(--rohan-gold-grad);
  border: 1px solid #ffe1a6;
  border-radius: var(--rohan-radius);
  color: #1a1208;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 800;
  padding: 11px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(229, 182, 107, 0.35);
  transition: all 0.2s ease;
}

.rohan-btn-block:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Sidebar Podium */
.rohan-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 6px;
  align-items: flex-end;
  padding: 18px 10px 12px;
  background: linear-gradient(180deg, #1b130c 0%, #110d09 100%);
  border-bottom: 1px solid var(--rohan-border);
}

.rohan-podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rohan-podium-first {
  transform: translateY(-8px);
}

.rohan-podium-crown {
  height: 20px;
  width: auto;
  margin-bottom: 6px;
}

.rohan-podium-avatar-wrap {
  position: relative;
  margin-bottom: 8px;
}

.rohan-podium-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rohan-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.rohan-podium-first .rohan-podium-avatar {
  width: 58px;
  height: 58px;
  border-color: var(--rohan-gold-primary);
  box-shadow: 0 0 16px rgba(229, 182, 107, 0.5);
}

.rohan-podium-coin {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}

.rohan-podium-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.rohan-podium-lvl {
  font-size: 11px;
  color: var(--rohan-text-muted);
}

.rohan-rank-table {
  width: 100%;
  border-collapse: collapse;
}

.rohan-rank-table td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(70, 53, 26, 0.35);
  font-size: 12px;
  vertical-align: middle;
}

.rohan-rank-num span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--rohan-text-muted);
  font-size: 10px;
  font-weight: 800;
}

/* ============================================================
   Metin2 Ranking Numbers (ranked.png Medallion Coin)
   ============================================================ */
.rohan-ranked-coin,
.rohan-rank-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  background: url('../images/ranking/ranked.png') no-repeat center center;
  /* background-size: 20px 20px; */
  /* font-family: 'Cinzel', serif; */
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  user-select: none;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.rohan-ranked-coin:hover,
.rohan-rank-badge:hover {
  transform: scale(1.18);
}

/* Rank 1: Glowing Sun Gold Inscription */
.rohan-ranked-coin.rank-1,
.rohan-rank-badge-1 {
  color: #fff2c4 !important;
  text-shadow:
    0 0 5px rgba(255, 215, 110, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.95);
  /* filter: drop-shadow(0 0 6px rgba(255, 208, 107, 0.65)); */
}

/* Rank 2: Pure Mithril Silver Inscription */
.rohan-ranked-coin.rank-2,
.rohan-rank-badge-2 {
  color: #ffffff !important;
  text-shadow:
    0 0 5px rgba(226, 232, 240, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.95);
  /* filter: drop-shadow(0 0 6px rgba(200, 215, 230, 0.55)); */
}

/* Rank 3: Fiery Copper Bronze Inscription */
.rohan-ranked-coin.rank-3,
.rohan-rank-badge-3 {
  color: #ffd8bf !important;
  text-shadow:
    0 0 5px rgba(255, 180, 120, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.95);
  /* filter: drop-shadow(0 0 6px rgba(217, 136, 82, 0.55)); */
}

/* Rank 4+: Clean Muted Obsidian Font */
.rohan-rank-other,
.rohan-rank-badge-other {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--rohan-text-muted);
}

/* ============================================================
   Metin2 Empire Badges (Shinsoo, Chunjo, Jinno)
   ============================================================ */
.rohan-empire-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  min-width: 68px;
  line-height: 1.5;
  color: #dfc79b !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.rohan-empire-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

.rohan-empire-badge.shinsoo {
  background: #5c342b;
  border: 1px solid #7d493e;
}

.rohan-empire-badge.chunjo {
  background: #534c2c;
  border: 1px solid #736a3d;
}

.rohan-empire-badge.jinno {
  background: #324853;
  border: 1px solid #4a6878;
}

.rohan-rank-name {
  font-weight: 600;
  color: #ffffff;
}

.rohan-rank-level {
  text-align: right;
  font-weight: 700;
  color: var(--rohan-gold-primary);
}

.rohan-korean-prefix {
  font-family: 'Song Myung', serif;
  font-size: 18px;
  color: var(--rohan-gold);
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1;
}

@media (max-width: 1050px) {
  .rohan-grid-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .rohan-forum-list {
    grid-template-columns: 1fr;
  }

  .rohan-forum-row {
    border-right: none;
  }
}

/* ============================================================
   Rohan2 Partitioned Ranking System (Sidebar Accordion + Boxed Grid)
   ============================================================ */
.rohan-ranking-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}

.rohan-ranking-main {
  min-width: 0;
  width: 100%;
}

/* 1. Sidebar Container */
.rohan-rank-sidebar {
  min-width: 0;
  overflow: hidden;
  background: rgba(24, 16, 11, 0.94);
  border: 1px solid rgba(138, 97, 60, 0.42);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.rohan-rank-menu-section+.rohan-rank-menu-section {
  border-top: 1px solid rgba(22, 14, 9, 0.9);
}

/* 2. Section Accordion Header */
.rohan-rank-menu-header {
  position: relative;
  width: 100%;
  min-height: 56px;
  height: auto;
  margin: 0;
  padding: 10px 28px 9px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #f7deb8;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 0;
  border-radius: 0;
  background: url('../images/button-gold.png') no-repeat center center / 100% 100%;
  box-shadow: inset 0 1px rgba(230, 192, 145, 0.15), inset 0 -1px rgba(18, 11, 7, 0.85);
  text-shadow: 0 1px 2px #0a0604;
  cursor: pointer;
  transition: all 0.22s ease;
}

.rohan-rank-menu-header:hover,
.rohan-rank-menu-section.has-active .rohan-rank-menu-header {
  /* color: #ffffff; */
  color: #f7deb8;
  filter: brightness(1.15);
}

.rohan-rank-menu-icon {
  color: #d6af7a;
  font-size: 18px;
  transition: transform 0.22s ease, color 0.22s ease;
}

.rohan-rank-menu-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  transition: transform 0.22s ease, filter 0.22s ease;
  display: inline-block;
}

.rohan-rank-menu-header:hover .rohan-rank-menu-icon {
  transform: scale(1.1);
  color: #ffe0a3;
}

.rohan-rank-menu-header:hover .rohan-rank-menu-icon-img {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.rohan-rank-menu-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #bd925c;
  font-size: 11px;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

.rohan-rank-menu-section.is-open .rohan-rank-menu-chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* 3. Section Body & Links */
.rohan-rank-menu-body {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

.rohan-rank-menu-section.is-open .rohan-rank-menu-body {
  max-height: 320px;
  visibility: visible;
  transition-delay: 0s;
}

.rohan-rank-menu-inner {
  padding: 1px 0;
  background: rgba(18, 12, 8, 0.95);
}

.rohan-rank-menu-link {
  position: relative;
  min-height: 38px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a8947b;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none !important;
  background: rgba(32, 21, 14, 0.75);
  border-bottom: 1px solid rgba(64, 43, 29, 0.45);
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}

.rohan-rank-menu-link:last-child {
  border-bottom: 0;
}

.rohan-rank-menu-link i {
  width: 18px;
  flex: 0 0 18px;
  color: #927351;
  text-align: center;
  font-size: 13px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rohan-rank-menu-link:hover {
  color: #f7deb8;
  background: rgba(68, 46, 32, 0.65);
  padding-left: 15px;
}

.rohan-rank-menu-link:hover i {
  color: #e5bc7d;
  transform: scale(1.15);
}

.rohan-rank-menu-link.is-active {
  color: #fff0d4;
  font-weight: 700;
  background: linear-gradient(90deg, rgba(94, 62, 42, 0.85) 0%, rgba(54, 35, 23, 0.85) 100%);
  box-shadow: inset 3px 0 0 #d99f48;
}

.rohan-rank-menu-link.is-active i {
  color: #ffd480;
  filter: drop-shadow(0 0 4px rgba(255, 212, 128, 0.5));
}

/* 4. Partitioned Table Wrap ("Bölmeli Sıralama Tablosu") */
.rohan-ranking-table-wrap {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-color: #8a613c #1d120c;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.rohan-ranking-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.rohan-ranking-table-wrap::-webkit-scrollbar-track {
  background: #1d120c;
}

.rohan-ranking-table-wrap::-webkit-scrollbar-thumb {
  background: #8a613c;
  border-radius: 4px;
}

.rohan-ranking-table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse !important;
  table-layout: auto;
  color: #cbb49b;
}

.rohan-ranking-table-card .rohan-player-ranking-table {
  min-width: 100%;
}

.rohan-ranking-table thead tr {
  background: transparent;
  border: 0;
}

.rohan-ranking-table thead th {
  padding: 12px 10px;
  color: var(--rohan-text);
  font-family: 'Domine', serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(82, 56, 38, 0.98), rgba(48, 32, 22, 0.98));
  border: 1px solid rgba(185, 142, 82, 0.35);
  border-top: 1px solid var(--rohan-border-gold);
  border-bottom: 1px solid var(--rohan-border);
  text-align: center;
}

.rohan-ranking-table tbody tr {
  border: 0;
  background: rgba(32, 22, 15, 0.72);
  transition: filter 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(2px);
}

.rohan-ranking-table tbody tr:nth-child(even) {
  background: rgba(20, 14, 9, 0.78);
}

.rohan-ranking-table tbody tr:hover {
  filter: brightness(1.15);
  background: rgba(58, 41, 28, 0.88);
}

.rohan-ranking-table tbody td {
  height: 42px;
  padding: 7px 10px;
  color: #cfbeaa;
  font-size: 12.5px;
  line-height: 18px;
  border: 1px solid rgba(185, 142, 82, 0.22);
  vertical-align: middle;
  text-align: center;
}

.rohan-ranking-table tbody td a {
  /* color: #f1dfca; */
  text-decoration: none;
  transition: color 0.2s ease;
}

.rohan-ranking-table tbody td a:hover {
  color: #ffdf9e;
}

/* Rank column (#) fixed width & styling with vertical divider lines on both sides */
.rohan-ranking-table th.rohan-col-rank {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 14px;
  padding: 0 !important;
  border-left: 1px solid rgba(229, 182, 107, 0.38) !important;
  border-right: 1px solid rgba(229, 182, 107, 0.38) !important;
}

.rohan-ranking-table td.rohan-col-rank {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 14px;
  padding: 0 !important;
  border-left: 1px solid rgba(229, 182, 107, 0.22) !important;
  border-right: 1px solid rgba(229, 182, 107, 0.22) !important;
}

/* Rank 1: Full Gold Bar (Row 1) */
.rohan-ranking-table tbody tr:nth-child(1) td {
  color: #fff4ba !important;
  background: linear-gradient(135deg, #96793c 0%, #6f5727 60%, #4f3d17 100%) !important;
  border-color: rgba(20, 13, 8, 0.75) !important;
  box-shadow: inset 0 0 10px rgba(255, 235, 140, 0.35);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-ranking-table tbody tr:nth-child(1) td a {
  /* color: #fff8d6 !important; */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-ranking-table tbody tr:nth-child(1) td a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 240, 180, 0.8);
}

.rohan-ranking-table tbody tr:nth-child(1) td img {
  border-color: rgba(255, 235, 140, 0.65) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.rohan-ranking-table tbody tr:nth-child(1) td:not(:nth-child(4))>span:not(.rohan-empire-badge),
.rohan-guild-table tbody tr:nth-child(1) td>span:not(.rohan-empire-badge),
.rohan-ranking-table.rohan-guild-table tbody tr:nth-child(1) td>span:not(.rohan-empire-badge) {
  color: #fff8d6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Rank 2: Full Silver Bar (Row 2) */
.rohan-ranking-table tbody tr:nth-child(2) td {
  color: #ffffff !important;
  background: linear-gradient(135deg, #78808a 0%, #575e67 60%, #3a3f46 100%) !important;
  border-color: rgba(20, 13, 8, 0.75) !important;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-ranking-table tbody tr:nth-child(2) td a {
  /* color: #ffffff !important; */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-ranking-table tbody tr:nth-child(2) td a:hover {
  color: #f0f4f8 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.rohan-ranking-table tbody tr:nth-child(2) td img {
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.rohan-ranking-table tbody tr:nth-child(2) td:not(:nth-child(4))>span:not(.rohan-empire-badge),
.rohan-guild-table tbody tr:nth-child(2) td>span:not(.rohan-empire-badge),
.rohan-ranking-table.rohan-guild-table tbody tr:nth-child(2) td>span:not(.rohan-empire-badge) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Rank 3: Full Bronze Bar (Row 3) */
.rohan-ranking-table tbody tr:nth-child(3) td {
  color: #ffd9c2 !important;
  background: linear-gradient(135deg, #87553a 0%, #683e26 60%, #462615 100%) !important;
  border-color: rgba(20, 13, 8, 0.75) !important;
  box-shadow: inset 0 0 10px rgba(255, 180, 130, 0.25);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-ranking-table tbody tr:nth-child(3) td a {
  /* color: #fff0e6 !important; */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-ranking-table tbody tr:nth-child(3) td a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 210, 180, 0.8);
}

.rohan-ranking-table tbody tr:nth-child(3) td img {
  border-color: rgba(255, 180, 130, 0.65) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.rohan-ranking-table tbody tr:nth-child(3) td:not(:nth-child(4))>span:not(.rohan-empire-badge),
.rohan-guild-table tbody tr:nth-child(3) td>span:not(.rohan-empire-badge),
.rohan-ranking-table.rohan-guild-table tbody tr:nth-child(3) td>span:not(.rohan-empire-badge) {
  color: #ffd9c2 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ŞAMPİYON Seviyesi: YALNIZCA Oyuncu Sıralamasında ve Şampiyon Kolonunda Resmi Şampiyon Rengi (#9ee6ff) */
.rohan-player-ranking-table tbody tr td:nth-child(4)>span,
.rohan-player-ranking-table tbody tr:nth-child(1) td:nth-child(4)>span,
.rohan-player-ranking-table tbody tr:nth-child(2) td:nth-child(4)>span,
.rohan-player-ranking-table tbody tr:nth-child(3) td:nth-child(4)>span,
.rohan-ranking-table tbody tr td.rohan-col-champion>span,
.rohan-ranking-table tbody tr td>span.rohan-champion-level {
  color: var(--rohan-blue, #9ee6ff) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Lonca Sıralaması: Üye Sayısı Rengi Seviye ile Birebir Aynı (Podium Dahil) */
.rohan-guild-table tbody tr td.rohan-col-members>span,
.rohan-guild-table tbody tr td:nth-child(4)>span,
.rohan-ranking-table.rohan-guild-table tbody tr td:nth-child(4)>span {
  color: var(--rohan-gold-primary) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.rohan-guild-table tbody tr:nth-child(1) td.rohan-col-members>span,
.rohan-guild-table tbody tr:nth-child(1) td:nth-child(4)>span,
.rohan-ranking-table.rohan-guild-table tbody tr:nth-child(1) td:nth-child(4)>span {
  color: #fff8d6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.rohan-guild-table tbody tr:nth-child(2) td.rohan-col-members>span,
.rohan-guild-table tbody tr:nth-child(2) td:nth-child(4)>span,
.rohan-ranking-table.rohan-guild-table tbody tr:nth-child(2) td:nth-child(4)>span {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.rohan-guild-table tbody tr:nth-child(3) td.rohan-col-members>span,
.rohan-guild-table tbody tr:nth-child(3) td:nth-child(4)>span,
.rohan-ranking-table.rohan-guild-table tbody tr:nth-child(3) td:nth-child(4)>span {
  color: #ffd9c2 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Lonca Simgesi (Metin2 Guild Mark) */
.rohan-guild-mark {
  width: 16px;
  height: 12px;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Podium Rank Divider (clean dark separator against bright metal on both sides) */
.rohan-ranking-table tbody tr:nth-child(1) td.rohan-col-rank,
.rohan-ranking-table tbody tr:nth-child(2) td.rohan-col-rank,
.rohan-ranking-table tbody tr:nth-child(3) td.rohan-col-rank {
  border-left: 1px solid rgba(20, 13, 8, 0.85) !important;
  border-right: 1px solid rgba(20, 13, 8, 0.85) !important;
}

/* Rank 4+: Clean Inset Obsidian Box with Clear Vertical Divider Lines on Both Sides */
.rohan-ranking-table tbody tr:nth-child(n+4) td.rohan-col-rank {
  color: #c4b5a2 !important;
  background: rgba(12, 8, 5, 0.65) !important;
  border-left: 1px solid rgba(185, 142, 82, 0.38) !important;
  border-right: 1px solid rgba(185, 142, 82, 0.38) !important;
  font-size: 12.5px;
}

/* Text alignment helper */
.rohan-ranking-table .text-left {
  text-align: left !important;
}

/* Mobile Responsiveness */
@media screen and (max-width: 860px) {
  .rohan-ranking-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rohan-rank-sidebar {
    width: 100%;
  }
}

/* ==========================================================================
   DOWNLOAD PAGE — PREMIUM MMORPG DUAL PANEL & HERO SHOWCASE
   ========================================================================== */

.rohan-dl-hero-card {
  position: relative;
  background: var(--rohan-bg-card);
  border: none;
  border-radius: 0;
  padding: 24px 28px 22px 28px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85);
  transition: all 0.25s ease;
  overflow: hidden;
}

.rohan-dl-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 10;
}

.rohan-dl-hero-divider {
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(229, 182, 107, 0.15) 10%,
      rgba(229, 182, 107, 0.45) 50%,
      rgba(229, 182, 107, 0.15) 90%,
      transparent 100%);
  position: relative;
  z-index: 10;
  margin: 0;
}

.rohan-dl-hero-advisory {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  border: 1px solid rgba(180, 138, 78, 0.2);
}

.rohan-dl-advisory-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rohan-advisory-shield {
  color: var(--rohan-gold-primary);
  font-size: 13px;
}

.rohan-advisory-shield-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 34px;
  flex-shrink: 0;
}

.rohan-advisory-shield-canvas {
  width: 32px;
  height: 34px;
  display: block;
  filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 14px rgba(14, 165, 233, 0.5));
  transition: filter 0.25s ease;
}

.rohan-advisory-shield-fallback {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.85));
}

.rohan-dl-hero-card:hover .rohan-advisory-shield-canvas,
.rohan-dl-hero-card:hover .rohan-advisory-shield-fallback {
  transform: none !important;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 1)) drop-shadow(0 0 18px rgba(14, 165, 233, 0.7));
}

.rohan-dl-advisory-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--rohan-gold);
  letter-spacing: 0.6px;
}

.rohan-dl-advisory-text {
  margin: 0;
  color: #c9bea9;
  font-size: 12.5px;
  line-height: 1.5;
}

.rohan-dl-advisory-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.rohan-dl-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 280px 140px at 120px 50%, rgba(229, 182, 107, 0.22) 0%, rgba(229, 182, 107, 0.06) 55%, transparent 80%),
    radial-gradient(ellipse 260px 120px at calc(100% - 100px) 50%, rgba(212, 190, 136, 0.12) 0%, rgba(212, 190, 136, 0.03) 50%, transparent 75%),
    linear-gradient(180deg, rgba(229, 182, 107, 0.06) 0%, transparent 35%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(135deg, rgba(38, 26, 17, 0.98) 0%, rgba(24, 16, 11, 0.98) 50%, rgba(18, 12, 8, 0.98) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Atmospheric Temple Showcase Layer from demonstration_01.jpg */
.rohan-dl-hero-bg-art {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      rgba(24, 16, 11, 0.98) 0%,
      rgba(24, 16, 11, 0.92) 42%,
      rgba(24, 16, 11, 0.55) 75%,
      rgba(24, 16, 11, 0.3) 100%),
    linear-gradient(180deg,
      rgba(24, 16, 11, 0.2) 0%,
      transparent 30%,
      rgba(15, 10, 7, 0.7) 100%),
    url('../images/backgrounds/demonstration_04.jpg');

  /* background-position: center center; /* veya right center */

  /* background-size: 90% 90%;        /* Çerçeveye tam oturması (esneyerek yayılması) için */

  /* background-size: contain; */
  /* Oranı bozulmadan tam sığması için alternatif*/
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.rohan-dl-hero-card:hover .rohan-dl-hero-bg-art {
  opacity: 1;
  filter: brightness(1.08) contrast(1.05);
}

.rohan-dl-hero-card:hover {
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.95), 0 0 24px rgba(229, 182, 107, 0.25);
}

.rohan-dl-hero-card:hover .rohan-frame-edge,
.rohan-dl-hero-card:hover .rohan-frame-corner {
  filter: brightness(1.22) drop-shadow(0 0 4px rgba(229, 182, 107, 0.45));
}

/* Sliced Reusable Ornate Fantasy Frame Component (from form-bg.png) */
/* ==========================================================================
   OFFICIAL ROHAN2 ASIAN FRET KEY FRAME (PORTED FROM Rohan2 ARCHITECTURE)
   ========================================================================== */
:root {
  --rohan-frame-color: #9a846b;
  --rohan-frame-edge: rgba(10, 8, 6, 0.9);
  --rohan-frame-key-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='-0.5 -0.5 18 17.01'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0,0v16.01h1.01v-3.99h4v-4.01h2.98v-2.99h4.04V1.01h4.97V0H0ZM4,11.01H1.01v-3h2.99v3ZM7.99,4.01v-2.01H3v4.01h3.02v-1.01h-2.01v-1.99h2.96v3.98H1.01V1.01h10.01v3h-3.03Z' fill='%239a846b' stroke='%230a0806' stroke-opacity='.9' stroke-width='1' stroke-linejoin='miter' paint-order='stroke'/%3E%3Crect x='16' y='0' width='1.5' height='1.01' fill='%239a846b'/%3E%3Crect x='0' y='15' width='1.01' height='1.51' fill='%239a846b'/%3E%3C/g%3E%3C/svg%3E");
  --rohan-frame-key-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='-0.5 -0.5 18 17.01'%3E%3Cg transform='translate(17 0) scale(-1 1)'%3E%3Cpath d='M0,0v16.01h1.01v-3.99h4v-4.01h2.98v-2.99h4.04V1.01h4.97V0H0ZM4,11.01H1.01v-3h2.99v3ZM7.99,4.01v-2.01H3v4.01h3.02v-1.01h-2.01v-1.99h2.96v3.98H1.01V1.01h10.01v3h-3.03Z' fill='%239a846b' stroke='%230a0806' stroke-opacity='.9' stroke-width='1' stroke-linejoin='miter' paint-order='stroke'/%3E%3Crect x='16' y='0' width='1.5' height='1.01' fill='%239a846b'/%3E%3Crect x='0' y='15' width='1.01' height='1.51' fill='%239a846b'/%3E%3C/g%3E%3C/svg%3E");
  --rohan-frame-key-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='-0.5 -0.5 18 17.01'%3E%3Cg transform='translate(0 16.01) scale(1 -1)'%3E%3Cpath d='M0,0v16.01h1.01v-3.99h4v-4.01h2.98v-2.99h4.04V1.01h4.97V0H0ZM4,11.01H1.01v-3h2.99v3ZM7.99,4.01v-2.01H3v4.01h3.02v-1.01h-2.01v-1.99h2.96v3.98H1.01V1.01h10.01v3h-3.03Z' fill='%239a846b' stroke='%230a0806' stroke-opacity='.9' stroke-width='1' stroke-linejoin='miter' paint-order='stroke'/%3E%3Crect x='16' y='0' width='1.5' height='1.01' fill='%239a846b'/%3E%3Crect x='0' y='15' width='1.01' height='1.51' fill='%239a846b'/%3E%3C/g%3E%3C/svg%3E");
  --rohan-frame-key-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='-0.5 -0.5 18 17.01'%3E%3Cg transform='translate(17 16.01) scale(-1 -1)'%3E%3Cpath d='M0,0v16.01h1.01v-3.99h4v-4.01h2.98v-2.99h4.04V1.01h4.97V0H0ZM4,11.01H1.01v-3h2.99v3ZM7.99,4.01v-2.01H3v4.01h3.02v-1.01h-2.01v-1.99h2.96v3.98H1.01V1.01h10.01v3h-3.03Z' fill='%239a846b' stroke='%230a0806' stroke-opacity='.9' stroke-width='1' stroke-linejoin='miter' paint-order='stroke'/%3E%3Crect x='16' y='0' width='1.5' height='1.01' fill='%239a846b'/%3E%3Crect x='0' y='15' width='1.01' height='1.51' fill='%239a846b'/%3E%3C/g%3E%3C/svg%3E");
}

.rohan-form-framed {
  position: relative;
  border: 2px solid var(--rohan-frame-color) !important;
  box-shadow: 0 0 0 1px var(--rohan-frame-edge), inset 0 0 0 1px var(--rohan-frame-edge) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* 4 Corner Ornaments via ::after pseudo-element */
.rohan-form-framed::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background: var(--rohan-frame-key-tl) 0 0 no-repeat,
    var(--rohan-frame-key-tr) 100% 0 no-repeat,
    var(--rohan-frame-key-bl) 0 100% no-repeat,
    var(--rohan-frame-key-br) 100% 100% no-repeat;
  z-index: 6;
  transition: filter 0.25s ease;
}

.rohan-form-framed:hover {
  border-color: #c4ab8d !important;
}

.rohan-form-framed:hover::after {
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(229, 182, 107, 0.35));
}

/* Hide legacy sliced spans across all views */
.rohan-form-framed>.rohan-frame-corner,
.rohan-form-framed>.rohan-frame-edge {
  display: none !important;
}

/* Ensure all child backgrounds and pseudo-elements inside .rohan-form-framed flush completely to the border (ZERO GAP) */
.rohan-form-framed::before,
.rohan-form-framed>[class*="-bg-art"],
.rohan-form-framed>[class*="-advisory-bg"],
.rohan-form-framed>[class*="-banner-bg"],
.rohan-form-framed>[class*="-notice-bg"],
.rohan-form-framed>[class*="-card-bg"] {
  inset: 0 !important;
}

/* ==========================================================================
   KONTROL PANELİ ÖZEL ÇERÇEVE MİMARİSİ (corner.svg VEKTÖR KÖŞEBENTLERİ)
   ========================================================================== */
:root {
  --rohan-cp-corner-tl: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='25' y='1' width='25' height='1' transform='rotate(180 25 1)' fill='%23B3946D'/%3E%3Crect x='7' y='4' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='1' width='25' height='1' transform='rotate(90 1 0)' fill='%23B3946D'/%3E%3Crect x='4' y='2' width='4' height='1' transform='rotate(90 4 2)' fill='%23B3946D'/%3E%3Crect x='5' y='8' width='4' height='1' transform='rotate(90 5 8)' fill='%23B3946D'/%3E%3Crect x='1' y='11' width='4' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='2' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='7' y='8' width='5' height='1' transform='rotate(-90 7 8)' fill='%23B3946D'/%3E%3Crect x='11' y='5' width='5' height='1' transform='rotate(-90 11 5)' fill='%23B3946D'/%3E%3Crect y='7' width='7' height='0.999999' fill='%23B3946D'/%3E%3C/svg%3E");
  --rohan-cp-corner-tr: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(25 0) scale(-1 1)'%3E%3Crect x='25' y='1' width='25' height='1' transform='rotate(180 25 1)' fill='%23B3946D'/%3E%3Crect x='7' y='4' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='1' width='25' height='1' transform='rotate(90 1 0)' fill='%23B3946D'/%3E%3Crect x='4' y='2' width='4' height='1' transform='rotate(90 4 2)' fill='%23B3946D'/%3E%3Crect x='5' y='8' width='4' height='1' transform='rotate(90 5 8)' fill='%23B3946D'/%3E%3Crect x='1' y='11' width='4' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='2' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='7' y='8' width='5' height='1' transform='rotate(-90 7 8)' fill='%23B3946D'/%3E%3Crect x='11' y='5' width='5' height='1' transform='rotate(-90 11 5)' fill='%23B3946D'/%3E%3Crect y='7' width='7' height='0.999999' fill='%23B3946D'/%3E%3C/g%3E%3C/svg%3E");
  --rohan-cp-corner-bl: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(0 25) scale(1 -1)'%3E%3Crect x='25' y='1' width='25' height='1' transform='rotate(180 25 1)' fill='%23B3946D'/%3E%3Crect x='7' y='4' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='1' width='25' height='1' transform='rotate(90 1 0)' fill='%23B3946D'/%3E%3Crect x='4' y='2' width='4' height='1' transform='rotate(90 4 2)' fill='%23B3946D'/%3E%3Crect x='5' y='8' width='4' height='1' transform='rotate(90 5 8)' fill='%23B3946D'/%3E%3Crect x='1' y='11' width='4' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='2' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='7' y='8' width='5' height='1' transform='rotate(-90 7 8)' fill='%23B3946D'/%3E%3Crect x='11' y='5' width='5' height='1' transform='rotate(-90 11 5)' fill='%23B3946D'/%3E%3Crect y='7' width='7' height='0.999999' fill='%23B3946D'/%3E%3C/g%3E%3C/svg%3E");
  --rohan-cp-corner-br: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(25 25) scale(-1 -1)'%3E%3Crect x='25' y='1' width='25' height='1' transform='rotate(180 25 1)' fill='%23B3946D'/%3E%3Crect x='7' y='4' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='1' width='25' height='1' transform='rotate(90 1 0)' fill='%23B3946D'/%3E%3Crect x='4' y='2' width='4' height='1' transform='rotate(90 4 2)' fill='%23B3946D'/%3E%3Crect x='5' y='8' width='4' height='1' transform='rotate(90 5 8)' fill='%23B3946D'/%3E%3Crect x='1' y='11' width='4' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23B3946D'/%3E%3Crect x='3' y='2' width='5' height='1' fill='%23B3946D'/%3E%3Crect x='7' y='8' width='5' height='1' transform='rotate(-90 7 8)' fill='%23B3946D'/%3E%3Crect x='11' y='5' width='5' height='1' transform='rotate(-90 11 5)' fill='%23B3946D'/%3E%3Crect y='7' width='7' height='0.999999' fill='%23B3946D'/%3E%3C/g%3E%3C/svg%3E");
}

.rohan-cp-main .rohan-form-framed,
.rohan-cp-corner-framed {
  border: 1px solid #B3946D !important;
  box-shadow: 0 0 0 1px rgba(10, 8, 6, 0.9), inset 0 0 0 1px rgba(10, 8, 6, 0.9), 0 8px 30px rgba(0, 0, 0, 0.85) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.rohan-cp-main .rohan-form-framed::after,
.rohan-cp-corner-framed::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  pointer-events: none !important;
  background-image:
    var(--rohan-cp-corner-tl),
    var(--rohan-cp-corner-tr),
    var(--rohan-cp-corner-bl),
    var(--rohan-cp-corner-br) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 100% 0, 0 100%, 100% 100% !important;
  background-size: 28px 28px !important;
  z-index: 6 !important;
  transition: filter 0.25s ease !important;
}

.rohan-cp-main .rohan-form-framed:hover::after,
.rohan-cp-corner-framed:hover::after {
  filter: brightness(1.22) drop-shadow(0 0 5px rgba(229, 182, 107, 0.55)) !important;
}

.rohan-dl-hero-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 10;
}

.rohan-dl-hero-right {
  position: relative;
  z-index: 10;
}

.rohan-dl-hero-emblem {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 14px rgba(229, 182, 107, 0.4));
  flex-shrink: 0;
  transition: filter 0.3s ease;
}

/* Medallion Base (b2.png) rendered IN FRONT of the rotating ring */
.rohan-dl-hero-emblem::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url('../images/b2.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

.rohan-dl-emblem-help {
  position: relative;
  z-index: 3;
  height: 28px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  right: -2px;
}

.rohan-dl-hero-card:hover .rohan-dl-emblem-help {
  transform: none !important;
}

/* 1.png Rotating Golden Arc Energy Trail — Rendered BEHIND the medallion */
.rohan-dl-emblem-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
  animation: rohanEmblemSpin 3s linear infinite;
  will-change: transform;
}

.rohan-dl-emblem-ring::before {
  content: '';
  position: absolute;
  top: -18.5px;
  left: -61.5px;
  width: 97px;
  height: 78px;
  background-image: url('../images/1.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 16px rgba(229, 182, 107, 0.7));
  pointer-events: none;
}

@keyframes rohanEmblemSpin {
  0% {
    transform: rotate(0deg) scale(0.86);
  }

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

.rohan-dl-hero-card:hover .rohan-dl-hero-emblem {
  transform: none !important;
  box-shadow: 0 0 26px rgba(229, 182, 107, 0.5);
}

.rohan-dl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rohan-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: rohanLiveDotPulse 1.8s infinite;
}

@keyframes rohanLiveDotPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

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

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.rohan-dl-hero-title {
  margin: 0 0 8px 0;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 800;
  /* color: #ffffff; */
  letter-spacing: 0.6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.rohan-dl-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #bfb3a0;
  flex-wrap: wrap;
}

.rohan-dl-hero-meta i {
  color: var(--rohan-gold-primary);
  margin-right: 4px;
}

.rohan-meta-sep {
  color: rgba(229, 182, 107, 0.4);
}

.rohan-dl-hero-btn {
  background: var(--rohan-gold-btn-grad2);
  border: 1px solid var(--rohan-gold-btn-border);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  padding: 0 34px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 12px rgba(60, 45, 20, 0.6);
  box-shadow: 0 6px 20px rgba(120, 95, 45, 0.4);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.rohan-dl-hero-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -110px;
  width: 70px;
  height: 200%;
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 5;
  animation: rohanButtonShimmer 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 245, 190, 0.3) 20%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 245, 190, 0.3) 80%,
      rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 20px 4px rgba(255, 230, 150, 0.75);
}

.rohan-dl-hero-btn:hover {
  filter: brightness(1.15);
  box-shadow: 0 8px 25px rgba(220, 185, 115, 0.6);
  transform: translateY(-2px);
  color: #ffffff;
}

/* ==========================================================================
   Troubleshooting & FAQ Card (demonstration_05.png Artwork & Ornate Sliced Frame)
   ========================================================================== */
.rohan-dl-faq-card {
  position: relative;
  background: var(--rohan-bg-card);
  border: none;
  border-radius: 0;
  padding: 22px 28px;
  margin-bottom: 30px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85);
  transition: all 0.25s ease;
  overflow: hidden;
}

.rohan-dl-faq-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 280px 140px at 120px 50%, rgba(229, 182, 107, 0.16) 0%, rgba(229, 182, 107, 0.04) 55%, transparent 80%),
    radial-gradient(ellipse 260px 120px at calc(100% - 100px) 50%, rgba(212, 190, 136, 0.1) 0%, rgba(212, 190, 136, 0.02) 50%, transparent 75%),
    linear-gradient(180deg, rgba(229, 182, 107, 0.05) 0%, transparent 35%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(135deg, rgba(38, 26, 17, 0.98) 0%, rgba(24, 16, 11, 0.98) 50%, rgba(18, 12, 8, 0.98) 100%);
  pointer-events: none;
  z-index: 1;
}

.rohan-dl-faq-bg-art {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      rgba(24, 16, 11, 0.98) 0%,
      rgba(24, 16, 11, 0.92) 42%,
      rgba(24, 16, 11, 0.65) 75%,
      rgba(24, 16, 11, 0.35) 100%),
    linear-gradient(180deg,
      rgba(24, 16, 11, 0.2) 0%,
      transparent 30%,
      rgba(15, 10, 7, 0.75) 100%),
    url('../images/backgrounds/demonstration_05.jpg');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.rohan-dl-faq-card:hover .rohan-dl-faq-bg-art {
  opacity: 1;
  filter: brightness(1.08) contrast(1.05);
}

.rohan-dl-faq-card:hover {
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.95), 0 0 24px rgba(229, 182, 107, 0.22);
}

.rohan-dl-faq-card:hover .rohan-frame-edge,
.rohan-dl-faq-card:hover .rohan-frame-corner {
  filter: brightness(1.22) drop-shadow(0 0 4px rgba(229, 182, 107, 0.45));
}

.rohan-dl-faq-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rohan-dl-faq-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rohan-dl-faq-question {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--rohan-gold, #f7dba9);
  letter-spacing: 0.4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.rohan-dl-faq-question .rohan-dl-tip-icon {
  height: 13px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(229, 182, 107, 0.65));
  transition: transform 0.2s ease;
}

.rohan-dl-faq-item:hover .rohan-dl-tip-icon {
  transform: translateX(3px);
}

.rohan-dl-faq-answer {
  margin: 0;
  padding-left: 23px;
  font-size: 13px;
  line-height: 1.6;
  color: #c9bea9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  max-width: 820px;
}

.rohan-dl-faq-divider {
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(229, 182, 107, 0.12) 10%,
      rgba(229, 182, 107, 0.35) 50%,
      rgba(229, 182, 107, 0.12) 90%,
      transparent 100%);
  position: relative;
  z-index: 10;
  margin: 2px 0;
}

.rohan-faq-link {
  color: #67e8f9;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.rohan-faq-link:hover {
  color: #a5f3fc;
  text-shadow: 0 0 8px rgba(103, 232, 249, 0.7);
}

/* 2. Heading Bar */
.rohan-dl-heading-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(180, 138, 78, 0.2);
  padding-bottom: 10px;
}

.rohan-dl-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--rohan-gold, #f7dba9);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.rohan-dl-title-icon {
  width: 17px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(247, 219, 169, 0.75));
  flex-shrink: 0;
}

.rohan-dl-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(229, 182, 107, 0.08);
  border: 1px solid rgba(229, 182, 107, 0.25);
  color: var(--rohan-gold-primary);
  font-size: 12px;
  font-weight: 600;
}

/* 3. Panel Cards */
.rohan-dl-section {
  margin-bottom: 32px;
  scroll-margin-top: 100px;
}

.rohan-dl-card {
  position: relative;
  background-color: #120c08;
  background-image:
    radial-gradient(ellipse 800px 240px at 50% 0%, rgba(229, 182, 107, 0.12) 0%, transparent 70%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.85) 18%, rgba(14, 9, 6, 0.85) 82%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.75) 100%),
    url('../images/backgrounds/bg_product.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(180, 138, 78, 0.35);
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(229, 182, 107, 0.22);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.rohan-dl-card:hover {
  border-color: rgba(229, 182, 107, 0.55);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.9), 0 0 20px rgba(229, 182, 107, 0.12), inset 0 1px 0 rgba(229, 182, 107, 0.35);
}

.rohan-dl-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  margin: 0;
}

.rohan-dl-table thead tr {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28, 18, 11, 0.75) 0%, rgba(14, 9, 6, 0.88) 100%),
    url('../images/menu_bar.png') repeat-x center center;
  background-size: auto 100%;
  border-bottom: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(229, 182, 107, 0.2);
}

.rohan-dl-table th {
  padding: 14px 24px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--rohan-gold-light, #f7dba9);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
}

.rohan-dl-table tbody tr {
  border-bottom: 1px solid rgba(180, 138, 78, 0.12);
  transition: all 0.22s ease;
}

.rohan-dl-table tbody tr:nth-child(odd) {
  background: rgba(20, 13, 8, 0.45);
}

.rohan-dl-table tbody tr:nth-child(even) {
  background: rgba(32, 21, 14, 0.6);
}

.rohan-dl-table tbody tr:last-child {
  border-bottom: none;
}

.rohan-dl-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(229, 182, 107, 0.16) 0%, rgba(229, 182, 107, 0.05) 50%, rgba(229, 182, 107, 0.12) 100%) !important;
  box-shadow: inset 4px 0 0 var(--rohan-gold-primary), 0 2px 14px rgba(0, 0, 0, 0.45);
}

.rohan-dl-table tbody tr:hover .rohan-mirror-name {
  color: #fff6d6;
  text-shadow: 0 0 10px rgba(229, 182, 107, 0.4);
}

.rohan-dl-table td {
  padding: 16px 24px;
  font-size: 13.5px;
  vertical-align: middle;
}

/* Source Mirror styling */
.rohan-mirror-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rohan-mirror-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.rohan-dl-table tbody tr:hover .rohan-mirror-icon-box {
  transform: scale(1.08);
}

.rohan-mirror-icon-box.cdn {
  background: rgba(229, 182, 107, 0.15);
  border: 1px solid rgba(229, 182, 107, 0.35);
  color: #fce3a1;
}

.rohan-mirror-icon-box.drive {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.rohan-mirror-icon-box.setup {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.rohan-mirror-icon-box.cloud {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.rohan-mirror-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rohan-mirror-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
}

.rohan-mirror-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rohan-mirror-pill {
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.rohan-mirror-pill.cdn {
  background: rgba(229, 182, 107, 0.18);
  color: var(--rohan-gold-light);
  border: 1px solid rgba(229, 182, 107, 0.3);
}

.rohan-mirror-pill.drive {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.rohan-mirror-pill.setup {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.rohan-mirror-pill.cloud {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.rohan-mirror-status {
  font-size: 11.5px;
  font-weight: 600;
  color: #ffe5a3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.rohan-mirror-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(229, 182, 107, 0.35) 0%, rgba(26, 17, 10, 0.95) 75%, rgba(14, 9, 5, 0.98) 100%);
  border: 1px solid #e5b66b;
  color: #ffe5a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 8px rgba(229, 182, 107, 0.45),
    0 0 3px rgba(255, 230, 168, 0.35),
    inset 0 0 4px rgba(229, 182, 107, 0.4);
  flex-shrink: 0;
  line-height: 1;
}

.rohan-mirror-check i {
  font-size: 8px;
  color: #ffe5a3 !important;
  text-shadow: 0 0 4px rgba(229, 182, 107, 0.85);
  display: inline-block;
  line-height: 1;
}

/* Date Cell */
.rohan-dl-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c9bea9;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-family: 'Montserrat', sans-serif;
  background: rgba(14, 9, 6, 0.7);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(180, 138, 78, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.rohan-dl-table tbody tr:hover .rohan-dl-date-badge {
  background: rgba(24, 16, 11, 0.9);
  border-color: rgba(229, 182, 107, 0.4);
  color: #ffffff;
}

.rohan-dl-date-badge i {
  color: var(--rohan-gold-primary);
  font-size: 11px;
}

/* Action Download Button */
.rohan-dl-action-cell {
  text-align: right;
  white-space: nowrap;
}

.rohan-dl-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* color: #ffffff; */
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-decoration: none;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(229, 182, 107, 0.2) 0%, rgba(140, 106, 40, 0.35) 100%);
  border: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.22s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.rohan-dl-action-btn i {
  font-size: 12px;
  color: var(--rohan-gold-light);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.rohan-dl-action-btn:hover {
  background: var(--rohan-gold-btn-grad);
  border-color: #f7dba9;
  color: #120c06;
  box-shadow: 0 4px 18px rgba(229, 182, 107, 0.55);
  transform: translateY(-2px);
}

.rohan-dl-action-btn:hover i {
  color: #120c06;
  transform: translateY(2px);
}

/* Authentic MMORPG button-gold.png Download Button Variant */
.rohan-dl-action-btn.rohan-btn-gold {
  background: url('../images/button-gold.png') no-repeat center center / 100% 100%;
  border: none;
  border-radius: 6px;
  color: #fff2db !important;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.8px;
  height: 38px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 235, 180, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rohan-dl-action-btn.rohan-btn-gold i {
  font-size: 12.5px;
  color: #ffe5a3;
  text-shadow: 0 1px 2px #000000;
  transition: transform 0.2s ease, color 0.2s ease;
}

.rohan-dl-action-btn.rohan-btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-25deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.rohan-dl-action-btn.rohan-btn-gold:hover {
  filter: brightness(1.25) contrast(1.08);
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 16px rgba(229, 182, 107, 0.45);
  transform: translateY(-2px);
}

.rohan-dl-action-btn.rohan-btn-gold:hover i {
  color: #ffffff;
  transform: translateY(2px);
}

.rohan-dl-action-btn.rohan-btn-gold:hover::after {
  left: 150%;
}

.rohan-dl-action-btn.rohan-btn-gold:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.rohan-btn.rohan-btn-primary.rohan-btn-gold {
  background: url('../images/button-gold.png') no-repeat center center / 100% 100%;
  border: 1px solid rgba(229, 182, 107, 0.4);
  border-radius: 5px;
  color: #fff2db !important;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  transition: all 0.22s ease;
}

.rohan-btn.rohan-btn-primary.rohan-btn-gold:hover {
  filter: brightness(1.22);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8), 0 0 14px rgba(229, 182, 107, 0.4);
}

/* 4. Hardware Matrix Styling */
.rohan-hardware-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rohan-hardware-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(229, 182, 107, 0.12);
  border: 1px solid rgba(229, 182, 107, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rohan-gold-light);
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.rohan-hardware-name {
  font-weight: 700;
  color: var(--rohan-gold);
  font-size: 13.5px;
}

.rohan-spec-min {
  color: #c5bba9;
  font-size: 13px;
  line-height: 1.5;
}

.rohan-spec-rec {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 0 8px rgba(247, 219, 169, 0.2);
}

/* 5. Royal Advisory Decree Card */
.rohan-dl-guide-card {
  margin-bottom: 32px;
  background: linear-gradient(135deg, rgba(28, 19, 12, 0.9) 0%, rgba(18, 12, 8, 0.95) 100%);
  border: 1px solid rgba(229, 182, 107, 0.3);
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.rohan-dl-guide-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(229, 182, 107, 0.15);
  border: 1px solid var(--rohan-gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rohan-gold-light);
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(229, 182, 107, 0.3);
}

.rohan-dl-guide-heading {
  margin: 0 0 8px 0;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--rohan-gold);
  letter-spacing: 0.5px;
}

.rohan-dl-guide-text {
  margin: 0 0 14px 0;
  color: #dcd4c6;
  font-size: 13px;
  line-height: 1.6;
}

.rohan-dl-guide-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rohan-dl-tip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(229, 182, 107, 0.2);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #e5b66b;
  transition: all 0.2s ease;
}

.rohan-dl-tip:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(229, 182, 107, 0.4);
}

.rohan-dl-tip-icon {
  height: 12px;
  width: auto;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(229, 182, 107, 0.5));
  transition: transform 0.2s ease;
}

.rohan-dl-tip:hover .rohan-dl-tip-icon {
  transform: translateX(2px);
}

.rohan-dl-tip i {
  color: #22c55e;
}

/* Custom Scrollbar for tables */
.rohan-dl-card::-webkit-scrollbar {
  height: 6px;
}

.rohan-dl-card::-webkit-scrollbar-track {
  background: rgba(14, 9, 6, 0.9);
}

.rohan-dl-card::-webkit-scrollbar-thumb {
  background: rgba(180, 138, 78, 0.4);
  border-radius: 3px;
}

.rohan-dl-card::-webkit-scrollbar-thumb:hover {
  background: rgba(229, 182, 107, 0.7);
}

/* ==========================================================================
   Register Event & Bonus Banner (Nostalgic Purple Glow & 2x Ruby Ring)
   ========================================================================== */
.rohan-register-banner-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px auto 30px auto;
  overflow: visible;
}

.rohan-register-banner {
  position: relative;
  width: 480px;
  max-width: 100%;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.rohan-reg-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.6));
  transition: filter 0.3s ease;
}

.rohan-register-banner:hover .rohan-reg-banner-bg {
  filter: drop-shadow(0 6px 22px rgba(168, 85, 247, 0.4)) brightness(1.06);
}

.rohan-reg-banner-text {
  position: relative;
  z-index: 2;
  padding: 0 85px 0 25px;
  text-align: center;
  color: #f3d789;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.26;
  letter-spacing: normal;
  text-shadow: 2px 2px 3px #000000, 1px 1px 1px #000000;
  transition: color 0.3s ease;
}

.rohan-register-banner:hover .rohan-reg-banner-text {
  color: #ffe89f;
}

.rohan-reg-banner-ring {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.45)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.55));
  animation: rohanRingPulse 3.5s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.rohan-register-banner:hover .rohan-reg-banner-ring {
  transform: translateY(calc(-50% - 4px)) scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.75)) drop-shadow(0 0 26px rgba(192, 132, 252, 0.9));
}

@keyframes rohanRingPulse {

  0%,
  100% {
    transform: translateY(-50%) scale(1);
    filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.45)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.55));
  }

  50% {
    transform: translateY(calc(-50% - 4px)) scale(1.04);
    filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.65)) drop-shadow(0 0 24px rgba(192, 132, 252, 0.75));
  }
}

/* ==========================================================================
   Rohan Form Enhancements: Inputs, Selects, Autofill, Checkmarks & Submit Button
   ========================================================================== */

/* 1. WebKit / Chromium Browser Autofill Override (Dark Fantasy Integration) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #140e0a inset !important;
  box-shadow: 0 0 0 1000px #140e0a inset !important;
  -webkit-text-fill-color: #f7dba9 !important;
  caret-color: #f7dba9 !important;
  border-color: rgba(229, 182, 107, 0.45) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* 2. Premium Dark Fantasy Inputs & Selects */
.rohan-input {
  width: 100%;
  background: #140e0a !important;
  border: 1px solid rgba(180, 138, 78, 0.35) !important;
  color: #f7dba9 !important;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, padding 0.2s ease;
}

.rohan-input::placeholder {
  color: rgba(203, 190, 169, 0.45);
  font-size: 13px;
}

.rohan-input:focus {
  outline: none;
  background: #1a120b !important;
  border-color: var(--rohan-gold-primary) !important;
  box-shadow: 0 0 14px rgba(229, 182, 107, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}

.rohan-select {
  width: 100%;
  background-color: #140e0a !important;
  border: 1px solid rgba(180, 138, 78, 0.35) !important;
  color: #f7dba9 !important;
  padding: 12px 34px 12px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e5b66b' d='M1.41 0L6 4.58L10.59 0L12 1.41L6 7.41L0 1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.rohan-select:focus {
  outline: none;
  background-color: #1a120b !important;
  border-color: var(--rohan-gold-primary) !important;
  box-shadow: 0 0 14px rgba(229, 182, 107, 0.35) !important;
  color: #ffffff !important;
}

.rohan-select option {
  background-color: #1a120b;
  color: #f7dba9;
  padding: 8px 12px;
}

/* 3. Input Validation Wrapper & Rohan Signature Gold Checkmark */
.rohan-input-field-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.rohan-input-field-wrap.is-valid .rohan-input,
.rohan-input-wrap.is-valid .rohan-input {
  border-color: rgba(229, 182, 107, 0.85) !important;
  box-shadow: 0 0 12px rgba(229, 182, 107, 0.32), inset 0 2px 5px rgba(0, 0, 0, 0.65) !important;
  padding-right: 44px;
}

.rohan-field-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0.3) rotate(-25deg);
  opacity: 0;
  pointer-events: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(229, 182, 107, 0.35) 0%, rgba(26, 17, 10, 0.95) 75%, rgba(14, 9, 5, 0.98) 100%);
  border: 1px solid #e5b66b;
  color: #ffe5a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  box-shadow:
    0 0 10px rgba(229, 182, 107, 0.45),
    0 0 4px rgba(255, 230, 168, 0.35),
    inset 0 0 6px rgba(229, 182, 107, 0.4);
  transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.22s ease;
  z-index: 10;
  visibility: hidden;
}

.rohan-field-status i {
  font-size: 11.5px;
  color: #ffe5a3 !important;
  display: inline-block;
  line-height: 1;
  text-shadow: 0 0 4px rgba(229, 182, 107, 0.8);
}

.rohan-input-field-wrap.is-valid .rohan-field-status,
.rohan-input-wrap.is-valid .rohan-field-status {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) scale(1) rotate(0deg) !important;
}

/* 4. Luxury Golden Submit Button */
.rohan-submit-btn {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  background: linear-gradient(180deg, #ffe5a3 0%, #d4a04e 45%, #b37e2d 100%);
  border: 1px solid #ffeaae;
  border-radius: 6px;
  color: #1a1106;
  font-family: 'Cinzel', serif;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(229, 182, 107, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s ease;
  margin-top: 15px;
}

.rohan-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.rohan-submit-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(229, 182, 107, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

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

.rohan-submit-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(229, 182, 107, 0.5);
}

.rohan-submit-btn i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.rohan-submit-btn:hover i {
  transform: scale(1.18);
}

/* Metin2 Crimson Sprite Button (main_button.png - 570x47 / 3 frames: 190x47 each) */
.rohan-submit-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 25px;
}

.rohan-submit-btn.is-sprite {
  width: 190px !important;
  height: 47px !important;
  max-width: 190px !important;
  background-image: url('../images/main_button.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: 570px 47px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65) !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #fff2db !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: filter 0.15s ease, transform 0.08s ease !important;
}

.rohan-submit-btn.is-sprite span {
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

.rohan-submit-btn.is-sprite::before {
  display: none !important;
}

.rohan-submit-btn.is-sprite:hover {
  background-position: -190px 0 !important;
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 14px rgba(220, 38, 38, 0.45) !important;
}

.rohan-submit-btn.is-sprite:active {
  background-position: -380px 0 !important;
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.rohan-submit-btn.is-sprite i {
  font-size: 13px !important;
  color: #ffe5a3 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Input Icon Positioning (prevents placeholder overlap) */
.rohan-input-wrap {
  position: relative;
  width: 100%;
}

.rohan-input-wrap .rohan-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #e5b66b;
  pointer-events: none;
  z-index: 2;
  font-size: 14px;
  opacity: 0.9;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.rohan-input-wrap:focus-within .rohan-input-icon {
  color: #ffe5a3;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(229, 182, 107, 0.45));
}

.rohan-input-wrap .rohan-input {
  padding-left: 38px !important;
}

/* Password Visibility Toggle — Rohan Theme */
.rohan-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 6px;
  margin: 0;
  color: rgba(229, 182, 107, 0.55);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  z-index: 12;
  user-select: none;
  -webkit-user-select: none;
}

.rohan-password-toggle:hover {
  color: #ffe5a3;
  text-shadow: 0 0 8px rgba(229, 182, 107, 0.7);
  transform: translateY(-50%) scale(1.12);
}

.rohan-password-toggle:focus {
  outline: none;
  color: #ffe5a3;
}

.rohan-password-toggle.is-active {
  color: #e5b66b;
  text-shadow: 0 0 6px rgba(229, 182, 107, 0.5);
}

.rohan-input-wrap.has-toggle .rohan-input {
  padding-right: 40px !important;
}

.rohan-input-wrap.has-toggle .rohan-field-status {
  right: 40px !important;
}

.rohan-input-wrap.has-toggle.is-valid .rohan-input {
  padding-right: 70px !important;
}

/* Password Mismatch Warning Badge — Rohan MMORPG Theme */
.rohan-password-mismatch {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(28, 14, 9, 0.98) 0%, rgba(14, 8, 5, 0.98) 100%);
  border: 1px solid rgba(184, 80, 55, 0.75);
  color: #fce1d9;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), inset 0 0 8px rgba(184, 80, 55, 0.25), 0 0 8px rgba(184, 80, 55, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.rohan-password-mismatch::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid rgba(184, 80, 55, 0.85);
}

.rohan-password-mismatch::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 5px solid #1c0e09;
}

.rohan-password-mismatch i {
  color: #e58b6b;
  font-size: 12px;
  text-shadow: 0 0 8px rgba(229, 139, 107, 0.7);
  flex-shrink: 0;
}

.rohan-input-wrap.has-mismatch .rohan-password-mismatch {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.rohan-input-wrap.has-mismatch .rohan-input {
  border-color: rgba(184, 80, 55, 0.7) !important;
  box-shadow: 0 0 10px rgba(184, 80, 55, 0.25) !important;
}

@media screen and (max-width: 900px) {
  .rohan-password-grid {
    grid-template-columns: 1fr !important;
  }

  .rohan-password-mismatch {
    position: static !important;
    transform: none !important;
    margin-top: 8px !important;
    width: fit-content;
    display: none;
  }

  .rohan-password-mismatch::before,
  .rohan-password-mismatch::after {
    display: none !important;
  }

  .rohan-input-wrap.has-mismatch .rohan-password-mismatch {
    display: inline-flex !important;
    transform: none !important;
  }
}

/* Responsive */
@media screen and (max-width: 900px) {
  .rohan-dl-hero-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .rohan-dl-hero-btn {
    width: 100%;
  }
}

@media screen and (max-width: 680px) {
  .rohan-dl-hero-title {
    font-size: 18px;
  }

  .rohan-dl-hero-emblem {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .rohan-dl-guide-card {
    flex-direction: column;
  }

  .rohan-dl-faq-card {
    padding: 16px 18px;
  }

  .rohan-dl-faq-question {
    font-size: 13.5px;
  }

  .rohan-dl-faq-answer {
    padding-left: 0;
    font-size: 12.5px;
  }

  .rohan-register-banner {
    width: 100%;
    height: 105px;
  }

  .rohan-reg-banner-ring {
    width: 110px;
    height: 110px;
    right: -18px;
  }

  .rohan-reg-banner-text {
    font-size: 13px;
    padding-left: 12px;
    padding-right: 68px;
  }
}

/* ==========================================================================
   5. Membership Agreement Modal (#sozlesme) - Dark Fantasy Architecture
   ========================================================================== */
#sozlesme.modal {
  display: none;
  position: fixed;
  z-index: 100000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(5, 3, 2, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: rohanModalFadeIn 0.25s ease-out;
}

@keyframes rohanModalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#sozlesme .modal-content {
  background: linear-gradient(180deg, #18110b 0%, #100b07 100%);
  border: 1px solid rgba(229, 182, 107, 0.45);
  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.95),
    0 0 25px rgba(229, 182, 107, 0.18),
    inset 0 1px 0 rgba(255, 235, 180, 0.15);
  border-radius: 8px;
  margin: 50px auto;
  padding: 0;
  width: 92%;
  max-width: 760px;
  position: relative;
  overflow: hidden;
  animation: rohanModalSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rohanModalSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
  }

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

.rohan-sozlesme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(229, 182, 107, 0.12) 0%, rgba(20, 14, 9, 0.6) 100%);
  border-bottom: 1px solid rgba(229, 182, 107, 0.25);
}

.rohan-sozlesme-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rohan-sozlesme-icon {
  font-size: 18px;
  color: var(--rohan-gold-primary);
  text-shadow: 0 0 10px rgba(229, 182, 107, 0.5);
}

.rohan-sozlesme-title {
  font-family: 'Cinzel', serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rohan-gold-light);
  letter-spacing: 0.8px;
  margin: 0;
}

#sozlesme .close {
  background: transparent;
  border: none;
  color: #a89f91;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

#sozlesme .close:hover,
#sozlesme .close:focus {
  color: var(--rohan-gold-light);
  transform: scale(1.15);
  outline: none;
}

.rohan-sozlesme-body {
  padding: 26px 32px;
  max-height: 68vh;
  overflow-y: auto;
  color: #dce4ec;
  font-size: 14px;
  line-height: 1.82;
  letter-spacing: 0.2px;
}

.rohan-sozlesme-content {
  color: #dce4ec;
}

.rohan-sozlesme-content p {
  margin: 0 0 14px;
  line-height: 1.82;
}

.rohan-sozlesme-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
  margin: 0 auto 22px;
  padding-bottom: 12px;
  max-width: 360px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.3);
  background: linear-gradient(180deg, #ffe5a3 0%, #e5b66b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(229, 182, 107, 0.2);
}

/* Her maddenin altına ferahlatıcı boşluk ve zarif altın ayrım çizgisi */
.rohan-clause-divider {
  display: block;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(229, 182, 107, 0.22) 0%, rgba(229, 182, 107, 0.05) 50%, transparent 100%);
}

/* 1-), 2-), 3-) Madde Numarası Vurgusu */
.rohan-clause-badge {
  color: #ffd899;
  font-weight: 800;
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  display: inline-block;
  margin-right: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.rohan-sozlesme-body strong {
  color: #fff2db;
  font-weight: 700;
}

.rohan-sozlesme-body ul {
  margin: 10px 0 16px 20px;
  padding-left: 12px;
}

.rohan-sozlesme-body li {
  margin-bottom: 8px;
  color: #cbd5e1;
  line-height: 1.7;
}

.rohan-sozlesme-body a {
  color: var(--rohan-gold-primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.rohan-sozlesme-body a:hover {
  color: #ffffff;
}

.rohan-sozlesme-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: rgba(16, 11, 7, 0.95);
  border-top: 1px solid rgba(229, 182, 107, 0.25);
}

#sozlesme .rohan-sozlesme-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
  height: 42px;
  padding: 0 24px;
  border-radius: 6px;
  background: url('../images/button-gold.png') no-repeat center center / 100% 100%;
  border: 1px solid rgba(229, 182, 107, 0.45);
  color: #fff2db !important;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(229, 182, 107, 0.15);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#sozlesme .rohan-sozlesme-close-btn:hover {
  filter: brightness(1.22);
  border-color: rgba(229, 182, 107, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 16px rgba(229, 182, 107, 0.45);
}

#sozlesme .rohan-sozlesme-close-btn .rohan-mirror-check {
  margin-right: 2px;
}

.rohan-sozlesme-body::-webkit-scrollbar {
  width: 6px;
}

.rohan-sozlesme-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
}

.rohan-sozlesme-body::-webkit-scrollbar-thumb {
  background: rgba(229, 182, 107, 0.35);
  border-radius: 3px;
}

.rohan-sozlesme-body::-webkit-scrollbar-thumb:hover {
  background: var(--rohan-gold-primary);
}

/* ==========================================================================
   Floating Discord Widget (Rohan2 Modern Standard & Admin-Managed)
   ========================================================================== */
.rohan-discord-widget {
  position: fixed;
  bottom: 25px;
  z-index: 9999;
  display: inline-block;
  transform-origin: bottom left;
  transition: bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.45s ease,
    visibility 0.55s;
}

.rohan-discord-widget.rohan-discord-left {
  left: 25px;
  transform-origin: bottom left;
}

.rohan-discord-widget.rohan-discord-right {
  right: 25px;
  transform-origin: bottom right;
}

/* "Bütünden Aza Doğru" Küçülerek Yok Olma Efekti (Shrink to Corner Collapse) */
.rohan-discord-widget.rohan-discord-hidden {
  opacity: 0;
  transform: scale(0.02) translateY(25px);
  filter: blur(8px) brightness(1.5);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.45s ease,
    visibility 0.55s;
}

.rohan-discord-widget-card {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0f1216;
  border: 1px solid rgba(229, 182, 107, 0.38);
  /* box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 18px rgba(88, 101, 242, 0.28); */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 18px rgb(98 88 66);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  line-height: 0;
  text-decoration: none;
}

.rohan-discord-widget-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), 0 0 24px rgba(88, 101, 242, 0.5);
  border-color: rgba(229, 182, 107, 0.75);
}

.rohan-discord-widget-img {
  display: block;
  width: 226px;
  height: 122px;
  object-fit: cover;
  pointer-events: none;
}

/* Yuvarlak Rohan2 Logo.gif Alanı */
.rohan-discord-widget-logo-wrap {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  /* border: 1.5px solid rgba(229, 182, 107, 0.75); */
  /* border: 1.5px solid rgb(230 202 133); */
  border: 1.5px solid rgb(125 126 123);
  /* background: radial-gradient(circle, rgba(25, 18, 12, 0.95) 0%, rgba(10, 8, 6, 0.98) 100%); */
  background: radial-gradient(circle, rgba(25, 18, 12, 0.95) 0%, rgba(10, 8, 6, 0.98) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85), 0 0 10px rgba(229, 182, 107, 0.35), inset 0 0 6px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  z-index: 3;
}

.rohan-discord-widget-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 0 4px rgba(229, 182, 107, 0.3));
}

.rohan-discord-widget-card:hover .rohan-discord-widget-logo-wrap {
  transform: scale(1.06);
  border-color: #ffd88a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.95), 0 0 16px rgba(229, 182, 107, 0.65);
}


.rohan-discord-widget-embed {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bütünden Aza Doğru Kayan Lazer Zaman Çubuğu */
.rohan-discord-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.rohan-discord-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #e5b66b, #ffe5a3, #d9d0b1);
  box-shadow: 0 0 8px rgba(229, 182, 107, 0.85);
  transform-origin: left center;
}

/* Small close button at top-right */
.rohan-discord-widget-close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a221b 0%, #12100e 100%);
  border: 1px solid #e5b66b;
  color: #ffd075;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 6px rgba(229, 182, 107, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  outline: none;
}

.rohan-discord-widget-close:hover {
  transform: scale(1.15) rotate(90deg);
  background: radial-gradient(circle at 35% 35%, #8b1e1e 0%, #3a0a0a 100%);
  border-color: #ff6b6b;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 107, 107, 0.5);
}

/* Backward compatibility class */
.rohan-discord-floating {
  position: fixed;
  left: 25px;
  bottom: 25px;
  z-index: 9999;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.rohan-discord-floating:hover {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 8px 22px rgba(88, 101, 242, 0.45));
}

@media (max-width: 640px) {

  .rohan-discord-widget,
  .rohan-discord-floating {
    display: none !important;
  }
}

/* ==========================================================================
   ROHAN2 CONTROL PANEL (HESAP YÖNETİM MERKEZİ) MMORPG THEME
   Ranking Sidebar Accordion Architecture & Authentic Metin2 Fantasy Styling
   ========================================================================== */

/* Control Panel Grid (uses .rohan-ranking-grid layout: 210px 1fr) */
.rohan-cp-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
  width: 100%;
}

/* Control Panel Sidebar Special Logout Section */
.rohan-rank-menu-section.is-logout-section .rohan-rank-menu-header {
  background: linear-gradient(180deg, rgba(80, 25, 25, 0.92), rgba(45, 15, 15, 0.98));
  color: #fca5a5;
  border-top: 1px solid rgba(239, 68, 68, 0.3);
}

.rohan-rank-menu-section.is-logout-section .rohan-rank-menu-header:hover {
  background: linear-gradient(180deg, rgba(110, 30, 30, 0.95), rgba(65, 18, 18, 0.98));
  color: #fee2e2;
}

.rohan-rank-menu-section.is-logout-section .rohan-rank-menu-icon {
  color: #ef4444;
}

/* Right Content Area */
.rohan-cp-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Account Banner (MMORPG Crest Card with demonstration_01.jpg & Form Frame) */
.rohan-cp-crest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: radial-gradient(circle at 10% 50%, rgba(82, 56, 38, 0.45) 0%, rgba(24, 16, 11, 0.96) 70%), rgba(18, 12, 8, 0.98);
  border: 1px solid rgba(138, 97, 60, 0.55);
  border-radius: 4px;
  padding: 18px 22px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(230, 192, 145, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.rohan-cp-crest-card:hover {
  border-color: rgba(229, 182, 107, 0.75);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 20px rgba(229, 182, 107, 0.2);
}

.rohan-cp-crest-card:hover .rohan-frame-edge,
.rohan-cp-crest-card:hover .rohan-frame-corner {
  filter: brightness(1.22) drop-shadow(0 0 4px rgba(229, 182, 107, 0.45));
}

/* Atmospheric Background Art from Hwang.png */
.rohan-cp-crest-bg-art {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      rgba(16, 11, 7, 0.98) 0%,
      rgba(16, 11, 7, 0.92) 40%,
      rgba(16, 11, 7, 0.4) 75%,
      rgba(16, 11, 7, 0.1) 100%),
    linear-gradient(180deg,
      rgba(16, 11, 7, 0.2) 0%,
      transparent 35%,
      rgba(10, 7, 4, 0.75) 100%),
    url('../images/banner/Hwang.png');
  background-position: 70% bottom;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.rohan-cp-crest-card:hover .rohan-cp-crest-bg-art {
  opacity: 1;
  filter: brightness(1.08) contrast(1.05);
}

.rohan-cp-crest-left,
.rohan-cp-ep-box {
  position: relative;
  z-index: 2;
}

.rohan-cp-crest-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rohan-cp-crest-emblem {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: radial-gradient(circle at center, #24180f 0%, #120c08 80%, #0a0604 100%);
  border: 1px solid rgba(179, 148, 109, 0.45);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85), 0 4px 14px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: all 0.25s ease;
}

.rohan-cp-crest-emblem:hover {
  border-color: rgba(229, 182, 107, 0.7);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(229, 182, 107, 0.3), 0 4px 14px rgba(0, 0, 0, 0.95);
}

.rohan-emblem-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  background: url('../images/corner.svg') no-repeat 0 0 / contain;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 2px rgba(229, 182, 107, 0.4));
  transition: filter 0.25s ease;
}

.rohan-cp-crest-emblem:hover .rohan-emblem-corner {
  filter: brightness(1.25) drop-shadow(0 0 4px rgba(229, 182, 107, 0.7));
}

.rohan-emblem-tl {
  top: -1px;
  left: -1px;
}

.rohan-emblem-tr {
  top: -1px;
  right: -1px;
  transform: scaleX(-1);
}

.rohan-emblem-bl {
  bottom: -1px;
  left: -1px;
  transform: scaleY(-1);
}

.rohan-emblem-br {
  bottom: -1px;
  right: -1px;
  transform: scale(-1);
}

.rohan-cp-crest-emblem::before {
  display: none;
}

.rohan-cp-crest-emblem img {
  width: 55px;
  height: 55px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

.rohan-cp-crest-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rohan-cp-crest-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rohan-cp-crest-username {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #ffe8b3;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(229, 182, 107, 0.35);
  line-height: 1.2;
}

.rohan-cp-crest-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rohan-cp-crest-status.is-ok {
  background: rgba(30, 20, 12, 0.88);
  border: 1px solid rgba(229, 182, 107, 0.45);
  color: #ffe5a3;
  box-shadow: 0 0 10px rgba(229, 182, 107, 0.2);
}

.rohan-cp-crest-status.is-banned {
  background: rgba(45, 15, 15, 0.88);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.rohan-cp-crest-meta {
  font-size: 12px;
  color: #c7a783;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rohan-cp-crest-meta i {
  color: #d6af7a;
}

/* Dragon Coins (EP) Showcase Box */
.rohan-cp-ep-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(14, 9, 6, 0.88);
  border: 1px solid rgba(229, 182, 107, 0.38);
  border-radius: 4px;
  padding: 9px 16px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.85), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.rohan-cp-ep-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
}

.rohan-cp-ep-label {
  font-size: 11px;
  color: #bfa98e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.rohan-cp-ep-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 800;
  /* color: #fbbf24; */
  color: #ffe8b3;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
  line-height: 1.2;
}

.rohan-cp-ep-coin {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
  transition: transform 0.25s ease, filter 0.25s ease;
  flex-shrink: 0;
  display: inline-block;
}

.rohan-cp-ep-box:hover .rohan-cp-ep-coin {
  transform: scale(1.15);
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.85));
}

.rohan-cp-ep-value small {
  font-size: 12px;
  color: #fde68a;
}

.rohan-cp-ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 124px;
  height: 36px;
  padding: 0 14px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  text-decoration: none !important;
  background-image: url('../images/save_button.png');
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0% 0%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 10px rgba(34, 197, 94, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: background-position 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.rohan-cp-ep-btn:hover {
  background-position: 50% 0%;
  filter: brightness(1.1);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.6), 0 2px 8px rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
  color: #ffffff !important;
}

.rohan-cp-ep-btn:active {
  background-position: 100% 0%;
  transform: translateY(1px);
}

.rohan-cp-ep-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -110px;
  width: 50px;
  height: 200%;
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.2) 80%,
      rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.7);
  animation: rohanButtonShimmer 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.rohan-cp-ep-btn i {
  font-size: 12.5px;
  color: #ffffff;
  /* text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); */
  position: relative;
  z-index: 2;
}

/* Authentic MMORPG Account Table */
.rohan-cp-table-wrap {
  background: rgba(24, 16, 11, 0.94);
  border: 1px solid rgba(138, 97, 60, 0.42);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.rohan-cp-table-header {
  background: linear-gradient(180deg, rgba(82, 56, 38, 0.94), rgba(48, 32, 22, 0.98));
  border-bottom: 1px solid rgba(138, 97, 60, 0.5);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rohan-cp-table-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #f7deb8;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px #0a0604;
}

.rohan-cp-table-title i {
  color: #d6af7a;
}

.rohan-cp-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.rohan-cp-table th,
.rohan-cp-table td {
  padding: 11px 16px;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(64, 43, 29, 0.45);
}

.rohan-cp-table tr:last-child th,
.rohan-cp-table tr:last-child td {
  border-bottom: 0;
}

.rohan-cp-table th {
  width: 220px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #c7a783;
  background: rgba(32, 21, 14, 0.7);
  letter-spacing: 0.4px;
  text-align: left;
  vertical-align: middle;
}

.rohan-cp-table th i {
  color: #927351;
  width: 18px;
  text-align: center;
  margin-right: 6px;
}

.rohan-cp-table td {
  color: #ffe5a3;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  background: rgba(18, 12, 8, 0.85);
  vertical-align: middle;
}

.rohan-cp-table tr:nth-child(even) td {
  background: rgba(22, 14, 10, 0.9);
}

.rohan-cp-table tr:hover td {
  background: rgba(48, 32, 22, 0.45);
}

.rohan-cp-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #cca67c;
  background: rgba(48, 32, 22, 0.8);
  border: 1px solid rgba(138, 97, 60, 0.45);
  padding: 3px 8px;
  border-radius: 3px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.rohan-cp-inline-btn:hover {
  background: rgba(82, 56, 38, 0.9);
  color: #fff2db;
  border-color: #d6af7a;
}

/* Quick Action Tiles Section */
.rohan-cp-actions-wrap {
  background: rgba(24, 16, 11, 0.94);
  border: 1px solid rgba(138, 97, 60, 0.42);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.rohan-cp-actions-header {
  background: linear-gradient(180deg, rgba(82, 56, 38, 0.94), rgba(48, 32, 22, 0.98));
  border-bottom: 1px solid rgba(138, 97, 60, 0.5);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rohan-cp-actions-body {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  background: rgba(18, 12, 8, 0.9);
}

.rohan-cp-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(48, 32, 22, 0.85) 0%, rgba(28, 18, 12, 0.95) 100%);
  border: 1px solid rgba(138, 97, 60, 0.38);
  border-radius: 4px;
  color: #cca67c;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(230, 192, 145, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rohan-cp-action-btn i {
  font-size: 14px;
  color: #d6af7a;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.rohan-cp-action-btn:hover {
  background: linear-gradient(180deg, rgba(72, 48, 32, 0.95) 0%, rgba(42, 28, 18, 0.98) 100%);
  border-color: rgba(229, 182, 107, 0.65);
  color: #fff2db;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(229, 182, 107, 0.2);
}

.rohan-cp-action-btn:hover i {
  color: #ffe5a3;
  transform: scale(1.15);
}

/* Primary Action Highlight (Shop, Buy EP) */
.rohan-cp-action-btn.is-gold {
  background: linear-gradient(180deg, rgba(75, 52, 25, 0.9) 0%, rgba(45, 30, 15, 0.95) 100%);
  border-color: rgba(229, 182, 107, 0.55);
  color: #ffe5a3;
}

.rohan-cp-action-btn.is-gold i {
  color: #fbbf24;
}

/* Logout Special Button */
.rohan-cp-action-btn.is-logout {
  background: linear-gradient(180deg, rgba(60, 20, 20, 0.85) 0%, rgba(35, 12, 12, 0.95) 100%);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.rohan-cp-action-btn.is-logout i {
  color: #ef4444;
}

.rohan-cp-action-btn.is-logout:hover {
  background: linear-gradient(180deg, rgba(90, 25, 25, 0.95) 0%, rgba(50, 15, 15, 0.98) 100%);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fee2e2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .rohan-cp-grid {
    grid-template-columns: 1fr;
  }

  .rohan-cp-crest-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .rohan-cp-ep-box {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .rohan-cp-table th {
    width: 130px;
    font-size: 11.5px;
    padding: 8px 10px;
  }

  .rohan-cp-table td {
    font-size: 12px;
    padding: 8px 10px;
  }

  .rohan-cp-actions-body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ROHAN2 PRESENTATION DESIGN SYSTEM & TYPOGRAPHY
   Fonts: Domine (400, 700), Song Myung (Korean Calligraphy)
   Components: Rotated Diamond Badges, Terracotta Pill Bars, Hollow Diamond Bullets (◇)
   ========================================================================== */

@font-face {
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/domine.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/domine-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Header Typography (Side-by-side Korean + Title + Paragraph) */
.rohan-art-header {
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rohan-art-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rohan-art-korean {
  font-family: 'Song Myung', serif;
  font-size: 38px;
  line-height: 1;
  color: #a49b85;
  text-shadow: 0 0 8px rgba(137, 132, 109, 0.45);
  flex-shrink: 0;
}

.rohan-art-title {
  font-family: 'Domine', serif;
  font-size: 26px;
  font-weight: 700;
  /* color: #e2dacd; */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

/* Decorative Oriental Divider (line.png) */
.rohan-art-divider-line {
  display: flex;
  align-items: center;
  margin: -2px 0 4px 0;
}

.rohan-art-divider-img {
  height: 64px;
  width: auto;
  /* max-width: 195px; */
  max-width: 255px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  opacity: 0.92;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.rohan-art-divider-img:hover {
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(229, 182, 107, 0.5));
}

.rohan-art-desc {
  font-family: 'Domine', serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: #9c9380;
  max-width: 780px;
  margin: 0;
}

/* 2. Hero Banner with Sliced Ornate Frame & Presentation Content */
.rohan-npc-banner-card {
  position: relative;
  min-height: 330px;
  background: #140d08;
  padding: 28px 32px;
  margin-top: 15px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
  overflow: visible;
  /* 3D NPC Pop-out */
}

.rohan-npc-banner-card:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.95), 0 0 24px rgba(229, 182, 107, 0.25);
}

.rohan-npc-banner-card:hover .rohan-frame-edge,
.rohan-npc-banner-card:hover .rohan-frame-corner {
  filter: brightness(1.25) drop-shadow(0 0 5px rgba(229, 182, 107, 0.5));
}

.rohan-npc-banner-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      rgba(16, 11, 7, 0.98) 0%,
      rgba(16, 11, 7, 0.92) 42%,
      rgba(16, 11, 7, 0.38) 72%,
      rgba(16, 11, 7, 0.08) 100%),
    linear-gradient(180deg,
      rgba(16, 11, 7, 0.15) 0%,
      transparent 35%,
      rgba(10, 7, 4, 0.7) 100%),
    var(--npc-banner-bg, url('../images/banner/Hwang.png'));
  background-size: cover;
  background-position: 65% bottom;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transition: filter 0.3s ease;
}

.rohan-npc-banner-card:hover .rohan-npc-banner-bg {
  filter: brightness(1.15) contrast(1.06);
}

.rohan-npc-banner-content {
  position: relative;
  z-index: 4;
  max-width: 590px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 3. Rotated Diamond Badges & Terracotta Horizontal Pill Bars */
.rohan-art-bar-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rohan-art-pill-bar {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  cursor: pointer;
  user-select: none;
  max-width: fit-content;
}

.rohan-art-diamond-wrap {
  position: relative;
  width: 32px;
  flex-shrink: 0;
  z-index: 2;
}

.rohan-art-diamond-shape {
  position: absolute;
  left: 0;
  top: 6px;
  width: 32px;
  height: 32px;
  background: rgb(51, 46, 40);
  border: 1px solid rgb(107, 102, 98);
  border-radius: 2px;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.rohan-art-diamond-icon {
  position: absolute;
  left: 0;
  top: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.rohan-art-diamond-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.rohan-art-bar-body {
  position: relative;
  flex: 0 1 auto;
  margin-left: -16px;
  background: linear-gradient(90deg, rgb(26, 23, 22) 0%, rgb(45, 41, 38) 100%);
  display: inline-flex;
  align-items: center;
  padding-left: 36px;
  padding-right: 24px;
  overflow: hidden;
  border: 1px solid rgba(107, 102, 98, 0.45);
  border-left: none;
  border-radius: 0 3px 3px 0;
  max-width: fit-content;
}

.rohan-art-bar-body::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: linear-gradient(90deg, rgb(89, 55, 43) 0%, rgb(45, 41, 38) 100%); */
  background: linear-gradient(90deg, rgb(70 47 32) 0%, rgb(45, 41, 38) 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease, opacity 250ms ease;
}

.rohan-art-pill-bar.is-active .rohan-art-bar-body::before,
.rohan-art-pill-bar:hover .rohan-art-bar-body::before {
  opacity: 1;
  transform: scaleX(1);
}

.rohan-art-pill-bar.is-active .rohan-art-diamond-shape,
.rohan-art-pill-bar:hover .rohan-art-diamond-shape {
  border-color: #d89e5a;
  background: rgb(65, 52, 42);
}

.rohan-art-bar-label {
  position: relative;
  z-index: 1;
  font-family: 'Domine', serif;
  font-size: 13px;
  line-height: 14px;
  color: rgb(220, 206, 187);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

a.rohan-art-pill-bar {
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.22s ease, filter 0.22s ease;
}

a.rohan-art-pill-bar:hover {
  text-decoration: none !important;
  transform: translateY(-1px);
  filter: brightness(1.1);
}

a.rohan-art-pill-bar:hover .rohan-art-bar-label {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 216, 138, 0.45);
}

a.rohan-art-pill-bar:hover .rohan-art-diamond-shape {
  border-color: #ffd88a;
  box-shadow: 0 0 12px rgba(229, 182, 107, 0.55);
}

a.rohan-art-pill-bar:active {
  transform: translateY(0);
}

/* 4. Sub-list with Hollow Diamond Bullets (◇) */
.rohan-art-bullet-list {
  padding: 10px 0 6px 36px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  margin: 0;
}

.rohan-art-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.rohan-art-hollow-diamond {
  flex-shrink: 0;
  margin-top: 5px;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1.5px solid rgb(170, 152, 134);
  border-radius: 1px;
  transform: rotate(-45deg);
}

.rohan-art-bullet-text {
  font-family: 'Domine', serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgb(203, 188, 167);
}

.rohan-art-bullet-text strong {
  /* color: #ffe5a3; */
  color: oklch(0.9415 0.0489 76.13);
  font-weight: 700;
}

/* 5. Authentic MMORPG CTA Button with button-gold.png */
.rohan-art-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 32px;
  margin-left: 36px;
  margin-top: 4px;
  background: url('../images/button-gold.png') no-repeat center center / 100% 100%;
  color: #fff2db !important;
  font-family: 'Domine', serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  align-self: flex-start;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.rohan-art-vote-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.rohan-art-vote-btn:hover {
  filter: brightness(1.22) contrast(1.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 20px rgba(229, 182, 107, 0.4);
  color: #ffffff !important;
}

.rohan-art-vote-btn:hover::after {
  left: 140%;
}

.rohan-art-vote-btn i {
  font-size: 13px;
  color: #ffd88a;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.rohan-art-vote-btn.is-sm {
  margin: 0;
  padding: 6px 14px;
  font-size: 11px;
  gap: 6px;
  border-radius: 4px;
}

.rohan-art-vote-btn.is-md {
  margin: 0;
  padding: 10px 22px;
  font-size: 12px;
  gap: 8px;
}

/* 6. 3D Animated NPC Character Wrap */
.rohan-npc-character-wrap {
  position: absolute;
  right: 18px;
  bottom: -34px;
  z-index: 8;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}

.rohan-npc-img {
  width: auto;
  height: 385px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 18px rgba(229, 182, 107, 0.25));
  opacity: 0;
  transform: translateX(50px) scale(0.95);
  animation: rohanNpcSlideEntrance 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards,
    rohanNpcIdleFloat 4s ease-in-out 1s infinite alternate;
  will-change: transform, opacity;
}

@keyframes rohanNpcSlideEntrance {
  0% {
    opacity: 0;
    transform: translateX(60px) scale(0.92);
    filter: drop-shadow(0 0 35px rgba(229, 182, 107, 0.9)) brightness(1.5);
  }

  60% {
    opacity: 1;
    transform: translateX(-4px) scale(1.02);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 25px rgba(229, 182, 107, 0.45)) brightness(1.1);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(229, 182, 107, 0.25)) brightness(1);
  }
}

@keyframes rohanNpcIdleFloat {
  0% {
    transform: translateY(0);
  }

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

/* 7. Buff Selection Section (Rohan2 Presentation Style) */
.rohan-buff-section {
  background: rgba(14, 9, 6, 0.75);
  border: 1px solid rgba(107, 102, 98, 0.35);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.rohan-buff-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rohan-buff-card {
  position: relative;
  cursor: pointer;
  display: block;
  margin: 0;
}

.rohan-buff-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rohan-buff-card-inner {
  background: linear-gradient(180deg, rgba(28, 20, 14, 0.95), rgba(18, 12, 8, 0.98));
  border: 1px solid rgba(107, 102, 98, 0.4);
  border-radius: 4px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: all 0.25s ease;
  position: relative;
}

.rohan-buff-card:hover .rohan-buff-card-inner {
  border-color: #d89e5a;
  background: linear-gradient(180deg, rgba(45, 30, 20, 0.95), rgba(28, 18, 12, 0.98));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.rohan-buff-card input[type="radio"]:checked+.rohan-buff-card-inner {
  border-color: #ffd88a;
  background: linear-gradient(180deg, rgba(89, 55, 43, 0.45) 0%, rgba(28, 18, 12, 0.98) 100%);
  box-shadow: 0 0 20px rgba(216, 158, 90, 0.35), inset 0 0 12px rgba(216, 158, 90, 0.15);
}

.rohan-buff-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.25s ease;
}

.rohan-buff-card.is-str .rohan-buff-icon-wrap {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
}

.rohan-buff-card.is-hp .rohan-buff-icon-wrap {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.rohan-buff-card.is-exp .rohan-buff-icon-wrap {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.45);
  color: #60a5fa;
}

.rohan-buff-name {
  font-family: 'Domine', serif;
  font-size: 14px;
  font-weight: 700;
  color: #e2dacd;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rohan-buff-desc {
  font-family: 'Domine', serif;
  font-size: 12px;
  color: #9c9380;
}

.rohan-buff-duration {
  font-family: 'Domine', serif;
  font-size: 11.5px;
  color: #ffd88a;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rohan-buff-check-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.25s ease;
}

.rohan-buff-card input[type="radio"]:checked+.rohan-buff-card-inner .rohan-buff-check-icon {
  opacity: 1;
  transform: scale(1);
}

.rohan-buff-submit-btn {
  align-self: flex-end;
  padding: 10px 26px;
  background: linear-gradient(90deg, rgb(110, 68, 48) 0%, rgb(68, 48, 36) 100%);
  color: #fff0d4 !important;
  font-family: 'Domine', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgb(157, 122, 98);
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.rohan-buff-submit-btn:hover {
  background: linear-gradient(90deg, rgb(135, 84, 58) 0%, rgb(88, 60, 44) 100%);
  border-color: #ffd88a;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 16px rgba(216, 158, 90, 0.5);
  color: #ffffff !important;
}

/* 8. Clean Presentation History Section & Table */
.rohan-vote-history-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.rohan-art-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(107, 102, 98, 0.35);
}

.rohan-art-subtitle-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rohan-art-korean-sm {
  font-family: 'Song Myung', serif;
  font-size: 20px;
  color: #a49b85;
  line-height: 1;
}

.rohan-art-subtitle {
  font-family: 'Domine', serif;
  font-size: 16px;
  font-weight: 700;
  color: #e2dacd;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.rohan-history-count-pill {
  font-family: 'Domine', serif;
  font-size: 12px;
  color: #9c8e79;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rohan-vote-history-card {
  position: relative;
  background-color: #120c08;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.10) 0%, transparent 60%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.82) 20%, rgba(14, 9, 6, 0.82) 80%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.75) 100%),
    url('../images/backgrounds/bg_product.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(185, 142, 82, 0.35);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(229, 182, 107, 0.15);
}

.rohan-history-table {
  width: 100%;
  border-collapse: collapse;
}

.rohan-history-table th {
  /* background: linear-gradient(90deg, rgb(26, 23, 22) 0%, rgb(45, 41, 38) 100%); */
  /* background: linear-gradient(90deg, rgb(35 14 7) 0%, rgb(67 61 57) 100%); */
  background: linear-gradient(90deg, rgb(30 19 15) 0%, rgb(45, 41, 38) 100%);
  color: #e2dacd;
  font-family: 'Domine', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(107, 102, 98, 0.35);
  text-align: left;
}

.rohan-history-table td {
  padding: 14px 20px;
  font-family: 'Domine', serif;
  font-size: 13px;
  border-bottom: 1px solid rgba(107, 102, 98, 0.15);
  color: rgb(203, 188, 167);
}

.rohan-history-table tr:last-child td {
  border-bottom: none;
}

.rohan-history-table tr:hover td {
  background: rgba(229, 182, 107, 0.04);
}

.rohan-buff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  font-family: 'Domine', serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.rohan-buff-pill.is-str {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.rohan-buff-pill.is-hp {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.rohan-buff-pill.is-exp {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

.rohan-vote-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9c8e79;
  font-size: 13.5px;
  font-family: 'Domine', serif;
}

.rohan-art-hollow-diamond-sm {
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 1px solid #ffd88a;
  transform: rotate(-45deg);
  margin-right: 8px;
  vertical-align: middle;
}

@media (max-width: 900px) {
  .rohan-npc-character-wrap {
    display: none;
  }

  .rohan-npc-banner-content {
    max-width: 100%;
  }

  .rohan-buff-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* 9. Rohan2 Advisory Banner & Form Component Suite */
.rohan-art-advisory-card {
  position: relative;
  background: rgba(14, 9, 6, 0.92);
  border: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
  padding: 22px 26px;
  overflow: hidden;
  border-radius: 4px;
}

.rohan-art-advisory-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      rgba(16, 11, 7, 0.98) 0%,
      rgba(16, 11, 7, 0.90) 50%,
      rgba(16, 11, 7, 0.45) 85%,
      rgba(16, 11, 7, 0.20) 100%),
    linear-gradient(180deg,
      rgba(16, 11, 7, 0.3) 0%,
      transparent 40%,
      rgba(10, 7, 4, 0.8) 100%),
    url('../images/banner/Hwang.png');
  background-position: 70% bottom;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.rohan-art-advisory-card:hover .rohan-art-advisory-bg {
  opacity: 1;
  filter: brightness(1.08) contrast(1.05);
}

.rohan-art-advisory-content {
  position: relative;
  z-index: 2;
}

.rohan-art-advisory-card.has-emblem .rohan-art-advisory-content {
  padding-right: 215px;
}

.rohan-art-advisory-emblem-wrap {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 185px;
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.rohan-art-advisory-emblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(229, 182, 107, 0.22));
  animation: rohanEmpireFloat 4.5s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.rohan-art-advisory-card:hover .rohan-art-advisory-emblem {
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(229, 182, 107, 0.45));
}

@keyframes rohanEmpireFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

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

@media screen and (max-width: 900px) {
  .rohan-art-advisory-card.has-emblem .rohan-art-advisory-content {
    padding-right: 0;
  }

  .rohan-art-advisory-emblem-wrap {
    position: absolute;
    right: 14px;
    bottom: 12px;
    top: auto;
    transform: none;
    width: 110px;
    height: 110px;
    opacity: 0.3;
    z-index: 1;
  }
}

.rohan-art-advisory-card .rohan-art-pill-bar {
  margin-bottom: 12px;
}

.rohan-art-advisory-card .rohan-art-bullet-list {
  padding-left: 10px;
  margin-top: 10px;
  gap: 10px;
}

.rohan-art-advisory-card .rohan-art-bullet-text {
  font-size: 13px;
  line-height: 1.5;
}

/* Control Panel Overview Row inside Advisory Card */
.rohan-cp-overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0 16px 0;
  margin-top: 6px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.18);
}

.rohan-art-hollow-diamond-separator {
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(229, 182, 107, 0.55);
  transform: rotate(45deg);
  margin: 0 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

.rohan-cp-overview-bullets {
  margin-top: 14px !important;
  padding-left: 6px !important;
}

@media screen and (max-width: 900px) {
  .rohan-cp-overview-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}


/* Advisory Important Note (Clean text matching normal bullet text) */
.rohan-art-advisory-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(229, 182, 107, 0.05);
  border-left: 3px solid rgba(229, 182, 107, 0.6);
  border-radius: 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}

.rohan-art-advisory-note i {
  color: #ffd88a;
  font-size: 13.5px;
  margin-top: 2px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(229, 182, 107, 0.5));
}

.rohan-art-advisory-note .rohan-art-note-body {
  font-family: 'Domine', serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(203, 188, 167);
}

.rohan-art-advisory-note .rohan-art-note-title {
  color: #ffe5a3;
  font-weight: 700;
  margin-right: 6px;
  letter-spacing: 0.02em;
}

.rohan-art-advisory-note .rohan-art-note-text {
  color: rgb(203, 188, 167);
}

.rohan-art-form-card {
  position: relative;
  background-color: #120c08;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.10) 0%, transparent 60%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.82) 20%, rgba(14, 9, 6, 0.82) 80%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.75) 100%),
    url('../images/backgrounds/bg_product.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(185, 142, 82, 0.35);
  border-radius: 6px;
  padding: 28px 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(229, 182, 107, 0.15);
}

.rohan-art-field-group {
  margin-bottom: 20px;
}

.rohan-art-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Domine', serif;
  font-size: 12px;
  font-weight: 700;
  color: #e2dacd;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.rohan-art-field-label i {
  color: #d6af7a;
  font-size: 13px;
}

.rohan-art-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rohan-art-input-icon {
  position: absolute;
  left: 14px;
  color: #8a7e6b;
  font-size: 14px;
  pointer-events: none;
  transition: color 0.25s ease;
}

.rohan-art-input {
  width: 100%;
  height: 44px;
  background: rgba(8, 5, 3, 0.75);
  border: 1px solid rgba(107, 102, 98, 0.45);
  border-radius: 4px;
  padding: 0 16px 0 42px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  color: #ffe5a3;
  outline: none;
  transition: all 0.25s ease;
}

.rohan-art-input:focus {
  border-color: #e5b66b;
  background: rgba(16, 11, 7, 0.9);
  box-shadow: 0 0 12px rgba(229, 182, 107, 0.25);
}

.rohan-art-input-wrap:focus-within .rohan-art-input-icon {
  color: #ffd88a;
}

.rohan-art-input::placeholder {
  color: #635b4f;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
}

.rohan-art-recaptcha-wrap {
  display: flex;
  justify-content: center;
  margin: 22px 0 26px;
}

.rohan-art-submit-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.rohan-art-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: rgba(40, 30, 20, 0.85);
  border: 1px solid rgba(107, 102, 98, 0.45);
  border-radius: 4px;
  color: #c4b5a0 !important;
  font-family: 'Domine', serif;
  font-size: 12px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.rohan-art-back-btn:hover {
  background: rgba(60, 45, 30, 0.95);
  border-color: #d6af7a;
  color: #fff0d4 !important;
}

/* ==========================================================================
   ROHAN2 AUTH ADVISORY CARD (Register & Auth Pages State Notices)
   ========================================================================== */
.rohan-auth-notice-card {
  position: relative;
  background: radial-gradient(circle at 50% 25%, #24180f 0%, #130d08 65%, #0a0604 100%);
  border: 1px solid rgba(179, 148, 109, 0.45);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.95), inset 0 0 24px rgba(0, 0, 0, 0.9);
  padding: 46px 36px 38px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 30px;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.rohan-auth-notice-card:hover {
  border-color: rgba(229, 182, 107, 0.75);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 24px rgba(229, 182, 107, 0.2), inset 0 0 28px rgba(0, 0, 0, 0.95);
}

.rohan-auth-notice-card:hover .rohan-frame-edge,
.rohan-auth-notice-card:hover .rohan-frame-corner {
  filter: brightness(1.25) drop-shadow(0 0 5px rgba(229, 182, 107, 0.6));
}

.rohan-auth-notice-bg-art {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 30%, rgba(229, 182, 107, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16, 11, 7, 0.6) 0%, rgba(10, 7, 4, 0.95) 100%),
    url('../images/banner/Hwang.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.rohan-auth-notice-card:hover .rohan-auth-notice-bg-art {
  opacity: 0.35;
  filter: brightness(1.1);
}

.rohan-auth-notice-inner {
  position: relative;
  z-index: 4;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rohan-auth-notice-inner .rohan-art-pill-bar {
  margin-bottom: 26px;
  cursor: default;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
}

.rohan-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  border-radius: 20px;
  background: rgba(229, 182, 107, 0.1);
  border: 1px solid rgba(229, 182, 107, 0.35);
  color: #ffd88a;
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.rohan-auth-badge.is-locked {
  background: rgba(220, 70, 70, 0.12);
  border-color: rgba(220, 70, 70, 0.4);
  color: #ff9999;
}

.rohan-auth-medallion-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.rohan-auth-medallion-glow {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 182, 107, 0.35) 0%, rgba(229, 182, 107, 0) 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  animation: rohanMedallionPulse 3s ease-in-out infinite;
}

.rohan-auth-medallion-glow.is-locked {
  background: radial-gradient(circle, rgba(220, 70, 70, 0.4) 0%, rgba(220, 70, 70, 0) 70%);
}

@keyframes rohanMedallionPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.65;
  }

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

.rohan-mirror-check.is-hero-size {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-width: 2px;
  border-color: #e5b66b;
  box-shadow:
    0 0 20px rgba(229, 182, 107, 0.55),
    0 0 8px rgba(255, 230, 168, 0.45),
    inset 0 0 12px rgba(229, 182, 107, 0.45);
}

.rohan-mirror-check.is-hero-size i {
  font-size: 26px;
  text-shadow: 0 0 8px rgba(229, 182, 107, 0.95);
}

.rohan-auth-lock-circle {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(160, 30, 30, 0.35) 0%, rgba(26, 17, 10, 0.95) 75%, rgba(14, 9, 5, 0.98) 100%);
  border: 2px solid rgba(220, 70, 70, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(220, 70, 70, 0.5), inset 0 0 12px rgba(220, 70, 70, 0.35);
}

.rohan-auth-lock-circle i {
  font-size: 26px;
  color: #ff9999;
  text-shadow: 0 0 8px rgba(220, 70, 70, 0.85);
}

.rohan-auth-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(18, 12, 8, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.4);
  border-radius: 24px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.6);
}

.rohan-auth-account-pill i {
  color: #ffd88a;
  font-size: 15px;
}

.rohan-auth-pill-label {
  color: #a49a88;
  font-size: 12.5px;
}

.rohan-auth-pill-username {
  font-family: 'Cinzel', serif;
  color: #ffe8b3;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.5px;
}

.rohan-auth-notice-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffe8b3;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px #000, 0 0 16px rgba(229, 182, 107, 0.4);
  margin: 0 0 12px;
  line-height: 1.25;
}

.rohan-auth-notice-desc {
  color: #ffe8b3;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.rohan-auth-notice-sub {
  color: #b5a995;
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 28px;
}

.rohan-auth-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 26px;
}

.rohan-auth-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 32px;
  min-height: 46px;
  background:
    linear-gradient(180deg, rgba(255, 235, 179, 0.35) 0%, rgba(229, 182, 107, 0.08) 50%, transparent 100%),
    linear-gradient(180deg, #3a2717 0%, #20140a 100%);
  border: 1px solid #e5b66b;
  border-radius: 4px;
  color: #ffe8b3 !important;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 195, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    0 4px 14px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(229, 182, 107, 0.25);
  transition: all 0.25s ease;
  cursor: pointer;
}

.rohan-auth-btn-primary:hover {
  color: #fff !important;
  border-color: #ffd88a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 18px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(229, 182, 107, 0.5);
  transform: translateY(-2px);
}

.rohan-auth-btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  min-height: 46px;
  background:
    linear-gradient(180deg, rgba(160, 30, 30, 0.25) 0%, rgba(20, 12, 12, 0.95) 100%);
  border: 1px solid rgba(220, 70, 70, 0.55);
  border-radius: 4px;
  color: #ffb3b3 !important;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  transition: all 0.25s ease;
  cursor: pointer;
}

.rohan-auth-btn-logout:hover {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(200, 40, 40, 0.4) 0%, rgba(35, 15, 15, 0.98) 100%);
  border-color: rgba(255, 100, 100, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 14px rgba(220, 50, 50, 0.4);
  transform: translateY(-2px);
}

.rohan-auth-btn-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  min-height: 46px;
  background: rgba(18, 12, 8, 0.85);
  border: 1px solid rgba(179, 148, 109, 0.35);
  border-radius: 4px;
  color: #c9bea9 !important;
  font-family: 'Cinzel', serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.rohan-auth-btn-home:hover {
  color: #ffe8b3 !important;
  border-color: rgba(229, 182, 107, 0.65);
  background: rgba(28, 18, 12, 0.95);
  transform: translateY(-2px);
}

.rohan-auth-notice-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(179, 148, 109, 0.2);
  color: #8c8270;
  font-size: 12.5px;
  line-height: 1.5;
  width: 100%;
  justify-content: center;
}

.rohan-auth-notice-footer i {
  color: #ffd88a;
  font-size: 14px;
}

/* ==========================================================================
   HOMEPAGE SHOWCASE CARDS (3 or 4 Columns) (Rohan2 Presentation + Control Panel Theme)
   ========================================================================== */
.rohan-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.rohan-showcase-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rohan-showcase-grid.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}

.rohan-showcase-grid.cols-4 .rohan-showcase-img-wrap {
  height: 165px;
}

.rohan-showcase-grid.cols-4 .rohan-showcase-body {
  padding: 16px 16px 14px;
  gap: 10px;
}

.rohan-showcase-grid.cols-4 .rohan-showcase-title {
  font-size: 14.5px;
  line-height: 1.35;
}

.rohan-showcase-grid.cols-4 .rohan-showcase-desc {
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}

.rohan-showcase-grid.cols-4 .rohan-showcase-footer {
  padding-top: 10px;
}

.rohan-showcase-grid.cols-4 .rohan-showcase-action {
  font-size: 11px;
}

.rohan-showcase-card {
  display: flex;
  flex-direction: column;
  background-color: #120c08;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.12) 0%, transparent 60%),
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.85) 18%, rgba(14, 9, 6, 0.85) 82%, rgba(14, 9, 6, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.17) 45%, rgba(10, 6, 4, 0.70) 100%),
    url('../images/backgrounds/bg_product.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(229, 182, 107, 0.28);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(247, 219, 169, 0.12);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.rohan-showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(229, 182, 107, 0.75);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.95), 0 0 24px rgba(229, 182, 107, 0.25);
}

.rohan-showcase-img-wrap {
  position: relative;
  width: 100%;
  height: 195px;
  overflow: hidden;
  background: #0d0a08;
}

.rohan-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.rohan-showcase-card:hover .rohan-showcase-img {
  transform: scale(1.08);
  filter: brightness(1.08) contrast(1.04);
}

.rohan-showcase-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 45%, rgba(18, 12, 8, 0.95) 100%);
  pointer-events: none;
}

.rohan-showcase-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  padding: 5px 14px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  background: linear-gradient(135deg, rgba(38, 26, 12, 0.94) 0%, rgba(20, 14, 6, 0.97) 100%) !important;
  border: 1px solid rgba(229, 182, 107, 0.75) !important;
  color: #ffd88a !important;
  text-shadow: 0 0 10px rgba(229, 182, 107, 0.65) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 229, 163, 0.45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  transition: all 0.25s ease;
}

.rohan-showcase-card:hover .rohan-showcase-tag {
  border-color: rgba(229, 182, 107, 1) !important;
  color: #fff0c7 !important;
  text-shadow: 0 0 14px rgba(229, 182, 107, 0.9) !important;
  box-shadow: 0 4px 18px rgba(229, 182, 107, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.rohan-showcase-date {
  position: absolute;
  bottom: 12px;
  right: 14px;
  background: rgba(14, 9, 6, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(229, 182, 107, 0.35);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  color: #eeddbb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.rohan-showcase-date i {
  color: #ffd88a;
  font-size: 11px;
}

.rohan-showcase-body {
  padding: 20px 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
}

.rohan-showcase-title {
  margin: 0;
  font-family: 'Domine', serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffd88a;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.rohan-showcase-card:hover .rohan-showcase-title {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(229, 182, 107, 0.6);
}

.rohan-showcase-desc {
  margin: 0;
  font-family: 'Domine', serif;
  font-size: 13px;
  line-height: 1.6;
  color: #a89c88;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.rohan-showcase-footer {
  border-top: 1px solid rgba(229, 182, 107, 0.16);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rohan-showcase-action {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: #e5b66b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
  transition: gap 0.25s ease, color 0.25s ease;
}

.rohan-showcase-card:hover .rohan-showcase-action {
  color: #ffd88a;
  gap: 10px;
}

@media (max-width: 1200px) {
  .rohan-showcase-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 992px) {

  .rohan-showcase-grid,
  .rohan-showcase-grid.cols-3,
  .rohan-showcase-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .rohan-showcase-grid,
  .rohan-showcase-grid.cols-3,
  .rohan-showcase-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   AUTHENTIC 3D METIN2 COMPANION PET SYSTEM
   ========================================================================== */
.rohan-companion-pet-stage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% - 10px);
  width: 350px;
  height: 350px;
  z-index: 100 !important;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
  will-change: left, bottom;
  transition: bottom 0.2s ease-out;
}

.rohan-companion-canvas-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  overflow: visible !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.9));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rohan-companion-canvas-wrap:hover {
  transform: scale(1.03);
}

.rohan-companion-speech {
  position: absolute;
  bottom: 330px;
  /* bottom: calc(100% + 8px); */
  left: 50%;
  transform: translateX(-50%);
  /* background-color: rgba(13, 9, 6, 0.96); */
  background-image:
    var(--rohan-cp-corner-tl),
    var(--rohan-cp-corner-tr),
    var(--rohan-cp-corner-bl),
    var(--rohan-cp-corner-br),
    linear-gradient(135deg, rgba(26, 18, 12, 0.88) 0%, rgba(13, 9, 6, 0.99) 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: -1px -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px), 0 0 !important;
  background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, 100% 100% !important;
  border: 1px solid #B3946D !important;
  border-radius: 0 !important;
  padding: 12px 18px 10px;
  min-width: 190px;
  max-width: 230px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.92), 0 0 16px rgba(179, 148, 109, 0.25);
  color: #fff2d1;
  font-family: 'Domine', serif;
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  pointer-events: auto;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
  animation: rohanPetSpeechFloat 3s ease-in-out infinite;
  z-index: 110 !important;
}

.rohan-companion-speech.rohan-speech-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(12px) scale(0.92) !important;
  animation: none !important;
}

.rohan-companion-speech::before,
.rohan-companion-speech.rohan-form-framed::before {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 7px 7px 0 7px !important;
  border-style: solid !important;
  border-color: #B3946D transparent transparent transparent !important;
  background: none !important;
  z-index: 9 !important;
  pointer-events: none !important;
}

.rohan-companion-speech::after,
.rohan-companion-speech.rohan-form-framed::after {
  content: '' !important;
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 6px 6px 0 6px !important;
  border-style: solid !important;
  border-color: rgba(13, 9, 6, 0.99) transparent transparent transparent !important;
  background: none !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.rohan-companion-speech.pulse {
  transform: translateX(-50%) scale(1.08);
}

.rohan-speech-header {
  display: none !important;
}

.rohan-pet-avatar-name {
  display: none !important;
}

.rohan-pet-switcher {
  display: none !important;
}

.rohan-pet-switch-btn {
  display: none !important;
}

.rohan-pet-dropdown {
  display: none !important;
}

.rohan-speech-text {
  margin: 0;
  color: #f7ede1;
  position: relative;
  z-index: 8;
}

.rohan-speech-action {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--rohan-gold);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: color 0.15s ease;
  position: relative;
  z-index: 8;
}

.rohan-speech-action:hover {
  color: #ffffff;
}

@keyframes rohanPetSpeechFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

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

/* Button pulse highlight when pet encourages player */
.rohan-btn-highlight {
  animation: rohanBtnGlow 1.5s ease-in-out infinite !important;
}

@keyframes rohanBtnGlow {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(229, 182, 107, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 35px rgba(255, 235, 140, 0.95);
    transform: scale(1.03);
  }
}

@media (max-width: 1100px) {
  .rohan-companion-pet-stage {
    right: 15px;
    width: 180px;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .rohan-companion-pet-stage {
    display: none !important;
  }
}

/* ==========================================================================
   2D NINETAL WEBP PET RUNNER (ALTERNATIVE ENGINE)
   ========================================================================== */
.ec-runner {
  position: absolute;
  left: 0;
  width: var(--ec-frame, 456px);
  height: var(--ec-frame, 456px);
  will-change: transform;
  pointer-events: none;
  z-index: 28;
}

.ec-runner-sprite {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
  transition: filter 0.2s ease;
}

.ec-runner-sprite:hover {
  filter: drop-shadow(0 10px 24px rgba(229, 182, 107, 0.45));
}

.ec-runner-bubble {
  position: absolute;
  bottom: calc(var(--ec-frame, 456px) * 0.72);
  transform: translate(-50%, 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 9px;
  min-width: 180px;
  max-width: 230px;
  background: linear-gradient(135deg, rgba(32, 22, 14, 0.96) 0%, rgba(16, 11, 7, 0.98) 100%);
  border: 1px solid var(--rohan-gold);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.92), 0 0 16px rgba(229, 182, 107, 0.35), inset 0 1px 0 rgba(255, 235, 140, 0.3);
  color: #fff2d1;
  font-family: 'Domine', serif;
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 260ms;
}

.ec-runner.is-talking .ec-runner-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

.ec-runner-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: rgba(21, 17, 13, 0.96);
  border-right: 1px solid var(--rohan-gold);
  border-bottom: 1px solid var(--rohan-gold);
  transform: rotate(45deg);
}

.ec-runner-greeting {
  display: block;
  color: inherit;
  font-weight: 500;
}

.ec-runner-cta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3cf8a 0%, #d49f50 100%);
  color: #1a1410;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: filter 160ms ease, transform 160ms ease;
}

.ec-runner-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: #000;
}

/* ==========================================================================
   FOX GUIDE (PAGE-WIDE CLIMBING COMPANION PET)
   ========================================================================== */
.fg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: var(--fg-frame, 456px);
  height: var(--fg-frame, 456px);
  pointer-events: none;
  will-change: transform;
  outline: none;
}

.fg-rot {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-sprite {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8));
  transition: filter 0.2s ease;
}

.fg.is-open .fg-sprite,
.fg:hover .fg-sprite {
  filter: drop-shadow(0 0 12px rgba(229, 182, 107, 0.85)) drop-shadow(0 0 24px rgba(255, 170, 60, 0.45));
}

.fg-hit {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 40%;
}

.fg-bubble {
  position: absolute;
  left: 50%;
  top: calc(var(--fg-frame, 456px) * 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 9px 13px 10px;
  min-width: 190px;
  max-width: 250px;
  transform: translate(-50%, 6px);
  background: linear-gradient(135deg, rgba(32, 22, 14, 0.98) 0%, rgba(16, 11, 7, 0.99) 100%);
  border: 1px solid var(--rohan-gold);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(229, 182, 107, 0.4), inset 0 1px 0 rgba(255, 235, 140, 0.3);
  color: #fff2d1;
  font-family: 'Domine', serif;
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 260ms;
}

.fg.is-talking .fg-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.fg-bubble.is-side {
  left: calc(var(--fg-frame, 456px) * 0.65);
  top: 50%;
  transform: translate(6px, -50%);
}

.fg.is-talking .fg-bubble.is-side {
  transform: translate(0, -50%);
}

.fg-bubble.is-side::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: rgba(21, 17, 13, 0.98);
  border-left: 1px solid var(--rohan-gold);
  border-bottom: 1px solid var(--rohan-gold);
  transform: rotate(45deg);
}

.fg-line {
  display: block;
  font-weight: 500;
}

.fg-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.fg-btn {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3cf8a 0%, #d49f50 100%);
  color: #1a1410;
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: filter 160ms ease, transform 160ms ease;
}

.fg-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.fg-btn-quiet {
  background: transparent;
  border-color: rgba(229, 182, 107, 0.45);
  color: #e5b66b;
}

.fg-btn-quiet:hover {
  background: rgba(229, 182, 107, 0.15);
  color: #fff;
}

.rohan-section-highlight {
  animation: rohanTargetSectionGlow 2.5s ease-in-out !important;
}

@keyframes rohanTargetSectionGlow {

  0%,
  100% {
    outline: 0px solid transparent;
  }

  50% {
    outline: 3px solid rgba(229, 182, 107, 0.85);
    box-shadow: 0 0 35px rgba(229, 182, 107, 0.5);
  }
}

@media (max-width: 768px) {

  .fg,
  .ec-runner {
    display: none !important;
  }
}

@font-face {
  font-family: 'PTSans2';
  src: url('../fonts/6e7c14a5ade44c8491abf5387a45e2.woff2') format('woff2'),
    url('../fonts/fc155f68b5aa097eb1fdecb3880545.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   EŞSİZ BAŞLANGIÇ NESNELERİ (STARTER ITEMS SHOWCASE)
   ========================================================================== */
.rohan-starter-section {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 35px auto 45px;
  z-index: 10;
}

.rohan-starter-panel {
  position: relative;
  /* background: radial-gradient(ellipse at 50% 30%, rgba(55, 14, 22, 0.88) 0%, rgba(30, 10, 15, 0.94) 60%, rgba(16, 8, 10, 0.98) 100%), */
  /* url('../images/backgrounds/bg_product.jpg') no-repeat center center; */
  /* background: radial-gradient(ellipse at 50% 30%, rgb(27 21 15) 0%, rgb(21 15 9) 60%, rgb(19 13 7) 100%), no-repeat center center; */
  /* background: radial-gradient(ellipse at 50% 30%, rgb(27 21 15 / 82%) 0%, rgb(21 15 9 / 38%) 60%, rgb(19 13 7 / 25%) 100%), url(../images/backgrounds/bg_product.jpg) no-repeat center center; */
  background: radial-gradient(ellipse at 50% 30%, rgb(27 21 15 / 82%) 0%, rgb(19 13 7 / 74%) 60%, rgb(19 13 7 / 25%) 100%), url(../images/backgrounds/bg_product.jpg) no-repeat center center;
  background-size: cover;
  border: 1px solid rgba(229, 182, 107, 0.28);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(247, 219, 169, 0.16), inset 0 0 50px rgba(0, 0, 0, 0.65);
  border-radius: 14px;
  padding: 26px 20px 24px;
  overflow: hidden;
}

.rohan-starter-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 182, 107, 0.55), transparent);
  pointer-events: none;
}

.rohan-starter-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 182, 107, 0.35), transparent);
  pointer-events: none;
}

.rohan-starter-subtitle {
  text-align: center;
  font-family: 'Domine', serif;
  font-size: 14.5px;
  color: #dbd2b2;
  margin: 0 auto 24px;
  max-width: 820px;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.rohan-starter-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  flex-wrap: nowrap;
  width: 100%;
  padding: 2px 0;
}

.rohan-starter-card {
  position: relative;
  background: url('../images/starter_items/Item_bg.png') no-repeat center center;
  background-size: 100% 100%;
  width: 220px;
  min-width: 195px;
  min-height: 310px;
  border-radius: 12px;
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(247, 219, 169, 0.18);
  border: 1px solid rgba(229, 182, 107, 0.22);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
  user-select: none;
}

.rohan-starter-card:hover {
  transform: none !important;
  /* Üzerine gelince hareket etmesin */
  border-color: rgba(229, 182, 107, 0.75);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.92), 0 0 24px rgba(229, 182, 107, 0.32);
  filter: brightness(1.06);
}

.rohan-starter-icon-wrap {
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 14px;
  margin-bottom: -4px;
  overflow: visible !important;
}

.rohan-starter-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  pointer-events: none;
}

.rohan-starter-fx--back {
  z-index: 1;
}

.rohan-starter-icon {
  width: 95px;
  height: 95px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95));
  transition: filter 0.25s ease;
  position: relative;
  z-index: 2;
}

.rohan-starter-fx--front {
  z-index: 3;
}

.rohan-starter-card:hover .rohan-starter-icon {
  transform: none !important;
  /* Üzerine gelince hareket etmesin */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 10px rgba(229, 182, 107, 0.45));
}

.rohan-starter-duration {
  font-family: 'PTSans2', 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffe654;
  text-shadow: 0 0 14px rgba(255, 230, 84, 0.65), 0 2px 4px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.3px;
  margin: 4px 0 6px;
  line-height: 1;
}

.rohan-starter-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.rohan-starter-name {
  font-family: 'Cinzel', serif;
  font-size: 15.5px;
  font-weight: 800;
  color: #f7dba9;
  /* color: #ffffff; */
  margin: 0 0 6px;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.3px;
}

.rohan-starter-desc {
  font-family: 'Domine', serif;
  font-size: 12.5px;
  color: #d8cebf;
  margin: 0;
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

@media (max-width: 1200px) {
  .rohan-starter-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .rohan-starter-card {
    width: calc(33.333% - 14px);
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .rohan-starter-card {
    width: calc(50% - 10px);
    min-width: 145px;
    padding: 16px 10px 14px;
    min-height: 270px;
  }

  .rohan-starter-icon-wrap {
    width: 85px;
    height: 85px;
  }

  .rohan-starter-icon {
    width: 75px;
    height: 75px;
  }

  .rohan-starter-duration {
    font-size: 22px;
  }

  .rohan-starter-name {
    font-size: 14px;
  }

  .rohan-starter-desc {
    font-size: 11.5px;
  }
}

@media (max-width: 480px) {
  .rohan-starter-card {
    width: 100%;
    max-width: 260px;
  }
}

/* ==========================================================================
   REGISTER 3D NPC & FORM LAYOUT
   ========================================================================== */
.rohan-register-row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Ekstra Derli Toplu Form Paneli (Extra Tidy Form Panel BG) */
.rohan-register-form-col {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(229, 182, 107, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, rgba(22, 16, 11, 0.88) 0%, rgba(14, 9, 6, 0.94) 100%);
  border: 1px solid rgba(229, 182, 107, 0.05);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(247, 219, 169, 0.12), inset 0 0 30px rgba(0, 0, 0, 0.45);
  padding: 24px 28px 22px;
  box-sizing: border-box;
}

/* 3D NPC Stage Column (Right Side - Jinno Guard / Boss) */
.rohan-register-stage-col {
  position: absolute;
  top: 85px;
  height: 680px;
  right: -75px;
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none !important;
  z-index: 1;
}

/* 3D Companion Pet Stage Column (Left Side - Cute Pet & Speech Bubble) */
.rohan-register-pet-col {
  position: absolute;
  top: 120px;
  left: -45px;
  width: 380px;
  height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none !important;
  z-index: 3;
}

/* Pet Konuşma Baloncuğu (Speech Bubble) */
.rohan-register-pet-speech {
  position: relative;
  background-color: rgba(13, 9, 6, 0.96);
  background-image:
    var(--rohan-cp-corner-tl),
    var(--rohan-cp-corner-tr),
    var(--rohan-cp-corner-bl),
    var(--rohan-cp-corner-br),
    linear-gradient(135deg, rgba(26, 18, 12, 0.94) 0%, rgba(13, 9, 6, 0.99) 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: -1px -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px), 0 0 !important;
  background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, 100% 100% !important;
  border: 1px solid #B3946D !important;
  border-radius: 0 !important;
  padding: 12px 20px 10px;
  min-width: 170px;
  max-width: 240px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.92), 0 0 20px rgba(179, 148, 109, 0.35);
  color: #fff2d1;
  font-family: 'Cinzel', serif;
  text-align: center;
  pointer-events: auto;
  animation: rohanRegisterPetSpeechFloat 3s ease-in-out infinite;
  margin-bottom: -75px;
  z-index: 10;
}

.rohan-register-pet-speech::before,
.rohan-register-pet-speech.rohan-form-framed::before {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 9px 9px 0 9px !important;
  border-style: solid !important;
  border-color: #B3946D transparent transparent transparent !important;
  background: none !important;
  z-index: 9 !important;
  pointer-events: none !important;
}

.rohan-register-pet-speech::after,
.rohan-register-pet-speech.rohan-form-framed::after {
  content: '' !important;
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 8px 8px 0 8px !important;
  border-style: solid !important;
  border-color: rgba(13, 9, 6, 0.99) transparent transparent transparent !important;
  background: none !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.rohan-pet-speech-body {
  font-size: 11.5px;
  font-weight: 800;
  /* color: #ffffff; */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.rohan-pet-stage-card {
  min-height: 440px !important;
  height: 440px !important;
  width: 100%;
}

.rohan-pet-stage-card .rohan-stage-canvas-wrap {
  min-height: 440px !important;
  height: 440px !important;
}

@keyframes rohanRegisterPetSpeechFloat {

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

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

@media (max-width: 1400px) {
  .rohan-register-stage-col {
    right: -30px;
    width: 380px;
  }

  .rohan-register-pet-col {
    left: -30px;
    width: 340px;
  }
}

@media (max-width: 1240px) {
  .rohan-register-stage-col {
    right: -10px;
    width: 320px;
  }

  .rohan-register-pet-col {
    left: -10px;
    width: 300px;
  }
}

@media (max-width: 1080px) {
  .rohan-register-row {
    flex-direction: column;
    align-items: center;
  }

  .rohan-register-pet-col {
    display: none !important;
  }

  .rohan-register-stage-col {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 560px;
    height: 520px;
    margin-top: 24px;
    margin-left: 0;
  }
}

/* 3D Model Sahnesi (Saf Karakter - Çerçevesiz & Doğal Görünüm) */
.rohan-3d-stage-card {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  height: 100%;
  min-height: 580px;
  box-sizing: border-box;
  overflow: visible;
}

.rohan-3d-stage-card::before,
.rohan-3d-stage-card::after {
  display: none !important;
}

.rohan-stage-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none !important;
  user-select: none;
}

.rohan-stage-canvas-wrap canvas {
  pointer-events: none !important;
  cursor: default !important;
}

.rohan-stage-pedestal {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 45px;
  background: radial-gradient(ellipse at center, rgba(229, 182, 107, 0.45) 0%, rgba(229, 182, 107, 0.10) 55%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(2px);
}

.rohan-stage-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e5b66b;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}

.rohan-register-footer-links {
  text-align: center;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.rohan-register-footer-links p {
  margin-bottom: 6px;
}

.rohan-register-footer-links a {
  font-weight: 700;
  color: var(--rohan-gold-light);
}

.has-header-events .rohan-subpage-hero {
  padding-top: 60px;
}

/* ==========================================================================
   Rohan2 Control Panel - Son Silinen Eşyalarım (Destroyed Items)
   ========================================================================== */
.rohan-destroyed-section {
  position: relative;
}

.rohan-destroyed-info-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(229, 182, 107, 0.08) 0%, rgba(20, 14, 10, 0.75) 100%);
  border: 1px solid rgba(229, 182, 107, 0.35);
  border-left: 4px solid #e5b66b;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.rohan-destroyed-info-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 182, 107, 0.25) 0%, rgba(20, 14, 10, 0.8) 100%);
  border: 1px solid rgba(229, 182, 107, 0.5);
  color: #ffe5a3;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(229, 182, 107, 0.25);
}

.rohan-destroyed-info-text {
  flex: 1;
}

.rohan-destroyed-info-title {
  font-family: 'Domine', serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffe5a3;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.rohan-destroyed-info-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: #cbbaa7;
}

.rohan-destroyed-info-desc strong {
  color: #fce7b0;
  font-weight: 600;
}

/* Placeholder Container (On-Demand) */
.rohan-destroyed-placeholder {
  background: linear-gradient(180deg, rgba(25, 17, 12, 0.85) 0%, rgba(14, 9, 6, 0.95) 100%);
  border: 1px dashed rgba(229, 182, 107, 0.4);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s ease;
}

.rohan-destroyed-placeholder:hover {
  border-color: rgba(229, 182, 107, 0.7);
}

.rohan-destroyed-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.rohan-destroyed-placeholder .rohan-art-vote-btn,
.rohan-destroyed-placeholder #rohanLoadDestroyedBtn {
  align-self: center !important;
  margin: 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.rohan-destroyed-placeholder-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 182, 107, 0.2) 0%, transparent 70%);
  border: 1px solid rgba(229, 182, 107, 0.4);
  color: #e5b66b;
  font-size: 22px;
}

.rohan-destroyed-placeholder-text h3 {
  font-family: 'Domine', serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffe5a3;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.rohan-destroyed-placeholder-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #a89c8a;
  line-height: 1.5;
  margin: 0;
}

/* Loader & Error */
.rohan-destroyed-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px;
  background: rgba(18, 12, 8, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.3);
  border-radius: 6px;
  color: #ffe5a3;
  font-family: 'Domine', serif;
  font-size: 13.5px;
}

.rohan-destroyed-loader i {
  color: #e5b66b;
  font-size: 20px;
}

.rohan-destroyed-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  color: #fca5a5;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  margin-bottom: 16px;
}

.rohan-destroyed-error i {
  font-size: 18px;
  color: #ef4444;
}

/* Meta Bar (Cache Time + Refresh) */
.rohan-destroyed-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(28, 18, 12, 0.85) 0%, rgba(18, 12, 8, 0.95) 100%);
  border: 1px solid rgba(229, 182, 107, 0.3);
  border-radius: 6px;
}

.rohan-destroyed-meta-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rohan-destroyed-cache-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  color: #cbbaa7;
}

.rohan-destroyed-cache-badge i {
  color: #e5b66b;
}

.rohan-destroyed-cache-badge strong {
  font-family: 'Montserrat', sans-serif;
  color: #ffe5a3;
  letter-spacing: 0.5px;
}

.rohan-destroyed-cache-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  color: #8f8576;
}

.rohan-destroyed-cache-note i {
  color: #a89c8a;
  margin-right: 3px;
}

/* Table Specific Enhancements */
.rohan-destroyed-table th {
  white-space: nowrap;
}

.rohan-destroyed-table td {
  vertical-align: middle;
}

.rohan-destroyed-num {
  text-align: center;
  font-weight: 700;
  color: #8f8576;
  font-family: 'Montserrat', sans-serif;
}

.rohan-destroyed-char {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e2dacd;
  font-weight: 600;
}

.rohan-destroyed-char-avatar {
  display: inline-block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(229, 182, 107, 0.25);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.rohan-destroyed-table tr:hover .rohan-destroyed-char-avatar {
  transform: scale(1.08);
  border-color: rgba(229, 182, 107, 0.6);
}

.rohan-destroyed-char-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(229, 182, 107, 0.15);
  border: 1px solid rgba(229, 182, 107, 0.35);
  color: #ffd88a;
  font-size: 10.5px;
}

.rohan-destroyed-item-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #ffe5a3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.rohan-destroyed-item-icon {
  color: #e5b66b;
  font-size: 12px;
  opacity: 0.85;
}

.rohan-destroyed-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  color: #cbbaa7;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Empty State */
.rohan-destroyed-empty {
  text-align: center;
  padding: 36px 20px;
  background: rgba(18, 12, 8, 0.6);
  border: 1px solid rgba(107, 102, 98, 0.2);
  border-radius: 6px;
  color: #9c9380;
  margin-top: 12px;
}

.rohan-destroyed-empty i {
  font-size: 32px;
  color: #8f8576;
  margin-bottom: 10px;
  display: block;
}

.rohan-destroyed-empty p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  margin: 0;
}

/* ==========================================================================
   ROHAN REWORK NEW — 404 INTEGRATED ADVISORY BANNER WITH 3D MONSTER
   ========================================================================== */

.rohan-404-advisory-card {
  position: relative;
  overflow: visible !important;
  margin-bottom: 28px;
  padding: 24px 28px 24px 28px;
}

.rohan-404-advisory-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.rohan-404-advisory-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.rohan-404-advisory-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 340px;
  pointer-events: auto;
}

.rohan-404-stage {
  min-height: 340px !important;
  height: 340px !important;
  width: 100%;
  max-width: 310px;
  cursor: pointer;
  pointer-events: auto !important;
}

.rohan-404-stage .rohan-stage-canvas-wrap {
  min-height: 340px !important;
  height: 340px !important;
  pointer-events: auto !important;
}

.rohan-404-stage canvas {
  pointer-events: auto !important;
  cursor: grab !important;
}

.rohan-404-stage canvas:active {
  cursor: grabbing !important;
}

.rohan-404-advisory-right .rohan-stage-pedestal {
  bottom: 15px;
  width: 190px;
  height: 36px;
}

/* 404 Hero Content Column */
.rohan-404-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.rohan-404-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(38, 24, 14, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.4);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #f7dba9;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.rohan-404-status-badge i {
  color: #e5b66b;
  font-size: 13px;
}

.rohan-404-code-pill {
  background: linear-gradient(135deg, #7a1f1f 0%, #4a0d0d 100%);
  border: 1px solid #b33939;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 4px;
}

.rohan-404-number {
  font-family: 'Cinzel', serif;
  font-size: 92px;
  font-weight: 900;
  line-height: 0.95;
  margin: 2px 0 12px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbe3a1 28%, #e5b66b 65%, #9e742e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(229, 182, 107, 0.6)) drop-shadow(0 0 45px rgba(79, 209, 244, 0.25));
  letter-spacing: 6px;
}

.rohan-404-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 700;
  color: #fcf1dc;
  margin: 0 0 10px 0;
  letter-spacing: 0.6px;
  line-height: 1.25;
}

.rohan-404-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #cbbaa7;
  margin: 0 0 26px 0;
  max-width: 600px;
}

.rohan-404-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rohan-404-btn-main,
.rohan-404-btn-back {
  background: url('../images/button-gold.png') no-repeat center center / 100% 100% !important;
  border: none !important;
  border-radius: 6px;
  color: #fff2db !important;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 24px;
  min-width: 185px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 235, 180, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rohan-404-btn-main i,
.rohan-404-btn-back i {
  font-size: 13px;
  color: #ffe5a3;
  text-shadow: 0 1px 2px #000000;
  transition: transform 0.2s ease, color 0.2s ease;
}

.rohan-404-btn-main::after,
.rohan-404-btn-back::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.rohan-404-btn-main:hover,
.rohan-404-btn-back:hover {
  filter: brightness(1.22) contrast(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.85), 0 0 20px rgba(229, 182, 107, 0.45);
  color: #ffffff !important;
}

.rohan-404-btn-main:hover::after,
.rohan-404-btn-back:hover::after {
  left: 140%;
}

.rohan-404-btn-main:hover i,
.rohan-404-btn-back:hover i {
  color: #ffffff;
  transform: scale(1.1);
}

.rohan-404-btn-main:active,
.rohan-404-btn-back:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  filter: brightness(0.95);
}

/* Quick Navigation Waypoints Hub */
.rohan-404-waypoints-section {
  margin-top: 34px;
}

.rohan-404-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.rohan-404-section-header i {
  color: #e5b66b;
  font-size: 18px;
}

.rohan-404-section-title {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 700;
  color: #f7dba9;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

.rohan-404-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(229, 182, 107, 0.45) 0%, rgba(229, 182, 107, 0) 100%);
}

.rohan-404-waypoints-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.rohan-waypoint-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(20, 14, 10, 0.88);
  border: 1px solid rgba(197, 155, 86, 0.25);
  border-radius: 6px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.rohan-waypoint-card:hover {
  background: rgba(32, 22, 15, 0.95);
  border-color: #e5b66b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(229, 182, 107, 0.2);
  transform: translateY(-3px);
  text-decoration: none;
}

.rohan-waypoint-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(58, 40, 26, 0.8) 0%, rgba(26, 18, 12, 0.9) 100%);
  border: 1px solid rgba(229, 182, 107, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5b66b;
  font-size: 19px;
  transition: all 0.28s ease;
}

.rohan-waypoint-card:hover .rohan-waypoint-icon {
  background: linear-gradient(145deg, #e5b66b 0%, #8c6a28 100%);
  color: #120c08;
  box-shadow: 0 0 14px rgba(229, 182, 107, 0.65);
}

.rohan-waypoint-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.rohan-waypoint-title {
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #fcf1dc;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.rohan-waypoint-card:hover .rohan-waypoint-title {
  color: #e5b66b;
}

.rohan-waypoint-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  color: #8b8070;
  line-height: 1.35;
}

/* Quick Search & Instant Route Finder */
.rohan-404-search-section {
  margin-top: 26px;
  background: rgba(20, 14, 10, 0.8);
  border: 1px solid rgba(197, 155, 86, 0.28);
  border-radius: 6px;
  padding: 20px 24px;
  position: relative;
}

.rohan-404-search-header {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #e5b66b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
}

.rohan-404-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rohan-404-search-icon {
  position: absolute;
  left: 16px;
  color: #8b8070;
  font-size: 15px;
  pointer-events: none;
  transition: color 0.25s;
}

.rohan-404-search-input {
  width: 100%;
  height: 44px;
  background: rgba(10, 7, 5, 0.9);
  border: 1px solid rgba(197, 155, 86, 0.35);
  border-radius: 4px;
  padding: 0 16px 0 44px;
  color: #fcf1dc;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.rohan-404-search-input:focus {
  border-color: #e5b66b;
  box-shadow: 0 0 14px rgba(229, 182, 107, 0.3);
}

.rohan-404-search-input:focus~.rohan-404-search-icon {
  color: #e5b66b;
}

.rohan-404-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(18, 12, 8, 0.98);
  border: 1px solid #e5b66b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(229, 182, 107, 0.25);
  border-radius: 4px;
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
}

.rohan-search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(197, 155, 86, 0.15);
  color: #fcf1dc;
  text-decoration: none;
  transition: background 0.2s;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

.rohan-search-result-item:last-child {
  border-bottom: none;
}

.rohan-search-result-item:hover {
  background: rgba(229, 182, 107, 0.15);
  color: #e5b66b;
  text-decoration: none;
}

.rohan-search-result-item .item-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rohan-search-result-item .item-title i {
  color: #e5b66b;
}

.rohan-search-result-item .item-arrow {
  color: #8b8070;
  font-size: 12px;
}

/* Auto-Teleport Countdown Banner */
.rohan-404-countdown-banner {
  margin-top: 24px;
  background: linear-gradient(90deg, rgba(229, 182, 107, 0.06) 0%, rgba(229, 182, 107, 0.12) 50%, rgba(229, 182, 107, 0.06) 100%);
  border: 1px solid rgba(229, 182, 107, 0.28);
  border-radius: 6px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #dbd2b2;
  position: relative;
  overflow: hidden;
}

.rohan-404-countdown-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rohan-404-countdown-left i {
  color: #e5b66b;
  font-size: 14px;
}

.rohan-404-countdown-left strong {
  color: #f7dba9;
  font-size: 14px;
  font-weight: 700;
}

.rohan-btn-timer-cancel {
  background: rgba(30, 20, 13, 0.85);
  border: 1px solid rgba(229, 182, 107, 0.4);
  color: #e5b66b;
  padding: 5px 12px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.rohan-btn-timer-cancel:hover {
  background: rgba(229, 182, 107, 0.2);
  color: #fff;
  border-color: #e5b66b;
}

.rohan-404-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #e5b66b, #4fd1f4);
  width: 100%;
  transition: width 1s linear;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .rohan-404-advisory-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rohan-404-advisory-right {
    min-height: 310px;
  }

  .rohan-404-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .rohan-404-hero-content {
    align-items: center;
    text-align: center;
  }

  .rohan-404-actions {
    justify-content: center;
  }

  .rohan-404-waypoints-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .rohan-404-hero-card {
    padding: 30px 20px;
  }

  .rohan-404-portal-arch {
    width: 220px;
    height: 260px;
    border-radius: 110px 110px 10px 10px;
  }

  .rohan-404-number {
    font-size: 68px;
    letter-spacing: 4px;
  }

  .rohan-404-subtitle {
    font-size: 20px;
  }

  .rohan-404-actions {
    flex-direction: column;
    width: 100%;
  }

  .rohan-404-btn-main,
  .rohan-404-btn-back {
    width: 100%;
  }

  .rohan-404-waypoints-grid {
    grid-template-columns: 1fr;
  }

  .rohan-404-countdown-banner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ==========================================================================
   27. ROHAN2 COOKIE CONSENT NOTICE (COMPACT BOTTOM-RIGHT FLOATING WIDGET)
   ========================================================================== */
.rohan-cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: 520px;
  z-index: 99998;
  background-color: #3a332d;
  background-image: linear-gradient(180deg, #281d17 0%, #514131 100%);
  border: 1px solid #4d443c;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  opacity: 1;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.rohan-cookie-banner.is-hidden {
  transform: translateX(-50%) translateY(25px) scale(0.96);
  opacity: 0;
  pointer-events: none;
}

/* Çerez Bildirimi Varken Footer'ın En Altında Boşluk Bırakma */
body.has-cookie-notice .rohan-footer-bottom {
  padding-bottom: 75px !important;
  transition: padding-bottom 0.35s ease;
}

.rohan-cookie-container {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}

.rohan-cookie-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 44px;
}

.rohan-cookie-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  transition: transform 0.3s ease;
}

.rohan-cookie-banner:hover .rohan-cookie-svg {
  transform: scale(1.08) rotate(-2deg);
}

.rohan-cookie-text {
  color: #c7beaf;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.rohan-cookie-link {
  color: #d96a28;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  border-bottom: 1px dotted rgba(217, 106, 40, 0.6);
}

.rohan-cookie-link:hover {
  color: #ff8c42;
  border-bottom-style: solid;
  text-shadow: 0 0 8px rgba(217, 106, 40, 0.5);
}

/* Distressed Cut / Notched Terracotta ACCEPT Button (Compact Proportion) */
.rohan-cookie-btn-brush {
  flex-shrink: 0;
  background: transparent url('../images/cookie_btn_blank.png') no-repeat center center / 100% 100%;
  color: #fec6aa !important;
  font-family: 'Impact', 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none !important;
  height: 40px;
  width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none !important;
  outline: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.65));
  padding-bottom: 2px;
}

.rohan-cookie-btn-brush:hover {
  filter: brightness(1.15) contrast(1.05) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.8));
  transform: translateY(-2px) scale(1.03);
  color: #ffffff !important;
}

.rohan-cookie-btn-brush:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.95);
}

@media (max-width: 600px) {
  .rohan-cookie-banner {
    left: 15px;
    right: 15px;
    bottom: 15px;
    transform: none;
    max-width: calc(100vw - 30px);
  }

  .rohan-cookie-banner.is-hidden {
    transform: translateY(20px) scale(0.96);
  }

  .rohan-cookie-container {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 14px 16px;
  }

  .rohan-cookie-text {
    text-align: center;
    font-size: 12px;
  }
}

/* ==========================================================================
   SUPPORT SYSTEM - ERROR & LOGIN REQUIRED ADVISORY CARD
   ========================================================================== */
.rohan-support-error-card {
  border: 1px solid rgba(197, 155, 86, 0.4) !important;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.92), 0 0 24px rgba(229, 182, 107, 0.12), inset 0 1px 0 rgba(247, 219, 169, 0.2) !important;
}

/* Support Error Layout with 3D Pet Showcase */
.rohan-support-error-row {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rohan-support-error-row.has-pet {
  position: relative;
  min-height: 520px;
}

.rohan-support-error-content-col {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.rohan-support-error-content-col .rohan-support-error-desc {
  margin: 0 auto 28px;
  max-width: 540px;
}

.rohan-support-pet-col {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none !important;
  z-index: 3;
}

.rohan-support-pet-col .rohan-register-pet-speech {
  position: relative;
  margin-bottom: -45px;
  z-index: 10;
  pointer-events: auto;
}

.rohan-support-pet-stage {
  min-height: 420px !important;
  height: 420px !important;
  width: 100%;
  position: relative;
}

.rohan-support-pet-stage .rohan-stage-canvas-wrap {
  min-height: 420px !important;
  height: 420px !important;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rohan-support-pet-stage .rohan-stage-pedestal {
  bottom: 30px;
  width: 220px;
}

@media (max-width: 1200px) {
  .rohan-support-pet-col {
    right: 5px;
    width: 280px;
    height: 420px;
  }

  .rohan-support-pet-stage {
    min-height: 380px !important;
    height: 380px !important;
  }
}

@media (max-width: 1024px) {
  .rohan-support-error-row.has-pet {
    flex-direction: column;
    min-height: auto;
  }

  .rohan-support-pet-col {
    position: static;
    transform: none;
    margin: 25px auto 0;
    width: 280px;
    height: 380px;
  }
}


.rohan-support-emblem-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.rohan-support-emblem-ring {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 38, 20, 0.95) 0%, rgba(18, 12, 7, 0.98) 75%);
  border: 1.5px solid rgba(229, 182, 107, 0.65);
  box-shadow: 0 0 24px rgba(229, 182, 107, 0.3), inset 0 0 14px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #ffd88a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rohan-support-error-card:hover .rohan-support-emblem-ring {
  transform: scale(1.06);
  box-shadow: 0 0 32px rgba(229, 182, 107, 0.45), inset 0 0 14px rgba(0, 0, 0, 0.85);
}

.rohan-support-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  background: rgba(229, 182, 107, 0.12);
  border: 1px solid rgba(229, 182, 107, 0.45);
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffe5a3;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.rohan-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5b66b;
  box-shadow: 0 0 8px #e5b66b;
  animation: rohanPulseGoldDot 2s infinite ease-in-out;
}

@keyframes rohanPulseGoldDot {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

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

.rohan-support-error-title {
  font-family: 'Cinzel', serif;
  font-size: 18.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0 0 14px 0;
  line-height: 1.45;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.rohan-support-error-desc {
  font-size: 13.5px;
  color: var(--rohan-text-muted);
  line-height: 1.7;
  margin: 0 auto 30px;
  max-width: 520px;
}

.rohan-support-error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  margin: 0 auto 20px;
}

.rohan-support-btn-primary {
  margin: 0 !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rohan-support-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 218px;
  height: 44px;
  background: url('../images/button-gold.png') no-repeat center center / 100% 100% !important;
  border: none !important;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff2db !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 235, 180, 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.rohan-support-btn-secondary i {
  font-size: 13px;
  color: #ffe5a3;
  text-shadow: 0 1px 2px #000000;
}

.rohan-support-btn-secondary:hover {
  filter: brightness(1.2) contrast(1.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 16px rgba(229, 182, 107, 0.4);
  color: #ffffff !important;
}

.rohan-support-btn-secondary:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

.rohan-support-error-back {
  margin-top: 10px;
  margin-bottom: 26px;
}

.rohan-support-error-back a {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: #a89f91;
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.5px;
}

.rohan-support-error-back a:hover {
  color: var(--rohan-gold-light);
}

.rohan-support-error-channels {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(197, 155, 86, 0.2);
  flex-wrap: wrap;
}

.rohan-support-channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #c9bca9;
}

/* ==========================================================================
   26. ROHAN2 LIVE MARKET & PRICE CHECKER SECTION (Rohan2 MMORPG EDITION)
   ========================================================================== */
.rohan-market-section {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
}

.rohan-market-panel {
  position: relative;
  background-color: #0b0704;
  border: 1px solid rgba(185, 142, 82, 0.35);
  border-radius: var(--rohan-radius, 8px);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 230, 163, 0.15);
  overflow: hidden;
}

.rohan-market-panel-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28, 18, 11, 0.75) 0%, rgba(14, 9, 6, 0.88) 100%),
    url('../images/menu_bar.png') repeat-x center center;
  background-size: auto 100%;
  min-height: 46px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(229, 182, 107, 0.2);
  padding: 12px 22px;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--rohan-gold-light, #f7db97);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
}

.rohan-market-panel-header i {
  color: var(--rohan-gold-light, #f7db97) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(229, 182, 107, 0.4));
  font-size: 14px;
}

.rohan-market-panel-header span {
  color: var(--rohan-gold-light, #f7db97);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 182, 107, 0.4);
}

/* MMORPG Atmospheric Fortress Wallpaper Blend */
.rohan-market-art-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      rgba(11, 7, 4, 0.98) 0%,
      rgba(11, 7, 4, 0.94) 40%,
      rgba(11, 7, 4, 0.70) 75%,
      rgba(11, 7, 4, 0.35) 100%),
    linear-gradient(180deg,
      rgba(11, 7, 4, 0.3) 0%,
      transparent 40%,
      rgba(8, 5, 3, 0.85) 100%),
    /* url('../images/banner/Hwang.png'); */
    url('../images/talismans/bg_shop.jpg');
  background-position: right bottom;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.rohan-market-panel:hover .rohan-market-art-bg {
  opacity: 0.40;
  filter: brightness(1.08) contrast(1.05);
}

.rohan-market-inner-wrap {
  position: relative;
  z-index: 2;
  padding: 26px 30px 24px;
}

.rohan-market-intro-row {
  margin-bottom: 22px;
}

.rohan-market-subtitle {
  font-family: 'Domine', serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(203, 188, 167);
  margin: 0;
  max-width: 900px;
}

/* 1. Top Bar: Search & Trending */
.rohan-market-top-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(229, 182, 107, 0.18);
  flex-wrap: wrap;
  position: relative;
  z-index: 50;
}

.rohan-market-search-box {
  position: relative;
  flex: 1 1 340px;
  min-width: 280px;
  z-index: 60;
}

.rohan-market-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #e5b66b;
  font-size: 15px;
  pointer-events: none;
}

.rohan-market-search-input {
  width: 100%;
  background: rgba(8, 5, 3, 0.88);
  border: 1px solid rgba(170, 152, 134, 0.4);
  border-radius: 6px;
  padding: 12px 38px 12px 38px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

.rohan-market-search-input:focus {
  border-color: #d89e5a;
  background: rgba(15, 10, 6, 0.98);
  box-shadow: 0 0 16px rgba(216, 158, 90, 0.4), inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

.rohan-market-search-input::placeholder {
  color: #7d7265;
  font-style: italic;
}

.rohan-market-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #a89f91;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.rohan-market-search-clear:hover {
  color: #ffffff;
}

/* Autocomplete Dropdown */
.rohan-market-autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(12, 8, 5, 0.98);
  border: 1px solid rgba(229, 182, 107, 0.45);
  border-radius: 6px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.95), 0 0 15px rgba(229, 182, 107, 0.2);
  scrollbar-width: thin;
  scrollbar-color: #e5b66b rgba(0, 0, 0, 0.5);
}

.rohan-market-autocomplete-list::-webkit-scrollbar {
  width: 6px;
}

.rohan-market-autocomplete-list::-webkit-scrollbar-thumb {
  background: #e5b66b;
  border-radius: 3px;
}

.rohan-market-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(229, 182, 107, 0.1);
  transition: all 0.2s ease;
}

.rohan-market-autocomplete-item:last-child {
  border-bottom: none;
}

.rohan-market-autocomplete-item:hover,
.rohan-market-autocomplete-item.is-selected {
  background: linear-gradient(90deg, rgba(229, 182, 107, 0.22) 0%, rgba(229, 182, 107, 0.05) 100%);
  padding-left: 18px;
}

.rohan-market-ac-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(229, 182, 107, 0.3);
  border-radius: 4px;
  padding: 2px;
}

.rohan-market-ac-name {
  flex: 1;
  font-size: 13.5px;
  color: #ffffff;
  font-weight: 600;
}

.rohan-market-ac-vnum {
  display: none !important;
}

.rohan-market-ac-empty {
  padding: 14px;
  text-align: center;
  color: #8b8071;
  font-size: 13px;
  font-style: italic;
}

/* Trends Section (Rohan2 MMORPG Horizontal Pill Bars) */
.rohan-market-trends-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 2 1 450px;
  flex-wrap: wrap;
}

.rohan-market-trends-label {
  font-family: 'Domine', serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffe5a3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rohan-market-trends-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rohan-market-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgb(26, 23, 22) 0%, rgb(45, 41, 38) 100%);
  border: 1px solid rgba(107, 102, 98, 0.45);
  border-radius: 4px;
  padding: 6px 14px 6px 8px;
  color: rgb(220, 206, 187);
  font-family: 'Domine', serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.rohan-market-trend-pill:hover,
.rohan-market-trend-pill.is-active {
  background: linear-gradient(90deg, rgb(70, 47, 32) 0%, rgb(45, 41, 38) 100%);
  border-color: #d89e5a;
  color: #ffe5a3;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(216, 158, 90, 0.35);
}

.rohan-market-trend-pill.is-active {
  border-color: #ffe5a3;
  box-shadow: 0 0 16px rgba(229, 182, 107, 0.45);
}

.rohan-market-trend-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  border: 1px solid rgba(229, 182, 107, 0.4);
  padding: 1px;
  flex-shrink: 0;
}

/* 2. Item Spotlight Row */
.rohan-market-spotlight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.rohan-market-item-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rohan-market-item-icon-box {
  width: 54px;
  height: 54px;
  background: radial-gradient(circle, rgba(40, 28, 16, 0.9) 0%, rgba(10, 7, 4, 0.95) 100%);
  border: 1.5px solid #e5b66b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(229, 182, 107, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

.rohan-market-item-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  transition: transform 0.25s ease;
}

.rohan-market-item-icon-box:hover .rohan-market-item-icon {
  transform: scale(1.1);
}

.rohan-market-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rohan-market-item-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rohan-market-item-name {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.rohan-market-vnum-badge {
  display: none !important;
}

.rohan-market-tags {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rohan-market-tag {
  font-size: 11.5px;
  color: #9d9282;
}

.rohan-market-tag.text-gold {
  color: #e5b66b;
}

/* Timeframe Selector (Rohan2 Pill Style) */
.rohan-market-timeframe-selector {
  display: inline-flex;
  align-items: center;
  background: rgba(12, 8, 5, 0.9);
  border: 1px solid rgba(107, 102, 98, 0.45);
  border-radius: 6px;
  padding: 3px;
  gap: 4px;
}

.rohan-market-tf-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 14px;
  color: rgb(203, 188, 167);
  font-family: 'Domine', serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rohan-market-tf-btn:hover {
  color: #ffffff;
  background: rgba(229, 182, 107, 0.15);
}

.rohan-market-tf-btn.is-active {
  background: linear-gradient(90deg, rgb(70, 47, 32) 0%, rgb(45, 41, 38) 100%);
  border-color: #d89e5a;
  color: #ffe5a3;
  box-shadow: 0 0 10px rgba(216, 158, 90, 0.35);
}

/* 3. 5-Column Stats Grid (Authentic MMORPG Ledger Cards with Rotated Diamonds) */
.rohan-market-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.rohan-market-stat-card {
  background: linear-gradient(180deg, rgba(28, 20, 15, 0.88) 0%, rgba(14, 10, 7, 0.95) 100%);
  border: 1px solid rgba(170, 152, 134, 0.32);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 230, 163, 0.08);
}

.rohan-market-stat-card:hover {
  border-color: #d89e5a;
  background: linear-gradient(180deg, rgba(38, 26, 18, 0.92) 0%, rgba(20, 14, 9, 0.98) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 230, 163, 0.15);
}

.rohan-market-stat-card.is-highlight {
  background: linear-gradient(180deg, rgba(46, 30, 20, 0.92) 0%, rgba(22, 14, 9, 0.98) 100%);
  border-color: #e5b66b;
  box-shadow: 0 0 20px rgba(229, 182, 107, 0.25), inset 0 1px 0 rgba(255, 230, 163, 0.22);
}

/* Rotated 45deg Diamond Stat Icon */
.rohan-market-stat-icon {
  width: 32px;
  height: 32px;
  background: rgb(51, 46, 40);
  border: 1px solid rgb(107, 102, 98);
  border-radius: 2px;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  margin-right: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.rohan-market-stat-icon i {
  transform: rotate(45deg);
  color: #ffd88a;
  font-size: 13px;
}

.rohan-market-stat-card:hover .rohan-market-stat-icon,
.rohan-market-stat-card.is-highlight .rohan-market-stat-icon {
  border-color: #d89e5a;
  background: rgb(65, 52, 42);
  box-shadow: 0 0 10px rgba(216, 158, 90, 0.4);
}

.rohan-market-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rohan-market-stat-label {
  font-family: 'Domine', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(170, 152, 134);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rohan-market-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rohan-market-stat-val.text-gold {
  color: #ffe5a3;
  text-shadow: 0 0 8px rgba(229, 182, 107, 0.35);
}

.rohan-market-change-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
  width: fit-content;
}

.rohan-market-change-badge.positive {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.rohan-market-change-badge.negative {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.rohan-market-change-badge.neutral {
  color: #a89f91;
  background: rgba(168, 159, 145, 0.12);
  border: 1px solid rgba(168, 159, 145, 0.3);
}

/* 4. Chart Card */
.rohan-market-chart-card {
  position: relative;
  background: rgba(9, 6, 4, 0.88);
  border: 1px solid rgba(170, 152, 134, 0.3);
  border-radius: 8px;
  padding: 20px 18px 14px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  margin-bottom: 20px;
}

.rohan-market-chart-container {
  position: relative;
  height: 330px;
  width: 100%;
}

.rohan-market-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 5, 3, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  color: #e5b66b;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 8px;
}

.rohan-market-loader i {
  font-size: 26px;
}

/* 4.5. MMORPG Market Advisory Box (Rohan2 Suite Integration) */
.rohan-market-advisory-wrap {
  margin-top: 22px;
  margin-bottom: 22px;
  padding: 24px 28px;
  background: 
    linear-gradient(90deg, rgba(14, 10, 7, 0.92) 0%, rgba(14, 10, 7, 0.80) 45%, rgba(14, 10, 7, 0.32) 75%, rgba(14, 10, 7, 0.55) 100%),
    /* url('../images/talismans/bg_shop.jpg') center top / cover no-repeat; */
    url('../images/talismans/bg_shop.jpg') center 35% / cover no-repeat;
  border: 1px solid rgba(170, 152, 134, 0.32);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 230, 163, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.rohan-market-advisory-left {
  flex: 1 1 58%;
  min-width: 0;
}

.rohan-market-advisory-wrap .rohan-art-pill-bar {
  margin-bottom: 14px;
}

.rohan-market-advisory-wrap .rohan-art-bullet-list {
  padding-left: 10px;
  margin: 0;
  gap: 10px;
}

.rohan-market-advisory-wrap .rohan-art-bullet-text {
  font-size: 13.5px;
  line-height: 1.6;
}

/* 4.6. 3D Orbiting Elemental Talismans Showcase */
.rohan-market-talisman-showcase {
  flex: 0 0 520px;
  width: 520px;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  perspective: 900px;
}

.rohan-tali-stage {
  --mode: 1;
  --cx: 0.5;
  --cy: 0.52;
  --rx: 0.32;
  --ry: 0.23;
  --size: 0.20;
  --tilt: -9;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tali-loop__fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: none;
}

.tali-loop__fx--back  { z-index: 1; }
.tali-loop__fx--mid   { z-index: 11; }
.tali-loop__fx--front { z-index: 30; }

.tali {
  position: absolute;
  width: 102px;
  height: 102px;
  object-fit: contain;
  max-width: none;
  translate: -50% -50%;
  will-change: transform, filter;
  pointer-events: auto;
  cursor: pointer;
  transition: filter 0.25s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.75));
}

.tali:hover {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.98)) brightness(1.3) !important;
}

/* Central Metin2 Trade Shop Stand with Rohan2 Light Sweep Effect */
.rohan-tali-center-char {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.rohan-tali-char-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.rohan-tali-char-img {
  width: auto;
  height: 220px;
  max-width: 115px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(212, 168, 83, 0.25));
  display: block;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

.rohan-tali-center-char:hover .rohan-tali-char-img {
  transform: scale(1.04);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(229, 182, 107, 0.45));
}

/* Rohan2 LIGHT SWEEP EFFECT (.ui__sweep) */
.ui__sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: var(--ui-src) 0 0 / 100% 100% no-repeat;
  mask: var(--ui-src) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(105deg, 
    transparent 34%, 
    rgba(255, 215, 120, 0.06) 39%, 
    rgba(255, 230, 160, 0.20) 44%, 
    rgba(255, 245, 200, 0.38) 48.5%, 
    rgba(255, 255, 255, 0.55) 50%, 
    rgba(255, 245, 200, 0.38) 51.5%, 
    rgba(255, 230, 160, 0.20) 56%, 
    rgba(255, 215, 120, 0.06) 61%, 
    transparent 66%
  ) 85% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: ui-sweep 6.5s cubic-bezier(0.42, 0, 0.58, 1) 0.5s infinite;
}

@keyframes ui-sweep {
  0%    { background-position: 85% 0; opacity: 0; }
  4%    { opacity: 1; }
  26%   { opacity: 1; }
  30%   { background-position: 15% 0; opacity: 0; }
  100%  { background-position: 15% 0; opacity: 0; }
}

.rohan-tali-glow-disc {
  position: absolute;
  width: 250px;
  height: 250px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.16) 0%, rgba(212, 168, 83, 0.05) 45%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: rohanTaliPulse 4s ease-in-out infinite alternate;
}

@keyframes rohanTaliPulse {
  0%   { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.rohan-tali-tag {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 12, 8, 0.95);
  border: 1px solid rgba(212, 168, 83, 0.6);
  color: #ffd88a;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2.5px 10px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.85);
  pointer-events: none;
}

/* 5. Footer Strip (Rule 7 Golden Check standard) */
.rohan-market-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 18px;
  border-top: 1px solid rgba(229, 182, 107, 0.16);
  flex-wrap: wrap;
  gap: 16px;
}

.rohan-market-strip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #bfaea0;
}

.rohan-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .rohan-market-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .rohan-market-panel {
    padding: 0;
  }

  .rohan-market-panel-header {
    padding: 10px 16px;
    font-size: 12.5px;
  }

  .rohan-market-inner-wrap {
    padding: 20px 16px 18px;
  }

  .rohan-market-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .rohan-market-chart-container {
    height: 250px;
  }

  .rohan-market-spotlight-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .rohan-market-timeframe-selector {
    width: 100%;
    justify-content: space-between;
  }

  .rohan-market-tf-btn {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 11px;
  }

  .rohan-market-advisory-wrap {
    padding: 18px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .rohan-market-talisman-showcase {
    margin: 8px auto 0;
    width: 100%;
    max-width: 360px;
  }

  .rohan-market-footer-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .rohan-market-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Google reCAPTCHA v2 Dark Theme — 2px White Seam / Border Artifact Removal
   Google's dark card is 302x76px inside a 304x78px iframe, leaving 2px on
   the right and bottom that exposes the iframe's default white background.
   ========================================================================== */
.g-recaptcha {
  width: 302px !important;
  height: 76px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #222222 !important;
  display: inline-block !important;
}

.g-recaptcha iframe {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
}

/* ==========================================================================
   ROHAN2 EREBOR — 100% MOBILE RESPONSIVENESS & PERFORMANCE MASTER SUITE
   Strictly scoped to tablet/mobile viewports (<= 1100px down to 320px).
   Desktop (> 1100px) appearance is 100% untouched.
   ========================================================================== */

/* Shared Table Scroll Wrapper Alias & Support Error Desktop Class Replacement */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rohan-support-pet-col.is-left-stage {
  left: 20px;
  right: auto;
}

.rohan-support-error-content-col {
  margin: 0 auto;
}

.rohan-support-error-content-col.has-pet-offset {
  margin-left: auto;
  margin-right: 80px;
}

/* --------------------------------------------------------------------------
   1. TABLET & COMPACT DESKTOP NAVIGATION (<= 1100px & <= 1050px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Fix Market 3D Talisman Showcase flex-basis bug when stacked vertically */
  .rohan-market-advisory-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .rohan-market-talisman-showcase {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 250px !important;
    margin: 6px auto 0 !important;
  }
}

@media (max-width: 1050px) {
  /* Switch Topbar Navigation to Luxury Glassmorphic Mobile Drawer */
  .rohan-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid rgba(229, 182, 107, 0.35);
    background: rgba(18, 12, 8, 0.85);
    color: var(--rohan-gold);
    font-size: 18px;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .rohan-hamburger.is-active {
    border-color: var(--rohan-gold-primary);
    background: rgba(229, 182, 107, 0.16);
    color: #fff;
    box-shadow: 0 0 12px rgba(229, 182, 107, 0.35);
  }

  .rohan-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 18px 20px;
    background: rgba(12, 8, 5, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 2px solid var(--rohan-border-gold);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.92);
    z-index: 1005;
  }

  .rohan-nav.is-open {
    display: flex;
    animation: rohanMobileNavSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .rohan-nav .rohan-nav-link,
  .rohan-nav .rohan-nav-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid rgba(229, 182, 107, 0.14);
    background: rgba(24, 17, 12, 0.78);
    text-align: left;
  }

  .rohan-nav .rohan-nav-link:hover,
  .rohan-nav .rohan-nav-link.active,
  .rohan-nav .rohan-nav-item:hover,
  .rohan-nav .rohan-nav-item.active {
    background: rgba(229, 182, 107, 0.16);
    border-color: rgba(229, 182, 107, 0.48);
  }

  .rohan-nav .rohan-nav-link::after,
  .rohan-nav .rohan-nav-item::after {
    display: none;
  }

  .rohan-nav .rohan-nav-text {
    font-size: 14px;
  }

  .rohan-nav .rohan-nav-hangul {
    font-size: 12.5px;
    margin-bottom: 0;
    opacity: 0.75;
  }

  /* Support Error 3D Pet Col Reset when pet is stacked/hidden */
  .rohan-support-error-content-col.has-pet-offset {
    margin: 0 auto !important;
  }
}

@keyframes rohanMobileNavSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   2. TABLET PORTRAIT & SUBPAGE HEROES (<= 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Subpage Hero & Diamond Divider: Prevent R-diamond from colliding with page title */
  .rohan-subpage-hero {
    height: 190px;
    padding-top: 38px;
    margin-bottom: 66px !important;
  }

  .rohan-subpage-hero-logo {
    height: 102px;
  }

  .rohan-subpage-divider-gem,
  .rohan-subpage-divider-gem img {
    width: 90px !important;
    height: 78px !important;
  }

  .rohan-subpage-divider-gem .rohan-rmain-canvas {
    width: 106px !important;
    height: 106px !important;
  }

  /* Download Hero Card Stacking */
  .rohan-dl-hero-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .rohan-dl-hero-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .rohan-dl-hero-meta {
    justify-content: center;
  }

  .rohan-dl-hero-right {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   3. MOBILE & PHABLET VIEWPORTS (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent any accidental horizontal page scroll while preserving sticky elements */
  html,
  body {
    overflow-x: clip;
    max-width: 100vw;
  }

  /* Topbar Compact Sizing */
  .rohan-topbar-inner {
    height: 64px;
    padding: 0 12px;
    gap: 8px;
  }

  .rohan-brand-logo {
    height: 44px;
  }

  .rohan-actions {
    gap: 8px;
  }

  .rohan-lang-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  .rohan-auth-btn {
    padding: 7px 12px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* Homepage Hero Section & Flank Action Buttons (Fix button width & padding) */
  .rohan-hero-section {
    min-height: 420px;
    padding-top: 84px;
    padding-bottom: 20px;
  }

  .rohan-hero-content {
    margin: 0 auto;
    padding: 0 12px;
  }

  .rohan-hero-emblem {
    padding: 6px 14px;
    gap: 6px;
    margin-bottom: 24px;
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: center;
  }

  .rohan-emblem-text {
    font-size: 10.5px;
    letter-spacing: 0.5px;
  }

  .rohan-hangul-rune {
    font-size: 13px;
  }

  .rohan-hero-flank-bar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    margin: auto auto 8px;
  }

  .rohan-flank-left,
  .rohan-flank-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .rohan-btn-download,
  .rohan-btn-register {
    width: 280px !important;
    max-width: calc(100vw - 36px) !important;
    height: 54px !important;
    padding: 0 20px !important;
    gap: 10px !important;
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
  }

  .rohan-btn-download i,
  .rohan-btn-register i {
    margin-right: 2px;
    flex-shrink: 0;
  }

  /* Stats Ribbon: Clean 2x2 Grid with exact class names (.rohan-stat-icon-wrap, .rohan-stat-val, .rohan-stat-lbl) */
  .rohan-page-wrapper {
    padding: 0 14px 60px;
  }

  .rohan-stats-ribbon-container {
    margin: 6px auto 28px !important;
    padding: 0 !important;
  }

  .rohan-stats-ribbon {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    padding: 14px 12px !important;
    align-items: center !important;
  }

  .rohan-stat-divider {
    display: none !important;
  }

  .rohan-stat-item {
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .rohan-stat-hangul {
    font-size: 16px !important;
    flex-shrink: 0;
  }

  .rohan-stat-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  .rohan-stat-info {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .rohan-stat-val {
    font-size: 14px !important;
    white-space: nowrap;
    line-height: 1.2 !important;
  }

  .rohan-stat-lbl {
    font-size: 9.5px !important;
    letter-spacing: 0.25px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Subpage Header & Diamond Divider Alignment on Mobile */
  .rohan-subpage-hero {
    height: 170px;
    padding-top: 34px;
    margin-bottom: 62px !important;
  }

  .rohan-subpage-wrap {
    padding: 0 12px 50px !important;
  }

  .rohan-art-header {
    align-items: center;
    text-align: center;
    margin-bottom: 22px;
  }

  .rohan-art-title-row {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .rohan-art-korean {
    font-size: 30px;
  }

  .rohan-art-title {
    font-size: 21px;
  }

  .rohan-art-divider-line {
    justify-content: center;
  }

  .rohan-art-divider-img {
    height: 48px;
    max-width: 210px;
  }

  .rohan-art-desc {
    font-size: 13.5px;
    text-align: center;
  }

  /* Section Headers & Art Pill Bars (Preserve rotated diamond geometry while allowing label wrap) */
  .rohan-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .rohan-section-hangul {
    font-size: 22px;
  }

  .rohan-section-title {
    font-size: 17.5px;
    line-height: 1.3;
  }

  .rohan-art-pill-bar {
    height: auto !important;
    min-height: 44px;
    max-width: 100%;
    padding: 0 !important;
    align-items: center;
  }

  .rohan-art-diamond-wrap {
    height: 44px;
  }

  .rohan-art-bar-body {
    min-height: 44px;
    padding: 6px 14px 6px 28px;
    max-width: calc(100% - 16px);
  }

  .rohan-art-bar-label {
    white-space: normal;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .rohan-art-section-heading {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Subpage Containers & Nested Padding Optimization */
  .rohan-main-section,
  .rohan-subpage-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rohan-page-box,
  .rohan-card-body,
  .rohan-art-form-card,
  .rohan-register-form-col,
  .rohan-support-error-body {
    padding: 18px 14px !important;
  }

  .rohan-art-advisory-content {
    padding: 18px 14px !important;
  }

  /* Market Search Box & Talisman Stage */
  .rohan-market-search-box {
    min-width: 0 !important;
    width: 100% !important;
  }

  .rohan-market-talisman-showcase {
    height: 230px !important;
    max-width: 320px !important;
  }

  .tali {
    width: 82px;
    height: 82px;
  }

  .rohan-tali-char-img {
    height: 180px;
    max-width: 96px;
  }

  /* Homepage & Subpage Ranking Tables + Filter Bar */
  .rohan-ranking-table-card .rohan-card-body {
    padding: 10px 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rohan-ranking-table {
    min-width: 520px;
  }

  .rohan-ranking-filter-form {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  .rohan-ranking-filter-form input,
  .rohan-ranking-filter-form select,
  .rohan-ranking-filter-form button {
    flex: 1 1 auto;
    min-width: 120px;
  }

  /* Download Page Tables & Heading Bars */
  .rohan-dl-heading-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .rohan-dl-table {
    min-width: 520px;
  }

  /* Support Error Actions & Pet Hide on Mobile */
  .rohan-support-pet-col,
  .rohan-register-stage-col {
    display: none !important;
  }

  .rohan-support-error-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .rohan-support-error-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   4. SMARTPHONE PORTRAIT VIEWPORTS (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Ultra-clean Topbar for 360px-480px screens */
  .rohan-topbar-inner {
    height: 60px;
    padding: 0 10px;
    gap: 6px;
  }

  .rohan-brand-logo {
    height: 38px;
  }

  .rohan-lang-btn {
    padding: 5px 8px;
    font-size: 10.5px;
    gap: 4px;
  }

  .rohan-auth-btn {
    padding: 6px 10px;
    font-size: 10.5px;
  }

  .rohan-hamburger {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  /* Hero & Stats Ribbon on Portrait Phones */
  .rohan-hero-section {
    min-height: 390px;
    padding-top: 76px;
    padding-bottom: 18px;
  }

  .rohan-btn-download,
  .rohan-btn-register {
    width: 265px !important;
    height: 50px !important;
    font-size: 13.5px !important;
  }

  .rohan-stats-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
    padding: 12px 8px !important;
  }

  .rohan-stat-item {
    gap: 5px !important;
  }

  .rohan-stat-hangul {
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    flex-shrink: 0;
  }

  .rohan-stat-icon-wrap {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  .rohan-stat-val {
    font-size: 12.5px !important;
  }

  .rohan-stat-lbl {
    font-size: 8.5px !important;
  }

  /* 3D Podium Warrior Nameplate Positions on Narrow Portrait (Keep translateX(-50%) centered on left %) */
  .has-3d-podium .rohan-carousel-warrior.slot-back-left {
    left: 22% !important;
    transform: translateX(-50%) scale(0.80) !important;
  }

  .has-3d-podium .rohan-carousel-warrior.slot-back-right {
    left: 78% !important;
    transform: translateX(-50%) scale(0.80) !important;
  }

  /* Talisman Showcase Compact Mobile Sizing */
  .rohan-market-talisman-showcase {
    height: 205px !important;
    max-width: 280px !important;
  }

  .tali {
    width: 70px;
    height: 70px;
  }

  .rohan-tali-char-img {
    height: 155px;
    max-width: 85px;
  }

  .rohan-tali-glow-disc {
    width: 190px;
    height: 190px;
  }

  /* Tighter Nested Card Paddings on Small Phones */
  .rohan-page-box,
  .rohan-card-body,
  .rohan-art-form-card,
  .rohan-register-form-col,
  .rohan-support-error-body,
  .rohan-art-advisory-content {
    padding: 16px 12px !important;
  }

  .rohan-modal-box {
    padding: 20px 14px !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
  }

  /* Prevent Wide Inline Button Padding Overflow */
  .rohan-art-vote-btn {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 38px;
  }

  /* Responsive Google reCAPTCHA v2 Scaling for Narrow Containers */
  .g-recaptcha {
    transform: scale(0.86);
    transform-origin: center center;
  }
}

/* --------------------------------------------------------------------------
   5. ULTRA-NARROW VIEWPORTS (<= 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .rohan-brand-logo {
    height: 33px;
  }

  .rohan-stats-ribbon {
    grid-template-columns: 1fr !important;
  }

  .rohan-stat-hangul {
    display: inline-block !important;
  }

  .has-3d-podium .rohan-carousel-warrior.slot-back-left {
    left: 24% !important;
    transform: translateX(-50%) scale(0.74) !important;
  }

  .has-3d-podium .rohan-carousel-warrior.slot-back-right {
    left: 76% !important;
    transform: translateX(-50%) scale(0.74) !important;
  }

  .g-recaptcha {
    transform: scale(0.77);
    transform-origin: center center;
  }
}