:root {
      /* CHANGE THIS SINGLE HEX VALUE TO UPDATE THE ENTIRE PAGE BACKGROUND COLOR */
      --page-bg-color: #08060c;
      --gold-light: #fae19c;
      --gold-base: #d4af37;
      --gold-dark: #8c6d23;
      --parchment-bg: #e3cca8;

      /* Seamless Inner Filigree Gusset for Dark Panels */
      --filigree-corner-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3ClinearGradient id='cg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffe699'/%3E%3Cstop offset='50%25' stop-color='%23c8963e'/%3E%3Cstop offset='100%25' stop-color='%237d5516'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0 15.5 L 3.8 15.5 L 3.8 9.8 L 7.2 9.8 L 7.2 7.2 L 9.8 7.2 L 9.8 3.8 L 15.5 3.8 L 15.5 0' fill='none' stroke='url(%23cg)' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M 3.2 9.8 L 3.2 6 A 2.8 2.8 0 0 1 6 3.2 L 9.8 3.2' fill='none' stroke='url(%23cg)' stroke-width='1.35'/%3E%3Ccircle cx='6' cy='6' r='1.4' fill='%23f5cb70'/%3E%3Ccircle cx='12' cy='2' r='0.95' fill='%23e5b554'/%3E%3Ccircle cx='2' cy='12' r='0.95' fill='%23e5b554'/%3E%3C/svg%3E");

      /* Seamless Inner Filigree Gusset for Parchment Cards */
      --filigree-corner-parchment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M 2 16 L 6.5 16 L 6.5 10 L 10 10 L 10 6.5 L 16 6.5 L 16 2' fill='none' stroke='%23523412' stroke-width='1.45' stroke-linejoin='round'/%3E%3Cpath d='M 2.5 16 L 2.5 6.2 A 3.7 3.7 0 0 1 6.2 2.5 L 16 2.5' fill='%23634119' fill-opacity='0.28' stroke='%23472c0e' stroke-width='1.2'/%3E%3Ccircle cx='6.2' cy='6.2' r='1.5' fill='%23472c0e'/%3E%3Ccircle cx='11.2' cy='4.4' r='0.95' fill='%23472c0e'/%3E%3Ccircle cx='4.4' cy='11.2' r='0.95' fill='%23472c0e'/%3E%3C/svg%3E");

      /* Organic SVG Fractal Noise Paper Grain for 1:1 Aged Parchment Texture (Matches image_d5b1db.png & image_d5b1be.png) */
      --parchment-grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='pnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='11' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.26  0 0 0 0 0.09  0 0 0 0.14 0' in='noise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pnoise)'/%3E%3C/svg%3E");
    }

    * {
      box-sizing: border-box;
    }

    body {
      position: relative;
      background-color: var(--page-bg-color);
      color: #ded6c9;
      font-family: 'Crimson Pro', Georgia, serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* Custom Gold Scrollbar */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #0d0a12; }
    ::-webkit-scrollbar-thumb { background: #5c431b; border-radius: 4px; border: 1px solid #c5a059; }

    /* Main Responsive Container */
    .page-container {
      max-width: 1360px;
      width: 95%;
      margin: 0 auto;
      position: relative;
      z-index: 5;
    }

    /* Typography Helpers */
    .font-cinzel { font-family: 'Cinzel', serif; }
    .font-cinzel-dec { font-family: 'Cinzel Decorative', serif; }
    .font-marcellus { font-family: 'Marcellus', serif; }
    .font-crimson { font-family: 'Crimson Pro', Georgia, serif; }
    .font-charm { font-family: 'Charm', cursive; }

    .text-gold-metallic {
      background: linear-gradient(180deg, #fff5cc 0%, #e5bc54 45%, #9e6e14 82%, #fce08b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.95));
    }

    /* ==========================================================================
       1:1 SHIMMERING METALLIC BORDERS & SEAMLESS INNER FILIGREE CORNERS
       ========================================================================== */
    .ornate-border {
      position: relative;
      border-radius: 8px;
      border: 1.5px solid transparent;
      background:
        /* Inner dark obsidian-bronze card surface */
        radial-gradient(ellipse 80% 45% at 50% 0%, rgba(215, 155, 60, 0.1) 0%, transparent 70%) padding-box,
        linear-gradient(180deg, #16100b 0%, #0d0906 58%, #080504 100%) padding-box,
        /* Shimmering non-constant metallic gold border with specular light spots */
        radial-gradient(ellipse 40% 15% at 50% 0%, #fff6c8 0%, transparent 100%) border-box,
        radial-gradient(ellipse 40% 15% at 50% 100%, #ffdf85 0%, transparent 100%) border-box,
        linear-gradient(135deg, #ecc366 0%, #7d5516 22%, #d8a444 48%, #5e3d0c 74%, #f0c768 100%) border-box;
      box-shadow:
        0 0 0 1px #050302,
        inset 0 0 22px rgba(0, 0, 0, 0.95),
        0 10px 26px rgba(0, 0, 0, 0.92);
    }

    /* Keep internal content above borders */
    .ornate-border > *:not(.ornate-corner-tr):not(.ornate-corner-bl) {
      position: relative;
      z-index: 2;
    }

    /* 4 Seamless Inner Filigree Corner Ornaments */
    .ornate-border::before,
    .ornate-border::after,
    .ornate-border > .ornate-corner-tr,
    .ornate-border > .ornate-corner-bl {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      background-image: var(--filigree-corner-dark);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 25;
    }

    .ornate-border::before {
      top: 0;
      left: 0;
    }

    .ornate-border::after {
      bottom: 0;
      right: 0;
      transform: rotate(180deg);
    }

    .ornate-border > .ornate-corner-tr {
      top: 0;
      right: 0;
      transform: scaleX(-1);
    }

    .ornate-border > .ornate-corner-bl {
      bottom: 0;
      left: 0;
      transform: scaleY(-1);
    }

    /* ==========================================================================
       3D TACTILE FANTASY BUTTONS
       ========================================================================== */
    .btn-emerald-3d {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(330px, 25vw, 385px);
      height: clamp(72px, 5.5vw, 85px);
      padding: 0;
      background: transparent url('../images/evo/register_btn.png?v=5') no-repeat center / 100% 100%;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 20px rgba(35, 185, 75, 0.55));
      color: #ffffff;
      text-decoration: none;
      cursor: pointer;
      transition: filter 0.2s ease, transform 0.15s ease;
    }

    .btn-emerald-3d:hover {
      filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 28px rgba(46, 204, 113, 0.8)) brightness(1.12);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .btn-emerald-3d:active {
      transform: translateY(1px);
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(46, 204, 113, 0.5)) brightness(0.95);
    }

    /* 1:1 Login Button ("Autentificare") */
    .btn-login-3d {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 9px 16px;
      border-radius: 5px;
      border: 1px solid transparent;
      background:
        radial-gradient(ellipse 68% 55% at 50% 0%, rgba(238, 185, 88, 0.45) 0%, transparent 70%) padding-box,
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(215, 152, 52, 0.35) 0%, transparent 70%) padding-box,
        linear-gradient(180deg, #6b461b 0%, #3d240c 52%, #241305 100%) padding-box,
        radial-gradient(ellipse 45% 25% at 50% 0%, #fff3b8 0%, transparent 100%) border-box,
        radial-gradient(ellipse 45% 25% at 50% 100%, #ffe28a 0%, transparent 100%) border-box,
        linear-gradient(180deg, #d8a648 0%, #7c5418 50%, #c89438 100%) border-box;
      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.85),
        inset 0 1px 1px rgba(255, 230, 165, 0.5),
        inset 0 -1px 1px rgba(235, 178, 72, 0.35);
      color: #f7ede0;
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 1.28rem;
      letter-spacing: 0.01em;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.18s ease;
      text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
    }

    .btn-login-3d:hover {
      filter: brightness(1.15);
      color: #ffffff;
      box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.85),
        0 0 18px rgba(238, 185, 88, 0.45),
        inset 0 1px 1px rgba(255, 230, 165, 0.6),
        inset 0 -1px 1px rgba(235, 178, 72, 0.4);
    }

    /* 1:1 Secondary Bronze Button ("Citește patch notes", "Vezi toate evenimentele", "Vezi oferta") */
    .btn-bronze-3d {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 7.5px 16px;
      border-radius: 5px;
      border: 1px solid transparent;
      background:
        radial-gradient(ellipse 55% 50% at 50% 0%, rgba(220, 162, 68, 0.34) 0%, transparent 70%) padding-box,
        radial-gradient(ellipse 50% 42% at 50% 100%, rgba(205, 145, 50, 0.26) 0%, transparent 70%) padding-box,
        linear-gradient(180deg, #3b2612 0%, #221409 54%, #150c05 100%) padding-box,
        radial-gradient(ellipse 40% 25% at 50% 0%, #ffeaa0 0%, transparent 100%) border-box,
        radial-gradient(ellipse 40% 25% at 50% 100%, #f5cb70 0%, transparent 100%) border-box,
        linear-gradient(180deg, #b88a3c 0%, #634214 50%, #a87b30 100%) border-box;
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 224, 150, 0.38),
        inset 0 -1px 0 rgba(225, 170, 70, 0.28);
      color: #efe2cc;
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 1.02rem;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.18s ease;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    }

    .btn-bronze-3d:hover {
      filter: brightness(1.16);
      color: #ffffff;
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.75),
        0 0 14px rgba(220, 162, 68, 0.4),
        inset 0 1px 0 rgba(255, 224, 150, 0.45),
        inset 0 -1px 0 rgba(225, 170, 70, 0.35);
    }

    /* 1:1 Ruby Red Download Button (Bigger height, soft natural ruby glow, centered content) */
    .btn-ruby-3d {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      min-height: 72px;
      padding: 14px 20px;
      border-radius: 6px;
      border: 1px solid rgba(197, 140, 60, 0.4);
      background:
        radial-gradient(ellipse 85% 65% at 50% 12%, rgba(255, 75, 65, 0.65) 0%, transparent 68%),
        linear-gradient(180deg, #b81c17 0%, #7d0f0b 52%, #4a0705 100%);
      box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(200, 30, 20, 0.42),
        inset 0 1px 1px rgba(255, 190, 180, 0.55),
        inset 0 -1px 1px rgba(0, 0, 0, 0.65);
      color: #ffffff;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.22rem;
      letter-spacing: 0.035em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    }

    .btn-ruby-3d:hover {
      filter: brightness(1.12);
      color: #ffffff;
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.95),
        0 0 28px rgba(225, 45, 30, 0.65),
        inset 0 1px 1px rgba(255, 210, 200, 0.7),
        inset 0 -1px 1px rgba(0, 0, 0, 0.75);
    }

    .btn-amber-3d {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      min-height: 64px;
      padding: 12px 18px;
      border-radius: 6px;
      border: 1px solid rgba(245, 180, 65, 0.55);
      background:
        radial-gradient(ellipse 85% 65% at 50% 12%, rgba(255, 235, 130, 0.72) 0%, transparent 68%),
        linear-gradient(180deg, #cf7d15 0%, #8c4a06 52%, #4f2502 100%);
      box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.9),
        0 0 22px rgba(220, 135, 20, 0.4),
        inset 0 1px 1px rgba(255, 245, 180, 0.75),
        inset 0 -1px 1px rgba(0, 0, 0, 0.65);
      color: #ffffff;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: 0.035em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    }

    .btn-amber-3d:hover {
      filter: brightness(1.13);
      color: #ffffff;
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.95),
        0 0 28px rgba(245, 155, 25, 0.65),
        inset 0 1px 1px rgba(255, 250, 200, 0.85),
        inset 0 -1px 1px rgba(0, 0, 0, 0.75);
      transform: translateY(-1px);
    }

    /* ==========================================================================
       HEADER & HERO SECTION (IMAGE PLACEHOLDER + DESKTOP MP4 VIDEO)
       ========================================================================== */
    .hero-header {
      position: relative;
      width: 100%;
      height: clamp(450px, 36.5vw, 680px);
      margin: 0 auto;
      overflow: hidden;
      background: var(--page-bg-color) url('../images/evo/bg-top.jpeg') no-repeat center top / cover;
    }

    /* Static Header Image Placeholder */
    .hero-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      z-index: 1;
    }

    /* Animated MP4 Header Video (Displayed on Desktop >= 992px, Hidden on Mobile/Tablet) */
    .hero-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 2;
      pointer-events: none;
    }

    /* Soft Vignette Fades into --page-bg-color */
    .hero-vignette-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 80%, rgba(8, 6, 12, 0.85) 100%);
    }


    /* 1:1 Top-Right Stats Bar Pinned to Max Right Outside Container */
    .hero-top-bar-strip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 42px;
      z-index: 9995;
      padding: 0 28px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 24px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 45%,
        rgba(5, 8, 14, 0.68) 72%,
        rgba(4, 6, 11, 0.88) 100%
      );
      /* border-bottom: 1px solid rgba(255, 255, 255, 0.04); */
    }

    .online-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.82rem;
      color: #d8d3c8;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-shadow: 0 2px 4px #000;
      transform: translateY(2px);
    }

    /* 1:1 Live Pulsing Green Dot (Matches Statistici Pulse) */
    .green-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #39e365;
      box-shadow: 0 0 6px #39e365, 0 0 2px #fff;
      display: inline-block;
      flex-shrink: 0;
      animation: statPulseDot 2s infinite ease-in-out;
    }

    .online-count-num {
      color: #39d34c;
      font-family: 'Cinzel', serif;
      font-weight: 800;
      text-shadow: 0 0 10px rgba(57, 211, 76, 0.35), 0 2px 3px #000;
      font-variant-numeric: tabular-nums;
      display: inline-block;
      text-align: left;
    }

    .online-count-num.stat-odometer {
      color: #39d34c !important;
      font-size: inherit;
      display: inline-block;
      text-align: left;
    }

    .top-auth-links {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 0.98rem;
      text-shadow: 0 2px 4px #000;
    }

    .top-auth-links a {
      color: #e4dac9;
      text-decoration: none;
      transition: color 0.2s;
      cursor: pointer;
    }

    .top-auth-links a:hover {
      color: var(--gold-light);
    }

    /* Top Bar Right Group & Language Dropdown */
    .hero-top-right-group {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .top-bar-divider {
      color: rgba(255, 255, 255, 0.2);
      font-size: 0.85rem;
      user-select: none;
    }

    .lang-selector-dropdown {
      position: relative;
    }

    .lang-trigger-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(18, 12, 6, 0.75);
      border: 1px solid rgba(212, 168, 83, 0.45);
      border-radius: 4px;
      padding: 3px 9px;
      color: #ede3d2;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.76rem;
      letter-spacing: 0.05em;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition: all 0.2s ease;
      user-select: none;
    }

    .lang-trigger-btn:hover,
    .lang-selector-dropdown.open .lang-trigger-btn {
      background: rgba(35, 22, 10, 0.92);
      border-color: #d4a853;
      color: #fff;
      box-shadow: 0 0 10px rgba(212, 168, 83, 0.45);
    }

    .lang-flag-current {
      width: 18px;
      height: 12px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      display: block;
    }

    .lang-chevron {
      font-size: 0.65rem;
      color: #c8a358;
      transition: transform 0.25s ease;
    }

    .lang-selector-dropdown.open .lang-chevron {
      transform: rotate(180deg);
    }

    .lang-dropdown-menu {
      position: absolute;
      top: calc(100% + 7px);
      right: 0;
      width: 320px;
      max-width: 92vw;
      background: linear-gradient(180deg, rgba(20, 14, 8, 0.98) 0%, rgba(10, 7, 4, 0.99) 100%);
      border: 1.5px solid #a87938;
      border-radius: 6px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 220, 140, 0.35);
      padding: 6px 0;
      z-index: 10006;
      display: none;
      backdrop-filter: blur(8px);
      animation: langFadeIn 0.18s ease-out;
    }

    .lang-selector-dropdown.open .lang-dropdown-menu {
      display: block;
    }

    @keyframes langFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .lang-dropdown-header {
      padding: 5px 14px 6px 14px;
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #c9a56d;
      border-bottom: 1px solid rgba(168, 121, 56, 0.3);
      margin-bottom: 4px;
    }

    .lang-dropdown-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 4px;
      max-height: min(420px, calc(80vh - 60px));
      overflow-y: auto;
      padding: 4px 6px;
    }

    .lang-dropdown-list::-webkit-scrollbar {
      width: 4px;
    }
    .lang-dropdown-list::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
    }
    .lang-dropdown-list::-webkit-scrollbar-thumb {
      background: #a87938;
      border-radius: 3px;
    }

    .lang-dropdown-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 8px;
      color: #dfd2bc;
      font-size: 0.88rem;
      font-family: 'Crimson Pro', Georgia, serif;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.16s ease;
    }

    .lang-dropdown-item:hover {
      background: rgba(184, 135, 56, 0.22);
      color: #fff;
      padding-left: 11px;
    }

    .lang-dropdown-item.active {
      background: rgba(184, 135, 56, 0.35);
      color: #ffd67a;
      font-weight: 700;
    }

    .lang-item-flag {
      width: 18px;
      height: 12px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      flex-shrink: 0;
    }

    .lang-item-name {
      flex: 1;
      white-space: nowrap;
    }

    .lang-check-icon {
      color: #52e379;
      font-size: 0.72rem;
      margin-left: auto;
    }

    /* Flag Buttons (Used in Mobile Drawer) */
    .footer-flag-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(16, 11, 6, 0.7);
      border: 1px solid rgba(168, 121, 56, 0.4);
      border-radius: 4px;
      padding: 3px 8px;
      color: #d8c8ac;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .footer-flag-btn:hover {
      background: rgba(45, 30, 15, 0.95);
      border-color: #d4a853;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    }

    .footer-flag-btn.active {
      border-color: #4ade80;
      background: linear-gradient(180deg, rgba(35, 80, 45, 0.6) 0%, rgba(15, 45, 22, 0.75) 100%);
      color: #e8f5e9;
      box-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
    }

    .footer-flag-btn img {
      width: 16px;
      height: 11px;
      object-fit: cover;
      border-radius: 1.5px;
    }

    /* Mobile Drawer Language Row */
    .mobile-lang-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 14px;
      background: rgba(15, 10, 5, 0.6);
      border-radius: 6px;
      border: 1px solid rgba(168, 121, 56, 0.3);
      margin: 10px 12px 6px 12px;
      justify-content: center;
    }

    .hero-ui-layer {
      position: relative;
      z-index: 6;
      height: 100%;
      pointer-events: none;
    }

    .hero-bottom-cta {
      position: absolute;
      top: min(calc(24.4vw + 20px), 489px);
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      pointer-events: auto;
    }

    .hero-subtitle-text {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: clamp(0.9rem, 1.1vw, 1.12rem);
      color: #ebd3a5;
      letter-spacing: 0.1em;
      text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, 0.95);
      margin-bottom: 10px;
    }

    /* ==========================================================================
       4. 1:1 ORNATE NAVBAR
       ========================================================================== */
    .navbar-wrapper {
      margin-top: clamp(-36px, -2.2vw, -16px);
      position: relative;
      z-index: 20;
    }

    .ornate-navbar {
      border-radius: 8px;
      border: 1.5px solid transparent;
      background:
        linear-gradient(180deg, #16100b 0%, #0d0906 50%, #070503 100%) padding-box,
        radial-gradient(ellipse 35% 20% at 12% 100%, #ffe899 0%, transparent 100%) border-box,
        radial-gradient(ellipse 45% 20% at 50% 0%, #ffe694 0%, transparent 100%) border-box,
        linear-gradient(90deg, #d8a648 0%, #7d5618 25%, #cfa042 50%, #7d5618 75%, #d8a648 100%) border-box;
      box-shadow:
        0 0 0 1px #050302,
        inset 0 1px 0 rgba(255, 225, 150, 0.22),
        inset 0 -1px 0 rgba(195, 145, 55, 0.2),
        0 12px 28px rgba(0, 0, 0, 0.95);
    }

    .desktop-nav-bar {
      height: 58px;
      padding: 0;
      align-items: stretch;
      justify-content: space-between;
      width: 100%;
    }

    .desktop-nav-item {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      height: 100%;
      white-space: nowrap;
      padding: 0 14px;
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 1.12rem;
      color: #e2d4bc;
      text-decoration: none;
      transition: all 0.2s ease;
      position: relative;
      cursor: pointer;
      text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
    }

    /* Subtle Vertical Gradient Divider Between Navbar Items */
    .desktop-nav-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 22%;
      height: 56%;
      width: 1px;
      background: linear-gradient(180deg, transparent 0%, rgba(195, 150, 68, 0.38) 50%, transparent 100%);
      pointer-events: none;
    }

    /* Full-Scale 25px 3D Golden Icons in Navbar */
    .nav-gold-svg {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95));
    }

    .desktop-nav-item:hover:not(.active) {
      color: #ffffff;
      background: linear-gradient(180deg, rgba(88, 57, 24, 0.35) 0%, rgba(52, 33, 17, 0.2) 45%, rgba(20, 13, 6, 0.1) 100%);
    }

    /* 1:1 Active Tab Warm Amber-Bronze Gradient with Golden Top Bevel & Crisp Divider */
    .desktop-nav-item.active {
      color: #fae8be;
      font-weight: 700;
      background: linear-gradient(180deg, #5c3b1a 0%, #442b15 20%, #342111 45%, #1e130a 78%, #140d07 100%);
      box-shadow:
        inset 0 1.5px 0 rgba(255, 222, 125, 0.45),
        inset 0 10px 18px rgba(175, 110, 35, 0.28),
        1px 0 0 rgba(0, 0, 0, 0.85);
      border-right: 1px solid rgba(195, 142, 58, 0.45);
      text-shadow: 0 1px 2px #000, 0 2px 6px rgba(0, 0, 0, 0.95);
      z-index: 2;
    }

    .desktop-nav-item:first-child.active {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    .desktop-nav-item:last-child.active {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border-right: none;
    }

    .desktop-nav-item.active .nav-gold-svg {
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95));
      transform: none;
    }

    .desktop-nav-item.active::after {
      display: none;
    }

    /* Dropdown on Comunitate & Clasament */
    .nav-dropdown-holder {
      position: relative;
    }

    .nav-dropdown-trigger-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      height: 100%;
      width: 100%;
      color: inherit;
      text-decoration: none;
    }

    .nav-dropdown-holder:hover {
      color: #fae8be;
      background: linear-gradient(180deg, #5c3b1a 0%, #442b15 20%, #342111 45%, #1e130a 78%, #140d07 100%);
      box-shadow:
        inset 0 1.5px 0 rgba(255, 222, 125, 0.45),
        inset 0 10px 18px rgba(175, 110, 35, 0.28);
    }

    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: linear-gradient(180deg, #1c1209 0%, #0d0805 100%);
      border: 1.5px solid #c89e46;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.96), inset 0 1px 0 rgba(255, 225, 140, 0.25);
      padding: 6px 0;
      display: none;
      z-index: 50;
      overflow: hidden;
    }

    .nav-dropdown-holder:hover .nav-dropdown-menu {
      display: block;
    }

    .nav-dropdown-menu a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 18px;
      font-family: 'Cinzel', serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #ead4ab;
      text-decoration: none;
      position: relative;
      transition: all 0.2s ease;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
      border-left: 3px solid transparent;
    }

    .nav-dropdown-menu a:not(:last-child) {
      border-bottom: 1px solid rgba(195, 145, 60, 0.14);
    }

    .nav-dropdown-menu a .nav-gold-svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95));
      transition: transform 0.2s ease;
    }

    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a.active {
      color: #fae8be;
      background: linear-gradient(180deg, #5c3b1a 0%, #442b15 20%, #342111 45%, #1e130a 78%, #140d07 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 222, 125, 0.42),
        inset 0 6px 14px rgba(175, 110, 35, 0.26);
      border-left: 3px solid #f5c556;
      text-shadow: 0 1px 2px #000, 0 2px 6px rgba(0, 0, 0, 0.95);
    }

    .nav-dropdown-menu a:hover .nav-gold-svg,
    .nav-dropdown-menu a.active .nav-gold-svg {
      transform: scale(1.12);
    }

    /* ==========================================================================
       MOBILE MENU & ORNATE FANTASY TOGGLE / MODAL CLOSE BUTTONS
       ========================================================================== */
    .ornate-icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 5px;
      border: 1px solid transparent;
      background:
        radial-gradient(ellipse 65% 50% at 50% 0%, rgba(235, 180, 82, 0.35) 0%, transparent 70%) padding-box,
        linear-gradient(180deg, #382411 0%, #1c1007 100%) padding-box,
        radial-gradient(circle at 50% 0%, #fff0b3 0%, transparent 75%) border-box,
        linear-gradient(135deg, #d4a246 0%, #6e4814 50%, #c89438 100%) border-box;
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 225, 150, 0.4);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: all 0.18s ease;
    }

    .ornate-icon-btn:hover {
      filter: brightness(1.25) drop-shadow(0 0 6px rgba(218, 165, 32, 0.6));
    }

    .mobile-nav-header {
      height: 54px;
      padding: 0 16px;
    }

    .mobile-nav-drawer {
      background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 152, 52, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #130d09 0%, #090604 100%);
      border-top: 1px solid rgba(197, 155, 78, 0.28);
      padding: 8px 12px 12px 12px;
    }

    .mobile-nav-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 5px;
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 1.08rem;
      color: #e2d4bc;
      text-decoration: none;
      border-bottom: 1px solid rgba(197, 155, 78, 0.1);
      transition: all 0.18s ease;
    }

    .mobile-nav-link:last-child {
      border-bottom: none;
    }

    .mobile-nav-link.active,
    .mobile-nav-link:hover {
      color: #fff6e0;
      background: linear-gradient(90deg, rgba(208, 145, 38, 0.32) 0%, rgba(120, 78, 18, 0.08) 65%, transparent 100%);
      border-left: 2px solid #f5c556;
    }

    /* ==========================================================================
       5. LEFT COLUMN: HERO BANNER SLIDER
       ========================================================================== */
    .slider-viewport {
      position: relative;
      width: 100%;
      height: 230px;
      overflow: hidden;
      border-radius: 6px;
      background: #120c0a;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
    }

    #sliderTrack {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .slider-slide {
      min-width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: #0d0907;
    }

    .slide-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 1;
      pointer-events: none;
      user-select: none;
    }

    .slide-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 75% 85% at 50% 50%, rgba(12, 8, 7, 0.45) 0%, rgba(12, 8, 7, 0.15) 55%, rgba(12, 8, 7, 0.35) 100%);
      z-index: 2;
      pointer-events: none;
    }

    #slide1Canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
    }

    .slide-caption-box {
      position: relative;
      z-index: 4;
      pointer-events: none;
      padding: 0 48px;
      margin-top: 6px;
    }

    .slide-sub-top {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.15rem;
      color: #f4dca9;
      letter-spacing: 0.08em;
      text-shadow: 0 2px 6px #000, 0 0 12px #000;
    }

    .slide-main-title {
      font-family: 'Cinzel', serif;
      font-weight: 900;
      font-size: clamp(1.45rem, 2.5vw, 2.25rem);
      letter-spacing: 0.04em;
      line-height: 1.15;
      margin: 2px 0;
    }

    .slide-sub-bot {
      font-family: 'Cinzel', serif;
      font-weight: 600;
      font-size: 0.82rem;
      color: #e2d2b5;
      letter-spacing: 0.09em;
      text-shadow: 0 2px 4px #000;
    }

    .slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle, #261a10 0%, #0d0906 100%);
      border: 1.5px solid #d4a64a;
      color: #f5df9e;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.2s;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), inset 0 0 6px rgba(212, 166, 74, 0.35);
    }

    .slider-arrow:hover {
      background: #362413;
      color: #ffffff;
      border-color: #fae19c;
    }

    .slider-arrow-left { left: 14px; }
    .slider-arrow-right { right: 14px; }

    .slider-dots-bar {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .slider-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.38);
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 0;
      cursor: pointer;
      transition: all 0.2s;
    }

    .slider-dot.active {
      background: #ffffff;
      box-shadow: 0 0 6px #ffffff;
      transform: scale(1.1);
    }

    /* ==========================================================================
       6. 1:1 AGED PARCHMENT CARDS (EXACT TEXTURE MATCH TO image_d5b1be.png & image_d5b1db.png)
       ========================================================================== */
    .parchment-paper {
      position: relative;
      border-radius: 8px;
      border: 1.5px solid transparent;
      background:
        /* 1. Organic SVG Paper Fiber & Mottled Cloud Texture */
        var(--parchment-grain-svg) padding-box,
        /* 2. Aged Corner Burn & Edge Vignettes (Matches dark-amber corners in image_d5b1be.png) */
        radial-gradient(ellipse 42% 38% at 0% 0%, rgba(122, 78, 28, 0.38) 0%, transparent 70%) padding-box,
        radial-gradient(ellipse 42% 38% at 100% 0%, rgba(122, 78, 28, 0.38) 0%, transparent 70%) padding-box,
        radial-gradient(ellipse 45% 42% at 0% 100%, rgba(110, 68, 22, 0.45) 0%, transparent 72%) padding-box,
        radial-gradient(ellipse 48% 45% at 100% 100%, rgba(105, 64, 20, 0.48) 0%, transparent 72%) padding-box,
        /* 3. Organic Warm Parchment Stains & Soft Center Illumination */
        radial-gradient(circle at 26% 24%, rgba(255, 248, 232, 0.55) 0%, transparent 45%) padding-box,
        radial-gradient(circle at 68% 36%, rgba(168, 118, 56, 0.18) 0%, transparent 42%) padding-box,
        radial-gradient(circle at 38% 78%, rgba(156, 106, 46, 0.22) 0%, transparent 48%) padding-box,
        radial-gradient(circle at 82% 68%, rgba(252, 242, 220, 0.38) 0%, transparent 44%) padding-box,
        /* 4. Base Warm Cream-to-Tan Aged Parchment Gradient */
        linear-gradient(180deg, #ecdcc2 0%, #e4cfa9 46%, #d9be93 82%, #ceb082 100%) padding-box,
        /* 5. Shimmering Outer Metallic Gold Border */
        linear-gradient(135deg, #ecc366 0%, #7d5516 25%, #d8a444 50%, #5e3d0c 75%, #f0c768 100%) border-box;
      color: #26180b;
      box-shadow:
        0 0 0 1px #0d0804,
        0 10px 26px rgba(0, 0, 0, 0.88),
        /* Inner dark-umber border line + soft burnt edge vignette around all 4 sides */
        inset 0 0 0 2.2px #4e3213,
        inset 0 0 18px rgba(88, 52, 16, 0.48),
        inset 0 0 42px rgba(118, 74, 26, 0.28);
    }

    /* Seamless Parchment Inner Filigree Corners */
    .parchment-paper::before,
    .parchment-paper::after,
    .parchment-paper > .ornate-corner-tr,
    .parchment-paper > .ornate-corner-bl {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background-image: var(--filigree-corner-parchment);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 25;
    }

    .parchment-paper::before {
      top: 0;
      left: 0;
    }

    .parchment-paper::after {
      bottom: 0;
      right: 0;
      transform: rotate(180deg);
    }

    .parchment-paper > .ornate-corner-tr {
      top: 0;
      right: 0;
      transform: scaleX(-1);
    }

    .parchment-paper > .ornate-corner-bl {
      bottom: 0;
      left: 0;
      transform: scaleY(-1);
    }

    /* Hybrid Cards have dark headers at top (so top corners use dark-panel gold filigree) and parchment at bottom */
    .hybrid-card::before,
    .hybrid-card > .ornate-corner-tr {
      background-image: var(--filigree-corner-dark);
      width: 22px;
      height: 22px;
    }

    .parchment-top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      margin-bottom: 14px;
      border-bottom: 1.5px solid rgba(95, 65, 30, 0.45);
      position: relative;
    }

    /* Dynamic Responsive Article Layout (Fluid wrap without hard-coded grid columns) */
    .news-article-body {
      position: relative;
    }

    .news-article-body::after {
      content: "";
      display: table;
      clear: both;
    }

    .news-artwork-frame {
      float: left;
      width: 320px;
      max-width: 45%;
      height: 215px;
      margin: 0 24px 14px 0;
      border: 2px solid #785322;
      border-radius: 6px;
      overflow: hidden;
      background: #140f0c;
      box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 225, 165, 0.35);
      position: relative;
    }

    .news-artwork-img,
    #newsArtCanvas {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.3s ease;
    }

    .news-artwork-frame:hover .news-artwork-img {
      transform: scale(1.04);
    }

    .news-features-list {
      list-style: none;
      padding: 0;
      margin: 0 0 14px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .news-footer-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      clear: both;
    }

    .check-square {
      width: 18px;
      height: 18px;
      border-radius: 3px;
      background: linear-gradient(180deg, #2d8038 0%, #195220 100%);
      border: 1px solid #103815;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.68rem;
      flex-shrink: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .news-footer-row {
      position: relative;
    }

    .parchment-signature-wrap {
      display: inline-block;
      margin-left: auto;
      user-select: none;
      pointer-events: none;
      filter: drop-shadow(0 1px 1px rgba(36, 22, 10, 0.25));
    }

    .parchment-signature-img {
      width: 190px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    @media (max-width: 576px) {
      .parchment-signature-img {
        width: 155px;
      }
    }

    /* 1:1 Hybrid Dark Header + Parchment Body Subcards (Matches image_d5b1db.png) */
    .hybrid-card {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .hybrid-dark-header {
      background:
        radial-gradient(ellipse 65% 70% at 25% 0%, rgba(215, 155, 60, 0.14) 0%, transparent 70%),
        linear-gradient(180deg, #22170e 0%, #140d07 60%, #0d0804 100%);
      padding: 11px 16px;
      border-bottom: 1.5px solid #9e7330;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
      box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.22),
        0 3px 8px rgba(45, 25, 8, 0.38);
      position: relative;
      z-index: 3;
    }

    /* Dedicated Parchment Texture & Inner Shadow under Dark Header for the 2 Bottom Sub-cards (image_d5b1db.png) */
    .hybrid-parchment-body {
      padding: 14px 18px 17px 18px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      background:
        var(--parchment-grain-svg),
        /* Top shadow cast by the dark header onto the parchment */
        linear-gradient(180deg, rgba(78, 46, 14, 0.28) 0%, transparent 18px),
        /* Corner burns & warm parchment stains */
        radial-gradient(ellipse 48% 42% at 0% 100%, rgba(105, 64, 20, 0.42) 0%, transparent 70%),
        radial-gradient(ellipse 48% 42% at 100% 100%, rgba(105, 64, 20, 0.42) 0%, transparent 70%),
        radial-gradient(circle at 30% 35%, rgba(255, 248, 232, 0.5) 0%, transparent 52%),
        radial-gradient(circle at 75% 65%, rgba(162, 110, 48, 0.22) 0%, transparent 50%),
        linear-gradient(180deg, #ebd9be 0%, #e1cba4 52%, #d1b386 100%);
      box-shadow:
        inset 0 3px 7px rgba(55, 32, 8, 0.32),
        inset 0 0 18px rgba(88, 52, 16, 0.42),
        inset 0 0 0 2.2px #4e3213;
    }

    /* Interactive Patch Notes Links & Arrow Hover Effect */
    .patch-notes-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .patch-note-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #24160a;
      font-size: 1.02rem;
      font-weight: 600;
      line-height: 1.3;
      padding: 2px 6px;
      border-radius: 4px;
      transition: background 0.2s ease;
      width: 100%;
      cursor: pointer;
    }

    .patch-note-arrow {
      font-size: 0.72rem;
      color: #472c14;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.22s ease, filter 0.22s ease;
    }

    .patch-note-text {
      color: #24160a;
      transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .patch-note-link:hover {
      background: rgba(135, 78, 24, 0.1);
    }

    .patch-note-link:hover .patch-note-arrow {
      transform: translateX(4px);
      color: #c0781e;
      filter: drop-shadow(0 0 3px rgba(212, 140, 30, 0.6));
    }

    .patch-note-link:hover .patch-note-text {
      color: #7a3508;
      transform: translateX(3px);
    }

    /* 1:1 ACTIV Pill Button */
    .badge-activ-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 75% 50% at 50% 0%, rgba(120, 235, 145, 0.38) 0%, transparent 70%),
        linear-gradient(180deg, #2b823c 0%, #195c26 52%, #0e3b17 100%);
      border: 1px solid #14491d;
      box-shadow:
        inset 0 1px 0 rgba(195, 255, 205, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.45);
      color: #e8f5e9;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.72rem;
      min-width: 76px;
      padding: 3px 6px;
      border-radius: 3.5px;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
      white-space: nowrap;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

    /* 1:1 STARTS IN (Yellow/Amber) Pill Button */
    .badge-start-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255, 240, 160, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #d8961d 0%, #ad6e0e 52%, #683d05 100%);
      border: 1px solid #6b4008;
      box-shadow:
        inset 0 1px 0 rgba(255, 245, 195, 0.65),
        0 1px 2px rgba(0, 0, 0, 0.45);
      color: #fff9eb;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.68rem;
      min-width: 76px;
      padding: 3px 6px;
      border-radius: 3.5px;
      letter-spacing: 0.03em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
      white-space: nowrap;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

    .event-row-icon {
      width: 28px;
      height: 28px;
      object-fit: contain;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
      flex-shrink: 0;
      image-rendering: -webkit-optimize-contrast;
      transition: transform 0.18s ease;
    }

    .event-row-icon:hover {
      transform: scale(1.12);
    }

    /* 1:1 Perfectly Aligned Active Events Grid Columns */
    .event-item-row {
      display: grid;
      grid-template-columns: 1fr 76px 98px;
      align-items: center;
      gap: 12px;
      padding: 1px 0;
    }

    .event-info-group {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: #24160a;
      font-weight: 700;
      font-size: 1.02rem;
    }

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

    .event-status-col {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .event-timer-col {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 98px;
      flex-shrink: 0;
    }

    .event-countdown-timer {
      color: #2b1b0e;
      font-size: 0.96rem;
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }

    /* ==========================================================================
       7. RIGHT SIDEBAR PANELS
       ========================================================================== */
    .sidebar-panel {
      padding: 13px 15px 15px 15px;
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 9px;
      margin-bottom: 11px;
      border-bottom: 1px solid rgba(197, 155, 78, 0.22);
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.96rem;
      color: #ebd2a4;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      position: relative;
    }

    /* Center-weighted golden glow on sidebar header divider line */
    .sidebar-header::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(197, 155, 78, 0.1) 0%, rgba(242, 198, 105, 0.65) 35%, rgba(197, 155, 78, 0.1) 100%);
    }

    /* Parchment Beveled Login Inputs */
    .fantasy-input-wrap {
      display: flex;
      align-items: center;
      background: linear-gradient(180deg, #dccbb0 0%, #c8b28d 100%);
      border: 1.5px solid #8c6b39;
      border-radius: 4px;
      padding: 6px 11px;
      margin-bottom: 8px;
      box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 -1px 0 rgba(255, 245, 220, 0.5),
        0 1px 0 rgba(255, 220, 150, 0.12);
    }

    .fantasy-input-wrap i {
      color: #2c1e10;
      width: 20px;
      text-align: center;
      font-size: 0.88rem;
      margin-right: 8px;
    }

    .fantasy-input-wrap input {
      border: none;
      background: transparent;
      width: 100%;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 0.94rem;
      font-weight: 500;
      color: #211409;
      outline: none;
    }

    .fantasy-input-wrap input::placeholder {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #634b32;
      opacity: 0.85;
      text-transform: none;
    }

    /* Dark reCAPTCHA Box */
    .recaptcha-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #0b0806;
      border: 1px solid rgba(197, 155, 78, 0.3);
      border-radius: 4px;
      padding: 7px 12px;
      margin: 9px 0 11px 0;
      cursor: pointer;
      user-select: none;
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
    }

    .recaptcha-check-box {
      width: 17px;
      height: 17px;
      background: #ede8de;
      border: 1px solid #888;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #1b6d26;
      font-size: 0.76rem;
    }

    /* Download Card Sub-links (Centered in their halves, no divider line) */
    .download-sublinks-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 2px;
      width: 100%;
    }

    .download-sublink-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #cfbe9e;
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 0.98rem;
      text-decoration: none;
      transition: color 0.18s ease;
      width: 100%;
      text-align: center;
      white-space: nowrap;
    }

    .download-sublink-item:hover {
      color: #ffffff;
    }

    .download-sublink-icon {
      color: #1d8cf8;
      font-size: 1.05rem;
      filter: drop-shadow(0 1px 4px rgba(29, 140, 248, 0.45));
    }

    /* ==========================================================================
       VOTE4BUFF SIDEBAR PANEL
       ========================================================================== */
    .vote4buff-banner-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      margin-bottom: 14px;
      border-radius: 6px;
      border: 1.5px solid rgba(163, 120, 65, 0.42);
      background:
        radial-gradient(ellipse at 15% 50%, rgba(255, 215, 120, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(42, 22, 8, 0.92) 0%, rgba(18, 9, 3, 0.98) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 3px 8px rgba(0, 0, 0, 0.4);
      transition: all 0.22s ease;
      cursor: pointer;
    }

    .vote4buff-banner-card:hover {
      border-color: #d4a04d;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 14px rgba(184, 135, 56, 0.35);
      transform: translateY(-1px);
    }

    .vote4buff-banner-art {
      width: 84px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 4px;
      border: 1px solid rgba(163, 120, 65, 0.35);
      overflow: hidden;
      padding: 2px;
    }

    .vote4buff-banner-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
      transition: transform 0.22s ease;
    }

    .vote4buff-banner-card:hover .vote4buff-banner-img {
      transform: scale(1.08);
    }

    .vote4buff-banner-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .vote4buff-banner-tag {
      display: inline-block;
      align-self: flex-start;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(220, 135, 20, 0.22);
      border: 1px solid rgba(220, 135, 20, 0.5);
      color: #ffd67a;
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .vote4buff-banner-headline {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.98rem;
      color: #fff4db;
      margin: 0;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .vote4buff-banner-sub {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 0.9rem;
      color: #c4ad8b;
      margin: 0;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .vote4buff-sublinks-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      margin-top: 13px;
      margin-bottom: 2px;
      width: 100%;
      gap: 8px;
    }

    .vote4buff-sublink-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #cfbe9e;
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 0.94rem;
      text-decoration: none;
      text-align: center;
      white-space: nowrap;
    }

    .vote4buff-sublink-icon-gold {
      color: #f59e0b;
      font-size: 0.95rem;
      filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.45));
    }

    .vote4buff-sublink-icon-cyan {
      color: #38bdf8;
      font-size: 0.95rem;
      filter: drop-shadow(0 1px 3px rgba(56, 189, 248, 0.45));
    }

    /* ==========================================================================
       STATISTICI SERVER PANEL & ODOMETER
       ========================================================================== */
    .statistics-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 4px;
      margin-bottom: 2px;
      border: 1px solid rgba(197, 155, 78, 0.18);
      background: rgba(10, 8, 7, 0.45);
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    }

    .stat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 12px;
      border-bottom: 1px solid rgba(197, 155, 78, 0.12);
      transition: background 0.18s ease;
    }

    .stat-row:nth-child(even) {
      background: rgba(255, 255, 255, 0.015);
    }

    .stat-row:nth-child(odd) {
      background: rgba(0, 0, 0, 0.22);
    }

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

    .stat-row:hover {
      background: rgba(212, 165, 75, 0.12);
    }

    .stat-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 0.98rem;
      font-weight: 600;
      color: #dfd5c4;
      letter-spacing: 0.2px;
    }

    .stat-icon {
      color: #c59b4e;
      font-size: 0.82rem;
      width: 15px;
      text-align: center;
      flex-shrink: 0;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
    }

    .stat-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #39e365;
      box-shadow: 0 0 7px #39e365, 0 0 2px #fff;
      display: inline-block;
      flex-shrink: 0;
      animation: statPulseDot 2s infinite ease-in-out;
    }

    @keyframes statPulseDot {
      0%, 100% {
        transform: scale(1);
        opacity: 0.85;
        box-shadow: 0 0 5px #39e365;
      }
      50% {
        transform: scale(1.3);
        opacity: 1;
        box-shadow: 0 0 10px #39e365, 0 0 4px #a3ffbd;
      }
    }

    .stat-value-box {
      text-align: right;
    }

    .stat-odometer {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.08rem;
      color: #ffd875;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(245, 207, 120, 0.3);
      font-variant-numeric: tabular-nums;
      transition: color 0.2s ease, text-shadow 0.2s ease;
    }

    .stat-online-highlight {
      color: #79f298;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(121, 242, 152, 0.45);
    }

    /* ==========================================================================
       1:1 CLASAMENT RANKING PANEL
       ========================================================================== */
    .clasament-tabs-box {
      background: #090604;
      border: 1px solid #3d2b14;
      border-radius: 5px;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 8px;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.95);
      overflow: hidden;
    }

    .clasament-tab-btn {
      position: relative;
      padding: 6px 10px;
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 1.02rem;
      border: 1px solid transparent;
      background: transparent;
      color: #cbbba2;
      cursor: pointer;
      transition: all 0.18s ease;
      text-align: center;
      border-radius: 4px;
    }

    .clasament-tab-btn:hover:not(.active) {
      color: #f2e4cc;
    }

    /* 1:1 Active "Jucători" Tab with Top & Bottom Center Golden Glow Spots */
    .clasament-tab-btn.active {
      background:
        radial-gradient(ellipse 65% 52% at 50% 0%, rgba(255, 208, 110, 0.5) 0%, transparent 70%) padding-box,
        radial-gradient(ellipse 65% 45% at 50% 100%, rgba(240, 178, 72, 0.4) 0%, transparent 70%) padding-box,
        linear-gradient(180deg, #6e481b 0%, #44290d 52%, #2e1a07 100%) padding-box,
        radial-gradient(ellipse 45% 30% at 50% 0%, #fff3b8 0%, transparent 100%) border-box,
        radial-gradient(ellipse 45% 30% at 50% 100%, #ffe082 0%, transparent 100%) border-box,
        linear-gradient(180deg, #d4a045 0%, #754e16 50%, #c89338 100%) border-box;
      border: 1px solid transparent;
      box-shadow:
        inset 0 1px 1px rgba(255, 235, 175, 0.6),
        inset 0 -1px 1px rgba(255, 215, 120, 0.4);
      color: #fff6e6;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    }

    /* Clasament Table Structure */
    .clasament-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 10px;
    }

    .clasament-table thead tr {
      border-bottom: 1px solid rgba(197, 155, 78, 0.22);
      background: rgba(0, 0, 0, 0.28);
    }

    .clasament-table thead th {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 0.9rem;
      font-weight: 600;
      color: #c2b49e;
      padding: 4px 8px 5px 8px;
    }

    .clasament-table tbody tr {
      position: relative;
      border-bottom: 1px solid rgba(197, 155, 78, 0.10);
      transition: all 0.15s ease;
    }

    .clasament-table tbody tr:nth-child(even):not(.rank-row-1) {
      background: rgba(0, 0, 0, 0.32);
    }

    /* Original Design: Warm Glowing Amber/Bronze Illumination on Odd Rows */
    .clasament-table tbody tr:nth-child(odd):not(.rank-row-1) {
      background: linear-gradient(
        90deg,
        rgba(58, 38, 14, 0.18) 0%,
        rgba(142, 95, 32, 0.38) 28%,
        rgba(165, 112, 38, 0.44) 50%,
        rgba(136, 88, 28, 0.35) 72%,
        rgba(38, 24, 10, 0.14) 100%
      );
      box-shadow:
        inset 0 1px 0 rgba(245, 192, 85, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    }

    /* 1:1 Row 1 (#1 Place Champion) Premium Gold Illumination */
    .clasament-table tbody tr.rank-row-1 {
      background: linear-gradient(
        90deg,
        rgba(125, 82, 28, 0.50) 0%,
        rgba(88, 56, 18, 0.36) 35%,
        rgba(50, 32, 12, 0.22) 70%,
        rgba(22, 14, 7, 0.10) 100%
      );
      border-top: 1px solid rgba(225, 175, 75, 0.42);
      border-bottom: 1px solid rgba(215, 165, 68, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 232, 145, 0.28);
    }

    /* Full-Height Rich Metallic Gold Left Rank Block for #1 */
    .clasament-table tbody tr.rank-row-1 td.col-rank-num {
      background: linear-gradient(180deg, #7c5118 0%, #4e310b 100%) !important;
      border-right: 1px solid rgba(225, 175, 75, 0.42) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 235, 150, 0.50),
        inset 1px 0 0 rgba(255, 220, 110, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6) !important;
      color: #ffde82 !important;
      font-size: 1.12rem !important;
      font-weight: 800 !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
      padding: 7px 8px !important;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .clasament-table tbody tr.rank-row-1 .col-rank-name {
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: 1.08rem !important;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.98);
      padding-left: 10px !important;
    }

    .clasament-table tbody tr.rank-row-1 .col-rank-lvl {
      color: #ffde82 !important;
      font-weight: 800 !important;
      font-size: 1.02rem !important;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.98);
    }

    .clasament-table tbody tr:hover {
      background: linear-gradient(
        90deg,
        rgba(92, 60, 22, 0.40) 0%,
        rgba(195, 140, 48, 0.45) 50%,
        rgba(70, 44, 16, 0.28) 100%
      ) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 220, 115, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55) !important;
    }

    .clasament-table td {
      padding: 6px 8px;
      vertical-align: middle;
    }

    .col-rank-num {
      font-family: 'Cinzel', serif;
      font-weight: 800;
      font-size: 1.04rem;
      color: #e9b949;
      width: 42px;
      text-align: center;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    }

    .col-rank-name {
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 1.05rem;
      color: #efe7da;
      text-align: left;
      padding-left: 10px !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    }

    .col-rank-lvl {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.96rem;
      color: #e4af42;
      text-align: center;
      white-space: nowrap;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    }

    .col-rank-kingdom {
      text-align: center;
      width: 58px;
    }

    /* Sidebar Kingdom Flag Images (matching images/empire/ and ranking pages) */
    .sidebar-ranking-flag {
      width: 28px;
      height: 18px;
      object-fit: cover;
      border-radius: 3px;
      border: 1px solid rgba(197, 155, 78, 0.45);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      vertical-align: middle;
      display: inline-block;
      transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
    }

    .sidebar-ranking-flag:hover {
      transform: scale(1.15);
      filter: brightness(1.15);
      border-color: rgba(233, 185, 73, 0.85);
    }

    /* 1:1 Sharp Rectangular Kingdom Flags with Large Detailed Sunburst (legacy fallback) */
    .kingdom-emblem-sq {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 20px;
      border-radius: 1.5px;
      border: 1px solid rgba(0, 0, 0, 0.85);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      vertical-align: middle;
    }

    .emblem-red {
      background: linear-gradient(180deg, #d91b14 0%, #8f0c07 100%);
    }
    .emblem-blue {
      background: linear-gradient(180deg, #1646b8 0%, #0a2469 100%);
    }
    .emblem-green {
      background: linear-gradient(180deg, #19872c 0%, #0b4a16 100%);
    }

    /* ==========================================================================
       8. INNER FOOTER (SCENIC BANNER PLACEHOLDER) & MAIN FOOTER PLACEHOLDER
       ========================================================================== */
    .inner-footer-scenic {
      position: relative;
      width: 100%;
      height: clamp(140px, 14vw, 220px);
      margin: 25px 0 0 0;
      overflow: hidden;
      pointer-events: none;
    }

    /* Inner Footer Image Placeholder */
    .inner-footer-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
      display: block;
      z-index: 1;
    }

    .inner-footer-vignette {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(to bottom, var(--page-bg-color) 0%, transparent 40%);
    }

    .site-footer {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #090604;
      border-top: 2px solid #b88a3c;
      box-shadow:
        0 -4px 18px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 230, 160, 0.35);
      padding: 24px 0 28px 0;
      z-index: 10;
    }

    /* Main Footer Background Image */
    .footer-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
      display: block;
      z-index: 1;
      opacity: 1;
      pointer-events: none;
    }

    .footer-content-layer {
      position: relative;
      z-index: 3;
    }

    /* Footer Logo Image */
    .footer-logo-img {
      max-width: 190px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
      transition: filter 0.2s ease;
    }

    .footer-logo-img:hover {
      filter: drop-shadow(0 4px 14px rgba(240, 190, 82, 0.45));
    }

    /* 1:1 Itemshop Deal Panel & Full-Cover Background (Chest at container top, Text/CTA at bottom) */
    .sidebar-panel.itemshop-deal-panel {
      padding: 13px 0 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .sidebar-panel.itemshop-deal-panel .sidebar-header {
      padding: 0 15px 9px 15px;
      margin-bottom: 0;
      border-bottom: 1px solid rgba(197, 155, 78, 0.22);
    }

    .deal-content-block {
      position: relative;
      width: 100%;
      border: none;
      border-radius: 0 0 7px 7px;
      background: #090605 url('../images/evo/itemshop-deal.jpg?v=6') no-repeat center top / cover;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
      padding: calc(54% + 16px) 16px 22px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.25s ease;
    }

    .deal-content-block:hover {
      box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85);
    }

    .deal-product-title {
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      background: linear-gradient(180deg, #fff8db 0%, #edd18a 40%, #c99a38 75%, #ebd39b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 4px #000);
      margin: 0 0 3px 0;
    }

    .deal-product-desc {
      color: #cbbba0;
      font-size: 0.95rem;
      text-shadow: 0 1px 3px #000;
      margin: 0 0 16px 0;
    }

    .deal-cta-btn {
      width: 90% !important;
      max-width: 255px;
      padding: 9.5px 18px;
      font-size: 1.02rem;
    }

    /* 1:1 Social Square Link with Shimmering Border & Metallic Gold Icon */
    .social-sq-link {
      width: 36px;
      height: 36px;
      border-radius: 5px;
      border: 1.5px solid transparent;
      background:
        radial-gradient(circle at 50% 85%, rgba(212, 148, 42, 0.28) 0%, transparent 70%) padding-box,
        linear-gradient(180deg, #1b1209 0%, #0d0804 100%) padding-box,
        radial-gradient(circle at 50% 0%, #ffe89e 0%, transparent 75%) border-box,
        radial-gradient(circle at 50% 100%, #f5c35c 0%, transparent 75%) border-box,
        linear-gradient(135deg, #c9963e 0%, #634212 50%, #b8842c 100%) border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 1.08rem;
      transition: all 0.2s ease;
      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.85),
        inset 0 0 8px rgba(0, 0, 0, 0.75);
    }

    .social-sq-link i {
      background: linear-gradient(180deg, #fff6cf 0%, #f0c259 48%, #a66c14 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
    }

    .social-sq-link:hover {
      filter: brightness(1.2) drop-shadow(0 0 8px rgba(218, 165, 32, 0.5));
    }

    .footer-motto-script {
      font-family: 'Charm', cursive;
      color: #e4be70;
      font-size: 1.3rem;
      line-height: 1.05;
      transform: rotate(-11deg);
      text-align: center;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
      user-select: none;
    }

    /* Toast Notification */
    .fantasy-toast-box {
      position: fixed;
      bottom: 22px;
      right: 22px;
      z-index: 9999;
      background: linear-gradient(180deg, #241910 0%, #120c07 100%);
      border: 1.5px solid #d4af37;
      color: #f6e3ba;
      padding: 11px 18px;
      border-radius: 6px;
      font-family: 'Cinzel', serif;
      font-size: 0.82rem;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.92);
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: all 0.25s ease;
    }

    .fantasy-toast-box.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 991.98px) {
      /* Ensure header video is strictly hidden below desktop (< 992px) */
      .hero-bg-video {
        display: none !important;
      }
      .hero-header {
        height: 420px;
      }
      .hero-bottom-cta {
        top: 278px;
      }
      .btn-emerald-3d {
        width: min(92vw, 350px);
        height: 76px;
      }
      .navbar-wrapper {
        margin-top: -15px;
      }
      .slider-viewport {
        height: clamp(180px, 24vw, 220px);
      }
      .slide-caption-box {
        padding: 0 38px;
      }
      .slide-sub-top {
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
      }
      .slide-main-title {
        font-size: clamp(1.3rem, 2.8vw, 1.95rem);
      }
      .slide-sub-bot {
        font-size: clamp(0.72rem, 1.4vw, 0.8rem);
      }
    }

    @media (max-width: 767.98px) {
      .hero-header {
        height: 420px;
      }
      .hero-top-bar-strip {
        height: 38px;
        padding: 0 14px;
        justify-content: space-between;
        gap: 10px;
        background: rgba(5, 8, 14, 0.85);
      }
      .online-pill {
        font-size: 0.72rem;
        transform: translateY(1.5px);
      }
      .top-auth-links {
        font-size: 0.86rem;
        gap: 8px;
      }
      .hero-top-right-group {
        gap: 8px;
      }
      .lang-trigger-btn {
        padding: 2px 7px;
        font-size: 0.7rem;
        gap: 5px;
      }
      .lang-dropdown-menu {
        right: -8px;
        width: min(290px, 92vw);
      }
      .btn-emerald-3d {
        width: min(92vw, 330px);
        height: 72px;
        padding: 0;
      }
      .hero-bottom-cta {
        top: 276px;
      }
      .navbar-wrapper {
        margin-top: -12px;
      }
      .slider-viewport {
        height: clamp(140px, 30vw, 195px);
      }
      .slide-caption-box {
        padding: 0 28px;
        margin-top: 0;
      }
      .slide-sub-top {
        font-size: clamp(0.72rem, 2.2vw, 0.92rem);
        letter-spacing: 0.05em;
      }
      .slide-main-title {
        font-size: clamp(1.05rem, 3.8vw, 1.55rem);
        letter-spacing: 0.02em;
        margin: 1px 0;
      }
      .slide-sub-bot {
        font-size: clamp(0.6rem, 1.8vw, 0.72rem);
        letter-spacing: 0.04em;
      }
      .slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
      }
      .slider-arrow-left { left: 8px; }
      .slider-arrow-right { right: 8px; }
      .slider-dots-bar {
        bottom: 8px;
        gap: 6px;
      }
      .slider-dot {
        width: 7px;
        height: 7px;
      }
      .inner-footer-scenic {
        height: 75px;
      }
      .news-artwork-frame {
        float: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 10.5;
        margin: 0 0 16px 0;
      }
    }

    @media (max-width: 480px) {
      .slider-viewport {
        height: clamp(125px, 34vw, 150px);
      }
      .slide-caption-box {
        padding: 0 20px;
      }
      .slide-sub-top {
        font-size: 0.65rem;
      }
      .slide-main-title {
        font-size: 1.0rem;
      }
      .slide-sub-bot {
        font-size: 0.55rem;
      }
      .slider-arrow {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
      }
      .slider-arrow-left { left: 5px; }
      .slider-arrow-right { right: 5px; }
    }

    /* ==========================================================================
       USER LOGGED-IN PANEL & INTERNAL PAGES STYLES
       ========================================================================== */
    .user-logged-info {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .user-greeting {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(212, 168, 83, 0.25);
    }
    .user-name-title {
      color: #ffd87a;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    }
    .currency-row {
      display: flex;
      gap: 8px;
    }
    .currency-pill {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 6px;
      background: rgba(14, 10, 7, 0.7);
      border: 1px solid rgba(212, 168, 83, 0.35);
      border-radius: 6px;
      font-family: 'Cinzel', serif;
      font-size: 0.74rem;
      font-weight: 700;
      color: #f7e6c1;
      box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
      text-align: center;
      line-height: 1.2;
    }
    .currency-coin-icon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
      vertical-align: middle;
      display: inline-block;
      flex-shrink: 0;
    }
    .account-stat-icon {
      width: 19px;
      height: 19px;
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
      vertical-align: middle;
      display: inline-block;
      flex-shrink: 0;
    }
    .currency-md {
      border-color: rgba(234, 179, 8, 0.45);
    }
    .currency-jd {
      border-color: rgba(56, 189, 248, 0.45);
    }
    .user-greeting {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(212, 168, 83, 0.22);
    }
    .user-name-title {
      font-family: 'Cinzel', serif;
      font-size: 1.22rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #fff4cb;
      text-shadow:
        0 0 14px rgba(255, 215, 80, 0.75),
        0 0 24px rgba(245, 185, 50, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.95);
      display: inline-block;
    }
    .user-badge-admin {
      background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 60%, #450a0a 100%);
      border: 1px solid rgba(248, 113, 113, 0.65);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 200, 200, 0.35);
      color: #fff;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      padding: 3px 8px;
      border-radius: 4px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      flex-shrink: 0;
    }

    .user-menu-actions {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-top: 6px;
    }
    .user-action-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: linear-gradient(180deg, rgba(38, 26, 16, 0.85), rgba(20, 14, 9, 0.95));
      border: 1px solid rgba(168, 122, 52, 0.4);
      border-radius: 6px;
      color: #ebd2a4;
      font-family: 'Cinzel', serif;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: all 0.2s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 230, 160, 0.12);
    }
    .user-action-btn .nav-gold-svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95));
      transition: transform 0.2s ease;
    }
    .user-action-btn:hover {
      background: linear-gradient(180deg, rgba(62, 40, 22, 0.96), rgba(34, 22, 13, 0.98));
      border-color: #d4a853;
      color: #fff2d1;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(212, 168, 83, 0.25), inset 0 1px 0 rgba(255, 235, 175, 0.25);
    }
    .user-action-btn:hover .nav-gold-svg {
      transform: scale(1.14);
    }

    /* Prestigious Administration Action (#1) */
    .user-action-admin {
      background: linear-gradient(180deg, rgba(62, 18, 18, 0.9), rgba(32, 9, 9, 0.96)) !important;
      border: 1px solid rgba(239, 68, 68, 0.55) !important;
      color: #ffdada !important;
      box-shadow: 0 2px 6px rgba(180, 40, 40, 0.25), inset 0 1px 0 rgba(255, 180, 180, 0.2) !important;
    }
    .user-action-admin:hover {
      background: linear-gradient(180deg, rgba(95, 28, 28, 0.96), rgba(52, 14, 14, 0.98)) !important;
      border-color: #ef4444 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 200, 200, 0.35) !important;
    }

    /* Itemshop Highlight */
    .user-action-itemshop {
      border-color: rgba(234, 179, 8, 0.55);
      color: #fef08a;
    }
    .user-action-itemshop:hover {
      border-color: #facc15;
      box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
    }

    /* Logout Action */
    .user-action-logout {
      border-color: rgba(150, 100, 100, 0.4);
      color: #cfbcbc;
    }
    .user-action-logout:hover {
      border-color: #ef4444;
      color: #fecaca;
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
    }

    /* ==========================================================================
       INTERNAL PAGES, TABLES & FANTASY BUTTONS STYLES
       ========================================================================== */
    .page-hd {
      display: none !important;
    }

    .internal-page-content {
      color: #24160a;
      min-height: 480px;
    }
    .internal-page-body {
      font-size: 1.0rem;
      line-height: 1.6;
      color: #24160a;
    }
    .internal-page-body h1,
    .internal-page-body h2,
    .internal-page-body h3,
    .internal-page-body h4 {
      font-family: 'Cinzel', serif;
      color: #1a0f05;
      font-weight: 700;
      margin-top: 1.2rem;
      margin-bottom: 0.8rem;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    /* Universal Fantasy Buttons across all internal pages */
    .internal-page-body .btn,
    .btn-fantasy,
    .btn-fantasy-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 0.86rem !important;
      letter-spacing: 0.05em !important;
      padding: 8px 18px !important;
      border-radius: 5px !important;
      color: #fff6de !important;
      text-decoration: none !important;
      cursor: pointer;
      background: linear-gradient(180deg, #5c3c1a 0%, #3a220c 60%, #261405 100%) !important;
      border: 1.5px solid #a87a34 !important;
      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 230, 160, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5) !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
      transition: all 0.2s ease !important;
      line-height: 1.3 !important;
    }

    .internal-page-body .btn:hover,
    .btn-fantasy:hover,
    .btn-fantasy-primary:hover {
      background: linear-gradient(180deg, #784e22 0%, #4d2e10 60%, #331c07 100%) !important;
      border-color: #d4a853 !important;
      color: #ffffff !important;
      box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(212, 168, 83, 0.35),
        inset 0 1px 2px rgba(255, 240, 190, 0.5) !important;
      transform: translateY(-1px);
    }

    .internal-page-body .btn:active,
    .btn-fantasy:active {
      transform: translateY(1px);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.7) !important;
    }

    .internal-page-body .btn-success,
    .btn-fantasy-emerald {
      background: linear-gradient(180deg, #2b6d39 0%, #1a4a24 60%, #0e2e15 100%) !important;
      border-color: #4ade80 !important;
    }
    .internal-page-body .btn-danger,
    .btn-fantasy-ruby {
      background: linear-gradient(180deg, #8c1d18 0%, #61110d 60%, #3d0705 100%) !important;
      border-color: #f87171 !important;
    }
    .internal-page-body .btn-warning,
    .btn-fantasy-gold {
      background: linear-gradient(180deg, #9c6c19 0%, #6e480c 60%, #452b05 100%) !important;
      border-color: #fbbf24 !important;
    }

    /* Fantasy Parchment Tables (Clean, Dark Headers, Centered Columns) */
    .internal-page-body table,
    .internal-page-body .table {
      --bs-table-bg: transparent !important;
      --bs-table-striped-bg: rgba(95, 65, 30, 0.05) !important;
      --bs-table-hover-bg: rgba(180, 125, 45, 0.14) !important;
      --bs-table-color: #24160a !important;
      width: 100% !important;
      margin: 1.2rem 0 !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      border: 1.5px solid #8c6328 !important;
      border-radius: 6px !important;
      overflow: hidden !important;
      background: rgba(255, 248, 235, 0.55) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .internal-page-body thead,
    .internal-page-body table thead th,
    .internal-page-body .table thead th,
    .internal-page-body .table .thead-inverse th {
      background: linear-gradient(180deg, #301d0e 0%, #1e1107 100%) !important;
      color: #ebd2a4 !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 0.86rem !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
      padding: 11px 14px !important;
      border-bottom: 2px solid #b88738 !important;
      border-top: none !important;
      vertical-align: middle !important;
      text-align: center !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    }

    .internal-page-body tbody td,
    .internal-page-body .table tbody td,
    .internal-page-body tbody th,
    .internal-page-body .table tbody th {
      padding: 10px 14px !important;
      vertical-align: middle !important;
      text-align: center !important;
      border-bottom: 1px solid rgba(140, 99, 40, 0.18) !important;
      border-top: none !important;
      background: transparent !important;
      color: #24160a !important;
      font-size: 0.95rem !important;
    }

    .internal-page-body tbody tr {
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .internal-page-body tbody tr:nth-child(even) td,
    .internal-page-body tbody tr:nth-child(even) th {
      background: rgba(140, 99, 40, 0.04) !important;
    }

    .internal-page-body tbody tr:nth-child(odd) td,
    .internal-page-body tbody tr:nth-child(odd) th {
      background: rgba(255, 255, 255, 0.12) !important;
    }

    .internal-page-body tbody tr:last-child td,
    .internal-page-body tbody tr:last-child th {
      border-bottom: none !important;
    }

    /* Distinct Luminous Table Hover (super readable, no mud contrast) */
    .internal-page-body tbody tr:hover td,
    .internal-page-body tbody tr:hover th,
    .internal-page-body .table-hover tbody tr:hover td,
    .internal-page-body .table-hover tbody tr:hover th {
      background: rgba(255, 255, 255, 0.92) !important;
      color: #0d0602 !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(140, 99, 40, 0.3) !important;
    }

    .internal-page-body tbody tr:hover th:first-child,
    .internal-page-body tbody tr:hover td:first-child,
    .internal-page-body .table-hover tbody tr:hover th:first-child,
    .internal-page-body .table-hover tbody tr:hover td:first-child {
      box-shadow: inset 4px 0 0 #b88738, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(140, 99, 40, 0.3) !important;
    }

    /* Delimited Section Headers & Dividers in Admin & Ranking */
    .admin-section-header {
      margin: 26px 0 16px 0;
      padding-bottom: 8px;
      border-bottom: 1.5px solid rgba(140, 99, 40, 0.3);
      position: relative;
    }
    .admin-section-header.first {
      margin-top: 4px;
    }
    .admin-section-header::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 70px;
      height: 2.5px;
      background: linear-gradient(90deg, #9c6e2e, #dfb15b, transparent);
      border-radius: 2px;
    }
    .admin-section-title {
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 1.12rem !important;
      color: #24160a !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .admin-section-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 32px 0 20px 0;
      position: relative;
    }
    .admin-section-divider::before,
    .admin-section-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(140, 99, 40, 0.35) 40%, rgba(140, 99, 40, 0.6) 80%, rgba(140, 99, 40, 0.7));
    }
    .admin-section-divider::after {
      background: linear-gradient(90deg, rgba(140, 99, 40, 0.7), rgba(140, 99, 40, 0.6) 20%, rgba(140, 99, 40, 0.35) 60%, transparent);
    }
    .admin-divider-ornament {
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #7a4c18;
      font-size: 0.88rem;
    }
    .admin-divider-ornament span {
      font-size: 0.62rem;
      color: #b58334;
      opacity: 0.85;
    }

    /* ==========================================================================
       RANKING FILTER CARD & CONTROLS (SERVER SELECT & SEARCH INPUT)
       ========================================================================== */
    .ranking-filter-card {
      background: rgba(255, 248, 235, 0.65);
      border: 1.5px solid #9c723b;
      border-radius: 8px;
      padding: 16px 20px;
      margin: 1.2rem 0 1.8rem 0;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .ranking-filter-form {
      display: flex;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
    }
    .ranking-field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 180px;
    }
    .ranking-field-label {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.82rem;
      color: #4a2c0c;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0;
      display: flex;
      align-items: center;
    }
    .ranking-select-wrap,
    .ranking-input-wrap {
      position: relative;
      height: 42px;
      width: 100%;
    }
    .ranking-fantasy-select {
      width: 100% !important;
      height: 42px !important;
      background: rgba(255, 255, 255, 0.9) !important;
      border: 1.5px solid #a87d46 !important;
      border-radius: 6px !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.9rem !important;
      font-weight: 700 !important;
      color: #24160a !important;
      padding: 0 38px 0 14px !important;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
      outline: none !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }
    .ranking-fantasy-select:focus {
      border-color: #5c350c !important;
      box-shadow: 0 0 0 3px rgba(184, 135, 56, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }
    .ranking-select-arrow {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.75rem;
      color: #7a4a15;
      pointer-events: none;
    }
    .ranking-fantasy-input {
      width: 100% !important;
      height: 42px !important;
      background: rgba(255, 255, 255, 0.9) !important;
      border: 1.5px solid #a87d46 !important;
      border-radius: 6px !important;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      font-size: 0.94rem !important;
      font-weight: 500 !important;
      color: #24160a !important;
      padding: 0 38px 0 42px !important;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
      outline: none !important;
      transition: all 0.2s ease !important;
    }
    .ranking-fantasy-input::placeholder {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      color: #8c7355 !important;
      font-size: 0.90rem !important;
      font-weight: 400 !important;
      text-transform: none !important;
    }
    .ranking-fantasy-input:focus {
      border-color: #5c350c !important;
      background: #ffffff !important;
      box-shadow: 0 0 0 3px rgba(184, 135, 56, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }
    .ranking-input-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.88rem;
      color: #7a4a15;
      pointer-events: none;
    }
    .ranking-clear-search {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.05rem;
      color: #a84234;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .ranking-clear-search:hover {
      color: #dc2626;
    }
    .ranking-search-btn {
      height: 42px !important;
      min-height: 42px !important;
      padding: 0 20px !important;
      font-size: 0.88rem !important;
      min-width: 125px;
    }
    @media (max-width: 768px) {
      .ranking-filter-form {
        flex-direction: column;
        align-items: stretch;
      }
      .ranking-btn-group {
        margin-top: 6px;
      }
      .ranking-search-btn {
        width: 100%;
      }
    }

    /* ==========================================================================
       LUXURY FANTASY PAGINATION DESIGN
       ========================================================================== */
    .pagination,
    .pagination.pagination-sm {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      padding: 8px 14px !important;
      margin: 1.6rem auto !important;
      list-style: none !important;
      background: rgba(255, 248, 235, 0.65) !important;
      border: 1.5px solid rgba(156, 114, 59, 0.45) !important;
      border-radius: 8px !important;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }
    .pagination li,
    .pagination.pagination-sm li {
      display: inline-block !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .pagination li a,
    .pagination li span,
    .pagination.pagination-sm li a,
    .pagination.pagination-sm li span {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 38px !important;
      height: 38px !important;
      padding: 0 12px !important;
      background: linear-gradient(180deg, #fbf7ee 0%, #ede1cc 100%) !important;
      border: 1.5px solid #a87d46 !important;
      border-radius: 6px !important;
      color: #3d2309 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.92rem !important;
      font-weight: 700 !important;
      text-decoration: none !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
      transition: all 0.2s ease !important;
    }
    .pagination li a:hover {
      background: linear-gradient(180deg, #5c3b1a 0%, #301e0d 100%) !important;
      border-color: #d4a853 !important;
      color: #fff2d1 !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 10px rgba(212, 168, 83, 0.35) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    }
    .pagination li.active a,
    .pagination li.active span {
      background: linear-gradient(180deg, #5c3b1a 0%, #3a2410 30%, #1e1308 100%) !important;
      border-color: #f5c556 !important;
      color: #fae8be !important;
      font-weight: 800 !important;
      box-shadow:
        inset 0 1.5px 0 rgba(255, 222, 125, 0.55),
        inset 0 6px 14px rgba(175, 110, 35, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
      text-shadow: 0 1px 2px #000, 0 2px 6px rgba(0, 0, 0, 0.9) !important;
      cursor: default !important;
      transform: none !important;
    }

    .internal-page-body tbody th[scope="row"],
    .internal-page-body tbody td:first-child {
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      color: #4a2c0a !important;
      text-align: center !important;
    }

    .table-ip-cell {
      font-family: 'Cinzel', monospace, sans-serif !important;
      font-weight: 700 !important;
      font-size: 0.92rem !important;
      color: #5c350c !important;
      letter-spacing: 0.04em !important;
      background: transparent !important;
    }

    /* Ranking Table Entity Details, Medals & Badges */
    .ranking-rank-medal {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      padding: 3px 9px !important;
      border-radius: 6px !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 800 !important;
      font-size: 0.86rem !important;
      letter-spacing: 0.02em !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .ranking-rank-medal.rank-1 {
      background: linear-gradient(180deg, #ffe066 0%, #d49a24 100%) !important;
      border: 1.5px solid #b87c14 !important;
      color: #3b2003 !important;
      box-shadow: 0 2px 5px rgba(212, 154, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }
    .ranking-rank-medal.rank-2 {
      background: linear-gradient(180deg, #f0f0f0 0%, #b8b8b8 100%) !important;
      border: 1.5px solid #8f8f8f !important;
      color: #2b2b2b !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }
    .ranking-rank-medal.rank-3 {
      background: linear-gradient(180deg, #e4a275 0%, #a75d31 100%) !important;
      border: 1.5px solid #7d401e !important;
      color: #2a1205 !important;
      box-shadow: 0 2px 5px rgba(167, 93, 49, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .ranking-rank-num {
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 0.92rem !important;
      color: #4a2c0a !important;
    }
    .ranking-name-cell {
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 0.96rem !important;
      color: #2a1608 !important;
      letter-spacing: 0.02em !important;
    }
    .ranking-leader-cell {
      font-family: 'Cinzel', serif !important;
      font-weight: 600 !important;
      color: #5a3812 !important;
      font-size: 0.92rem !important;
    }
    .ranking-flag-img {
      border-radius: 4px !important;
      border: 1.5px solid rgba(140, 99, 40, 0.45) !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
      vertical-align: middle !important;
      transition: transform 0.15s ease !important;
    }
    .ranking-flag-img:hover {
      transform: scale(1.12) !important;
    }
    .ranking-lvl-badge {
      display: inline-block !important;
      padding: 2px 10px !important;
      background: rgba(92, 59, 26, 0.08) !important;
      border: 1.5px solid rgba(140, 99, 40, 0.35) !important;
      border-radius: 12px !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 800 !important;
      font-size: 0.88rem !important;
      color: #3b2005 !important;
    }
    .ranking-num-val {
      font-family: 'Cinzel', monospace, sans-serif !important;
      font-weight: 700 !important;
      font-size: 0.92rem !important;
      color: #2d1806 !important;
      letter-spacing: 0.02em !important;
    }

    /* High contrast icons on parchment */
    .icon-parchment-accent {
      color: #5c350c !important;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
    }
    .icon-md-accent {
      color: #8c5305 !important;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
    }
    .icon-jd-accent {
      color: #0e639c !important;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
    }

    .internal-page-body input,
    .internal-page-body select,
    .internal-page-body textarea {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      background: #fbf5e6;
      border: 1px solid #8c6a38;
      border-radius: 4px;
      color: #1a0f05;
      padding: 6px 10px;
    }
    .internal-page-body input::placeholder,
    .internal-page-body textarea::placeholder {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      color: #8c7355;
      text-transform: none;
    }
    .internal-page-body input:focus,
    .internal-page-body select:focus {
      outline: none;
      border-color: #4a2c04;
      box-shadow: 0 0 0 2px rgba(120, 83, 34, 0.25);
    }

    /* Alerts (Bootstrap 3 'fade in' & Bootstrap 5 'fade show' Full Cross-Compatibility) */
    .alert.fade.in,
    .internal-page-body .alert.fade.in,
    .alert.fade.show,
    .internal-page-body .alert.fade.show {
      opacity: 1 !important;
      display: block !important;
    }

    .internal-page-body .alert {
      border-radius: 6px;
      padding: 12px 18px;
      margin-bottom: 1.2rem;
      border-width: 1.5px;
      font-weight: 500;
      position: relative !important;
    }
    .internal-page-body .alert.alert-dismissible {
      padding-right: 52px !important;
    }

    /* Modern .btn-close (Bootstrap 5 SVG) */
    .internal-page-body .alert.alert-dismissible .btn-close {
      position: absolute !important;
      top: 50% !important;
      right: 14px !important;
      transform: translateY(-50%) !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 20px !important;
      height: 20px !important;
      opacity: 0.65 !important;
      box-shadow: none !important;
      outline: none !important;
      cursor: pointer !important;
      border: none !important;
      background-size: 10px !important;
      transition: opacity 0.15s ease, transform 0.15s ease !important;
    }
    .internal-page-body .alert.alert-dismissible .btn-close:hover {
      opacity: 1 !important;
      transform: translateY(-50%) scale(1.15) !important;
    }

    /* Legacy .close button with &times; (Bootstrap 3) */
    .internal-page-body .alert.alert-dismissible .close,
    .internal-page-body .alert.alert-dismissible button.close {
      position: absolute !important;
      top: 50% !important;
      right: 14px !important;
      transform: translateY(-50%) !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 24px !important;
      height: 24px !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      color: inherit !important;
      font-size: 1.55rem !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      opacity: 0.65 !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: opacity 0.15s ease, transform 0.15s ease !important;
    }
    .internal-page-body .alert.alert-dismissible .close:hover,
    .internal-page-body .alert.alert-dismissible button.close:hover {
      opacity: 1 !important;
      transform: translateY(-50%) scale(1.15) !important;
      background: transparent !important;
      color: inherit !important;
    }
    .internal-page-body .alert.alert-dismissible .close span,
    .internal-page-body .alert.alert-dismissible button.close span {
      display: inline-block !important;
      line-height: 1 !important;
      pointer-events: none !important;
    }
    .internal-page-body .alert-success {
      background: rgba(34, 197, 94, 0.12);
      border-color: #22c55e;
      color: #14532d;
    }
    .internal-page-body .alert-danger {
      background: rgba(239, 68, 68, 0.12);
      border-color: #ef4444;
      color: #7f1d1d;
    }
    .internal-page-body .alert-info {
      background: rgba(59, 130, 246, 0.12);
      border-color: #3b82f6;
      color: #1e3a8a;
    }

    /* ==========================================================================
       USER ADMINISTRATION PAGE CUSTOM COMPONENTS
       ========================================================================== */
    .account-overview-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 1.4rem;
      align-items: stretch;
    }
    @media (max-width: 991px) {
      .account-overview-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 576px) {
      .account-overview-grid {
        grid-template-columns: 1fr;
      }
    }
    .account-stat-card {
      background: rgba(255, 249, 238, 0.7);
      border: 1.5px solid #9c723b;
      border-radius: 6px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      min-height: 94px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
    }
    .account-stat-label {
      font-size: 0.69rem;
      font-weight: 700;
      color: #4a2c0c;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 5px;
      min-height: 30px;
      line-height: 1.2;
      margin-bottom: 4px;
      white-space: nowrap;
    }
    .account-stat-val {
      font-size: 1.05rem;
      font-weight: 700;
      color: #1f1207;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .account-stat-val.val-email {
      font-size: 0.88rem;
    }
    .account-stat-val.text-gold-glow {
      color: #8c5a08;
    }
    .account-stat-val.text-blue-glow {
      color: #0d5f8a;
    }

    .account-actions-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 1.4rem 0;
    }
    .account-action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: rgba(255, 248, 235, 0.5);
      border: 1.5px solid rgba(156, 114, 59, 0.35);
      border-radius: 6px;
      padding: 10px 16px;
      min-height: 60px;
      transition: background 0.2s, border-color 0.2s;
    }
    .account-action-row:hover {
      background: rgba(255, 248, 235, 0.85);
      border-color: #9c723b;
    }
    .account-action-desc {
      font-size: 0.94rem;
      color: #382413;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }
    .account-action-btn-wrap {
      flex-shrink: 0;
      width: 220px;
      display: flex;
      justify-content: flex-end;
    }
    .account-action-btn-wrap form {
      width: 100%;
      margin: 0;
      display: flex;
      justify-content: flex-end;
    }
    .account-action-btn-wrap .btn,
    .account-action-btn-wrap a.btn,
    .account-action-btn-wrap button.btn {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 42px !important;
      min-height: 42px !important;
      max-height: 42px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.81rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.035em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      padding: 0 12px !important;
      box-sizing: border-box !important;
      border-radius: 5px !important;
    }

    @media (max-width: 767px) {
      .account-action-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .account-action-btn-wrap {
        width: 100%;
      }
      .account-action-btn-wrap .btn,
      .account-action-btn-wrap a.btn,
      .account-action-btn-wrap button.btn {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
      }
    }

    /* Discord Fixed Pinned Bar (Right edge) */
    .discord-bar-fixed {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 990;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 10px;
      background: #17120e;
      border: 1px solid #785322;
      border-right: none;
      border-radius: 10px 0 0 10px;
      min-width: 76px;
      box-shadow: -4px 0 16px rgba(0,0,0,0.6);
    }
    .discord-bar__avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #d4a853;
    }
    .discord-bar__name {
      font-size: 0.70rem;
      font-weight: 700;
      color: #ebd2a4;
      text-align: center;
      line-height: 1.1;
      font-family: 'Cinzel', serif;
    }
    .discord-bar__status {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.65rem;
      color: #c9b493;
    }
    .discord-bar__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 6px #22c55e;
      display: inline-block;
    }
    .discord-bar__join {
      display: block;
      width: 100%;
      text-align: center;
      padding: 4px 8px;
      background: linear-gradient(180deg, #5865F2, #4752c4);
      color: #fff;
      border-radius: 4px;
      font-size: 0.70rem;
      font-weight: 700;
      text-decoration: none;
      transition: filter 0.2s;
    }
    .discord-bar__join:hover {
      filter: brightness(1.15);
      color: #fff;
    }
    @media (max-width: 991px) {
      .discord-bar-fixed { display: none; }
    }

    /* ==========================================================================
       REGISTRATION PAGE LUXURY FANTASY REDESIGN
       ========================================================================== */
    .register-page-container {
      max-width: 580px;
      margin: 0.5rem auto 1.5rem auto;
      width: 100%;
    }

    /* Security & advisory notice card */
    .register-notice-box {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: linear-gradient(180deg, rgba(255, 248, 235, 0.85) 0%, rgba(246, 235, 214, 0.75) 100%);
      border: 1.5px solid #a87d46;
      border-radius: 8px;
      padding: 14px 18px;
      margin-bottom: 1.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .register-notice-icon {
      font-size: 1.5rem;
      color: #945d1b;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .register-notice-content {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }
    .register-notice-title {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.88rem;
      color: #78261e;
      line-height: 1.4;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .register-notice-sub {
      font-family: 'Crimson Pro', Georgia, serif;
      font-weight: 600;
      font-size: 0.98rem;
      color: #4a2c0c;
      line-height: 1.35;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Registration form card */
    .register-form-card {
      background: rgba(255, 248, 235, 0.65);
      border: 1.5px solid #9c723b;
      border-radius: 10px;
      padding: 24px 28px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .register-field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .register-field-label {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.84rem;
      color: #3b2006;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .register-input-wrap {
      position: relative;
      width: 100%;
    }
    .register-input-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.95rem;
      color: #7a4a15;
      pointer-events: none;
    }
    .fantasy-form-input {
      width: 100% !important;
      height: 44px !important;
      background: rgba(255, 255, 255, 0.92) !important;
      border: 1.5px solid #a87d46 !important;
      border-radius: 6px !important;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      font-size: 0.95rem !important;
      font-weight: 500 !important;
      color: #24160a !important;
      padding: 0 16px 0 42px !important;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
      outline: none !important;
      transition: all 0.2s ease !important;
    }
    .fantasy-form-input::placeholder {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      color: #8c7355 !important;
      font-size: 0.90rem !important;
      font-weight: 400 !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    .fantasy-form-input:focus {
      border-color: #5c350c !important;
      background: #ffffff !important;
      box-shadow: 0 0 0 3px rgba(184, 135, 56, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }
    .register-captcha-wrap {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 8px 0 !important;
      overflow: visible !important;
    }
    .register-submit-btn {
      width: 100% !important;
      height: 48px !important;
      font-size: 0.98rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      color: #ffffff !important;
      background: linear-gradient(180deg, #2b6d39 0%, #1a4a24 60%, #0e2e15 100%) !important;
      border: 1.5px solid #4ade80 !important;
      border-radius: 6px !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
      transition: all 0.2s ease !important;
    }
    .register-submit-btn:hover {
      background: linear-gradient(180deg, #348446 0%, #205c2d 60%, #133d1c 100%) !important;
      border-color: #86efac !important;
      box-shadow: 0 6px 14px rgba(46, 204, 113, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
      color: #ffffff !important;
      transform: translateY(-1px) !important;
    }
    .register-legend-text {
      text-align: center;
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: #8c531b;
      letter-spacing: 0.02em;
    }
    .register-login-link {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      color: #7a4613;
      text-decoration: underline;
      transition: color 0.15s ease;
    }
    .register-login-link:hover {
      color: #a85816;
    }

    /* ==========================================================================
       REGISTER SUCCESS EXPERIENCE
       ========================================================================== */
    .register-success-card {
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 245, 220, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, rgba(255, 250, 240, 0.95) 0%, rgba(246, 237, 220, 0.98) 100%);
      border: 1.5px solid #a37841;
      border-radius: 10px;
      padding: 28px 30px;
      box-shadow:
        0 8px 24px rgba(50, 30, 10, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 20px rgba(184, 135, 56, 0.08);
      position: relative;
    }

    .register-success-banner {
      text-align: center;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1.5px solid rgba(163, 120, 65, 0.3);
    }

    .register-success-medallion {
      width: 62px;
      height: 62px;
      margin: 0 auto 12px auto;
      border-radius: 50%;
      background:
        radial-gradient(ellipse 75% 50% at 50% 0%, rgba(120, 235, 145, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #2b823c 0%, #195c26 52%, #0e3b17 100%);
      border: 2px solid #52e379;
      box-shadow:
        inset 0 1px 0 rgba(195, 255, 205, 0.6),
        0 4px 12px rgba(20, 80, 30, 0.4),
        0 0 16px rgba(82, 227, 121, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 1.75rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }

    .register-success-title {
      color: #24160a;
      font-size: 1.45rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      margin-bottom: 5px;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .register-success-subtitle {
      color: #5c350c;
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0;
    }

    /* Email Notice */
    .register-email-notice {
      background:
        linear-gradient(180deg, rgba(235, 245, 238, 0.9) 0%, rgba(220, 238, 225, 0.9) 100%);
      border: 1px solid rgba(43, 130, 60, 0.45);
      border-left: 4px solid #2b823c;
      border-radius: 6px;
      padding: 13px 16px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 22px;
      color: #1a4521;
    }

    .register-email-notice .notice-icon {
      font-size: 1.35rem;
      color: #2b823c;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .register-email-notice .notice-body strong {
      font-family: 'Cinzel', serif;
      font-size: 0.92rem;
      color: #153b1b;
      letter-spacing: 0.02em;
    }

    .register-email-notice .notice-body p {
      color: #26542e;
      font-size: 0.95rem;
      line-height: 1.45;
      margin-top: 2px;
      font-family: 'Crimson Pro', Georgia, serif;
    }

    .register-email-notice .notice-user-email {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-weight: 700;
      color: #0b3413;
      text-transform: none;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* Credentials Plaque */
    .register-credentials-box {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(250, 243, 230, 0.72) 100%);
      border: 1.5px solid #a87938;
      border-radius: 8px;
      padding: 20px 22px;
      box-shadow:
        0 4px 12px rgba(50, 30, 10, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      margin-bottom: 22px;
    }

    .credentials-badge-title {
      font-family: 'Cinzel', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #2b1707;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .credentials-warning-text {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 0.96rem;
      font-weight: 600;
      color: #704714;
      margin-bottom: 14px;
    }

    .credentials-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .credential-item {
      display: grid;
      grid-template-columns: 140px 1fr;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.92);
      border: 1.5px solid rgba(168, 121, 56, 0.38);
      border-radius: 6px;
      padding: 6px 10px 6px 14px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: border-color 0.2s ease;
    }

    .credential-item:hover {
      border-color: #a87938;
    }

    .credential-label {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.82rem;
      color: #4a2c0c;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .credential-value-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      width: 100%;
    }

    .credential-value-input {
      flex: 1;
      min-width: 0;
      width: 0;
      background: transparent !important;
      border: none !important;
      font-family: 'Inter', monospace, sans-serif !important;
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      color: #24160a !important;
      letter-spacing: 0.05em !important;
      outline: none !important;
      padding: 4px 6px !important;
      user-select: all !important;
    }

    .credential-value-input.highlight-gold {
      color: #874b08 !important;
      font-family: 'Cinzel', monospace, serif !important;
      font-size: 1.1rem !important;
    }

    .btn-copy-cred {
      flex-shrink: 0;
      background: rgba(74, 44, 15, 0.08);
      border: 1px solid rgba(168, 121, 56, 0.45);
      border-radius: 4px;
      padding: 5px 11px;
      color: #5c350c;
      font-size: 0.82rem;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.18s ease;
      white-space: nowrap;
    }

    .btn-copy-cred:hover {
      background: rgba(184, 135, 56, 0.22);
      border-color: #8c5b16;
      color: #24160a;
      transform: translateY(-1px);
    }

    .btn-copy-cred.copied {
      background: #2b823c !important;
      border-color: #195c26 !important;
      color: #ffffff !important;
    }

    /* Download Credentials Button */
    .btn-download-credentials {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      min-height: 44px;
      padding: 8px 14px;
      background:
        radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255, 230, 160, 0.45) 0%, transparent 70%),
        linear-gradient(180deg, #5c3c1a 0%, #3a220c 52%, #201104 100%);
      border: 1.5px solid #d4a853;
      border-radius: 6px;
      color: #fff9eb;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.88rem;
      letter-spacing: 0.04em;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 235, 175, 0.5);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-download-credentials:hover {
      background:
        radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255, 240, 180, 0.6) 0%, transparent 70%),
        linear-gradient(180deg, #70471b 0%, #4a2b10 52%, #2d1806 100%);
      border-color: #ffd67a;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(184, 135, 56, 0.4), inset 0 1px 0 rgba(255, 245, 195, 0.7);
      transform: translateY(-1px);
    }

    /* Action Buttons */
    .register-success-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .btn-login-action {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 75% 50% at 50% 0%, rgba(120, 235, 145, 0.45) 0%, transparent 70%),
        linear-gradient(180deg, #2b823c 0%, #195c26 52%, #0e3b17 100%);
      border: 1.5px solid #4ade80;
      border-radius: 6px;
      color: #ffffff;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.86rem;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(195, 255, 205, 0.5);
      cursor: pointer;
      transition: all 0.2s ease;
    }

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

    .btn-download-action {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 250, 240, 0.9);
      border: 1.5px solid #a87938;
      border-radius: 6px;
      color: #3b2006;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.86rem;
      letter-spacing: 0.04em;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      transition: all 0.2s ease;
    }

    .btn-download-action:hover {
      background: #ffffff;
      border-color: #70471b;
      color: #1a0d02;
      transform: translateY(-1px);
    }

    @media (max-width: 576px) {
      .register-success-card {
        padding: 20px 14px;
      }
      .credential-item {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 10px;
      }
      .credential-value-input {
        font-size: 0.96rem !important;
        padding: 2px 4px !important;
      }
      .credential-value-input.highlight-gold {
        font-size: 1.02rem !important;
      }
      .btn-copy-cred {
        padding: 4px 9px;
        font-size: 0.78rem;
      }
      .btn-download-credentials {
        font-size: 0.82rem;
        padding: 10px 10px;
      }
      .register-success-actions {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
       LOGIN & LOST PASSWORD PAGES LUXURY FANTASY REDESIGN
       ========================================================================== */
    .login-page-container {
      max-width: 520px;
      margin: 0.8rem auto 1.5rem auto;
      width: 100%;
    }
    .login-form-card {
      background: rgba(255, 248, 235, 0.65);
      border: 1.5px solid #9c723b;
      border-radius: 10px;
      padding: 24px 28px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .login-field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .login-field-label {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.84rem;
      color: #3b2006;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .login-input-wrap {
      position: relative;
      width: 100%;
    }
    .login-input-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.95rem;
      color: #7a4a15;
      pointer-events: none;
    }
    .login-submit-btn {
      width: 100% !important;
      height: 48px !important;
      font-size: 0.98rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      color: #ffffff !important;
      background: linear-gradient(180deg, #2b6d39 0%, #1a4a24 60%, #0e2e15 100%) !important;
      border: 1.5px solid #4ade80 !important;
      border-radius: 6px !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
      transition: all 0.2s ease !important;
    }
    .internal-page-body .btn-success:hover,
    .btn-fantasy-emerald:hover,
    .login-submit-btn:hover {
      background: linear-gradient(180deg, #348446 0%, #205c2d 60%, #133d1c 100%) !important;
      border-color: #86efac !important;
      box-shadow: 0 6px 14px rgba(46, 204, 113, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
      color: #ffffff !important;
      transform: translateY(-1px) !important;
    }
    .auth-page-link {
      font-family: 'Cinzel', serif !important;
      font-size: 0.88rem !important;
      font-weight: 700 !important;
      color: #6e4012 !important;
      text-decoration: underline !important;
      transition: color 0.15s ease !important;
    }
    .auth-page-link:hover {
      color: #a85816 !important;
      text-decoration: none !important;
    }

    /* Full-width Responsive Sidebar & Modal Captcha */
    .sidebar-captcha-box {
      width: 100% !important;
      margin: 12px 0 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
    .sidebar-captcha-box .g-recaptcha {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
    }
    .sidebar-captcha-box .g-recaptcha > div {
      margin: 0 auto !important;
    }
    @media (max-width: 360px) {
      .sidebar-captcha-box .g-recaptcha {
        transform: scale(0.9) !important;
        transform-origin: center center !important;
      }
    }
    @media (max-width: 320px) {
      .sidebar-captcha-box .g-recaptcha {
        transform: scale(0.82) !important;
        transform-origin: center center !important;
      }
    }

    /* ==========================================================================
       DOWNLOAD PAGE (AUTHENTIC METIN2 PARCHMENT & WARM BRONZE PALETTE)
       ========================================================================== */
    .download-page-container {
      width: 100%;
      margin: 0 auto;
    }
    .download-intro-card {
      background: rgba(255, 248, 235, 0.65);
      border: 1.5px solid #9c723b;
      border-radius: 8px;
      padding: 18px 22px;
      margin-bottom: 24px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .download-step-pill {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 10px 14px !important;
      border-radius: 6px !important;
      background: rgba(255, 248, 235, 0.55) !important;
      border: 1.5px solid rgba(156, 114, 59, 0.35) !important;
      height: 100% !important;
      width: 100% !important;
      min-height: 58px !important;
      box-sizing: border-box !important;
      transition: background 0.2s, border-color 0.2s !important;
    }
    .download-step-pill:hover {
      background: rgba(255, 248, 235, 0.9);
      border-color: #9c723b;
    }
    .download-step-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.84rem;
      color: #fae19c;
      background: linear-gradient(180deg, #5c3c1a 0%, #261405 100%);
      border: 1px solid #a87a34;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
      flex-shrink: 0;
    }
    .download-step-text {
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      color: #382413;
    }

    .download-mirror-card {
      background: rgba(255, 248, 235, 0.75) !important;
      border: 1.5px solid #9c723b !important;
      border-radius: 8px !important;
      padding: 22px !important;
      box-shadow: 0 4px 14px rgba(60, 40, 15, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
      transition: all 0.2s ease !important;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }
    .download-mirror-card:hover {
      transform: translateY(-2px);
      border-color: #7d541c !important;
      box-shadow: 0 8px 22px rgba(60, 40, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }
    .download-mirror-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1.5px solid rgba(156, 114, 59, 0.3);
      padding-bottom: 12px;
      margin-bottom: 16px;
    }
    .download-brand-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      background: rgba(156, 114, 59, 0.15);
      border: 1.5px solid #9c723b;
      color: #5c3710;
      flex-shrink: 0;
    }
    .download-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 4px;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 0.74rem;
      letter-spacing: 0.05em;
      background: rgba(46, 125, 50, 0.14);
      border: 1px solid #2e7d32;
      color: #1b5e20;
    }
    .download-spec-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 0;
      font-size: 0.92rem;
      border-bottom: 1px dashed rgba(156, 114, 59, 0.3);
    }
    .download-spec-label {
      color: #5c3814;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 1rem;
    }
    .download-spec-val {
      color: #1a0f05;
      font-weight: 700;
      font-family: 'Inter', sans-serif;
      font-size: 0.90rem;
    }

    /* Red 3D CTA Button (matching Sidebar and Main Site CTA) */
    .download-cta-btn,
    .download-action-btn,
    a.download-cta-btn,
    a.download-action-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      width: 100% !important;
      padding: 13px 20px !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 1.05rem !important;
      letter-spacing: 0.05em !important;
      border-radius: 6px !important;
      color: #ffffff !important;
      text-decoration: none !important;
      cursor: pointer !important;
      margin-top: 18px !important;
      background:
        radial-gradient(ellipse 70% 60% at 38% 12%, rgba(255, 78, 68, 0.62) 0%, transparent 68%) padding-box,
        linear-gradient(180deg, #b51c17 0%, #7d0f0b 52%, #4a0705 100%) padding-box,
        linear-gradient(180deg, #d8a648 0%, #7c5418 50%, #c89438 100%) border-box !important;
      border: 1.5px solid transparent !important;
      box-shadow:
        0 4px 12px rgba(90, 12, 10, 0.45),
        inset 0 1px 1px rgba(255, 190, 180, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6) !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
      transition: all 0.2s ease !important;
    }
    .download-cta-btn:hover,
    .download-action-btn:hover,
    a.download-cta-btn:hover,
    a.download-action-btn:hover {
      background:
        radial-gradient(ellipse 70% 60% at 38% 12%, rgba(255, 98, 88, 0.75) 0%, transparent 68%) padding-box,
        linear-gradient(180deg, #c7241e 0%, #8f120e 52%, #570907 100%) padding-box,
        linear-gradient(180deg, #fae19c 0%, #9e6e14 50%, #e5bc54 100%) border-box !important;
      color: #ffffff !important;
      transform: translateY(-2px) !important;
      box-shadow:
        0 6px 18px rgba(120, 15, 12, 0.55),
        0 0 12px rgba(212, 80, 74, 0.4),
        inset 0 1px 2px rgba(255, 210, 200, 0.6) !important;
      text-decoration: none !important;
    }

    /* System Requirements Fantasy Table */
    .download-sys-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1.5px solid #9c723b;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255, 248, 235, 0.5);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      margin-top: 14px;
    }
    .download-sys-table thead th {
      background: linear-gradient(180deg, #3a220c 0%, #221204 100%) !important;
      color: #fae19c !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 700 !important;
      font-size: 0.88rem !important;
      letter-spacing: 0.05em !important;
      padding: 12px 18px !important;
      border: none !important;
      border-bottom: 2px solid #a87a34 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    }
    .download-sys-table tbody td {
      padding: 12px 18px !important;
      vertical-align: middle !important;
      border-top: 1px solid rgba(156, 114, 59, 0.22) !important;
      color: #2b1808 !important;
      font-size: 0.94rem !important;
    }
    .download-sys-table tbody tr:nth-child(even) {
      background: rgba(245, 232, 210, 0.5);
    }
    .download-sys-table tbody tr:hover {
      background: rgba(255, 242, 220, 0.75);
    }

    /* Utility Cards (DirectX, VC++, WinRAR) */
    .download-util-card {
      background: rgba(255, 248, 235, 0.7);
      border: 1.5px solid #9c723b;
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.2s ease;
    }
    .download-util-card:hover {
      background: rgba(255, 248, 235, 0.95);
      border-color: #7d541c;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(60, 40, 15, 0.1);
    }

/* ==========================================================================
   DYNAMIC NEWS & PATCH NOTES SYSTEM STYLING
   ========================================================================== */
.news-cat-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, #422912 0%, #251406 100%);
  border: 1.5px solid #8e622b;
  color: #e5cb9b !important;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.news-cat-pill:hover {
  background: linear-gradient(180deg, #573618 0%, #341d0a 100%);
  border-color: #c99343;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.news-cat-pill.active {
  background: linear-gradient(180deg, #d39f37 0%, #9e6917 100%);
  border-color: #f7d57f;
  color: #1a0f05 !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(180, 120, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.news-badge-cat {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1.2;
}
.news-badge-news {
  background: linear-gradient(180deg, #8a1d1d 0%, #520f0f 100%);
  color: #ffe1a0 !important;
  border: 1px solid #c24545;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.news-badge-patch {
  background: linear-gradient(180deg, #3d4a23 0%, #202b0f 100%);
  color: #d6f29b !important;
  border: 1px solid #637d32;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.news-list-card {
  background: rgba(255, 248, 235, 0.45);
  border: 1.5px solid rgba(142, 98, 43, 0.35);
  border-radius: 6px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.news-list-card:hover {
  background: rgba(255, 248, 235, 0.85);
  border-color: #8e622b;
  box-shadow: 0 4px 14px rgba(60, 40, 15, 0.08);
}
.news-list-header {
  border-bottom: 1px solid rgba(142, 98, 43, 0.25);
}
.news-title-link {
  color: #24160a !important;
  text-decoration: none !important;
  font-size: 1.25rem;
  line-height: 1.3;
  transition: color 0.15s ease;
}
.news-title-link:hover {
  color: #8c4c06 !important;
}
.news-list-date {
  color: #4a3420;
  font-size: 0.9rem;
  font-weight: 600;
}

.news-list-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 767.98px) {
  .news-list-body {
    flex-direction: column;
  }
}
.news-list-media-wrap {
  width: 220px;
  flex-shrink: 0;
  border: 1.5px solid #8e622b;
  border-radius: 4px;
  overflow: hidden;
  background: #140f0c;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767.98px) {
  .news-list-media-wrap {
    width: 100%;
    height: 180px;
  }
}
.news-list-thumb {
  width: 100%;
  height: 135px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
@media (max-width: 767.98px) {
  .news-list-thumb {
    height: 100%;
  }
}
.news-list-media-wrap:hover .news-list-thumb {
  transform: scale(1.04);
}
.news-list-excerpt {
  flex-grow: 1;
}
.news-summary-text {
  color: #2d1c0d;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}

.btn-news-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.btn-news-edit {
  background: #2a3d52;
  border: 1px solid #486a8c;
  color: #b5d5f5 !important;
}
.btn-news-edit:hover {
  background: #395573;
  color: #ffffff !important;
}
.btn-news-delete {
  background: #521d1d;
  border: 1px solid #8c3b3b;
  color: #f5b5b5 !important;
}
.btn-news-delete:hover {
  background: #732828;
  color: #ffffff !important;
}

.news-card-divider {
  height: 1px;
  background: radial-gradient(circle, rgba(142, 98, 43, 0.4) 0%, rgba(142, 98, 43, 0) 80%);
}

.news-pagination-wrap .news-page-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  background: #2c1a0b;
  border: 1px solid #7d5420;
  color: #e5cb9b !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.news-pagination-wrap .news-page-pill:hover {
  background: #3f2712;
  border-color: #c99343;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.news-pagination-wrap .news-page-pill.active {
  background: linear-gradient(180deg, #d39f37 0%, #9e6917 100%);
  border-color: #f7d57f;
  color: #1a0f05 !important;
  box-shadow: 0 2px 8px rgba(180, 120, 20, 0.45);
}
.news-page-dots {
  color: #7d5420;
  font-weight: 700;
  padding: 0 4px;
}

/* Prevent Chromium scroll anchoring jumps and strange upward animations during collapse */
html,
body,
.parchment-paper,
.admin-news-panel,
.admin-editor-card,
.collapse,
.collapsing {
  overflow-anchor: none !important;
}

.admin-news-panel {
  position: relative;
  width: 100%;
}

.admin-news-panel .collapse,
.admin-news-panel .collapsing {
  position: relative;
  width: 100%;
}

/* Admin News Editor Card */
.admin-editor-card {
  background: #17110c;
  border: 1.5px solid #8e622b;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  margin-top: 8px;
}
.admin-editor-card .cke_contents {
  min-height: 320px !important;
  height: 320px !important;
}
.admin-news-input {
  background: #0e0906 !important;
  border: 1px solid #5a3d1c !important;
  color: #f2e3c6 !important;
  border-radius: 4px;
}
.admin-news-input:focus {
  border-color: #d39f37 !important;
  box-shadow: 0 0 8px rgba(211, 159, 55, 0.3) !important;
  color: #ffffff !important;
}
.admin-news-input::placeholder {
  color: #cfba9f !important;
  opacity: 0.95 !important;
}
.admin-news-input::-webkit-input-placeholder {
  color: #cfba9f !important;
  opacity: 0.95 !important;
}
.admin-news-input::-moz-placeholder {
  color: #cfba9f !important;
  opacity: 0.95 !important;
}
.admin-news-input:-ms-input-placeholder {
  color: #cfba9f !important;
  opacity: 0.95 !important;
}
.admin-news-input::file-selector-button {
  background: #2b1d12 !important;
  color: #ecd7b7 !important;
  border: 1px solid #6c4720 !important;
  border-radius: 3px !important;
  padding: 0.2rem 0.6rem !important;
  margin-right: 0.75rem !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-news-input::file-selector-button:hover {
  background: #3e2a1b !important;
  color: #ffd88a !important;
  border-color: #a87232 !important;
}
.admin-editor-card .text-muted,
.admin-news-helper {
  color: #d8c5ab !important;
  font-size: 0.85rem;
}

/* Read Article Page */
.read-artwork-frame {
  width: 100%;
  max-height: 400px;
  border: 2px solid #785322;
  border-radius: 6px;
  overflow: hidden;
  background: #140f0c;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
}
.read-artwork-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}
.read-content-body {
  color: #24160a;
  line-height: 1.7;
}
.read-content-body h2,
.read-content-body h3,
.read-content-body h4 {
  color: #1a0f05;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
}
.read-content-body p {
  margin-bottom: 1rem;
}
.read-content-body ul,
.read-content-body ol {
  padding-left: 24px;
  margin-bottom: 1.2rem;
}
.read-content-body li {
  margin-bottom: 0.4rem;
}
.read-content-body blockquote {
  border-left: 4px solid #8e622b;
  padding: 8px 16px;
  background: rgba(142, 98, 43, 0.08);
  font-style: italic;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}
.cke_notification_warning {
  display: none !important;
}

/* ==========================================================================
   EVENTS PAGE REDESIGN
   ========================================================================== */
/* ==========================================================================
   SYMMETRICAL ORNATE EVENT SCHEDULE BOARD
   ========================================================================== */
.events-schedule-board {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 245, 220, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 250, 240, 0.9) 0%, rgba(246, 237, 220, 0.95) 100%);
  border: 1.5px solid #a37841;
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow:
    0 6px 20px rgba(50, 30, 10, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 16px rgba(184, 135, 56, 0.08);
  position: relative;
}

.schedule-board-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid rgba(163, 120, 65, 0.35);
  position: relative;
}

.schedule-board-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6) 50%, transparent);
}

.schedule-board-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #2b1807;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.schedule-server-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(74, 44, 15, 0.08);
  border: 1px solid rgba(163, 120, 65, 0.35);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: #42260c;
}

/* 2-Column Symmetrical Grid Cards */
.schedule-event-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(252, 246, 236, 0.75) 100%);
  border: 1.5px solid rgba(163, 120, 65, 0.38);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  box-shadow:
    0 2px 8px rgba(50, 30, 10, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
}

.schedule-event-card:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 249, 241, 0.9) 100%);
  border-color: #b88738;
  box-shadow:
    0 6px 18px rgba(60, 35, 12, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.schedule-event-card.is-active {
  background:
    radial-gradient(circle at 100% 0%, rgba(43, 130, 60, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 252, 246, 0.75) 100%);
  border-color: rgba(43, 130, 60, 0.55);
  box-shadow:
    0 3px 10px rgba(43, 130, 60, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.schedule-event-card.is-active:hover {
  border-color: #2b823c;
  box-shadow:
    0 6px 18px rgba(43, 130, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Card Top Section: Medallion + Title & Timing */
.schedule-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.schedule-medallion {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #523418 0%, #201105 85%);
  border: 1.5px solid #d4a04d;
  box-shadow:
    inset 0 1px 2px rgba(255, 220, 140, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7),
    0 3px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.schedule-event-card:hover .schedule-medallion {
  transform: scale(1.08);
}

.schedule-medallion img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  image-rendering: -webkit-optimize-contrast;
}

.schedule-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schedule-card-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #24160a;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.schedule-card-timing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.88rem;
  color: #553314;
}

.schedule-date-range {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: #42250d;
}

.schedule-date-range i {
  color: #a87428;
  font-size: 0.82rem;
}

.schedule-duration-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(140, 99, 40, 0.12);
  border: 1px solid rgba(140, 99, 40, 0.3);
  color: #573310;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
}

/* Symmetrical Dual Status & Countdown Capsule */
.schedule-dual-capsule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #9c7033;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.capsule-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 0 10px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
}

.capsule-status.status-active {
  background:
    radial-gradient(ellipse 75% 50% at 50% 0%, rgba(120, 235, 145, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, #2b823c 0%, #195c26 52%, #0e3b17 100%);
  color: #e8f5e9;
  box-shadow: inset 0 1px 0 rgba(195, 255, 205, 0.5);
}

.capsule-status.status-upcoming {
  background:
    radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255, 240, 160, 0.6) 0%, transparent 70%),
    linear-gradient(180deg, #d8961d 0%, #ad6e0e 52%, #683d05 100%);
  color: #fff9eb;
  box-shadow: inset 0 1px 0 rgba(255, 245, 195, 0.65);
}

.capsule-status.status-ended {
  background: linear-gradient(180deg, #6c757d 0%, #495057 100%);
  color: #f8f9fa;
}

.capsule-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(circle at 50% 0%, rgba(74, 45, 15, 0.6) 0%, transparent 80%),
    linear-gradient(180deg, #241407 0%, #120903 100%);
  padding: 0 10px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fae19c;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 2px rgba(255, 220, 140, 0.25), inset 0 -1px 3px rgba(0, 0, 0, 0.8);
}

.capsule-countdown .time-label {
  font-size: 0.64rem;
  color: #c9a56d;
  font-family: 'Crimson Pro', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-left: 2px;
}

/* Pulsing dot for live active events */
.pulse-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #52e379;
  box-shadow: 0 0 0 0 rgba(82, 227, 121, 0.7);
  animation: pulse-live 1.8s infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 227, 121, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(82, 227, 121, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 227, 121, 0);
  }
}

.event-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.event-filter-btn {
  background: rgba(255, 248, 235, 0.65);
  border: 1.5px solid rgba(156, 114, 59, 0.4);
  color: #42260c;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.event-filter-btn:hover {
  background: rgba(255, 248, 235, 0.95);
  border-color: #8c6023;
  color: #2b1807;
  transform: translateY(-1px);
}

.event-filter-btn.active {
  background: linear-gradient(180deg, #5c3c1a 0%, #261405 100%) !important;
  border-color: #b88738 !important;
  color: #fae19c !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.event-desc-card {
  background: rgba(255, 248, 235, 0.78);
  border: 1.5px solid #9c723b;
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: 0 4px 14px rgba(60, 40, 15, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}

.event-desc-card:hover {
  transform: translateY(-2px);
  border-color: #7d541c;
  box-shadow: 0 8px 24px rgba(60, 40, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.event-icon-frame {
  width: 96px;
  min-width: 96px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 245, 225, 0.95) 0%, rgba(230, 205, 165, 0.6) 100%);
  border: 1.5px solid rgba(156, 114, 59, 0.5);
  border-radius: 8px;
  padding: 6px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(60, 40, 15, 0.12);
  flex-shrink: 0;
}

.event-icon-frame.event-icon-wide {
  width: 130px;
  min-width: 130px;
}

.event-icon-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.25s ease;
}

.event-desc-card:hover .event-icon-frame img {
  transform: scale(1.06);
}

.event-title {
  color: #2b1807;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.3;
}

.event-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(156, 114, 59, 0.4);
}

.event-cat-pvp {
  background: rgba(180, 40, 40, 0.1);
  border-color: rgba(180, 40, 40, 0.4);
  color: #7d1c1c;
}

.event-cat-drop {
  background: rgba(40, 140, 70, 0.1);
  border-color: rgba(40, 140, 70, 0.4);
  color: #1b632f;
}

.event-cat-bonus {
  background: rgba(180, 120, 20, 0.12);
  border-color: rgba(180, 120, 20, 0.4);
  color: #7a4e0c;
}

.event-desc-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: #3b2410;
  line-height: 1.6;
}

.event-desc-body p {
  margin-bottom: 0.65rem;
}

.event-desc-body p:last-child {
  margin-bottom: 0;
}

.event-info-box {
  background: rgba(156, 114, 59, 0.09);
  border-left: 3px solid #9c723b;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 9px 0;
  font-size: 0.91rem;
  color: #382310;
}

.event-highlight-box {
  background: rgba(180, 135, 45, 0.1);
  border-left: 3px solid #b88738;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 9px 0;
  font-size: 0.91rem;
  color: #382310;
}

.event-schedule-pill {
  background: rgba(255, 245, 225, 0.9);
  border: 1px solid rgba(156, 114, 59, 0.35);
  border-radius: 5px;
  padding: 7px 12px;
  margin: 8px 0;
  font-size: 0.88rem;
  color: #382310;
}

/* Crisp, high-contrast dark metallic icon badges for parchment content */
.event-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(180deg, #3d220a 0%, #1a0c03 100%);
  border: 1px solid #b88738;
  color: #ffd67a;
  font-size: 0.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.event-section-icon.icon-danger {
  background: linear-gradient(180deg, #591616 0%, #2e0808 100%);
  border-color: #c24646;
  color: #ffc7c7;
}

.event-section-icon.icon-warning {
  background: linear-gradient(180deg, #5c3505 0%, #2d1800 100%);
  border-color: #d98816;
  color: #ffe094;
}

.event-section-icon.icon-success {
  background: linear-gradient(180deg, #184724 0%, #0c2612 100%);
  border-color: #43a35b;
  color: #bbf2ca;
}

.event-bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  border-radius: 3px;
  background: rgba(74, 44, 15, 0.12);
  border: 1px solid rgba(140, 99, 40, 0.4);
  color: #5c3008;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.event-reward-box {
  background: rgba(255, 250, 238, 0.85);
  border: 1px dashed rgba(156, 114, 59, 0.5);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 9px 0;
}

.event-reward-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #42250d;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-reward-items {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.event-reward-items li {
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.91rem;
  color: #382310;
}

.event-reward-items li .reward-icon {
  font-size: 1.05rem;
  display: inline-block;
  min-width: 22px;
  text-align: center;
}

.event-feature-list {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 0 0;
}

.event-feature-list li {
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.91rem;
  color: #2e1a0a;
}

/* ==========================================================================
   EMPTY STATES (HOMEPAGE NOUTĂȚI, PATCH NOTES & EVENTS)
   ========================================================================== */
.news-empty-state-home {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.75) 0%, rgba(248, 238, 220, 0.5) 100%);
  border: 1.5px dashed rgba(163, 120, 65, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.news-empty-state-home .news-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a2c10 0%, #1e0e04 85%);
  border: 1.5px solid #d4a04d;
  box-shadow:
    inset 0 1px 2px rgba(255, 220, 140, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.25);
}

.news-empty-state-home .news-empty-icon i {
  color: #ffd67a;
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

.schedule-empty-card {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(248, 238, 220, 0.55) 100%);
  border: 1.5px dashed rgba(163, 120, 65, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.schedule-empty-card .schedule-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a2c10 0%, #1e0e04 85%);
  border: 1.5px solid #d4a04d;
  box-shadow:
    inset 0 1px 2px rgba(255, 220, 140, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

.schedule-empty-card .schedule-empty-icon i {
  color: #ffd67a;
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}


/* ==========================================================================
   VOTE4BUFF DEDICATED PAGE
   ========================================================================== */
.vote4buff-page-container {
  width: 100%;
}

.vote4buff-intro-card {
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(248, 238, 220, 0.55) 100%);
  border: 1.5px solid rgba(163, 120, 65, 0.45);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vote4buff-brand-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #4a2c10 0%, #1e0e04 85%);
  border: 1.5px solid #d4a04d;
  box-shadow:
    inset 0 1px 2px rgba(255, 220, 140, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7),
    0 3px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.vote4buff-brand-icon-box i {
  color: #ffd67a;
  font-size: 1.25rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* Ornate Inner Frame replicating the old parchment panel */
.vote4buff-ornate-frame {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 225, 0.6) 0%, rgba(232, 212, 178, 0.85) 100%),
    linear-gradient(180deg, #ecd8b3 0%, #dec198 100%);
  border: 2px solid #8e6537;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px #d8be94,
    inset 0 0 20px rgba(78, 48, 16, 0.2),
    0 6px 18px rgba(0, 0, 0, 0.14);
  padding: 12px;
}

.vote4buff-frame-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(168, 126, 68, 0.35) 0%, rgba(168, 126, 68, 0.08) 75%, transparent 100%);
  border: 1px solid rgba(142, 101, 55, 0.45);
  border-radius: 4px;
}

.vote4buff-ruby-gem {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: radial-gradient(circle at 35% 30%, #ff4b4b 0%, #aa0000 65%, #550000 100%);
  border: 1.5px solid #ffd86b;
  box-shadow: 0 0 8px rgba(255, 60, 60, 0.6), inset 0 1px 2px rgba(255, 200, 200, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.vote4buff-frame-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #631010;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.vote4buff-frame-content {
  padding: 4px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Big Dragon Button */
.vote4buff-dragon-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 22px;
}

.vote4buff-dragon-btn {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1221 / 357;
  background-image: url('../images/site/vote_btn.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  padding: 0 20px;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.22s ease;
  user-select: none;
}

.vote4buff-dragon-btn:hover {
  transform: translateY(-2px) scale(1.025);
  filter: brightness(1.15) drop-shadow(0 10px 24px rgba(255, 140, 0, 0.45));
}

.vote4buff-dragon-btn:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
}

.vote4buff-dragon-btn-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.25rem, 3.2vw, 1.95rem);
  font-weight: 700;
  color: #ffd86b;
  text-shadow:
    0 2px 0 #000000,
    0 3px 6px #000000,
    0 0 12px rgba(255, 180, 0, 0.85),
    0 0 24px rgba(255, 110, 0, 0.6);
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Status Alerts */
.vote4buff-status-alert {
  width: 100%;
  max-width: 580px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 6px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.35;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.vote4buff-alert-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.vote4buff-alert-text-wrap {
  flex: 1;
  min-width: 0;
}

.vote4buff-alert-reward {
  background: linear-gradient(135deg, rgba(235, 247, 235, 0.95) 0%, rgba(209, 237, 210, 0.95) 100%);
  border: 1.5px solid #388e3c;
  color: #1b5e20;
  margin-bottom: 10px;
}
.vote4buff-alert-reward .vote4buff-alert-icon-wrap {
  background: #2e7d32;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(46, 125, 50, 0.4);
}

.vote4buff-alert-history {
  background: linear-gradient(135deg, rgba(235, 243, 252, 0.95) 0%, rgba(209, 227, 247, 0.95) 100%);
  border: 1.5px solid #1976d2;
  color: #0d47a1;
  margin-top: 6px;
}
.vote4buff-alert-history .vote4buff-alert-icon-wrap {
  background: #1565c0;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(21, 101, 192, 0.4);
}

.vote4buff-alert-ready {
  background: linear-gradient(135deg, rgba(255, 248, 235, 0.95) 0%, rgba(254, 237, 210, 0.95) 100%);
  border: 1.5px solid #e65100;
  color: #8c3b00;
  margin-top: 6px;
}
.vote4buff-alert-ready .vote4buff-alert-icon-wrap {
  background: #ef6c00;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(239, 108, 0, 0.4);
}

.vote4buff-passed-time {
  opacity: 0.85;
  font-style: italic;
}

/* Step Boxes */
.vote4buff-step-box {
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.75) 0%, rgba(248, 238, 220, 0.5) 100%);
  border: 1px solid rgba(163, 120, 65, 0.35);
  border-radius: 6px;
  padding: 16px;
  position: relative;
  transition: all 0.2s ease;
}

.vote4buff-step-box:hover {
  border-color: #a37841;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.vote4buff-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a2c10 0%, #1e0e04 85%);
  border: 1.5px solid #d4a04d;
  color: #ffd67a;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}