/* ============================================================
 * FEATURE CSS: Midnight Archives theme (v1 + v2 + v3)
 * Merged bundle — built 2026-07-03 (reorg). Original cascade order:
 *   - css/midnight-archives-2026-07-01.css
 *   - css/midnight-archives-v2-2026-07-01.css
 *   - css/midnight-archives-v3-2026-07-01.css
 * ============================================================ */

/* ─────────── SOURCE: css/midnight-archives-2026-07-01.css ─────────── */
/* ============================================================================
   THE MIDNIGHT ARCHIVES — أرشيف منتصف الليل
   Complete Victorian Gothic Dark-Luxury Redesign — 2026-07-01
   Identity: ELASHKEF Style Bible v1.0 (The Keeper / The Midnight Archives)
   Palette:
     Charcoal   #0F0E0D   Dark Bronze #181614   Leather  #4B3325
     Bronze     #9B6B3D   Old Gold    #C6A16B   Parchment #E7D5AF
     Fire       #FFB15E   Wood        #3B281D
   This file is loaded LAST and overrides all previous theme layers.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cinzel+Decorative:wght@700;900&family=Aref+Ruqaa:wght@400;700&family=Amiri:wght@400;700&display=swap');

/* ---------------------------------------------------------------------------
   1) DESIGN TOKENS — override every color variable used across all 22 CSS files
   --------------------------------------------------------------------------- */
:root {
  /* Old gold replaces the yellow "benrati" */
  --benrati: #C6A16B;
  --benrati-light: #E7D5AF;
  --benrati-dark: #9B6B3D;
  --benrati-deep: #6E4E2E;
  --benrati-glow: rgba(198, 161, 107, 0.35);

  --gold: #C6A16B;
  --gold-light: #E7D5AF;
  --gold-dark: #9B6B3D;
  --gold-glow: rgba(198, 161, 107, 0.28);

  /* Bronze replaces purple as the primary */
  --primary: #9B6B3D;
  --primary-light: #C6A16B;
  --primary-dark: #6E4E2E;
  --purple-deep: #241A11;
  --purple-glow: rgba(155, 107, 61, 0.30);

  /* Fire ember replaces cyan */
  --secondary: #FFB15E;
  --accent: #C6A16B;
  --accent-light: #E7D5AF;
  --accent-dark: #9B6B3D;

  /* Midnight charcoal base */
  --dark: #0F0E0D;
  --dark-light: #181614;
  --dark-card: #1A1610;
  --dark-card-hover: #241D14;

  /* Aged-leather glass */
  --glass-bg: rgba(24, 19, 13, 0.82);
  --glass-border: rgba(198, 161, 107, 0.22);
  --glass-border-hover: rgba(198, 161, 107, 0.55);

  /* Extra archive tokens */
  --ma-parchment: #E7D5AF;
  --ma-fire: #FFB15E;
  --ma-leather: #4B3325;
  --ma-wood: #3B281D;
  --ma-ink: #0F0E0D;
  --ma-candle: rgba(255, 177, 94, 0.16);
}

/* ---------------------------------------------------------------------------
   2) GLOBAL CANVAS — candlelit charcoal, vignette, film grain
   --------------------------------------------------------------------------- */
