/* ATLAS prestige theme — jet black, charcoal, antique gold and deep red */
:root {
  color-scheme: dark;
  --bg: #0C0C0C;
  --bg-soft: #161616;
  --panel: #161616;
  --panel-2: #1B1B1A;
  --line: #332E28;
  --line-red: #756550;
  --red: #A51D2D;
  --red-2: #C93B4A;
  --red-dark: #68111C;
  --green: #6FC89A;
  --gold: #756550;
  --burgundy: #741726;
  --text: #F7F2E9;
  --muted: #B7AEA1;
  --atlas-bg: #0C0C0C;
  --atlas-panel: #161616;
  --atlas-panel-2: #1B1B1A;
  --atlas-gold: #756550;
  --atlas-gold-bright: #D8C49E;
  --atlas-burgundy: #741726;
  --atlas-burgundy-bright: #A51D2D;
  --atlas-line: #332E28;
  --prestige-red: #A51D2D;
  --prestige-red-bright: #C93B4A;
  --prestige-gold: #756550;
  --prestige-gold-bright: #D8C49E;
  --shadow: 0 24px 70px #000C;
}

html { scrollbar-color: #756550 #0C0C0C; }
body {
  background:
    radial-gradient(circle at 83% 4%, #A51D2D24, transparent 29rem),
    radial-gradient(circle at 18% 42%, #75655018, transparent 34rem),
    #0C0C0C;
  color: var(--text);
  font-size: 16px;
}
body::before {
  background:
    linear-gradient(115deg, #0000 0 52%, #7565500B 52.2% 52.4%, #0000 52.6%),
    radial-gradient(circle at 12% -10%, #A51D2D20, transparent 31%),
    linear-gradient(180deg, #0C0C0C, #090909 62%);
}
::selection { background: #A51D2D; color: #fff; }

.site-header {
  border-bottom-color: #75655066;
  background: #0C0C0CF2;
  box-shadow: 0 12px 34px #0008;
}
.desktop-sidebar {
  border-right-color: #756550;
  background:
    radial-gradient(circle at 50% 0, #A51D2D38, transparent 26%),
    linear-gradient(180deg, #161616, #0C0C0C 74%);
  box-shadow: 24px 0 72px #000A;
  scrollbar-color: #756550 #161616;
}
.sidebar-brand { border-bottom-color: #75655055; }
.sidebar-group > a { color: #C8C0B5; }
.sidebar-group > a > i {
  border-color: #484038;
  background: #1B1B1A;
  color: #BCA981;
}
.sidebar-group > a:hover {
  border-color: #756550;
  background: linear-gradient(105deg, #2A251F, #161616);
}
.sidebar-group > a[aria-current="page"] {
  border-color: #C93B4A;
  background: linear-gradient(110deg, #741726, #1B1B1A 76%);
  box-shadow: inset 3px 0 #D8C49E;
}
.sidebar-group > a[aria-current="page"] > i {
  border-color: #D8C49E;
  background: #A51D2D;
  color: #FFF5DB;
}
.sidebar-contact,
.telegram-partnership,
.contact-telegram-button {
  border-color: #756550;
  background:
    radial-gradient(circle at 92% 12%, #A51D2D2B, transparent 32%),
    linear-gradient(145deg, #1B1B1A, #111);
}
.sidebar-age { border-color: #756550; background: #1B1B1A; }
.sidebar-age b { background: #A51D2D; color: #FFF0D0; }

.hero {
  border-bottom-color: #75655040;
  background: linear-gradient(180deg, #0C0C0C88, #0C0C0CF7);
}
.hero-grid {
  opacity: .22;
  background-image: linear-gradient(#75655026 1px, transparent 1px), linear-gradient(90deg, #75655026 1px, transparent 1px);
}
.hero-glow { background: radial-gradient(circle, #A51D2D42, #75655013 42%, transparent 69%); }
.hero h1 em { color: #D8C49E; text-shadow: 0 0 35px #75655055; }
.eyebrow,
.section-head span,
.page-hero > div > span,
.seo-topic-intro span,
.guide-section > span,
.method-copy > span,
.detail-copy > span,
.article-shell header > span,
.stream-copy > span { color: #D8C49E !important; }

.header-cta,
.primary-button,
.spin-button,
.compare-dock a {
  border-color: #D8C49E !important;
  background: linear-gradient(145deg, #D8C49E, #9A845D 48%, #756550) !important;
  color: #0C0C0C !important;
  box-shadow: inset 0 1px #FFF8, 0 13px 32px #0009 !important;
  text-shadow: none !important;
}
.header-cta:hover,
.primary-button:hover,
.spin-button:hover,
.compare-dock a:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 1px #FFF9, 0 15px 36px #75655045 !important;
}
.secondary-button,
.header-stream {
  border-color: #756550;
  background: #1B1B1A;
  color: #E4D6B9;
}
.secondary-button:hover,
.header-stream:hover,
.header-stream[aria-current="page"] {
  border-color: #C93B4A;
  background: #741726;
  color: #FFF;
}

.tool-grid > a,
.sponsor-card,
.campaign-card,
.game-card,
.news-card,
.stream-card,
.event-card,
.compare-picker,
.comparison-table,
.result-grid article,
.quiz-recommendations article,
.entry-grid article,
.information-shell > div,
.blog-grid article,
.detail-logo,
.detail-stats span,
.featured-track > a,
.trust-list-grid > a {
  border-color: #3A342E;
  background: linear-gradient(145deg, #1B1B1A, #141414);
}
.tool-grid > a:hover,
.sponsor-card:hover,
.campaign-card:hover,
.game-card:hover,
.news-card:hover,
.event-card:hover,
.trust-list-grid > a:hover {
  border-color: #756550;
  background: linear-gradient(145deg, #26221D, #161616);
}
.sponsor-card::before { background: #A51D2D; }
.sponsor-title-row span,
.game-card span,
.campaign-card > div > span,
.blog-grid article > div > span,
.entry-grid small,
.compare-picker header > b,
.comparison-table a,
.game-card a,
.campaign-card > div > a,
.blog-grid article > div > a,
.detail-content article a { color: #D6BE8F; }
.sponsor-title-row > strong,
.trust-chip,
.comparison-table td strong { color: #86D4AA; }
.ranking-toolbar input,
.ranking-toolbar select,
.calculator-form label > span,
.calculator-form fieldset,
.preset-row button,
.quiz-options button {
  border-color: #3D3730;
  background: #1B1B1A;
  color: #F7F2E9;
}
.ranking-toolbar input:focus,
.ranking-toolbar select:focus,
.calculator-form input:focus { border-color: #756550; }

.page-hero-mark {
  border-color: #756550;
  background: radial-gradient(circle, #741726, #161616 67%);
  box-shadow: 0 0 90px #A51D2D35, inset 0 0 0 1px #D8C49E22;
}
.page-hero-mark span { color: #D8C49E; }
.guide-section,
.seo-section {
  border-color: #3A342E;
  background: #161616;
}
.guide-columns article {
  padding: 20px;
  border: 1px solid #332E28;
  border-radius: 12px;
  background: #1B1B1A;
}
.guide-columns h3 { color: #D8C49E; }
.category-link-strip a { border-color: #3D3730; background: #161616; }
.category-link-strip a:hover { border-color: #756550; color: #F2DFC0; }

.seo-topic-section {
  width: min(var(--max), calc(100% - 38px));
  margin: 8px auto 64px;
  padding: 24px;
  border: 1px solid #756550;
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0, #A51D2D21, transparent 30%),
    linear-gradient(145deg, #161616, #0F0F0F);
  box-shadow: 0 24px 70px #0008;
}
.seo-topic-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 15px;
  border-bottom: 1px solid #332E28;
}
.seo-topic-intro span {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.seo-topic-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  padding-top: 16px;
}
.seo-topic-stack article {
  position: relative;
  min-width: 0;
  padding: 20px 20px 16px;
  border: 1px solid #3A342E;
  border-radius: 14px;
  background: #1B1B1A;
  overflow: hidden;
}
.seo-topic-stack article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #A51D2D, #756550);
}
.seo-topic-stack h2 { min-height: 3.1em; margin: 0 0 10px; color: #F5E7C9; font-size: 1.15rem; line-height: 1.3; }
.seo-topic-copy { position: relative; transition: max-height .28s ease; }
.seo-topic-card.is-collapsible .seo-topic-copy { max-height: 7.7rem; overflow: hidden; }
.seo-topic-card.is-collapsible .seo-topic-copy::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3.5rem;
  pointer-events: none;
  background: linear-gradient(transparent, #1B1B1A 82%);
}
.seo-topic-card.is-expanded .seo-topic-copy { max-height: 60rem; }
.seo-topic-card.is-expanded .seo-topic-copy::after { opacity: 0; }
.seo-topic-stack p { margin: 0 0 10px; color: #C0B8AC; font-size: .95rem; line-height: 1.62; }
.seo-topic-stack p:last-child { margin-bottom: 0; }
.seo-topic-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 8px 11px;
  border: 1px solid #756550;
  border-radius: 9px;
  background: #141414;
  color: #E6D4B1;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}
.seo-topic-card.is-collapsible .seo-topic-toggle { display: inline-flex; }
.seo-topic-toggle::after { content: "↓"; color: #C93B4A; font-size: 1rem; line-height: 1; }
.seo-topic-toggle[aria-expanded="true"]::after { content: "↑"; }
.seo-topic-toggle:hover { border-color: #C93B4A; background: #211316; color: #FFF; }
.seo-topic-toggle:focus-visible { outline: 2px solid #D8C49E; outline-offset: 3px; }

.site-footer {
  border-top-color: #75655055;
  background: #090909;
}
.footer-top > div:not(.footer-brand) {
  border-color: #332E28;
  background: #161616;
}
.footer-top h3,
.footer-telegram,
.age-badge { color: #D8C49E; }
.footer-telegram,
.age-badge { border-color: #756550; }
.footer-bottom { border-top-color: #332E28; color: #918A80; }
.mobile-bottom-nav {
  border-top-color: #756550;
  background: #0C0C0CF2;
}
.mobile-bottom-nav a[aria-current="page"] {
  background: #741726;
  color: #FFF4E0;
}
.mobile-bottom-nav .mobile-nav-icon { color: #CDB98F; }
.mobile-panel { background: linear-gradient(180deg, #161616, #0C0C0C); }
.mobile-panel nav > a[aria-current="page"] {
  border-color: #C93B4A;
  background: #741726;
}
.mobile-menu-label { color: #BBA77F !important; }
.mobile-header-brand { display: none; }

@media (max-width: 900px) {
  .site-header { height: 68px; }
  .header-inner { width: calc(100% - 24px); gap: 10px; justify-content: space-between; }
  .mobile-header-brand {
    display: flex;
    width: min(58vw, 228px);
    height: 52px;
    align-items: center;
    margin-right: auto;
  }
  .mobile-header-brand img { width: 100%; height: auto; object-fit: contain; }
  .header-actions { display: none !important; }
  .menu-button {
    display: block;
    flex: 0 0 44px;
    margin-left: auto;
    border-color: #756550;
    background: #1B1B1A;
  }
  .menu-button span { background: #E8D6B2; }
  .mobile-panel {
    inset: 0 0 0 auto !important;
    transform: translateX(105%) !important;
    border-left: 1px solid #756550;
    box-shadow: -30px 0 80px #000D !important;
  }
  .mobile-panel.open { transform: translateX(0) !important; }
  .mobile-panel-head { border-bottom-color: #75655055; }
  .mobile-panel-brand {
    display: flex;
    width: min(68%, 220px);
    height: 64px;
    align-items: center;
    line-height: 0;
  }
  .mobile-panel-head .mobile-panel-brand img {
    width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    object-position: left center;
  }
  .mobile-panel-head button { border-color: #756550; background: #1B1B1A; }
  .seo-topic-stack {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 360px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-color: #756550 #161616;
    scrollbar-width: thin;
  }
  .seo-topic-stack article { scroll-snap-align: start; }
  .seo-topic-intro { align-items: flex-start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .mobile-header-brand { width: min(62vw, 210px); }
  .seo-topic-section { width: calc(100% - 24px); margin-bottom: 48px; padding: 16px; border-radius: 16px; }
  .seo-topic-stack { grid-auto-columns: 82vw; gap: 10px; padding-top: 14px; padding-bottom: 8px; }
  .seo-topic-stack article { padding: 18px 16px 14px; }
  .seo-topic-stack h2 { min-height: 0; font-size: 1.08rem; }
  .seo-topic-stack p { font-size: .94rem; line-height: 1.58; }
  .seo-topic-card.is-collapsible .seo-topic-copy { max-height: 7.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
