@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Marcellus+SC&display=swap');
/* AGNIBEENA V194 — Ancient premium site theme override with restored violet accent
   Loaded last. Keeps layout/modules intact while refining global site chrome. */
:root {
  --agn-void: #030201;
  --agn-obsidian: #080604;
  --agn-panel: rgba(18, 13, 8, 0.88);
  --agn-panel-deep: rgba(8, 6, 4, 0.94);
  --agn-panel-soft: rgba(32, 22, 54, 0.30);
  --agn-gold: #b98cff;
  --agn-gold-soft: rgba(113, 54, 211, 0.30);
  --agn-gold-faint: rgba(113, 54, 211, 0.11);
  --agn-ember: #7136d3;
  --agn-parchment: #eee9ff;
  --agn-muted: rgba(238, 233, 255, 0.70);
  --agn-line: rgba(113, 54, 211, 0.26);
  --agn-serif: Georgia, Cambria, "Times New Roman", serif;
  --agn-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html,
body {
  color: var(--agn-parchment) !important;
  font-family: var(--agn-sans) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(113, 54, 211, 0.10), transparent 34%),
    radial-gradient(circle at 18% 22%, rgba(80, 164, 255, 0.07), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(88, 53, 155, 0.10), transparent 40%),
    linear-gradient(180deg, #050403 0%, #020201 62%, #000 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(90deg, rgba(185,140,255,0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(80,164,255,0.012) 1px, transparent 1px);
  background-size: 84px 84px, 84px 84px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}

/* Header: quieter, older, premium */
.site-header,
.chess-header {
  top: 12px !important;
  height: 68px !important;
  min-height: 68px !important;
  width: calc(100% - 30px) !important;
  max-width: 1720px !important;
  padding: 0 22px !important;
  gap: 22px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  border: 1px solid var(--agn-line) !important;
  background:
    linear-gradient(180deg, rgba(17, 12, 28, 0.94), rgba(5, 5, 10, 0.91)) !important;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 -1px 0 rgba(185, 140, 255, 0.08) inset !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
}

.site-header::before,
.chess-header::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 140, 255, 0.52), transparent);
  pointer-events: none;
}

.brand-link {
  height: 68px !important;
  width: 126px !important;
  min-width: 126px !important;
  border-radius: 12px !important;
}

.brand-link img {
  height: 40px !important;
  max-height: 40px !important;
  max-width: 122px !important;
  filter: drop-shadow(0 7px 15px rgba(0,0,0,0.50)) saturate(0.92) contrast(1.04) !important;
}

.main-nav {
  gap: 6px !important;
  min-width: 0 !important;
}

