/* ===== Neon Mint — plain custom CSS (no Tailwind) ===== */
:root {
  --font-display: "Sora", sans-serif;
  --font-sans: "Manrope", sans-serif;
  --radius: 0.5rem;
  --background: oklch(0.2 0.035 250);
  --foreground: oklch(0.95 0.01 200);
  --card: oklch(0.245 0.04 245);
  --panel: oklch(0.28 0.045 200);
  --primary: oklch(0.78 0.14 172);
  --primary-glow: oklch(0.9 0.16 158);
  --primary-foreground: oklch(0.2 0.035 250);
  --secondary: oklch(0.35 0.07 160);
  --muted: oklch(0.27 0.04 245);
  --muted-foreground: oklch(0.72 0.03 220);
  --gold: oklch(0.85 0.15 90);
  --border: oklch(0.36 0.04 230);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }

/* ===== Layout ===== */
.container-page { margin-inline: auto; width: 100%; max-width: 1260px; padding-inline: 1rem; }
.section { position: relative; overflow: hidden; }
.section-inner { position: relative; z-index: 10; }

.pattern-hero {
  background-color: var(--background);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  background-image:
    radial-gradient(circle at 85% 30%, color-mix(in oklab, var(--primary) 22%, transparent) 0, transparent 35%),
    linear-gradient(color-mix(in oklab, var(--primary) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--primary) 9%, transparent) 1px, transparent 1px);
}

/* ===== Header ===== */
.site-header { border-bottom-width: 1px; background: var(--background); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.brand__mark { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; transform: rotate(45deg); border-radius: 2px; background: var(--primary); }
.brand__mark span { transform: rotate(-45deg); font-size: 0.875rem; color: var(--primary-foreground); }
.brand__accent { color: var(--primary); }
.btn-outline { border: 1px solid var(--primary); border-radius: calc(var(--radius) - 2px); padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); transition: background .2s, color .2s; }
.btn-outline:hover { background: var(--primary); color: var(--primary-foreground); }

/* ===== Hero ===== */
.hero { border-bottom-width: 1px; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 2.5rem; }
.hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); border-radius: 999px; background: var(--card); font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.hero__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary-glow); }
.hero__title { width: 100%; max-width: 48rem; font-size: 1.875rem; font-weight: 700; line-height: 1.25; }
.hero__title span { display: block; color: var(--primary); }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
.stat { border-width: 1px; border-radius: calc(var(--radius) - 2px); background: var(--card); padding: 0.5rem 1rem; text-align: center; }
.stat__value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary-glow); }
.stat__label { font-size: 0.75rem; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .hero__inner { padding-block: 3.5rem; }
  .hero__title { font-size: 3rem; }
}

/* ===== TOC ===== */
.toc { margin-top: 1.5rem; width: 100%; max-width: 48rem; text-align: left; border-width: 1px; border-radius: var(--radius); background: var(--card); }
.toc[open] { border-color: var(--primary); }
.toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; }
.toc__summary::-webkit-details-marker { display: none; }
.toc__toggle { font-size: 0.875rem; font-weight: 700; color: var(--primary); }
.toc__toggle::after { content: "Show ▾"; }
.toc[open] .toc__toggle::after { content: "Hide ▴"; }
.toc__list { border-top-width: 1px; padding: 1rem 1.25rem; font-size: 0.875rem; column-gap: 1.5rem; }
.toc__list > li { break-inside: avoid; margin-bottom: 0.5rem; }
.toc__link { display: flex; gap: 0.5rem; color: var(--muted-foreground); transition: color .2s; }
.toc__link:hover, .toc__sub a:hover { color: var(--primary); }
.toc__num { font-weight: 700; color: var(--primary); }
.toc__sub { display: grid; gap: 0.25rem; margin: 0.25rem 0 0 1.25rem; }
.toc__sub a { color: var(--muted-foreground); }
@media (min-width: 768px) { .toc__list { columns: 2; } }