html { background: #0F0E0D; }

body,
body.bg-dark {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(155, 107, 61, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(255, 177, 94, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 12% 90%, rgba(75, 51, 37, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #12100E 0%, #0F0E0D 45%, #0C0B0A 100%) !important;
  background-attachment: fixed !important;
  color: #E7D5AF;
}

/* Cinematic vignette */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse 105% 90% at 50% 40%, transparent 55%, rgba(5, 4, 3, 0.55) 100%);
}

/* Film grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------------------------------------------------------------------------
   3) TYPOGRAPHY — engraved gold headings, manuscript feel
   --------------------------------------------------------------------------- */
h1, h2, h3, .loading-title, .section-header h2 {
  font-family: 'Aref Ruqaa', 'Amiri', 'Cinzel', 'Cairo', serif !important;
  letter-spacing: 0.02em;
}
[lang="en"] h1, [lang="en"] h2, .font-poppins h1, .font-poppins h2 {
  font-family: 'Cinzel', 'Cinzel Decorative', 'Poppins', serif !important;
}

.gold-text,
.text-gold-light {
  background: linear-gradient(180deg, #E7D5AF 0%, #C6A16B 45%, #9B6B3D 80%, #C6A16B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C6A16B;
  filter: drop-shadow(0 1px 6px rgba(198, 161, 107, 0.25));
}

/* Engraved main hero title */
.animate-text-glow,
.animate-text-glow span {
  animation: none !important;
  text-shadow:
    0 1px 0 rgba(231, 213, 175, 0.25),
    0 -1px 0 rgba(0, 0, 0, 0.8),
    0 0 28px rgba(198, 161, 107, 0.35),
    0 0 60px rgba(255, 177, 94, 0.12) !important;
}

/* ---------------------------------------------------------------------------
   4) NAVIGATION — dark leather bar with bronze filigree line
   --------------------------------------------------------------------------- */
.glass-nav,
#main-nav {
  background: linear-gradient(180deg, rgba(20, 16, 11, 0.96) 0%, rgba(15, 14, 13, 0.92) 100%) !important;
  border-bottom: 1px solid rgba(198, 161, 107, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 8px 30px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(198, 161, 107, 0.10) !important;
  backdrop-filter: blur(14px) saturate(0.9);
}

#nav-title,
.nav-title-gradient {
  font-family: 'Aref Ruqaa', 'Cinzel', serif !important;
  background: linear-gradient(180deg, #E7D5AF, #C6A16B 60%, #9B6B3D) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.03em;
}

.nav-link, #nav-links a, #nav-links button {
  color: #C9B896 !important;
  transition: color .25s, text-shadow .25s;
}
.nav-link:hover, .nav-link.active, #nav-links a:hover {
  color: #E7D5AF !important;
  text-shadow: 0 0 14px rgba(255, 177, 94, 0.45);
}

/* ---------------------------------------------------------------------------
   5) GLASS SURFACES — aged leather panels with ornate double border
   --------------------------------------------------------------------------- */
.glass-card,
.glass,
.about-streamer-premium,
.game-card,
.leaderboard-card {
  background:
    linear-gradient(160deg, rgba(38, 29, 19, 0.92) 0%, rgba(24, 19, 13, 0.94) 55%, rgba(18, 15, 11, 0.96) 100%) !important;
  border: 1px solid rgba(198, 161, 107, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(231, 213, 175, 0.07),
    inset 0 0 40px rgba(0, 0, 0, 0.45),
    0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

.glass-card:hover,
.game-card:hover {
  border-color: rgba(198, 161, 107, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(231, 213, 175, 0.10),
    0 0 0 1px rgba(198, 161, 107, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.65),
    0 0 46px rgba(255, 177, 94, 0.10) !important;
}

/* Buttons v2 — clean gold plate + engraved leather (professional) */
.glass-btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EBD9B4 0%, #CBA76F 48%, #A87F42 100%) !important;
  color: #1C140A !important;
  border: 1px solid #7A5A32 !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.75),
    inset 0 -1px 0 rgba(90, 62, 32, 0.55),
    0 0 0 3px rgba(198, 161, 107, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.45) !important;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .25s, filter .25s;
}
.glass-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 251, 235, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.glass-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.8),
    inset 0 -1px 0 rgba(90, 62, 32, 0.5),
    0 0 0 3px rgba(255, 177, 94, 0.22),
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(255, 177, 94, 0.22) !important;
}
.glass-btn-primary:hover::after { left: 130%; }
.glass-btn-primary:active { transform: translateY(0); }
.glass-btn-primary i { color: #3B281D !important; }

.glass-btn-outline, .glass-btn {
  background: linear-gradient(180deg, rgba(32, 25, 17, 0.85), rgba(19, 15, 11, 0.9)) !important;
  border: 1px solid rgba(198, 161, 107, 0.42) !important;
  color: #E7D5AF !important;
  box-shadow:
    inset 0 1px 0 rgba(231, 213, 175, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.4) !important;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s, background .25s;
}
.glass-btn-outline:hover, .glass-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 177, 94, 0.75) !important;
  background: linear-gradient(180deg, rgba(52, 38, 24, 0.9), rgba(28, 21, 14, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(231, 213, 175, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(255, 177, 94, 0.18) !important;
}
.glass-btn-outline:active, .glass-btn:active { transform: translateY(0); }
.glass-btn-outline i { color: #FFB15E !important; }

.glass-input, input.glass-input, select, textarea {
  background: rgba(15, 13, 10, 0.85) !important;
  border: 1px solid rgba(198, 161, 107, 0.28) !important;
  color: #E7D5AF !important;
}
.glass-input:focus, input:focus, textarea:focus {
  border-color: rgba(255, 177, 94, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(255, 177, 94, 0.12) !important;
}
::placeholder { color: rgba(201, 184, 150, 0.45) !important; }

/* ---------------------------------------------------------------------------
   6) HERO — candlelit archive scene
   --------------------------------------------------------------------------- */
.hero-section { position: relative; }
.hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(255, 177, 94, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% 110%, rgba(59, 40, 29, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, rgba(18, 15, 12, 0.4), transparent 40%) !important;
}

/* Keeper portrait ring: bronze double frame + candle halo */
.hero-character-circle {
  border: 2px solid rgba(198, 161, 107, 0.55) !important;
  box-shadow:
    0 0 0 6px rgba(15, 14, 13, 0.9),
    0 0 0 7px rgba(155, 107, 61, 0.5),
    0 0 60px rgba(255, 177, 94, 0.22),
    inset 0 0 40px rgba(0, 0, 0, 0.5) !important;
  background: radial-gradient(circle at 50% 35%, #241D14 0%, #14100B 70%) !important;
}

/* Nav logo: circular emblem needs no rounded-square crop */
#nav-logo-img { border-radius: 50%; }
.hero-character-halo-bg {
  background: radial-gradient(circle, rgba(255, 177, 94, calc(var(--halo-intensity, 60) / 130)) 0%, rgba(198, 161, 107, 0.18) 45%, transparent 72%) !important;
  filter: blur(18px);
}
.hero-character-glow {
  background: radial-gradient(circle, rgba(255, 177, 94, 0.18) 0%, transparent 65%) !important;
}

.hero-badge {
  background: linear-gradient(180deg, rgba(38, 29, 19, 0.9), rgba(20, 16, 11, 0.92)) !important;
  border: 1px solid rgba(198, 161, 107, 0.35) !important;
  color: #E7D5AF !important;
  box-shadow: inset 0 1px 0 rgba(231, 213, 175, 0.08), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  font-family: 'Amiri', 'Cairo', serif;
}
.hero-badge:hover {
  border-color: rgba(255, 177, 94, 0.6) !important;
  box-shadow: 0 0 18px rgba(255, 177, 94, 0.2) !important;
}

/* ---------------------------------------------------------------------------
   6b) HERO v2 — clean editorial hierarchy (rebuilt by JS layer)
   --------------------------------------------------------------------------- */
.welcome-text-line { color: #C9B896 !important; font-family: 'Amiri', 'Cairo', serif !important; }

.ma-hero-content { text-align: center; }

.ma-hero-welcome {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  color: #B7A480;
  margin-bottom: 0.15rem;
  letter-spacing: 0.01em;
}

.ma-hero-title {
  font-family: 'Aref Ruqaa', 'Amiri', serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1.25;
  margin: 0 0 0.4rem;
  background: linear-gradient(180deg, #F2E4C0 0%, #D9BC85 38%, #B08650 68%, #D9BC85 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(198, 161, 107, 0.28));
}

.ma-hero-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0.7rem auto 1.1rem;
  color: #9B6B3D;
  max-width: 380px;
}
.ma-hero-rule .l, .ma-hero-rule .r { flex: 1; height: 1px; }
.ma-hero-rule .l { background: linear-gradient(90deg, transparent, #9B6B3D); }
.ma-hero-rule .r { background: linear-gradient(90deg, #9B6B3D, transparent); }
.ma-hero-rule .f { font-size: 0.85rem; text-shadow: 0 0 10px rgba(255, 177, 94, 0.5); line-height: 1; }

.ma-hero-desc {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.95;
  color: #C9B896;
  max-width: 38rem;
  margin: 0 auto 0.7rem;
}

.ma-hero-tagline2 {
  font-family: 'Amiri', serif;
  font-style: italic;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  color: #D8A662;
  opacity: 0.92;
  margin: 0 auto 1.9rem;
  max-width: 34rem;
  text-shadow: 0 0 18px rgba(255, 177, 94, 0.28);
}

.ma-hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.7rem;
  margin-bottom: 2rem;
}

.ma-hero-cta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
  margin-bottom: 2.8rem;
}

/* Ornate key scroll indicator */
.ma-scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #8A7A62;
  font-family: 'Amiri', serif;
  font-size: 0.8rem;
}
.ma-scroll-hint .key {
  font-size: 1.25rem;
  color: #C6A16B;
  animation: ma-key-bob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 177, 94, 0.4));
}
@keyframes ma-key-bob {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(7px); opacity: 1; }
}

@media (max-width: 640px) {
  .ma-hero-desc { line-height: 1.8; padding: 0 0.4rem; }
  .ma-hero-cta { gap: 0.7rem; }
  .ma-hero-cta button { padding-left: 1.4rem !important; padding-right: 1.4rem !important; }
}

/* ---------------------------------------------------------------------------
   7) SECTION HEADERS — ornate archive plates with fleuron dividers
   --------------------------------------------------------------------------- */
.section-header h2 {
  color: #E7D5AF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 24px rgba(198, 161, 107, 0.25);
}
.section-header p { color: #A8967A !important; font-family: 'Amiri', 'Cairo', serif; }

.section-divider {
  position: relative;
  background: linear-gradient(90deg, transparent, #9B6B3D 20%, #E7D5AF 50%, #9B6B3D 80%, transparent) !important;
  height: 1px !important;
  overflow: visible !important;
}
.section-divider::before {
  content: '❦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #C6A16B;
  font-size: 1rem;
  background: #0F0E0D;
  padding: 0 12px;
  text-shadow: 0 0 12px rgba(255, 177, 94, 0.5);
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   8) THE ARCHIVE LORE SECTION (injected by midnight-archives JS)
   --------------------------------------------------------------------------- */
.ma-lore-section {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 3.5rem 1rem 2.5rem;
}
.ma-lore-frame {
  position: relative;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(155, 107, 61, 0.10) 0%, transparent 60%),
    linear-gradient(165deg, rgba(36, 28, 18, 0.94) 0%, rgba(20, 16, 12, 0.96) 60%, rgba(16, 13, 10, 0.97) 100%);
  border: 1px solid rgba(198, 161, 107, 0.30);
  border-radius: 14px;
  padding: 3rem 2rem 2.5rem;
  box-shadow:
    inset 0 0 0 1px rgba(15, 14, 13, 0.9),
    inset 0 0 0 2px rgba(155, 107, 61, 0.22),
    inset 0 0 60px rgba(0, 0, 0, 0.5),
    0 20px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
  overflow: hidden;
}
/* Ornate corners */
.ma-corner {
  position: absolute;
  width: 44px; height: 44px;
  pointer-events: none;
  border: 2px solid rgba(198, 161, 107, 0.55);
}
.ma-corner.tl { top: 10px; right: auto; left: 10px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.ma-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.ma-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.ma-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.ma-corner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: #C6A16B;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 177, 94, 0.6);
}
.ma-corner.tl::after { top: -4px; left: -4px; }
.ma-corner.tr::after { top: -4px; right: -4px; }
.ma-corner.bl::after { bottom: -4px; left: -4px; }
.ma-corner.br::after { bottom: -4px; right: -4px; }

/* Wax seal emblem */
.ma-seal {
  width: 84px; height: 84px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 35% 30%, #6E4E2E 0%, #4B3325 45%, #2E2015 100%);
  border: 2px solid rgba(198, 161, 107, 0.6);
  box-shadow:
    inset 0 2px 6px rgba(231, 213, 175, 0.2),
    inset 0 -4px 10px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 177, 94, 0.25);
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: #E7D5AF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 177, 94, 0.5);
  letter-spacing: 0.05em;
  position: relative;
}
.ma-seal::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(198, 161, 107, 0.45);
}

.ma-lore-title {
  font-family: 'Aref Ruqaa', 'Amiri', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 0.4rem;
  background: linear-gradient(180deg, #E7D5AF 0%, #C6A16B 55%, #9B6B3D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(198, 161, 107, 0.3));
}
.ma-lore-sub {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #9B6B3D;
  margin-bottom: 1.6rem;
}
.ma-lore-text {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: 1.15rem;
  line-height: 2.1;
  color: #CBB894;
  max-width: 46rem;
  margin: 0 auto 1.6rem;
}
.ma-lore-text strong { color: #E7D5AF; }
.ma-lore-quote {
  font-family: 'Amiri', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #FFB15E;
  opacity: 0.9;
  text-shadow: 0 0 18px rgba(255, 177, 94, 0.35);
}
.ma-ornament-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 1.4rem 0 0.2rem;
  color: #9B6B3D;
}
.ma-ornament-row .line {
  height: 1px; width: 90px;
  background: linear-gradient(90deg, transparent, #9B6B3D);
}
.ma-ornament-row .line.r { background: linear-gradient(90deg, #9B6B3D, transparent); }

/* Archive pillars (3 identity cards) */
.ma-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
  text-align: center;
}
.ma-pillar {
  background: linear-gradient(180deg, rgba(30, 23, 15, 0.85), rgba(18, 14, 10, 0.9));
  border: 1px solid rgba(198, 161, 107, 0.22);
  border-radius: 10px;
  padding: 1.4rem 1rem;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.ma-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 177, 94, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 177, 94, 0.12);
}
.ma-pillar .pi { font-size: 1.9rem; margin-bottom: 0.6rem; filter: drop-shadow(0 0 12px rgba(255, 177, 94, 0.4)); }
.ma-pillar h4 {
  font-family: 'Aref Ruqaa', 'Amiri', serif;
  color: #E7D5AF;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.ma-pillar p { color: #A8967A; font-size: 0.9rem; line-height: 1.8; font-family: 'Amiri', 'Cairo', serif; }

/* Hero tagline (legacy injected version — superseded by .ma-hero-tagline2) */
.ma-hero-tagline {
  font-family: 'Amiri', serif;
  font-style: italic;
  color: #C6A16B;
  font-size: 1.02rem;
  margin: 0 auto 1.8rem;
  max-width: 40rem;
  opacity: 0.85;
  text-shadow: 0 0 16px rgba(198, 161, 107, 0.3);
}
.ma-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #9B6B3D;
  margin-bottom: 0.8rem;
}
.ma-hero-kicker::before, .ma-hero-kicker::after {
  content: '';
  height: 1px; width: 44px;
  background: linear-gradient(90deg, transparent, #9B6B3D);
}
.ma-hero-kicker::after { background: linear-gradient(90deg, #9B6B3D, transparent); }

/* ---------------------------------------------------------------------------
   9) EMBERS / DUST / FOG (background layers driven by JS)
   --------------------------------------------------------------------------- */
@keyframes ma-ember-rise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: var(--o, 0.7); }
  70%  { opacity: var(--o, 0.7); }
  100% { transform: translateY(-110vh) translateX(var(--dx, 30px)) scale(0.3); opacity: 0; }
}
.ma-ember {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD9A0 0%, #FFB15E 45%, rgba(255, 177, 94, 0) 75%);
  animation: ma-ember-rise var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes ma-dust-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  50%      { transform: translate(var(--dx, 20px), var(--dy, -24px)); opacity: 0.5; }
}
.ma-dust {
  position: absolute;
  border-radius: 50%;
  background: #C6A16B;
  box-shadow: 0 0 6px rgba(198, 161, 107, 0.6);
  animation: ma-dust-drift var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ma-fog-drift {
  0%   { transform: translateX(-12%); }
  100% { transform: translateX(12%); }
}
.ma-fog {
  position: absolute;
  left: -20%; right: -20%;
  height: 42vh;
  bottom: -8vh;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(155, 130, 100, 0.10) 0%, transparent 70%);
  filter: blur(30px);
  animation: ma-fog-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ma-candle-flicker {
  0%, 100% { opacity: 0.75; }
  20% { opacity: 0.95; }
  33% { opacity: 0.7; }
  55% { opacity: 1; }
  70% { opacity: 0.8; }
  88% { opacity: 0.92; }
}
.ma-candle-glow {
  position: absolute;
  width: 40vw; max-width: 560px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 177, 94, 0.10) 0%, rgba(255, 177, 94, 0.03) 45%, transparent 70%);
  animation: ma-candle-flicker 5.5s ease-in-out infinite;
  filter: blur(6px);
}

/* ---------------------------------------------------------------------------
   10) LOADING SCREEN v2 — "the Archive awakens" (complete redesign)
   Markup rebuilt in index.html; same IDs kept for the inline progress script.
   --------------------------------------------------------------------------- */
.loading-screen.ma-loading {
  background:
    radial-gradient(ellipse 75% 55% at 50% 26%, rgba(155, 107, 61, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 18% 88%, rgba(255, 177, 94, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 84% 82%, rgba(75, 51, 37, 0.16) 0%, transparent 60%),
    #0B0A09 !important;
}
.ma-load-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 85% at 50% 42%, transparent 50%, rgba(4, 3, 2, 0.7) 100%);
}
.ma-load-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 1.2rem;
}

/* Emblem stage */
.ma-load-emblem-wrap {
  position: relative;
  width: 210px; height: 210px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.6rem;
}
.ma-load-glow {
  position: absolute; inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 177, 94, 0.20) 0%, rgba(198, 161, 107, 0.07) 42%, transparent 68%);
  animation: ma-candle-flicker 4.8s ease-in-out infinite;
  filter: blur(10px);
}
.ma-load-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ma-load-ring.r1 {
  inset: -12px;
  border: 1px solid rgba(198, 161, 107, 0.30);
  border-top-color: rgba(231, 213, 175, 0.75);
  animation: ma-ring-spin 9s linear infinite;
}
.ma-load-ring.r2 {
  inset: -26px;
  border: 1px dashed rgba(155, 107, 61, 0.35);
  animation: ma-ring-spin 22s linear infinite reverse;
}
@keyframes ma-ring-spin { to { transform: rotate(360deg); } }
.ma-load-emblem {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: contain;
  animation: ma-emblem-breathe 4.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 177, 94, 0.28));
}
@keyframes ma-emblem-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.ma-load-title {
  font-family: 'Aref Ruqaa', 'Amiri', serif !important;
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.15rem;
  background: linear-gradient(180deg, #F2E4C0 0%, #D9BC85 40%, #B08650 70%, #D9BC85 95%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(198, 161, 107, 0.3));
}
.ma-load-sub {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: #9B6B3D;
  margin-bottom: 1rem;
  text-indent: 0.52em; /* optically center the tracked text */
}
.ma-load-ornament {
  display: flex; align-items: center; gap: 12px;
  width: min(300px, 72vw);
  margin-bottom: 1.7rem;
  color: #9B6B3D;
}
.ma-load-ornament .l, .ma-load-ornament .r { flex: 1; height: 1px; }
.ma-load-ornament .l { background: linear-gradient(90deg, transparent, #9B6B3D); }
.ma-load-ornament .r { background: linear-gradient(90deg, #9B6B3D, transparent); }
.ma-load-ornament .f { font-size: 0.85rem; line-height: 1; text-shadow: 0 0 10px rgba(255, 177, 94, 0.5); }

/* Progress — thin gold filament */
.ma-load-bar-wrap { width: min(320px, 76vw); }
.ma-load-track {
  position: relative;
  height: 3px !important;
  border-radius: 3px;
  background: rgba(75, 51, 37, 0.55) !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(198, 161, 107, 0.12);
  overflow: visible !important;
}
.ma-load-track .loading-bar-fill {
  position: relative;
  height: 100% !important;
  border-radius: 3px;
  background: linear-gradient(90deg, #9B6B3D, #C6A16B 55%, #FFB15E) !important;
  box-shadow: 0 0 12px rgba(255, 177, 94, 0.65);
  transition: width .3s ease;
}
.ma-load-track .loading-bar-fill::after {
  content: '';
  position: absolute;
  right: -4px; top: 50%;
  width: 9px; height: 9px;
  transform: translateY(-50%) rotate(45deg);
  background: #FFD9A0;
  box-shadow: 0 0 14px rgba(255, 177, 94, 0.9);
}
[dir="rtl"] .ma-load-track .loading-bar-fill::after { right: auto; left: -4px; }
.ma-load-pct {
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.2em;
  color: #C6A16B !important;
  margin-top: 0.7rem;
  text-align: center;
}
.ma-load-tip {
  font-family: 'Amiri', serif !important;
  font-style: italic;
  font-size: 0.95rem !important;
  color: #A8967A !important;
  margin-top: 0.5rem;
  transition: opacity .18s ease;
  min-height: 1.6em;
}

/* Restyle the inline-script stars as floating candle dust */
.ma-loading .loading-star {
  background: #C9B896 !important;
  box-shadow: 0 0 6px rgba(198, 161, 107, 0.5) !important;
}
.ma-loading .loading-star.gold {
  background: #FFB15E !important;
  box-shadow: 0 0 10px rgba(255, 177, 94, 0.8) !important;
}

@media (max-width: 480px) {
  .ma-load-emblem-wrap { width: 168px; height: 168px; }
  .ma-load-emblem { width: 158px; height: 158px; }
  .ma-load-sub { letter-spacing: 0.36em; text-indent: 0.36em; }
}

/* Legacy fallbacks (if old markup ever returns) */
.loading-subtitle { color: #9B6B3D !important; font-family: 'Cinzel', serif !important; letter-spacing: 0.4em !important; text-transform: uppercase; font-size: 0.75rem !important; }
.loading-orbit-ring { border-color: rgba(198, 161, 107, 0.25) !important; }
.loading-orbit-particle { background: #FFB15E !important; box-shadow: 0 0 10px rgba(255,177,94,.8) !important; }

/* ---------------------------------------------------------------------------
   11) FOOTER — archive colophon
   --------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, transparent, rgba(15, 13, 10, 0.9)) !important;
  border-top: 1px solid rgba(198, 161, 107, 0.22) !important;
  position: relative;
}
.site-footer::before {
  content: '❦';
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: #0F0E0D;
  color: #9B6B3D;
  padding: 0 16px;
  font-size: 1.1rem;
}
.footer-social-link {
  background: rgba(30, 23, 15, 0.85) !important;
  border: 1px solid rgba(198, 161, 107, 0.3) !important;
  color: #C6A16B !important;
}
.footer-social-link:hover {
  border-color: rgba(255, 177, 94, 0.7) !important;
  color: #FFB15E !important;
  box-shadow: 0 0 18px rgba(255, 177, 94, 0.25) !important;
}

/* ---------------------------------------------------------------------------
   12) COMPONENT RECOLOR SWEEP — kill remaining purples/cyans from old layers
   --------------------------------------------------------------------------- */
/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #12100D; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6E4E2E, #9B6B3D) !important;
  border-radius: 6px;
  border: 2px solid #12100D;
}
::-webkit-scrollbar-thumb:hover { background: #C6A16B !important; }

/* Selection */
::selection { background: rgba(198, 161, 107, 0.35); color: #F5EAD0; }

/* Toasts / modals */
#toast-container > div, .toast {
  background: linear-gradient(160deg, rgba(38, 29, 19, 0.96), rgba(20, 16, 12, 0.97)) !important;
  border: 1px solid rgba(198, 161, 107, 0.4) !important;
  color: #E7D5AF !important;
}
#auth-modal .glass-card, .modal-content {
  border: 1px solid rgba(198, 161, 107, 0.35) !important;
}

/* Generic text hues from Tailwind used across pages */
.text-gray-300 { color: #C9B896 !important; }
.text-gray-400 { color: #A8967A !important; }
.text-gray-500 { color: #8A7A62 !important; }
.text-gray-200 { color: #DCCBA6 !important; }
.text-purple-400, .text-purple-300, .text-violet-400 { color: #C6A16B !important; }
.text-cyan-400, .text-blue-400 { color: #E7D5AF !important; }
.text-yellow-400, .text-amber-400 { color: #FFB15E !important; }

/* Common hardcoded purple gradients in older layers */
[style*="#7C3AED"], [style*="#7c3aed"] { --primary: #9B6B3D; }
.bg-purple-600, .bg-purple-500, .bg-violet-600 { background-color: #9B6B3D !important; }
.border-purple-500, .border-violet-500 { border-color: rgba(198, 161, 107, 0.5) !important; }

/* Game cards / leaderboards accents */
.game-card .game-icon, .game-card-icon { filter: sepia(0.35) hue-rotate(-15deg) saturate(0.9); }
.leaderboard-rank-1 { color: #FFB15E !important; }
.leaderboard-rank-2 { color: #E7D5AF !important; }
.leaderboard-rank-3 { color: #9B6B3D !important; }

/* About section premium panel */
.about-portrait-frame {
  border: 2px solid rgba(198, 161, 107, 0.5) !important;
  box-shadow: 0 0 0 5px rgba(15, 14, 13, 0.9), 0 0 0 6px rgba(155, 107, 61, 0.4), 0 0 40px rgba(255, 177, 94, 0.18) !important;
}
.about-portrait-glow { background: radial-gradient(circle, rgba(255, 177, 94, 0.22), transparent 70%) !important; }
.about-tag {
  background: rgba(30, 23, 15, 0.85) !important;
  border: 1px solid rgba(198, 161, 107, 0.3) !important;
  color: #DCCBA6 !important;
}
.about-quote {
  border-color: rgba(198, 161, 107, 0.4) !important;
  background: rgba(24, 19, 13, 0.6) !important;
}
.about-quote p { color: #CBB894 !important; font-family: 'Amiri', serif; font-style: italic; }
.about-quote-marks { color: rgba(198, 161, 107, 0.35) !important; font-family: 'Cinzel Decorative', serif; }
.about-username-badge {
  background: linear-gradient(180deg, rgba(38, 29, 19, 0.95), rgba(20, 16, 12, 0.95)) !important;
  border: 1px solid rgba(198, 161, 107, 0.45) !important;
}

/* Cursor accents */
#cursor-main { border-color: rgba(198, 161, 107, 0.7) !important; }
#cursor-dot { background: #FFB15E !important; }

/* Reduce motion: keep it classy */
@media (prefers-reduced-motion: reduce) {
  .ma-ember, .ma-dust, .ma-fog, .ma-candle-glow { animation: none !important; }
}

/* Mobile refinements */
@media (max-width: 640px) {
  .ma-lore-frame { padding: 2.2rem 1.1rem 1.8rem; }
  .ma-lore-text { font-size: 1.02rem; line-height: 1.95; }
  .ma-hero-kicker { letter-spacing: 0.3em; }
  .ma-seal { width: 68px; height: 68px; font-size: 1.3rem; }
}


/* ─────────── SOURCE: css/midnight-archives-v2-2026-07-01.css ─────────── */
/* ============================================================================
   THE MIDNIGHT ARCHIVES — V2 COMPONENT REDESIGN
   أرشيف منتصف الليل — إعادة تصميم المكونات الاحترافية (2026-07-01)
   ----------------------------------------------------------------------------
   Loaded AFTER midnight-archives-2026-07-01.css. Redesigns every interactive
   component from scratch:
   • Archive Ledger game cards (gold filigree frames, wax seal, ledger plate)
   • Games hub header as an engraved bronze plate
   • Category filters as brass bookmark tabs
   • Game pages (jawlah layout) as candlelit archive desks
   • Modals as manuscript pages, leaderboards as ledgers
   • Buttons, inputs, toasts, tables — full identity pass
   Palette: Charcoal #0F0E0D · Bronze #9B6B3D · Old Gold #C6A16B ·
            Parchment #E7D5AF · Fire #FFB15E · Leather #4B3325 · Wood #3B281D
   ============================================================================ */

:root {
  --ma2-gold: #C6A16B;
  --ma2-gold-hi: #E9D6A8;
  --ma2-gold-lo: #8A6B3F;
  --ma2-bronze: #9B6B3D;
  --ma2-fire: #FFB15E;
  --ma2-parch: #E7D5AF;
  --ma2-leather: #4B3325;
  --ma2-wood: #3B281D;
  --ma2-ink: #0F0E0D;
  --ma2-card-bg-1: #1C1610;
  --ma2-card-bg-2: #120E0A;
  --ma2-wax: #7A1F1A;
  --ma2-wax-hi: #A8352C;
  --ma2-wax-lo: #4C100D;
  --ma2-gold-metal: linear-gradient(160deg, #8A6B3F 0%, #C6A16B 22%, #F0E0B8 40%, #C6A16B 55%, #8A6B3F 78%, #A9834F 100%);
  --ma2-grain:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(25deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 120% 90% at 30% 0%, rgba(155, 107, 61, 0.10) 0%, transparent 55%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1) GAMES HUB — engraved bronze plate header
   ═══════════════════════════════════════════════════════════════════════════ */
.games-hub-header {
  position: relative;
  background:
    var(--ma2-grain),
    linear-gradient(170deg, #221A11 0%, #171209 55%, #100C08 100%) !important;
  border: 1px solid rgba(198, 161, 107, 0.30) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    0 0 0 4px #0C0A07,
    0 0 0 5px rgba(155, 107, 61, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.55) !important;
  overflow: visible !important;
}
.games-hub-header::before {
  content: '';
  position: absolute; inset: 9px;
  border: 1px solid rgba(198, 161, 107, 0.28);
  border-radius: 6px;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 177, 94, 0.07) 0%, transparent 60%);
}
.games-hub-header::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C6A16B' stroke-opacity='0.55' stroke-width='1.4'%3E%3Cpath d='M4 30 V10 Q4 4 10 4 H30'/%3E%3Cpath d='M9 26 V13 Q9 9 13 9 H26'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23C6A16B' fill-opacity='0.65' stroke='none'/%3E%3Cpath d='M30 4 q4 5 10 3' stroke-width='1'/%3E%3Cpath d='M4 30 q5 4 3 10' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C6A16B' stroke-opacity='0.55' stroke-width='1.4' transform='translate(56,0) scale(-1,1)'%3E%3Cpath d='M4 30 V10 Q4 4 10 4 H30'/%3E%3Cpath d='M9 26 V13 Q9 9 13 9 H26'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23C6A16B' fill-opacity='0.65' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C6A16B' stroke-opacity='0.55' stroke-width='1.4' transform='translate(0,56) scale(1,-1)'%3E%3Cpath d='M4 30 V10 Q4 4 10 4 H30'/%3E%3Cpath d='M9 26 V13 Q9 9 13 9 H26'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23C6A16B' fill-opacity='0.65' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C6A16B' stroke-opacity='0.55' stroke-width='1.4' transform='translate(56,56) scale(-1,-1)'%3E%3Cpath d='M4 30 V10 Q4 4 10 4 H30'/%3E%3Cpath d='M9 26 V13 Q9 9 13 9 H26'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23C6A16B' fill-opacity='0.65' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}
.games-hub-title {
  font-family: 'Aref Ruqaa', 'Cinzel', serif !important;
  color: #EFE0BC !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 26px rgba(255, 177, 94, 0.22),
    0 0 60px rgba(198, 161, 107, 0.12) !important;
  letter-spacing: 0.01em;
}
.games-hub-title .gold-text {
  background: var(--ma2-gold-metal) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.85));
}
.games-hub-subtitle {
  font-family: 'Amiri', serif !important;
  color: #B39F7C !important;
  font-style: italic;
}
.games-hub-stats {
  border-top: 1px solid rgba(198, 161, 107, 0.18);
  padding-top: 14px;
  margin-top: 6px;
}
.games-hub-stat-num { color: var(--ma2-gold-hi) !important; font-family: 'Cinzel', serif; }
.games-hub-stat-label {
  color: #8F7C5F !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.62rem !important;
}
.games-hub-stat-divider { background: rgba(198, 161, 107, 0.22) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   2) CATEGORY FILTERS — brass bookmark tabs
   ═══════════════════════════════════════════════════════════════════════════ */
.games-filter-bar { gap: 10px !important; }
.games-filter-chip {
  position: relative;
  background: linear-gradient(178deg, rgba(40, 31, 20, 0.92) 0%, rgba(22, 17, 11, 0.96) 100%) !important;
  border: 1px solid rgba(198, 161, 107, 0.26) !important;
  border-radius: 4px !important;
  color: #BCA57E !important;
  font-family: 'Amiri', 'Cairo', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 168, 0.07),
    inset 0 -6px 12px rgba(0, 0, 0, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.28s ease !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
  padding: 9px 20px !important;
}
.games-filter-chip:hover {
  color: var(--ma2-gold-hi) !important;
  border-color: rgba(198, 161, 107, 0.55) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 168, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(198, 161, 107, 0.12) !important;
}
.games-filter-chip.active {
  background: linear-gradient(178deg, #7A5B33 0%, #4E3A21 60%, #3A2B18 100%) !important;
  border-color: rgba(233, 214, 168, 0.65) !important;
  color: #F5EAD0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(240, 224, 184, 0.35),
    inset 0 -8px 14px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(198, 161, 107, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.5) !important;
}
.games-filter-chip i { color: inherit !important; opacity: 0.85; }
.games-filter-chip-count {
  background: rgba(15, 12, 8, 0.65) !important;
  border: 1px solid rgba(198, 161, 107, 0.3) !important;
  color: var(--ma2-gold) !important;
  border-radius: 3px !important;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem !important;
  padding: 1px 7px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3) ★ THE ARCHIVE LEDGER CARD — complete game card redesign ★
   Markup built by midnight-archives-v2 JS:
   .gc-card.ma-card > .ma-card-frame + corners + .ma-card-no + .ma-ribbon +
   .ma-card-image(img/platforms) + .ma-card-seal + .ma-card-body + .ma-card-open
   ═══════════════════════════════════════════════════════════════════════════ */
#games-grid, .games-grid { row-gap: 3.2rem !important; }

.ma-card {
  position: relative;
  background:
    var(--ma2-grain),
    linear-gradient(168deg, var(--ma2-card-bg-1) 0%, var(--ma2-card-bg-2) 70%, #0D0A07 100%) !important;
  border: 1px solid rgba(155, 107, 61, 0.34) !important;
  border-radius: 8px !important;
  overflow: visible !important;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    inset 0 0 46px rgba(0, 0, 0, 0.5),
    0 0 0 4px #0B0906,
    0 0 0 5px rgba(155, 107, 61, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.6) !important;
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease !important;
  animation: ma-card-in 0.6s cubic-bezier(0.19, 1, 0.22, 1) both;
  contain: layout style;
}
@keyframes ma-card-in {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.ma-card:hover {
  transform: translateY(-10px);
  border-color: rgba(198, 161, 107, 0.65) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    inset 0 0 46px rgba(0, 0, 0, 0.45),
    0 0 0 4px #0B0906,
    0 0 0 5px rgba(198, 161, 107, 0.5),
    0 30px 70px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 177, 94, 0.10) !important;
}

.ma-card-frame {
  position: absolute; inset: 7px;
  border: 1px solid rgba(198, 161, 107, 0.20);
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.ma-card:hover .ma-card-frame {
  border-color: rgba(198, 161, 107, 0.45);
  box-shadow: inset 0 0 26px rgba(255, 177, 94, 0.05);
}

.ma-card-corner {
  position: absolute;
  width: 44px; height: 44px;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C6A16B' stroke-width='1.5'%3E%3Cpath d='M3 26 V9 Q3 3 9 3 H26' stroke-opacity='0.9'/%3E%3Cpath d='M8 22 V12 Q8 8 12 8 H22' stroke-opacity='0.55'/%3E%3Cpath d='M26 3 q4 4 9 2.5' stroke-opacity='0.7' stroke-width='1.1'/%3E%3Cpath d='M3 26 q4 4 2.5 9' stroke-opacity='0.7' stroke-width='1.1'/%3E%3Ccircle cx='12.5' cy='12.5' r='2' fill='%23E9D6A8' fill-opacity='0.9' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  opacity: 0.85;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.ma-card:hover .ma-card-corner {
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 177, 94, 0.35));
}
.ma-card-corner.tl { top: -2px; left: -2px; }
.ma-card-corner.tr { top: -2px; right: -2px; transform: scaleX(-1); }
.ma-card-corner.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.ma-card-corner.br { bottom: -2px; right: -2px; transform: scale(-1, -1); }

.ma-card-no {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  z-index: 8;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(26, 20, 12, 0.92), rgba(14, 11, 7, 0.95));
  border: 1px solid rgba(198, 161, 107, 0.45);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(233, 214, 168, 0.14), 0 3px 10px rgba(0, 0, 0, 0.6);
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ma2-gold-hi);
  text-transform: uppercase;
}
.ma-card-no b { color: var(--ma2-fire); font-weight: 700; }

.ma-ribbon {
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  width: 112px; height: 112px;
  overflow: hidden;
  z-index: 9;
  pointer-events: none;
  border-radius: 6px;
}
.ma-ribbon span {
  position: absolute;
  display: block;
  width: 168px;
  padding: 6px 0;
  background: linear-gradient(180deg, var(--ma2-wax-hi) 0%, var(--ma2-wax) 55%, var(--ma2-wax-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 180, 0.28),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.55);
  color: #F5E3C8;
  font-family: 'Amiri', 'Cairo', serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  top: 24px; right: -48px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(233, 199, 160, 0.35);
  border-bottom: 1px solid rgba(60, 12, 9, 0.9);
}
html[dir="rtl"] .ma-ribbon span { right: auto; left: -48px; transform: rotate(-45deg); }
.ma-ribbon.ma-ribbon-ramadan span {
  background: linear-gradient(180deg, #3E7A55 0%, #2C5C3F 55%, #1B3B27 100%);
  border-top-color: rgba(190, 235, 205, 0.3);
  border-bottom-color: rgba(10, 35, 20, 0.9);
}

.ma-card-image {
  position: relative;
  margin: 14px 14px 0;
  height: 215px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(198, 161, 107, 0.4);
  box-shadow:
    0 0 0 3px #0D0A07,
    0 0 0 4px rgba(155, 107, 61, 0.35),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(75, 51, 37, 0.55) 0%, rgba(15, 12, 9, 0.95) 100%);
  z-index: 2;
}
.ma-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.34) saturate(0.82) brightness(0.72) contrast(1.06);
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), filter 0.5s ease;
  display: block;
}
.ma-card:hover .ma-card-image img {
  transform: scale(1.07);
  filter: sepia(0.22) saturate(0.95) brightness(0.86) contrast(1.05);
}
.ma-card-image::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 108%, rgba(255, 177, 94, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 130% 110% at 50% 50%, transparent 52%, rgba(8, 6, 4, 0.72) 100%),
    linear-gradient(to top, rgba(13, 10, 7, 0.92) 0%, transparent 38%);
  z-index: 2;
}
.ma-card-image::before {
  content: '';
  position: absolute;
  top: -30%; bottom: -30%;
  left: -80%;
  width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(240, 224, 184, 0.10) 45%, rgba(255, 235, 195, 0.16) 50%, rgba(240, 224, 184, 0.10) 55%, transparent 100%);
  transform: skewX(-18deg);
  z-index: 3;
  transition: left 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
.ma-card:hover .ma-card-image::before { left: 130%; }

.ma-card-platforms {
  position: absolute;
  bottom: 10px; inset-inline-end: 10px;
  display: flex; gap: 7px;
  z-index: 5;
}
.ma-card-platform {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  background: radial-gradient(circle at 32% 28%, #6A4E2C 0%, #3C2C18 55%, #241A0E 100%);
  border: 1px solid rgba(198, 161, 107, 0.55);
  box-shadow:
    inset 0 1px 1px rgba(240, 224, 184, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.6);
  color: var(--ma2-gold-hi);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ma-card:hover .ma-card-platform {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(240, 224, 184, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 5px 12px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(255, 177, 94, 0.25);
}
.ma-card-platform.twitch i { color: #C6A16B; }
.ma-card-platform.kick span { font-weight: 900; font-size: 0.72rem; color: #CFE3B8; }

.ma-card-seal {
  position: absolute;
  top: 197px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 62px;
  z-index: 10;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 30%, var(--ma2-wax-hi) 0%, var(--ma2-wax) 46%, var(--ma2-wax-lo) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 190, 160, 0.28),
    inset 0 -4px 8px rgba(30, 5, 4, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.7),
    0 0 0 3px rgba(76, 16, 13, 0.35);
  border: 1px solid rgba(160, 55, 45, 0.6);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.ma-card-seal::before {
  content: '';
  position: absolute; inset: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 200, 170, 0.30);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
.ma-card-seal span {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: rgba(255, 214, 185, 0.92);
  text-shadow:
    0 -1px 1px rgba(40, 6, 4, 0.9),
    0 1px 1px rgba(255, 225, 200, 0.25);
  letter-spacing: 0.02em;
}
.ma-card:hover .ma-card-seal {
  transform: translateX(-50%) rotate(-8deg) scale(1.06);
  box-shadow:
    inset 0 2px 4px rgba(255, 190, 160, 0.3),
    inset 0 -4px 8px rgba(30, 5, 4, 0.75),
    0 10px 22px rgba(0, 0, 0, 0.75),
    0 0 26px rgba(168, 53, 44, 0.35);
}

.ma-card-body {
  padding: 40px 22px 16px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.ma-card-title {
  font-family: 'Aref Ruqaa', 'Cinzel', serif;
  font-size: 1.32rem;
  font-weight: 700;
  color: #F0E2C2;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 22px rgba(255, 177, 94, 0.12);
  transition: color 0.35s ease, text-shadow 0.35s ease;
  margin-bottom: 2px;
}
.ma-card:hover .ma-card-title {
  color: var(--ma2-gold-hi);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 26px rgba(255, 177, 94, 0.3);
}
.ma-card-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  margin: 7px auto 11px;
  width: 78%;
}
.ma-card-rule span {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 161, 107, 0.55));
}
.ma-card-rule span:last-child {
  background: linear-gradient(90deg, rgba(198, 161, 107, 0.55), transparent);
}
.ma-card-rule i {
  font-style: normal;
  color: var(--ma2-gold);
  font-size: 0.78rem;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(255, 177, 94, 0.3));
}
.ma-card-desc {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: 0.92rem;
  color: #A8977A;
  line-height: 1.8;
  min-height: 3.35em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15px;
}

.ma-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(198, 161, 107, 0.14);
}
.ma-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 13px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  background: linear-gradient(180deg, rgba(44, 34, 21, 0.9), rgba(24, 18, 11, 0.95));
  border: 1px solid rgba(198, 161, 107, 0.28);
  box-shadow: inset 0 1px 0 rgba(233, 214, 168, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  color: #C4AE87;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}
.ma-card:hover .ma-card-tag {
  border-color: rgba(198, 161, 107, 0.5);
  color: var(--ma2-gold-hi);
}
.ma-card-tag i { font-size: 0.6rem; color: var(--ma2-gold); }
.ma-card-info-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4A3820 0%, #2A2012 60%, #191307 100%);
  border: 1px solid rgba(198, 161, 107, 0.4);
  box-shadow: inset 0 1px 1px rgba(240, 224, 184, 0.2), 0 2px 6px rgba(0, 0, 0, 0.5);
  color: var(--ma2-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ma-card-info-btn:hover {
  color: var(--ma2-gold-hi);
  transform: scale(1.12);
  box-shadow: inset 0 1px 1px rgba(240, 224, 184, 0.25), 0 0 14px rgba(255, 177, 94, 0.3);
}

.ma-card-open {
  position: relative;
  margin: 4px 14px 14px;
  padding: 10px 0;
  border-radius: 4px;
  text-align: center;
  font-family: 'Amiri', 'Cairo', serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: #2A1F10;
  background: var(--ma2-gold-metal);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.55),
    inset 0 -2px 5px rgba(90, 62, 30, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s ease;
  z-index: 2;
}
.ma-card-open i { margin-inline-end: 7px; }
.ma-card:hover .ma-card-open {
  opacity: 1;
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.6),
    inset 0 -2px 5px rgba(90, 62, 30, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(255, 177, 94, 0.28);
}
@media (hover: none) {
  .ma-card-open { opacity: 1; transform: none; }
  .ma-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4) GAME PAGES (jawlah layout) — candlelit archive desk
   ═══════════════════════════════════════════════════════════════════════════ */
.jawlah-game-header {
  background:
    var(--ma2-grain),
    linear-gradient(180deg, rgba(30, 23, 14, 0.97), rgba(17, 13, 8, 0.99)) !important;
  border: 1px solid rgba(198, 161, 107, 0.28) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 168, 0.06),
    0 0 0 3px #0B0906,
    0 0 0 4px rgba(155, 107, 61, 0.2),
    0 10px 30px rgba(0, 0, 0, 0.55) !important;
}
.jawlah-game-title {
  font-family: 'Aref Ruqaa', serif !important;
  color: var(--ma2-gold-hi) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 177, 94, 0.18);
}
.jawlah-header-center i { color: var(--ma2-gold) !important; }
.jawlah-back-btn {
  background: linear-gradient(180deg, rgba(44, 34, 21, 0.95), rgba(24, 18, 11, 0.97)) !important;
  border: 1px solid rgba(198, 161, 107, 0.35) !important;
  color: var(--ma2-gold) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(233, 214, 168, 0.1), 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}
.jawlah-back-btn:hover {
  color: var(--ma2-gold-hi) !important;
  border-color: rgba(198, 161, 107, 0.65) !important;
  box-shadow: 0 0 16px rgba(255, 177, 94, 0.2) !important;
}
.jawlah-header-label { color: #8F7C5F !important; font-family: 'Amiri', serif; }
.jawlah-header-separator { background: rgba(198, 161, 107, 0.25) !important; }
.jawlah-player-count { color: var(--ma2-parch) !important; }

.jawlah-sidebar, .jawlah-panel,
.jawlah-chat-panel, .jawlah-settings-panel,
.jawlah-game-center, .jawlah-game-container {
  background:
    var(--ma2-grain),
    linear-gradient(172deg, rgba(26, 20, 12, 0.96) 0%, rgba(15, 12, 8, 0.98) 100%) !important;
  border: 1px solid rgba(198, 161, 107, 0.22) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    0 0 0 3px #0B0906,
    0 0 0 4px rgba(155, 107, 61, 0.16),
    0 12px 34px rgba(0, 0, 0, 0.5) !important;
}
.jawlah-panel-title, .jawlah-section-title {
  font-family: 'Aref Ruqaa', serif !important;
  color: var(--ma2-gold) !important;
  border-bottom: 1px solid rgba(198, 161, 107, 0.2) !important;
}
.jawlah-grid-bg { opacity: 0.05 !important; filter: sepia(1) hue-rotate(-20deg); }

.jawlah-btn-primary {
  background: var(--ma2-gold-metal) !important;
  color: #2A1F10 !important;
  border: none !important;
  border-radius: 5px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.55),
    inset 0 -2px 5px rgba(90, 62, 30, 0.5),
    0 5px 16px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
}
.jawlah-btn-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.6),
    inset 0 -2px 5px rgba(90, 62, 30, 0.5),
    0 7px 22px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(255, 177, 94, 0.3) !important;
}
.jawlah-btn-primary i { color: #3B281D !important; }
.jawlah-btn-secondary, .jawlah-btn-reset, .jawlah-footer-btn {
  background: linear-gradient(180deg, rgba(44, 34, 21, 0.95), rgba(24, 18, 11, 0.97)) !important;
  border: 1px solid rgba(198, 161, 107, 0.32) !important;
  color: #CDB88F !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(233, 214, 168, 0.08), 0 3px 10px rgba(0, 0, 0, 0.45) !important;
}
.jawlah-btn-secondary:hover, .jawlah-footer-btn:hover {
  color: var(--ma2-gold-hi) !important;
  border-color: rgba(198, 161, 107, 0.6) !important;
}
.jawlah-input, .jawlah-select, .jawlah-textarea {
  background: rgba(12, 9, 6, 0.8) !important;
  border: 1px solid rgba(198, 161, 107, 0.28) !important;
  color: var(--ma2-parch) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
.jawlah-input:focus, .jawlah-select:focus {
  border-color: rgba(198, 161, 107, 0.65) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(198, 161, 107, 0.14) !important;
  outline: none !important;
}
.jawlah-chat-msg, .jawlah-chat-msg-v {
  background: rgba(24, 18, 11, 0.6) !important;
  border: 1px solid rgba(198, 161, 107, 0.12) !important;
  border-radius: 5px !important;
}
.jawlah-chat-name { color: var(--ma2-gold) !important; font-weight: 700; }
.jawlah-chat-text { color: #C9B896 !important; }
.jawlah-chat-correct { color: #A6C98F !important; }
.jawlah-chat-wrong { color: #C98F8F !important; }
.jawlah-empty-state { color: #7A6A50 !important; font-family: 'Amiri', serif; }
.jawlah-diff-card {
  background: linear-gradient(175deg, rgba(34, 26, 16, 0.95), rgba(19, 15, 9, 0.97)) !important;
  border: 1px solid rgba(198, 161, 107, 0.25) !important;
  border-radius: 6px !important;
}
.jawlah-diff-card:hover, .jawlah-diff-card.active {
  border-color: rgba(198, 161, 107, 0.6) !important;
  box-shadow: 0 0 22px rgba(255, 177, 94, 0.14) !important;
}
.jawlah-diff-name { color: var(--ma2-gold-hi) !important; }
.jawlah-diff-desc { color: #A8967A !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5) MODALS — manuscript pages
   ═══════════════════════════════════════════════════════════════════════════ */
#auth-modal .glass-card,
.modal-content,
.game-info-modal .glass-card {
  position: relative;
  background:
    var(--ma2-grain),
    linear-gradient(170deg, #211A11 0%, #151009 60%, #0F0B07 100%) !important;
  border: 1px solid rgba(198, 161, 107, 0.4) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(0, 0, 0, 0.5),
    0 0 0 4px #0B0906,
    0 0 0 5px rgba(155, 107, 61, 0.3),
    0 40px 90px rgba(0, 0, 0, 0.8) !important;
}
#auth-modal h2, #auth-modal h3, .modal-content h2, .modal-content h3 {
  font-family: 'Aref Ruqaa', serif !important;
  color: var(--ma2-gold-hi) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6) LEADERBOARDS — the eternal ledger
   ═══════════════════════════════════════════════════════════════════════════ */
.leaderboard-card, .leaderboard-panel, .lb-panel {
  background:
    var(--ma2-grain),
    linear-gradient(172deg, rgba(28, 22, 13, 0.97), rgba(16, 12, 8, 0.99)) !important;
  border: 1px solid rgba(198, 161, 107, 0.3) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 3px #0B0906,
    0 0 0 4px rgba(155, 107, 61, 0.2),
    0 14px 40px rgba(0, 0, 0, 0.55) !important;
}
.leaderboard-row, .lb-row {
  border-bottom: 1px dashed rgba(198, 161, 107, 0.14) !important;
  font-family: 'Amiri', 'Cairo', serif;
}
.leaderboard-row:hover, .lb-row:hover { background: rgba(198, 161, 107, 0.05) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7) MISC COMPONENT PASS
   ═══════════════════════════════════════════════════════════════════════════ */
.game-card {
  background:
    var(--ma2-grain),
    linear-gradient(168deg, var(--ma2-card-bg-1) 0%, var(--ma2-card-bg-2) 100%) !important;
  border: 1px solid rgba(155, 107, 61, 0.3) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 4px #0B0906,
    0 0 0 5px rgba(155, 107, 61, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.55) !important;
}
.game-card:hover {
  border-color: rgba(198, 161, 107, 0.6) !important;
  box-shadow:
    0 0 0 4px #0B0906,
    0 0 0 5px rgba(198, 161, 107, 0.45),
    0 26px 60px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(255, 177, 94, 0.08) !important;
}
.game-card .game-title { font-family: 'Aref Ruqaa', serif !important; color: #F0E2C2 !important; }
.game-card .game-tag {
  background: rgba(44, 34, 21, 0.85) !important;
  border: 1px solid rgba(198, 161, 107, 0.25) !important;
  color: #C4AE87 !important;
  border-radius: 3px !important;
}
.game-card .game-badge-new {
  background: linear-gradient(180deg, var(--ma2-wax-hi), var(--ma2-wax-lo)) !important;
  color: #F5E3C8 !important;
  border-radius: 3px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}

.progress-bar, .progress-fill { background: var(--ma2-gold-metal) !important; }

table th {
  color: var(--ma2-gold) !important;
  font-family: 'Aref Ruqaa', serif;
  border-bottom: 1px solid rgba(198, 161, 107, 0.3) !important;
}
table td { border-bottom: 1px dashed rgba(198, 161, 107, 0.1) !important; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
  background: rgba(12, 9, 6, 0.75) !important;
  border-color: rgba(198, 161, 107, 0.3) !important;
  color: var(--ma2-parch) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(198, 161, 107, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(198, 161, 107, 0.12) !important;
}

footer a[class*="social"], .social-icon, .footer-social a {
  background: radial-gradient(circle at 32% 28%, #4A3820 0%, #2A2012 60%, #191307 100%) !important;
  border: 1px solid rgba(198, 161, 107, 0.4) !important;
  color: var(--ma2-gold) !important;
  box-shadow: inset 0 1px 1px rgba(240, 224, 184, 0.2), 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}
footer a[class*="social"]:hover, .social-icon:hover, .footer-social a:hover {
  color: var(--ma2-gold-hi) !important;
  box-shadow: inset 0 1px 1px rgba(240, 224, 184, 0.25), 0 0 16px rgba(255, 177, 94, 0.3) !important;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8) RESPONSIVE + MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ma-card-image { height: 185px; margin: 12px 12px 0; }
  .ma-card-seal { width: 54px; height: 54px; top: 172px; }
  .ma-card-seal span { font-size: 0.92rem; }
  .ma-card-body { padding: 34px 16px 12px; }
  .ma-card-title { font-size: 1.16rem; }
  .ma-card-no { font-size: 0.56rem; padding: 3px 9px; top: 20px; inset-inline-start: 20px; }
  .ma-card-corner { width: 34px; height: 34px; background-size: 34px 34px; }
  .games-filter-chip { padding: 8px 14px !important; font-size: 0.78rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-card, .ma-card-image img, .ma-card-image::before,
  .ma-card-seal, .ma-card-open { transition: none !important; animation: none !important; }
}


/* ─────────── SOURCE: css/midnight-archives-v3-2026-07-01.css ─────────── */
/* ============================================================
   MIDNIGHT ARCHIVES — V3 PROFESSIONAL POLISH LAYER
   كوكب الاشكيف — طبقة الصقل الاحترافي الثالثة
   Loaded LAST after midnight-archives-v2. Pure additive layer.
   Targets: nav, hero CTA, stats, about, footer, popup, filters
   ============================================================ */

:root {
  --ma3-ink:        #0F0E0D;
  --ma3-coal:       #14110E;
  --ma3-bronze:     #9B6B3D;
  --ma3-gold:       #C6A16B;
  --ma3-gold-hi:    #E9D6A8;
  --ma3-parchment:  #E7D5AF;
  --ma3-wax:        #A8352C;
  --ma3-gold-metal: linear-gradient(160deg,#8A6A3B 0%,#C6A16B 22%,#F2E3B6 40%,#C6A16B 58%,#8A6A3B 80%,#6E5330 100%);
  --ma3-hairline:   linear-gradient(90deg,transparent, rgba(198,161,107,.55) 20%, rgba(233,214,168,.9) 50%, rgba(198,161,107,.55) 80%, transparent);
  --ma3-plate-bg:   linear-gradient(175deg,#221B14 0%,#191410 45%,#131009 100%);
}

/* ============================================================
   0. CRITICAL FIX — kill horizontal overflow (page shift bug)
   Decorative layers (.ma-fog / .ma-candle-glow / .about-bg-decor)
   were expanding scrollWidth to ~1870px causing an ugly side gap.
   ============================================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
#bg-animation {
  overflow: hidden !important;
  max-width: 100vw;
}
.ma-fog, .ma-candle-glow {
  will-change: transform;
}
.about-bg-decor {
  pointer-events: none;
}

/* ============================================================
   1. GLOBAL FINISH — selection, scrollbar, focus
   ============================================================ */
::selection { background: rgba(198,161,107,.85); color: #14110E; }

html { scrollbar-color: #6E5330 #14110E; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #12100C; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#7A5C33,#4E3A21);
  border-radius: 8px;
  border: 2px solid #12100C;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#9B7A45,#6E5330); }

:focus-visible {
  outline: 2px solid rgba(198,161,107,.85) !important;
  outline-offset: 2px;
}

/* ============================================================
   2. NAVIGATION — bronze archive bar
   ============================================================ */
nav#main-nav.glass-nav {
  background: linear-gradient(180deg, rgba(24,19,14,.97) 0%, rgba(18,14,10,.94) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(198,161,107,.28) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 10px 32px -12px rgba(0,0,0,.85) !important;
}
nav#main-nav.glass-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ma3-hairline);
  pointer-events: none;
}

#nav-title {
  font-family: 'Aref Ruqaa', 'Amiri', serif !important;
  background: linear-gradient(180deg,#F2E3B6 0%,#C6A16B 55%,#9B6B3D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
  letter-spacing: .5px;
}

nav#main-nav img[alt="Logo"] {
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1px rgba(198,161,107,.55),
    0 0 0 3px rgba(24,19,14,1),
    0 0 0 4px rgba(155,107,61,.45),
    0 4px 10px rgba(0,0,0,.6);
}

.nav-btn {
  position: relative;
  color: #B9A07E !important;
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .25s ease;
  background: transparent !important;
  border: none !important;
}
.nav-btn:hover { color: var(--ma3-gold-hi) !important; }
.nav-btn.active { color: var(--ma3-gold-hi) !important; }
.nav-btn::after {
  content: '';
  position: absolute;
  inset-inline: 18%;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ma3-hairline);
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity .3s ease, transform .3s ease;
}
.nav-btn:hover::after { opacity: .55; transform: scaleX(.8); }
.nav-btn.active::after { opacity: 1; transform: scaleX(1); }

/* login button as gold metal seal */
#auth-section .glass-btn,
#auth-section button {
  background: var(--ma3-gold-metal) !important;
  color: #241A0E !important;
  font-weight: 800 !important;
  border: 1px solid rgba(122,92,51,.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.65),
    inset 0 -2px 4px rgba(78,58,33,.55),
    0 4px 12px -4px rgba(0,0,0,.7) !important;
  text-shadow: 0 1px 0 rgba(255,244,214,.4);
}
#auth-section .glass-btn:hover,
#auth-section button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* lang / theme small buttons */
nav#main-nav .glass-btn:not(#auth-section .glass-btn):not(#auth-section button) {
  background: linear-gradient(180deg,#2A2018,#1B1510) !important;
  border: 1px solid rgba(198,161,107,.35) !important;
  color: var(--ma3-gold) !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.12), 0 2px 6px rgba(0,0,0,.5) !important;
}
nav#main-nav .glass-btn:not(#auth-section .glass-btn):not(#auth-section button):hover {
  border-color: rgba(198,161,107,.7) !important;
  color: var(--ma3-gold-hi) !important;
}

#mobile-menu {
  background: var(--ma3-plate-bg) !important;
  border: 1px solid rgba(198,161,107,.35) !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.1), 0 16px 40px rgba(0,0,0,.75) !important;
}
.mobile-nav-btn {
  color: #C9B48F !important;
  border-radius: 10px;
}
.mobile-nav-btn:hover, .mobile-nav-btn.active {
  background: rgba(198,161,107,.12) !important;
  color: var(--ma3-gold-hi) !important;
}

/* ============================================================
   3. HERO CTA + GLOBAL BUTTONS — grand metal + engraved outline
   ============================================================ */
.glass-btn-primary {
  background: var(--ma3-gold-metal) !important;
  color: #241A0E !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  border: 1px solid rgba(122,92,51,.95) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.7),
    inset 0 -3px 6px rgba(78,58,33,.55),
    0 8px 22px -8px rgba(198,161,107,.45),
    0 6px 16px -6px rgba(0,0,0,.8) !important;
  text-shadow: 0 1px 0 rgba(255,244,214,.45);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.glass-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.7),
    inset 0 -3px 6px rgba(78,58,33,.55),
    0 12px 30px -8px rgba(198,161,107,.55),
    0 10px 22px -8px rgba(0,0,0,.85) !important;
}

.glass-btn-outline {
  background: linear-gradient(180deg, rgba(38,29,20,.85), rgba(24,18,12,.9)) !important;
  color: var(--ma3-gold) !important;
  border: 1px solid rgba(198,161,107,.5) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.12),
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 6px 16px -8px rgba(0,0,0,.8) !important;
  transition: all .25s ease;
}
.glass-btn-outline:hover {
  border-color: rgba(233,214,168,.8) !important;
  color: var(--ma3-gold-hi) !important;
  transform: translateY(-2px);
}

/* ============================================================
   4. STATS SECTION — engraved bronze plaques
   ============================================================ */
.stat-card {
  position: relative;
  background: var(--ma3-plate-bg) !important;
  border: 1px solid rgba(155,107,61,.5) !important;
  border-radius: 14px !important;
  padding: 26px 18px 22px !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.14),
    inset 0 0 0 1px rgba(0,0,0,.4),
    inset 0 -14px 26px rgba(0,0,0,.35),
    0 10px 26px -10px rgba(0,0,0,.8) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(198,161,107,.22);
  border-radius: 9px;
  pointer-events: none;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--ma3-hairline);
  opacity: .8;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(198,161,107,.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.18),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 18px 40px -12px rgba(0,0,0,.85),
    0 0 24px -6px rgba(198,161,107,.25) !important;
}

/* replace emoji icons with FA icons in bronze medallion */
.stat-card > .text-3xl {
  font-size: 0 !important;
  line-height: 0;
  margin-bottom: 14px !important;
  display: flex;
  justify-content: center;
}
.stat-card > .text-3xl::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.05rem;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F2E3B6;
  background:
    radial-gradient(circle at 32% 28%, rgba(242,227,182,.28), transparent 55%),
    linear-gradient(160deg,#6E5330,#3B2C19 70%);
  border: 1px solid rgba(198,161,107,.6);
  box-shadow:
    inset 0 1px 0 rgba(242,227,182,.35),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 4px 10px -3px rgba(0,0,0,.7);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.stat-card:nth-child(1) > .text-3xl::before { content: '\f11b'; } /* gamepad */
.stat-card:nth-child(2) > .text-3xl::before { content: '\f017'; } /* clock */
.stat-card:nth-child(3) > .text-3xl::before { content: '\f0c0'; } /* users */
.stat-card:nth-child(4) > .text-3xl::before { content: '\f519'; } /* broadcast */

/* unify numbers to gold metal — kill inline rainbow colors */
.stat-card > .text-4xl {
  font-family: 'Cinzel', serif !important;
  font-weight: 800 !important;
  font-size: 2.1rem !important;
  background: linear-gradient(180deg,#F2E3B6 0%,#C6A16B 60%,#9B6B3D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.65));
  letter-spacing: 1px;
}
.stat-card > .text-gray-400 {
  color: #A98F68 !important;
  font-size: .82rem !important;
  letter-spacing: .5px;
}

/* ============================================================
   5. ABOUT SECTION — unified manuscript styling
   ============================================================ */
.about-streamer-premium {
  background: var(--ma3-plate-bg) !important;
  border: 1px solid rgba(155,107,61,.55) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.12),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 24px 60px -20px rgba(0,0,0,.85) !important;
  position: relative;
  overflow: hidden;
}
.about-streamer-premium::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: var(--ma3-hairline);
  z-index: 2;
}

.about-portrait-frame {
  border: 1px solid rgba(198,161,107,.6) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  background: linear-gradient(160deg,#3A2C1B,#241B10) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(233,214,168,.2),
    0 14px 34px -10px rgba(0,0,0,.85),
    0 0 30px -8px rgba(198,161,107,.2) !important;
}
.about-portrait-img {
  border-radius: 11px !important;
  filter: sepia(.12) saturate(1.05) contrast(1.03);
}
.about-portrait-glow {
  background: radial-gradient(circle, rgba(198,161,107,.28), transparent 65%) !important;
}
.about-username-badge {
  background: linear-gradient(180deg,#2A2016,#1A130C) !important;
  border: 1px solid rgba(198,161,107,.5) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.15), 0 4px 10px rgba(0,0,0,.6) !important;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

/* unify tags — brass archive tags (kill mixed red/blue/green icons) */
.about-tag {
  background: linear-gradient(180deg,#2A2118,#1C1610) !important;
  border: 1px solid rgba(155,107,61,.55) !important;
  border-radius: 8px !important;
  color: #CBB48F !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.1), 0 2px 6px rgba(0,0,0,.45) !important;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all .25s ease;
}
.about-tag:hover {
  border-color: rgba(198,161,107,.85) !important;
  color: var(--ma3-gold-hi) !important;
  transform: translateY(-1px);
}
.about-tag i, .about-tag .fas, .about-tag .fab,
.about-tag .text-red-400, .about-tag .text-blue-400, .about-tag .text-green-400 {
  color: var(--ma3-gold) !important;
}

/* quote — illuminated manuscript pull-quote */
.about-quote {
  background: linear-gradient(180deg, rgba(58,44,27,.35), rgba(30,23,14,.5)) !important;
  border: none !important;
  border-inline-start: 3px solid var(--ma3-gold) !important;
  border-radius: 6px 12px 12px 6px !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.08) !important;
  position: relative;
}
.about-quote p {
  font-family: 'Amiri', serif !important;
  font-size: 1.12rem !important;
  color: var(--ma3-parchment) !important;
  font-style: italic;
}
.about-quote-marks {
  font-size: 0 !important;
  line-height: 0;
}
.about-quote-marks::before {
  content: '❝';
  font-size: 2rem;
  color: rgba(198,161,107,.65);
  line-height: 1;
  display: block;
}

/* platform links — engraved buttons */
.about-platform-link {
  background: linear-gradient(180deg,#241C13,#17110B) !important;
  border: 1px solid rgba(155,107,61,.5) !important;
  border-radius: 10px !important;
  color: #C9B48F !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.1), 0 3px 8px rgba(0,0,0,.5) !important;
  font-weight: 700;
  transition: all .25s ease;
}
.about-platform-link:hover {
  border-color: var(--accent, var(--ma3-gold)) !important;
  color: var(--ma3-gold-hi) !important;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(233,214,168,.12), 0 8px 18px -6px rgba(0,0,0,.7) !important;
}

/* ============================================================
   6. FOOTER — grand archive colophon
   ============================================================ */
.site-footer {
  position: relative;
  margin-top: 40px;
  padding: 70px 0 44px !important;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(59,40,29,.35), transparent 70%),
    linear-gradient(180deg,#14100B 0%,#0D0A07 100%) !important;
  border-top: 1px solid rgba(155,107,61,.4) !important;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 1px;
  background: var(--ma3-hairline);
}
.site-footer::after {
  content: '❦';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.15rem;
  color: var(--ma3-gold);
  background: #0F0C08;
  padding: 2px 16px;
  border: 1px solid rgba(198,161,107,.4);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(233,214,168,.12);
  text-shadow: 0 0 10px rgba(198,161,107,.5);
}

.site-footer img {
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1px rgba(198,161,107,.55),
    0 0 0 4px rgba(20,16,11,1),
    0 0 0 5px rgba(155,107,61,.4),
    0 6px 14px rgba(0,0,0,.6);
}
.site-footer .text-lg.font-bold {
  font-family: 'Aref Ruqaa', 'Amiri', serif !important;
  font-size: 1.35rem !important;
  background: linear-gradient(180deg,#F2E3B6,#C6A16B 60%,#9B6B3D);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}

.footer-social-link {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 1.05rem !important;
  color: var(--ma3-gold) !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(242,227,182,.14), transparent 55%),
    linear-gradient(160deg,#2E2418,#191309) !important;
  border: 1px solid rgba(155,107,61,.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.18),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 5px 12px -4px rgba(0,0,0,.7) !important;
  transition: all .3s ease;
}
.footer-social-link:hover {
  color: #241A0E !important;
  background: var(--ma3-gold-metal) !important;
  border-color: rgba(233,214,168,.8) !important;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.6),
    0 10px 22px -6px rgba(198,161,107,.45),
    0 8px 16px -6px rgba(0,0,0,.8) !important;
}

.site-footer .text-gray-600 {
  color: #7A6A50 !important;
  font-family: 'Amiri', serif;
  letter-spacing: .4px;
}

/* ============================================================
   7. CATEGORY POPUP — wax-sealed archive note
   ============================================================ */
#kawkab-cat-popup {
  background: linear-gradient(175deg,#231B12 0%,#181209 100%) !important;
  border: 1px solid rgba(198,161,107,.55) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.15),
    inset 0 0 0 1px rgba(0,0,0,.45),
    0 20px 50px -12px rgba(0,0,0,.9),
    0 0 30px -8px rgba(198,161,107,.18) !important;
}
#kawkab-cat-popup .kcp-icon {
  background:
    radial-gradient(circle at 32% 28%, rgba(242,227,182,.25), transparent 55%),
    linear-gradient(160deg,#6E5330,#3B2C19) !important;
  border: 1px solid rgba(198,161,107,.6) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 1px 0 rgba(242,227,182,.3), inset 0 -3px 6px rgba(0,0,0,.5) !important;
}
#kawkab-cat-popup .kcp-title { color: var(--ma3-parchment) !important; }
#kawkab-cat-popup .kcp-title b { color: var(--ma3-gold-hi) !important; }
#kawkab-cat-popup .kcp-sub { color: #A98F68 !important; }
#kawkab-cat-popup .kcp-tag {
  background: linear-gradient(180deg,#2A2016,#1A130C) !important;
  border: 1px solid rgba(198,161,107,.5) !important;
  color: var(--ma3-gold) !important;
  border-radius: 999px !important;
  font-family: 'Cinzel', serif;
  letter-spacing: .6px;
}
#kawkab-cat-popup .kcp-bar { background: rgba(59,44,25,.6) !important; border-radius: 0 0 14px 14px; overflow: hidden; }
#kawkab-cat-popup .kcp-bar i { background: linear-gradient(90deg,#9B6B3D,#E9D6A8) !important; }
#kawkab-cat-popup .kcp-close {
  color: var(--ma3-gold) !important;
  background: rgba(198,161,107,.1) !important;
  border: 1px solid rgba(198,161,107,.35) !important;
  border-radius: 8px !important;
}
#kawkab-cat-popup .kcp-close:hover { background: rgba(198,161,107,.25) !important; }

/* ============================================================
   8. GAMES FILTER CHIPS — brass index tabs
   ============================================================ */
.games-filter-bar {
  gap: 10px !important;
  padding: 6px 4px 14px !important;
}
.games-filter-chip {
  background: linear-gradient(180deg,#241C13,#171109) !important;
  border: 1px solid rgba(155,107,61,.45) !important;
  border-radius: 10px !important;
  color: #B39B74 !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.1),
    0 3px 8px -2px rgba(0,0,0,.55) !important;
  transition: all .25s ease !important;
}
.games-filter-chip i { color: var(--ma3-bronze) !important; transition: color .25s ease; }
.games-filter-chip:hover {
  border-color: rgba(198,161,107,.75) !important;
  color: var(--ma3-gold-hi) !important;
  transform: translateY(-2px);
}
.games-filter-chip:hover i { color: var(--ma3-gold) !important; }
.games-filter-chip.active {
  background: var(--ma3-gold-metal) !important;
  color: #241A0E !important;
  border-color: rgba(122,92,51,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.65),
    inset 0 -2px 5px rgba(78,58,33,.55),
    0 6px 16px -6px rgba(198,161,107,.5) !important;
  text-shadow: 0 1px 0 rgba(255,244,214,.4);
  font-weight: 800 !important;
}
.games-filter-chip.active i { color: #4E3A21 !important; }
.games-filter-chip-count {
  background: rgba(20,15,9,.35) !important;
  border: 1px solid rgba(120,90,50,.5) !important;
  border-radius: 999px !important;
  font-family: 'Cinzel', serif;
  font-weight: 700 !important;
}
.games-filter-chip.active .games-filter-chip-count {
  background: rgba(36,26,14,.85) !important;
  color: var(--ma3-gold-hi) !important;
  border-color: rgba(36,26,14,.9) !important;
}

/* ============================================================
   9. SECTION RHYTHM + MISC POLISH
   ============================================================ */
.glass-card {
  background: linear-gradient(175deg, rgba(34,27,20,.88), rgba(22,17,12,.92)) !important;
  border: 1px solid rgba(155,107,61,.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.08),
    0 12px 30px -12px rgba(0,0,0,.8) !important;
}

.section-header { margin-bottom: 34px !important; }
.section-header h2 { letter-spacing: .5px; }
.section-header p { color: #A98F68 !important; }

.gold-text {
  background: linear-gradient(180deg,#F2E3B6,#C6A16B 60%,#9B6B3D) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.games-hub-stats {
  background: linear-gradient(180deg, rgba(30,23,14,.75), rgba(20,15,9,.85)) !important;
  border: 1px solid rgba(155,107,61,.5) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(233,214,168,.1), 0 6px 16px -6px rgba(0,0,0,.6) !important;
}
.games-hub-stat-num { color: var(--ma3-gold-hi) !important; font-family: 'Cinzel', serif; }
.games-hub-stat-label { color: #A98F68 !important; letter-spacing: .5px; }
.games-hub-stat-divider { background: rgba(155,107,61,.4) !important; }

.toast, .notification {
  background: linear-gradient(175deg,#231B12,#181209) !important;
  border: 1px solid rgba(198,161,107,.5) !important;
  color: var(--ma3-parchment) !important;
}

/* ============================================================
   10. RESPONSIVE + MOTION
   ============================================================ */
@media (max-width: 640px) {
  .stat-card { padding: 20px 12px 18px !important; }
  .stat-card > .text-4xl { font-size: 1.7rem !important; }
  .stat-card > .text-3xl::before { width: 40px; height: 40px; font-size: .95rem; }
  .footer-social-link { width: 42px !important; height: 42px !important; }
  .site-footer { padding: 56px 0 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card, .footer-social-link, .about-platform-link,
  .games-filter-chip, .glass-btn-primary, .glass-btn-outline {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   11. LORE SECTION UPGRADE — "حكاية الأرشيف" grand manuscript
   ============================================================ */

/* --- section spacing + ambient glow behind frame --- */
.ma-lore-section {
  position: relative;
  padding: 90px 20px !important;
}
.ma-lore-section::before {
  content: '';
  position: absolute;
  inset: 40px 0;
  background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(155,107,61,.10), transparent 70%);
  pointer-events: none;
}

/* --- frame: layered leather + parchment sheen + double border --- */
.ma-lore-frame {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 74px 64px 60px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(155,107,61,.55) !important;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(89,63,38,.28), transparent 62%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(59,40,29,.22), transparent 65%),
    repeating-linear-gradient(115deg, rgba(233,214,168,.014) 0 2px, transparent 2px 6px),
    linear-gradient(175deg,#221A12 0%,#1A140D 45%,#131009 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.16),
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 0 90px rgba(0,0,0,.5),
    0 30px 80px -24px rgba(0,0,0,.9),
    0 0 60px -18px rgba(198,161,107,.16) !important;
  overflow: hidden;
}
/* inner engraved double frame */
.ma-lore-frame::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(198,161,107,.28);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}
.ma-lore-frame::after {
  content: '';
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(198,161,107,.10);
  border-radius: 9px;
  pointer-events: none;
  z-index: 1;
}

/* corner filigrees — richer double-arc engraving */
.ma-lore-frame .ma-corner {
  width: 58px !important;
  height: 58px !important;
  border-color: rgba(198,161,107,.75) !important;
  filter: drop-shadow(0 0 6px rgba(198,161,107,.35));
  z-index: 2;
}

/* --- EK seal: molten wax + brass ring + glow --- */
.ma-lore-frame .ma-seal {
  width: 92px !important;
  height: 92px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px !important;
  border-radius: 50% !important;
  font-family: 'Cinzel Decorative','Cinzel',serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  color: #F2E3B6 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,234,190,.35), transparent 46%),
    radial-gradient(circle at 66% 76%, rgba(0,0,0,.45), transparent 55%),
    linear-gradient(155deg,#7A5C33 0%,#4E3A21 55%,#33240F 100%) !important;
  border: 1px solid rgba(233,214,168,.55) !important;
  box-shadow:
    0 0 0 4px #16110B,
    0 0 0 5px rgba(155,107,61,.65),
    0 0 0 9px #16110B,
    0 0 0 10px rgba(155,107,61,.28),
    inset 0 2px 3px rgba(255,240,205,.35),
    inset 0 -6px 12px rgba(0,0,0,.55),
    0 10px 26px -8px rgba(0,0,0,.85),
    0 0 34px -6px rgba(198,161,107,.4) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 14px rgba(242,227,182,.45);
  position: relative;
  z-index: 2;
}

/* --- title: gold metal engraving + flanking rules --- */
.ma-lore-title {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 4.2vw, 2.9rem) !important;
  background: linear-gradient(180deg,#F6E9C4 0%,#C6A16B 58%,#8F6236 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(198,161,107,.25));
  margin-bottom: 10px !important;
}
.ma-lore-sub {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #9B8259 !important;
  letter-spacing: .45em !important;
  font-size: .72rem !important;
  margin-bottom: 34px !important;
}
.ma-lore-sub::before, .ma-lore-sub::after {
  content: '';
  height: 1px;
  width: 70px;
  background: var(--ma3-hairline);
}

/* --- body text: manuscript with illuminated drop cap --- */
.ma-lore-text {
  position: relative;
  z-index: 2;
  font-family: 'Amiri', serif !important;
  font-size: 1.18rem !important;
  line-height: 2.15 !important;
  color: #D8C49B !important;
  max-width: 760px;
  margin-inline: auto !important;
  text-align: center;
}
/* NOTE: no ::first-letter drop-cap — it breaks Arabic ligatures (ف gets
   detached from في). English-only pages could re-enable via :lang(en). */
.ma-lore-text b, .ma-lore-text strong {
  color: var(--ma3-gold-hi) !important;
  text-shadow: 0 0 10px rgba(198,161,107,.3);
}

/* --- quote: centered epigraph with hanging marks --- */
.ma-lore-quote {
  position: relative;
  z-index: 2;
  display: table;
  margin: 30px auto 0 !important;
  padding: 14px 34px !important;
  font-family: 'Amiri', serif !important;
  font-style: italic;
  font-size: 1.16rem !important;
  color: var(--ma3-parchment) !important;
  background: linear-gradient(180deg, rgba(58,44,27,.28), rgba(30,23,14,.4));
  border-block: 1px solid rgba(198,161,107,.3) !important;
  border-inline: none !important;
  border-radius: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ornament row */
.ma-lore-frame .ma-ornament-row {
  z-index: 2;
  position: relative;
  margin: 36px auto 34px !important;
}
.ma-lore-frame .ma-ornament-row span:not(.line) {
  color: var(--ma3-gold);
  text-shadow: 0 0 12px rgba(198,161,107,.5);
}
.ma-lore-frame .ma-ornament-row .line { background: var(--ma3-hairline) !important; }

/* --- pillars: engraved bronze plaques with metal medallions --- */
.ma-pillars {
  position: relative;
  z-index: 2;
  gap: 22px !important;
}
.ma-pillar {
  position: relative;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(89,63,38,.20), transparent 65%),
    linear-gradient(175deg,#241C13 0%,#1A140D 50%,#141009 100%) !important;
  border: 1px solid rgba(155,107,61,.5) !important;
  border-radius: 14px !important;
  padding: 30px 22px 26px !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.13),
    inset 0 0 0 1px rgba(0,0,0,.4),
    inset 0 -16px 30px rgba(0,0,0,.35),
    0 12px 30px -12px rgba(0,0,0,.8) !important;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.ma-pillar::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(198,161,107,.18);
  border-radius: 9px;
  pointer-events: none;
}
.ma-pillar::after {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: var(--ma3-hairline);
  opacity: .75;
}
.ma-pillar:hover {
  transform: translateY(-5px);
  border-color: rgba(198,161,107,.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(233,214,168,.18),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 20px 46px -14px rgba(0,0,0,.9),
    0 0 30px -8px rgba(198,161,107,.3) !important;
}

/* replace emoji icons with FA metal medallions */
.ma-pillar .pi {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 auto 16px !important;
  display: flex !important;
  justify-content: center;
}
.ma-pillar .pi::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.15rem;
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F2E3B6;
  background:
    radial-gradient(circle at 32% 28%, rgba(242,227,182,.3), transparent 52%),
    linear-gradient(160deg,#6E5330,#3B2C19 72%);
  border: 1px solid rgba(198,161,107,.65);
  box-shadow:
    0 0 0 3px #16110B,
    0 0 0 4px rgba(155,107,61,.4),
    inset 0 1px 0 rgba(242,227,182,.4),
    inset 0 -4px 8px rgba(0,0,0,.55),
    0 6px 14px -4px rgba(0,0,0,.75);
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 10px rgba(242,227,182,.3);
  transition: transform .35s ease, box-shadow .35s ease;
}
.ma-pillar:hover .pi::before {
  transform: scale(1.08);
  box-shadow:
    0 0 0 3px #16110B,
    0 0 0 4px rgba(198,161,107,.7),
    inset 0 1px 0 rgba(242,227,182,.45),
    inset 0 -4px 8px rgba(0,0,0,.55),
    0 8px 18px -4px rgba(0,0,0,.8),
    0 0 22px -4px rgba(198,161,107,.5);
}
/* DOM order: 1=candle 2=scroll 3=key */
.ma-pillar:nth-child(1) .pi::before { content: '\f06d'; } /* fire  */
.ma-pillar:nth-child(2) .pi::before { content: '\f70e'; } /* scroll */
.ma-pillar:nth-child(3) .pi::before { content: '\f084'; } /* key   */

.ma-pillar h4 {
  font-family: 'Aref Ruqaa','Amiri',serif !important;
  font-size: 1.22rem !important;
  background: linear-gradient(180deg,#F2E3B6,#C6A16B 65%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
  margin-bottom: 6px !important;
  position: relative;
}
/* small rule under pillar title */
.ma-pillar h4::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin: 10px auto 0;
  background: var(--ma3-hairline);
  opacity: .8;
}
.ma-pillar p {
  color: #A98F68 !important;
  font-size: .92rem !important;
  line-height: 1.85 !important;
}

/* responsive */
@media (max-width: 760px) {
  .ma-lore-frame { padding: 56px 26px 42px !important; }
  .ma-lore-text { font-size: 1.06rem !important; }
  .ma-lore-sub { letter-spacing: .3em !important; }
  .ma-lore-sub::before, .ma-lore-sub::after { width: 40px; }
  .ma-lore-frame .ma-seal { width: 78px !important; height: 78px !important; font-size: 1.3rem !important; }
}