.main-nav a,
.nav-dropbtn {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 15px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(238, 233, 255, 0.84) !important;
  font-family: var(--agn-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.115em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.main-nav a:hover,
.main-nav a:focus,
.nav-dropbtn:hover,
.nav-dropbtn:focus,
.nav-dropdown.is-open > .nav-dropbtn {
  color: #f2ebff !important;
  background: linear-gradient(180deg, rgba(113, 54, 211, 0.14), rgba(113, 54, 211, 0.055)) !important;
  border-color: rgba(113, 54, 211, 0.28) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.nav-dropdown {
  height: 42px !important;
  align-items: center !important;
}

.nav-dropdown::after {
  height: 22px !important;
}

.nav-dropdown-menu {
  top: 50px !important;
  min-width: 210px !important;
  padding: 9px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(113, 54, 211, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(15, 10, 25, 0.985), rgba(5, 5, 11, 0.985)) !important;
  box-shadow:
    0 22px 62px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.025) inset !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.nav-dropdown-menu::before {
  content: "";
  display: block;
  height: 1px;
  margin: 1px 7px 8px;
  background: linear-gradient(90deg, transparent, rgba(185,140,255,0.46), transparent);
}

.nav-dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 10px 12px !important;
  border-radius: 11px !important;
  color: rgba(238, 233, 255, 0.82) !important;
  font-family: var(--agn-sans) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.025em !important;
  text-transform: none !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  color: #f2ebff !important;
  background: linear-gradient(90deg, rgba(113, 54, 211, 0.14), rgba(80, 164, 255, 0.06)) !important;
  outline: none !important;
}

.nav-tools-menu { min-width: 236px !important; }

/* Page typography */
h1, h2, h3,
.caption h1,
.intro h1,
.legal-header h1,
.about-hero h1,
.ds-title,
.tool-title {
  font-family: var(--agn-serif) !important;
  color: var(--agn-parchment) !important;
  font-weight: 600 !important;
  letter-spacing: 0.085em !important;
  text-shadow: 0 9px 32px rgba(0,0,0,0.60) !important;
}

.eyebrow,
.caption .eyebrow,
.intro .eyebrow {
  color: rgba(185, 140, 255, 0.86) !important;
  font-family: var(--agn-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
}

p,
.tagline,
.subtext {
  color: var(--agn-muted) !important;
}

/* Homepage: less neon, more ancient dusk */
.homepage {
  background:
    radial-gradient(circle at 50% 26%, rgba(113, 54, 211, 0.09), transparent 29%),
    radial-gradient(circle at 50% 64%, rgba(88, 53, 155, 0.10), transparent 42%),
    linear-gradient(180deg, rgba(6,4,12,0.68), rgba(0,0,0,0.96)) !important;
}

.logo-gif {
  filter: drop-shadow(0 18px 48px rgba(0,0,0,0.68)) saturate(0.92) contrast(1.02) !important;
}

.bahadur-link,
.bahadur-link:visited {
  color: #d8c0ff !important;
  text-shadow:
    0 0 1px rgba(216,192,255,0.45),
    0 15px 42px rgba(0,0,0,0.72) !important;
}

.bahadur-link:hover,
.bahadur-link:focus {
  color: #efe5ff !important;
  text-shadow: 0 0 18px rgba(113, 54, 211, 0.30) !important;
}

.enter-button,
.video-card a,
.legal-back-link,
.about-link,
.ds-btn,
.tool-btn {
  border-color: rgba(113, 54, 211, 0.30) !important;
  color: #e5d8ff !important;
  background: linear-gradient(180deg, rgba(113, 54, 211, 0.10), rgba(80, 164, 255, 0.035)) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.025) inset !important;
}

.enter-button:hover,
.enter-button:focus,
.video-card a:hover,
.video-card a:focus,
.legal-back-link:hover,
.legal-back-link:focus,
.about-link:hover,
.about-link:focus,
.ds-btn:hover,
.tool-btn:hover {
  color: #f2ebff !important;
  border-color: rgba(185, 140, 255, 0.48) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.42), 0 0 22px rgba(113,54,211,0.16) !important;
}

.smoke-one {
  background: radial-gradient(circle, rgba(113,54,211,0.10) 0%, rgba(89,52,25,0.10) 38%, transparent 72%) !important;
  opacity: 0.22 !important;
}

.smoke-two {
  background: radial-gradient(circle, rgba(113,54,211,0.09) 0%, rgba(80,164,255,0.055) 38%, transparent 72%) !important;
  opacity: 0.18 !important;
}

.particle {
  background: rgba(185, 140, 255, 0.70) !important;
  box-shadow: 0 0 9px rgba(113, 54, 211, 0.28) !important;
}

/* Cards / common panels */
.video-card,
.legal-header,
.legal-main,
.about-card,
.team-card,
.ds-panel,
.tool-card,
.viewer-shell,
.sfx-panel,
.metro-panel {
  border-color: rgba(113, 54, 211, 0.20) !important;
  background: linear-gradient(145deg, rgba(15,10,25,0.72), rgba(4,4,9,0.88)) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.42) !important;
}

.agn-site-footer {
  color: rgba(238, 233, 255, 0.58) !important;
  background: linear-gradient(180deg, rgba(4,3,2,0.90), rgba(0,0,0,0.96)) !important;
  border-top: 1px solid rgba(113, 54, 211, 0.16) !important;
}

.agn-site-footer a {
  color: rgba(238, 233, 255, 0.72) !important;
}

.agn-site-footer a:hover,
.agn-site-footer a:focus {
  color: #efe5ff !important;
}

/* Auth/account/admin chrome should match header instead of looking like debug UI */
.agn-account-root button,
.agn-auth-button,
.agn-admin-mode-toggle,
.agn-admin-mode-toggle button {
  border-color: rgba(113, 54, 211, 0.24) !important;
  color: rgba(234,223,202,0.86) !important;
  background: rgba(113, 54, 211, 0.08) !important;
  box-shadow: none !important;
}

/* Mobile: keep it readable and non-screaming */
@media (orientation: portrait) and (max-width: 900px) {
  .site-header,
  .chess-header {
    top: 8px !important;
    width: calc(100% - 16px) !important;
    height: 94px !important;
    min-height: 94px !important;
    padding: 4px 8px 6px !important;
    gap: 5px !important;
    border-radius: 14px !important;
  }

  .site-header > .brand-link,
  .chess-header > .brand-link {
    height: 48px !important;
    width: 92px !important;
    min-width: 92px !important;
  }

  .site-header > .brand-link img,
  .chess-header > .brand-link img {
    height: 30px !important;
    max-width: 88px !important;
  }

  .site-header > .main-nav,
  .chess-header > .main-nav {
    height: 40px !important;
    gap: 3px !important;
  }

  .site-header > .main-nav > a,
  .site-header > .main-nav .nav-dropbtn,
  .chess-header > .main-nav > a,
  .chess-header > .main-nav .nav-dropbtn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    letter-spacing: 0.075em !important;
    border-radius: 999px !important;
  }

  .homepage { padding-top: 122px !important; }
  .music-page { padding-top: 122px !important; }
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .site-header .nav-dropdown-menu,
  .chess-header .nav-dropdown-menu {
    top: var(--agn-nav-menu-top, 110px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(64vh, 480px) !important;
    padding: 10px !important;
  }

  .nav-dropdown-menu a {
    min-height: 42px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 520px) {
  .caption h1,
  .intro h1,
  h1 {
    letter-spacing: 0.055em !important;
  }

  .enter-button {
    letter-spacing: 0.14em !important;
  }
}


/* V194 final accent restore: keep the premium ancient chrome, but use the original violet/cool accent family so tools match. */
:root {
  --agn-gold: #b98cff;
  --agn-gold-soft: rgba(113, 54, 211, 0.30);
  --agn-gold-faint: rgba(113, 54, 211, 0.11);
  --agn-ember: #7136d3;
  --agn-line: rgba(113, 54, 211, 0.26);
}

/* V195 — Greek/classical premium pass. Violet accent preserved. */
:root {
  --agn-serif: "Cinzel", Georgia, Cambria, "Times New Roman", serif;
  --agn-display: "Marcellus SC", "Cinzel", Georgia, serif;
  --agn-violet: #8d63ff;
  --agn-violet-bright: #cbb7ff;
  --agn-stone: rgba(18, 16, 24, 0.86);
  --agn-stone-deep: rgba(4, 4, 9, 0.96);
  --agn-line: rgba(141, 99, 255, 0.30);
}

html,
body {
  background:
    radial-gradient(circle at 50% 0%, rgba(141, 99, 255, 0.075), transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(80, 164, 255, 0.035), transparent 42%),
    linear-gradient(180deg, #05040a 0%, #020204 66%, #000 100%) !important;
}

body::before {
  opacity: 0.15 !important;
  background-image:
    linear-gradient(90deg, rgba(203,183,255,0.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(203,183,255,0.018) 1px, transparent 1px) !important;
  background-size: 96px 96px, 96px 96px !important;
}

/* Less glass bubble, more ancient temple plaque. */
.site-header,
.chess-header {
  height: 66px !important;
  min-height: 66px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(141, 99, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(13, 10, 22, 0.965), rgba(3, 3, 8, 0.955)) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,255,255,0.025) inset !important;
  backdrop-filter: blur(10px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
}

.site-header::before,
.chess-header::before {
  left: 24px !important;
  right: 24px !important;
  top: 7px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(203,183,255,0.42), transparent) !important;
}

.site-header::after,
.chess-header::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,99,255,0.34), transparent);
  pointer-events: none;
}

.brand-link {
  height: 66px !important;
  width: 128px !important;
  min-width: 128px !important;
  border-radius: 4px !important;
}

.brand-link::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 34px;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(203,183,255,0.25), transparent);
  pointer-events: none;
}

.brand-link img {
  height: 39px !important;
  max-height: 39px !important;
  max-width: 122px !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.62)) grayscale(0.1) contrast(1.06) !important;
}

.main-nav {
  gap: 3px !important;
}

.main-nav a,
.nav-dropbtn {
  font-family: var(--agn-serif) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.13em !important;
  border-radius: 4px !important;
  color: rgba(238, 233, 255, 0.82) !important;
}

.main-nav > a::after,
.nav-dropdown::before {
  content: "◇";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 7px;
  line-height: 1;
  color: rgba(203,183,255,0.22);
  pointer-events: none;
}

.main-nav > a,
.nav-dropdown {
  position: relative !important;
}

.main-nav > a:last-child::after {
  content: "";
}

.main-nav a:hover,
.main-nav a:focus,
.nav-dropbtn:hover,
.nav-dropbtn:focus,
.nav-dropdown.is-open > .nav-dropbtn {
  color: #f6f1ff !important;
  background: linear-gradient(180deg, rgba(141,99,255,0.13), rgba(141,99,255,0.045)) !important;
  border-color: rgba(141,99,255,0.28) !important;
  transform: none !important;
}

.nav-dropdown-menu {
  top: 48px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(141,99,255,0.30) !important;
  background:
    linear-gradient(180deg, rgba(12, 9, 20, 0.99), rgba(3, 3, 8, 0.99)) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,0.58),
    0 0 0 1px rgba(255,255,255,0.025) inset !important;
}

.nav-dropdown-menu::before {
  background: linear-gradient(90deg, transparent, rgba(203,183,255,0.38), transparent) !important;
}

.nav-dropdown-menu a {
  border-radius: 4px !important;
  font-family: var(--agn-sans) !important;
  letter-spacing: 0.015em !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background: linear-gradient(90deg, rgba(141,99,255,0.14), rgba(80,164,255,0.045)) !important;
}