/* ===== Toplist ===== */
.toplist { border-bottom-width: 1px; padding-block: 3rem; }
.toplist__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--primary); }
.section-title { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 700; }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.875rem; }
.toplist__list { display: grid; gap: 0.75rem; }
.casino { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding: 1rem; border-width: 1px; border-radius: var(--radius); background: var(--card); }
.casino--top { border-color: var(--primary); }
.casino__rank { display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: calc(var(--radius) - 2px); background: var(--secondary); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--primary-glow); }
.casino__logo { width: 8rem; height: 3.5rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); object-fit: contain; }
.casino__col { grid-column: span 2; }
.casino__name { font-family: var(--font-display); font-weight: 600; }
.casino__rating { font-weight: 700; color: var(--gold); }
.casino__reviews { margin-left: 0.5rem; color: var(--muted-foreground); }
.casino__playing { font-size: 0.75rem; color: var(--muted-foreground); }
.casino__playing span { font-weight: 600; color: var(--primary); }
.casino__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.casino__bonus { font-family: var(--font-display); font-weight: 700; color: var(--primary-glow); }
.casino__pays { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.casino__pays img { height: 1.25rem; width: auto; flex-shrink: 0; border-radius: 2px; background: var(--foreground); padding: 0.15rem; object-fit: contain; }
.casino__cta { text-align: center; }
.btn-play { display: block; padding: 0.75rem 1.5rem; border-radius: calc(var(--radius) - 2px); background: var(--primary); font-family: var(--font-display); font-weight: 700; color: var(--primary-foreground); transition: background .2s; }
.btn-play:hover { background: var(--primary-glow); }
.casino__terms { margin-top: 0.25rem; font-size: 10px; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .section-title { font-size: 1.875rem; }
  .casino { grid-template-columns: 3rem 9rem 1fr 1.3fr auto; }
  .casino__logo { width: 9rem; }
  .casino__col { grid-column: span 1; }
}

/* ===== Article ===== */
.article { border-bottom-width: 1px; padding-bottom: 5rem; }
.article__inner { padding-top: 2.5rem; }
.intro-box { margin-bottom: 2.5rem; padding: 1.5rem; border-width: 1px; border-radius: var(--radius); background: var(--card); }
.content-section { margin-bottom: 3rem; scroll-margin-top: 1.5rem; }
.content-section__title { margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom-width: 1px; font-size: 1.5rem; font-weight: 700; }
@media (min-width: 768px) { .content-section__title { font-size: 1.875rem; } }

.prose-flat p { margin: 0 0 1rem; line-height: 1.75; color: var(--muted-foreground); }
.prose-flat strong { color: var(--foreground); font-weight: 700; }
.prose-flat a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose-flat ul, .prose-flat ol { margin: 0 0 1.25rem; display: grid; gap: 0.5rem; }
.prose-flat li { position: relative; padding-left: 1.5rem; line-height: 1.65; color: var(--muted-foreground); }
.prose-flat ul > li::before { content: ""; position: absolute; left: 0.25rem; top: 0.65em; width: 0.5rem; height: 0.5rem; background: var(--primary); transform: rotate(45deg); }
.prose-flat ol { counter-reset: n; }
.prose-flat ol > li { counter-increment: n; }
.prose-flat ol > li::before { content: counter(n); position: absolute; left: 0; color: var(--primary); font-weight: 800; }
.prose-flat__h3 { display: flex; align-items: center; gap: 0.75rem; margin: 2rem 0 0.75rem; font-size: 1.125rem; font-weight: 600; }
.prose-flat__h3::before { content: ""; width: 0.25rem; height: 1.25rem; border-radius: 999px; background: var(--primary); }
@media (min-width: 768px) { .prose-flat__h3 { font-size: 1.25rem; } }

.review { margin-bottom: 1.25rem; overflow: hidden; border-width: 1px; border-radius: var(--radius); background: var(--card); }
.review__head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom-width: 1px; background: var(--panel); }
.review__num { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--primary); }
.review__name { font-size: 1.25rem; font-weight: 700; }
.review__tag { font-size: 0.875rem; font-weight: 600; color: var(--primary-glow); }
.review__body { padding: 1.25rem; }

