/* =========================================================
   Non GamStop — modern crypto / tech theme
   Hand-written CSS port of the original Tailwind project
   No JavaScript required.
   ========================================================= */

:root {
  /* Modern crypto / tech palette */
  --electric: oklch(70% 0.20 245);
  --mint:     oklch(82% 0.18 165);
  --violet:   oklch(65% 0.22 290);
  --amber:    oklch(82% 0.16 75);

  /* Surfaces */
  --ink:               oklch(97% 0.005 240);
  --surface:           oklch(16% 0.02 240);
  --surface-elevated:  oklch(20% 0.025 240);
  --background:        oklch(11% 0.018 240);
  --foreground:        var(--ink);
  --muted-foreground:  oklch(70% 0.015 240);

  --border:    oklch(98% 0.005 240 / 10%);
  --border-15: oklch(98% 0.005 240 / 15%);

  /* Effects */
  --gradient-hero:
    linear-gradient(135deg, var(--electric) 0%, var(--mint) 100%);
  --gradient-electric-mint:
    linear-gradient(90deg, var(--electric), var(--mint));
  --gradient-electric-mint-br:
    linear-gradient(135deg, var(--electric), var(--mint));

  --glow-electric: 0 0 40px oklch(70% 0.20 245 / 0.45),
                   0 0 80px oklch(70% 0.20 245 / 0.20);
  --glow-mint:     0 0 35px oklch(82% 0.18 165 / 0.40);

  --shadow-card: 0 24px 60px -24px oklch(0% 0 0 / 0.7);
  --shadow-lg:   0 10px 15px -3px oklch(0% 0 0 / 0.4),
                 0 4px 6px  -4px oklch(0% 0 0 / 0.4);

  --radius:     0.875rem;
  --radius-md:  0.75rem;
  --radius-sm:  0.5rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;

  --font-display: "Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- base ---------- */
html { background: var(--background); }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 70% 50% at 15%   0%, oklch(70% 0.20 245 / 0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90%  20%, oklch(82% 0.18 165 / 0.12), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 110%, oklch(65% 0.22 290 / 0.14), transparent 60%);
  background-attachment: fixed;
  min-height: 100dvh;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

main { display: block; }

.container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}

/* ---------- helper utilities ---------- */
.gradient-hero-text {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.glow-electric { box-shadow: var(--glow-electric); }
.glow-mint     { box-shadow: var(--glow-mint); }

.bg-grid {
  background-image:
    linear-gradient(oklch(98% 0.005 240 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(98% 0.005 240 / 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%);
}

.text-electric { color: var(--electric); }
.text-mint     { color: var(--mint); }
.text-violet   { color: var(--violet); }
.text-amber    { color: var(--amber); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  text-align: center;
  padding: 4rem 0 2.5rem;
}
@media (min-width: 768px) {
  .hero__inner { padding: 6rem 0 3.5rem; }
}

.hero__title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
@media (min-width: 768px)  { .hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.5rem;  } }

/* =========================================================
   RANKING — casino cards
   ========================================================= */
.section-ranking {
  padding: 0 1rem 4rem;
}
@media (min-width: 768px) { .section-ranking { padding: 0 2rem 6rem; } }

.cards {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 768px) { .cards { gap: 1.5rem; } }

/* card — base */
.casino-card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: oklch(16% 0.02 240 / 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.25rem;
  transition: transform .3s, border-color .3s;
  --accent: var(--electric);
}
@media (min-width: 768px) { .casino-card { padding: 1.5rem; } }
.casino-card:hover {
  transform: translateY(-2px);
  border-color: oklch(98% 0.005 240 / 0.15);
}

.casino-card--electric { --accent: var(--electric); }
.casino-card--mint     { --accent: var(--mint); }
.casino-card--violet   { --accent: var(--violet); }
.casino-card--amber    { --accent: var(--amber); }

/* Top-pick gradient ring (#1) */
.casino-card--top { margin-top: .75rem; }
.casino-card--top::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--electric), transparent 50%, var(--mint));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Top pick badge */
.top-badge {
  position: absolute;
  top: -.75rem;
  left: 1.5rem;
  z-index: 10;
  border-radius: 9999px;
  background: var(--gradient-electric-mint);
  padding: .25rem .75rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--background);
  box-shadow: var(--shadow-lg);
}

/* Rank pill (small bordered) */
.rank-pill {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  border-radius: .375rem;
  border: 1px solid var(--border);
  background: oklch(11% 0.018 240 / 0.6);
  padding: .125rem .5rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: oklch(97% 0.005 240 / 0.8);
}

/* card layout */
.casino-card__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: center;
}
@media (min-width: 768px) { .casino-card__inner { gap: 1.25rem; } }

/* logo column */
.casino-card__logo-col { grid-column: span 12; }
@media (min-width: 768px) { .casino-card__logo-col { grid-column: span 2; } }

.casino-card__logo {
  height: 5rem;
  width: 100%;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
}
@media (min-width: 768px) { .casino-card__logo { height: 6rem; } }
.casino-card__logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.rating {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
}
.rating__dot {
  height: .375rem;
  width:  .375rem;
  border-radius: 9999px;
  background: var(--accent);
}
.rating__score { color: oklch(97% 0.005 240 / 0.8); font-weight: 700; }
.rating__total { color: var(--muted-foreground); }

/* name + bonus column */
.casino-card__name-col { grid-column: span 12; }
@media (min-width: 768px) { .casino-card__name-col { grid-column: span 5; } }

.casino-card__tag {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: .375rem;
}
.casino-card__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: .75rem;
}
@media (min-width: 768px) { .casino-card__name { font-size: 1.875rem; } }

.bonus-box {
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: oklch(11% 0.018 240 / 0.4);
  padding: .75rem;
}
@media (min-width: 768px) { .bonus-box { padding: 1rem; } }
.bonus-box__label {
  font-family: var(--font-mono);
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted-foreground);
  margin-bottom: .25rem;
}
.bonus-box__amount {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .375rem;
  color: var(--accent);
}
@media (min-width: 768px) { .bonus-box__amount { font-size: 1.25rem; } }
.bonus-box__sub {
  font-size: .75rem;
  color: oklch(97% 0.005 240 / 0.7);
  line-height: 1.4;
}
@media (min-width: 768px) { .bonus-box__sub { font-size: .875rem; } }

/* stats column */
.casino-card__stats-col { grid-column: span 12; }
@media (min-width: 768px) { .casino-card__stats-col { grid-column: span 3; } }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
@media (min-width: 768px) {
  .stats {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
}
.stat {
  border-radius: .5rem;
  border: 1px solid var(--border);
  background: oklch(11% 0.018 240 / 0.4);
  padding: .5rem .75rem;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: .5625rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted-foreground);
  margin-bottom: .125rem;
}
.stat__value {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.15;
}
@media (min-width: 768px) { .stat__value { font-size: .875rem; } }

/* cta column */
.casino-card__cta-col {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
@media (min-width: 768px) { .casino-card__cta-col { grid-column: span 2; } }

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  border-radius: .75rem;
  font-weight: 700;
  font-size: 1rem;
  background: var(--accent);
  color: var(--background);
  transition: transform .2s;
}
@media (min-width: 768px) { .cta-button { height: 3.5rem; } }
.cta-button:hover { transform: scale(1.03); }

.casino-card--electric .cta-button { box-shadow: var(--glow-electric); }
.casino-card--mint     .cta-button { box-shadow: var(--glow-mint); }
.casino-card--violet   .cta-button { box-shadow: var(--glow-electric); }
.casino-card--amber    .cta-button { box-shadow: var(--glow-mint); }

/* small screen tweaks */
@media (max-width: 767px) {
  .rank-pill { top: .75rem; right: .75rem; }
  .casino-card { padding-top: 2.25rem; }
  .casino-card--top { padding-top: 2rem; }
}

/* =========================================================
   METHOD
   ========================================================= */
.section-method {
  padding: 4rem 1rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 768px) { .section-method { padding: 6rem 2rem; } }

.section-head { text-align: center; margin-bottom: 3rem; }
@media (min-width: 768px) { .section-head { margin-bottom: 4rem; } }
.section-head__eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  margin-bottom: .75rem;
}
.section-head__title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
}
@media (min-width: 768px) { .section-head__title { font-size: 3rem; } }

.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .method-grid { grid-template-columns: repeat(4, 1fr); }
}

.method-card {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: oklch(16% 0.02 240 / 0.6);
  padding: 1.5rem;
  transition: transform .3s, border-color .3s;
}
.method-card:hover {
  transform: translateY(-4px);
  border-color: oklch(97% 0.005 240 / 0.2);
}
.method-card__num {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1;
}
.method-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.method-card__desc {
  font-size: .875rem;
  color: oklch(97% 0.005 240 / 0.65);
  line-height: 1.6;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: oklch(16% 0.02 240 / 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.footer-inner {
  padding-block: 3rem;
}
@media (min-width: 768px) { .footer-inner { padding-block: 4rem; } }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}
.footer-col-left { grid-column: span 12; }
@media (min-width: 1024px) {
  .footer-col-left { grid-column: span 5; }
}

.footer-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-heading__square {
  display: inline-block;
  height: .75rem;
  width:  .75rem;
  border-radius: .25rem;
  background: var(--gradient-electric-mint-br);
  box-shadow: var(--glow-electric);
}
.footer-lead {
  color: oklch(97% 0.005 240 / 0.7);
  line-height: 1.625;
  font-size: .875rem;
  max-width: 28rem;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .75rem;
  color: oklch(97% 0.005 240 / 0.55);
}
.footer-bottom__right {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .375rem;
  border: 1px solid var(--electric);
  font-size: .625rem;
  font-weight: 700;
  color: var(--electric);
}