h1, h2, h3,
.caption h1,
.intro h1,
.legal-header h1,
.about-hero h1,
.ds-title,
.tool-title {
  font-family: var(--agn-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.105em !important;
}

.eyebrow,
.caption .eyebrow,
.intro .eyebrow {
  font-family: var(--agn-serif) !important;
  color: rgba(203, 183, 255, 0.82) !important;
  letter-spacing: 0.26em !important;
}

/* Make the homepage logo's black rectangle blend with the page. */
.logo-wrap {
  isolation: auto !important;
}

.logo-gif {
  mix-blend-mode: screen !important;
  opacity: 0.94 !important;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,0.68)) contrast(1.04) !important;
}

.bahadur-link,
.bahadur-link:visited {
  font-family: var(--agn-display) !important;
  color: #d9c8ff !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 16px 42px rgba(0,0,0,0.82) !important;
}

.enter-button,
.video-card a,
.legal-back-link,
.about-link,
.ds-btn,
.tool-btn,
#reset-btn,
#publish-btn,
.memory-mode-btn {
  border-radius: 5px !important;
  letter-spacing: 0.055em !important;
}

/* Memory card page: stop old page CSS from bending the global header. */
body:has(.game-wrapper .main-wrapper) {
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}

.Memory-Card-Game body,
body.memory-page {
  display: block !important;
}

.game-wrapper {
  min-height: 100vh !important;
  align-items: flex-start !important;
  padding-top: 118px !important;
}

.game-wrapper .main-wrapper {
  margin: 0 auto !important;
}

.game-wrapper .container,
.game-wrapper .leaderboard {
  border-radius: 10px !important;
  border-color: rgba(141,99,255,0.20) !important;
  background: linear-gradient(145deg, rgba(15,10,25,0.70), rgba(4,4,9,0.88)) !important;
}

@media (max-width: 860px) {
  .site-header,
  .chess-header {
    top: 8px !important;
    width: calc(100% - 16px) !important;
    height: auto !important;
    min-height: 68px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .site-header > .brand-link,
  .chess-header > .brand-link {
    height: 42px !important;
    width: 92px !important;
    min-width: 92px !important;
  }

  .site-header > .brand-link img,
  .chess-header > .brand-link img {
    height: 29px !important;
    max-width: 88px !important;
  }

  .site-header > .main-nav,
  .chess-header > .main-nav {
    order: 5 !important;
    flex: 1 1 100% !important;
    height: 34px !important;
    justify-content: center !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  .site-header > .main-nav::-webkit-scrollbar,
  .chess-header > .main-nav::-webkit-scrollbar { display: none; }

  .site-header > .main-nav > a,
  .site-header > .main-nav .nav-dropbtn,
  .chess-header > .main-nav > a,
  .chess-header > .main-nav .nav-dropbtn {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.085em !important;
    white-space: nowrap !important;
  }

  .homepage,
  .music-page,
  .game-wrapper {
    padding-top: 122px !important;
  }

  .main-nav > a::after,
  .nav-dropdown::before {
    display: none !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .site-header .nav-dropdown-menu,
  .chess-header .nav-dropdown-menu {
    top: var(--agn-nav-menu-top, 104px) !important;
    border-radius: 7px !important;
  }
}

/* V196 — touch/nav polish + slightly stronger classical readability. */
:root {
  --agn-nav-glyph: rgba(203, 183, 255, 0.26);
}

.main-nav a,
.nav-dropbtn {
  text-transform: uppercase !important;
}

.nav-dropbtn:active,
.main-nav a:active {
  transform: translateY(0) !important;
}

@media (max-width: 860px) {
  .nav-dropdown-menu a {
    font-size: 13px !important;
    letter-spacing: 0.035em !important;
  }
}


/* V219: iPhone/Safari header dropdown repair.
   Keep touch dropdowns outside scroll/transform traps so Games/Tools are tappable. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .site-header,
  .chess-header {
    overflow: visible !important;
    touch-action: auto !important;
  }

  .site-header > .main-nav,
  .chess-header > .main-nav {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: auto !important;
  }

  .site-header .nav-dropdown,
  .chess-header .nav-dropdown,
  .site-header .nav-dropbtn,
  .chess-header .nav-dropbtn,
  .site-header .main-nav > a,
  .chess-header .main-nav > a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(203, 183, 255, 0.22) !important;
  }

  .nav-dropdown-menu.agn-nav-menu-portal {
    display: none !important;
    position: fixed !important;
    top: var(--agn-nav-menu-top, 104px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--agn-nav-menu-top, 104px) - 12px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2500000 !important;
    pointer-events: auto !important;
  }

  .nav-dropdown-menu.agn-nav-menu-portal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-dropdown-menu.agn-nav-menu-portal a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}