/* ===== FAQ ===== */
.faq { display: grid; gap: 0.75rem; }
.faq__item { border-width: 1px; border-radius: var(--radius); background: var(--card); }
.faq__item[open] { border-color: var(--primary); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { font-size: 1.25rem; color: var(--primary); transition: transform .2s; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { border-top-width: 1px; padding: 1rem 1.25rem 0; }

/* ===== Footer ===== */
.site-footer { border-top-width: 1px; padding-block: 2rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

/* ===== Error / 404 ===== */
.status-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding-inline: 1rem; }
.status-page__box { max-width: 28rem; text-align: center; }
.status-page__code { font-size: 4.5rem; font-weight: 700; }
.status-page__title { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; }
.status-page__text { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.btn-solid { display: inline-flex; padding: 0.5rem 1rem; border-radius: calc(var(--radius) - 2px); background: var(--primary); color: var(--primary-foreground); font: 500 0.875rem var(--font-sans); cursor: pointer; }

/* ===== Decorations ===== */
.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.decor__rail { position: absolute; top: 2rem; bottom: 2rem; display: none; border-color: color-mix(in oklab, var(--primary) 25%, transparent); border-style: dashed; }
.decor__rail--l { left: 0.5rem; border-left-width: 1px; }
.decor__rail--r { right: 0.5rem; border-right-width: 1px; }
.decor__wheel { position: absolute; display: none; color: color-mix(in oklab, var(--primary) 25%, transparent); }
.decor__wheel svg { width: 100%; height: 100%; }
.decor__wheel--hl { left: -7rem; top: 50%; width: 18rem; height: 18rem; margin-top: -9rem; }
.decor__wheel--hr { right: -7rem; top: 50%; width: 18rem; height: 18rem; margin-top: -9rem; }
.decor__wheel--hl svg { animation: spin-slow 90s linear infinite; }
.decor__wheel--hr svg { animation: spin-slow 90s linear infinite reverse; }
.decor__suit { position: absolute; display: none; font-family: var(--font-display); font-size: 9rem; line-height: 1; }
.decor__suit--spade { top: -3.5rem; left: 0.25rem; color: color-mix(in oklab, var(--primary) 10%, transparent); }
.decor__suit--diamond { bottom: -5rem; right: 0.25rem; color: color-mix(in oklab, var(--gold) 10%, transparent); }
.decor__dots { position: absolute; display: none; width: 3.5rem; height: 3.5rem; }
.decor__dots--tl { left: 1.5rem; top: 2.5rem; color: color-mix(in oklab, var(--primary) 25%, transparent); }
.decor__dots--br { right: 1.5rem; bottom: 2.5rem; color: color-mix(in oklab, var(--gold) 25%, transparent); }
.decor__card { position: absolute; top: 3rem; display: none; width: 2.5rem; height: 3.5rem; align-items: center; justify-content: center; border: 2px solid color-mix(in oklab, var(--primary-glow) 70%, transparent); border-radius: calc(var(--radius) - 2px); background: var(--card); font-family: var(--font-display); font-size: 1.25rem; color: var(--primary-glow); animation: float-slow 7s ease-in-out infinite; }
.decor__card--l { left: 1.75rem; --rot: -6deg; }
.decor__card--r { right: 1.75rem; --rot: 6deg; animation-delay: 1.5s; }
.decor__gem { position: absolute; bottom: 1.5rem; display: none; width: 2rem; height: 2rem; border: 2px solid color-mix(in oklab, var(--gold) 70%, transparent); --rot: 45deg; animation: float-slow 7s ease-in-out infinite; }
.decor__gem--l { left: 2.25rem; animation-delay: 2s; }
.decor__gem--r { right: 2.25rem; animation-delay: 3.2s; }
@media (min-width: 640px) { .decor__rail { display: block; } }
@media (min-width: 768px) { .decor__dots, .decor__gem { display: block; } .decor__card { display: flex; } }
@media (min-width: 1024px) { .decor__wheel, .decor__suit { display: block; } }

/* ===== Small clipart (sections other than hero and toplist) ===== */
.clip { position: absolute; display: none; }
.clip-card { width: 1.5rem; height: 2.25rem; align-items: center; justify-content: center; border: 2px solid color-mix(in oklab, var(--primary-glow) 60%, transparent); border-radius: 3px; background: var(--card); font-family: var(--font-display); font-size: 0.625rem; color: var(--primary-glow); animation: float-slow 7s ease-in-out infinite; }
.clip-gem { width: 1.125rem; height: 1.125rem; border: 2px solid color-mix(in oklab, var(--gold) 65%, transparent); --rot: 45deg; animation: float-slow 8s ease-in-out infinite; }
.clip-suit { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: color-mix(in oklab, var(--primary) 22%, transparent); }
.clip-dots { width: 2.25rem; height: 2.25rem; color: color-mix(in oklab, var(--gold) 30%, transparent); }
@media (min-width: 768px) {
  .clip-card { display: flex; }
  .clip-gem, .clip-suit, .clip-dots { display: block; }
}

/* article: clipart sits in the empty bands above and below the text */
.article .clip-card { left: 2rem; top: 0.25rem; }
.article .clip-gem { right: 2.5rem; top: 0.6rem; }
.article .clip-suit { left: 2.25rem; bottom: 1.25rem; }
.article .clip-dots { right: 2rem; bottom: 1.5rem; }

/* footer: clipart flanks the single line of text */
.site-footer .clip-card { left: 2rem; top: 50%; margin-top: -1.125rem; }
.site-footer .clip-gem { right: 2.25rem; top: 50%; margin-top: -0.5625rem; }
.site-footer .clip-suit { right: 5rem; top: 50%; margin-top: -1.125rem; }
.site-footer .clip-dots { display: none; }

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }