/* ============================================================
   AFKSpin — static skeleton stylesheet
   ============================================================ */

:root {
  /* color */
  --afk-bg:           #0d0b0a;
  --afk-bg-section:   #1a1614;
  --afk-bg-raised:    #262019;
  --afk-accent:       #d8702a;
  --afk-accent-hover: #e8843c;
  --afk-logo-red:     #e8402a;
  --afk-logo-light:   #f5f0e8;
  --afk-border-gold:  #a87d3e;
  --afk-border:       #332d28;
  --afk-text:         #f5f0e8;
  --afk-text-2:       #9a9088;
  --afk-text-muted:   #6b635c;
  --afk-highlight:    #f5c518;
  --afk-success:      #4caf50;
  --afk-live:         #e8402a;
  --afk-overlay:      rgba(13,11,10,.55);

  /* typography */
  --afk-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --afk-font-display: "Fredoka", "Montserrat", sans-serif;
  --afk-fs-base: 16px;
  --afk-lh: 1.55;
  --afk-fw-normal: 400;
  --afk-fw-medium: 600;
  --afk-fw-bold:   700;
  --afk-fw-black:  800;

  /* radii */
  --afk-r-sm:  6px;
  --afk-r-md:  10px;
  --afk-r-lg:  16px;
  --afk-r-pill: 999px;

  /* spacing */
  --afk-sp-1: 4px;
  --afk-sp-2: 8px;
  --afk-sp-3: 12px;
  --afk-sp-4: 16px;
  --afk-sp-5: 24px;
  --afk-sp-6: 32px;
  --afk-sp-7: 48px;
  --afk-sp-8: 64px;

  /* layout */
  --afk-maxw: 1280px;
  --afk-header-h: 64px;
  --afk-sidebar-w: 280px;
  --afk-gap-grid: 16px;

  /* effects */
  --afk-shadow-card: 0 4px 20px rgba(0,0,0,.4);
  --afk-shadow-cta: 0 2px 8px rgba(216,112,42,.4);
  --afk-transition: .2s ease;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;               /* ivybet pattern */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;             /* ivybet pattern */
  background: var(--afk-bg);
  color: var(--afk-text);
  font-family: var(--afk-font);
  font-size: var(--afk-fs-base);
  line-height: var(--afk-lh);
  padding-top: var(--afk-header-h);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- typography helpers ---------- */
.afk-h2 {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-black);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 var(--afk-sp-5);
}
.afk-h3 {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-bold);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0 0 var(--afk-sp-3);
}
.afk-p { color: var(--afk-text-2); margin: 0 0 var(--afk-sp-4); }
.afk-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--afk-fw-bold);
  font-size: .8rem;
  color: var(--afk-text-2);
  margin: 0 0 var(--afk-sp-3);
}

/* ---------- buttons ---------- */
.afk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--afk-sp-2);
  padding: var(--afk-sp-3) var(--afk-sp-5);
  border-radius: var(--afk-r-md);
  font-weight: var(--afk-fw-bold);
  font-size: .95rem;
  cursor: pointer;
  transition: background var(--afk-transition), border-color var(--afk-transition), transform var(--afk-transition);
  white-space: nowrap;
}
.afk-btn--cta {
  background: var(--afk-accent);
  color: #fff;
  box-shadow: var(--afk-shadow-cta);
}
.afk-btn--cta:hover { background: var(--afk-accent-hover); }
.afk-btn--ghost {
  background: transparent;
  border: 1px solid var(--afk-border-gold);
  color: var(--afk-text);
}
.afk-btn--ghost:hover { border-color: var(--afk-accent); }
.afk-btn--lg { padding: var(--afk-sp-4) var(--afk-sp-7); font-size: 1.05rem; }

/* ---------- header ---------- */
.afk-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--afk-header-h);
  background: var(--afk-bg);
  border-bottom: 1px solid var(--afk-border);
  z-index: 100;
}
.afk-header__inner {
  height: 100%;
  max-width: var(--afk-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--afk-sp-4);
  padding: 0 var(--afk-sp-4);
}
.afk-header__spacer { flex: 1 1 auto; }

.afk-logo {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-black);
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: -.02em;
}
.afk-logo__a { color: var(--afk-logo-red); }
.afk-logo__b { color: var(--afk-logo-light); }

.afk-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--afk-border);
  border-radius: var(--afk-r-sm);
  color: var(--afk-text-2);
}
.afk-search:hover { color: var(--afk-text); }

.afk-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  cursor: pointer;
}
.afk-burger span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--afk-text);
  border-radius: 2px;
  transition: var(--afk-transition);
}

/* ---------- sidebar (off-canvas) ---------- */
.afk-sidebar {
  position: fixed;
  top: var(--afk-header-h);
  left: 0;
  width: var(--afk-sidebar-w);
  height: calc(100vh - var(--afk-header-h));
  background: var(--afk-bg);
  border-right: 1px solid var(--afk-border);
  padding: var(--afk-sp-4);
  overflow-y: auto;
  z-index: 95;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--afk-transition), visibility var(--afk-transition);
}
.afk-sidebar.is-open { transform: translateX(0); visibility: visible; }

.afk-sidebar__top { display: flex; justify-content: flex-end; }
.afk-sidebar__close {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--afk-text-2);
  padding: var(--afk-sp-1) var(--afk-sp-2);
}

.afk-menu__group {
  border: 1px solid var(--afk-border-gold);
  border-radius: var(--afk-r-md);
  padding: var(--afk-sp-2);
  margin-bottom: var(--afk-sp-4);
}
.afk-menu__link {
  display: flex;
  align-items: center;
  gap: var(--afk-sp-3);
  padding: var(--afk-sp-3);
  border-radius: var(--afk-r-sm);
  color: var(--afk-text);
  font-weight: var(--afk-fw-medium);
  transition: background var(--afk-transition);
}
.afk-menu__link:hover { background: var(--afk-bg-raised); }
.afk-menu__ico { width: 20px; text-align: center; color: var(--afk-accent); }
.afk-menu__caret { margin-left: auto; color: var(--afk-text-2); }

/* overlay */
.afk-overlay {
  position: fixed;
  inset: var(--afk-header-h) 0 0 0;
  background: rgba(0,0,0,.6);
  z-index: 90;
}
.afk-overlay[hidden] { display: none; }

/* ---------- main ---------- */
.afk-main { overflow: hidden; }   /* ivybet pattern */

.afk-section {
  max-width: var(--afk-maxw);
  margin: 0 auto;
  padding: var(--afk-sp-7) var(--afk-sp-4);
}
.afk-section--alt { background: var(--afk-bg-section); max-width: none; }
.afk-section--alt > * { max-width: var(--afk-maxw); margin-inline: auto; }
.afk-section__head { margin-bottom: var(--afk-sp-5); }

/* ---------- hero ---------- */
.afk-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.afk-hero__media { position: absolute; inset: 0; z-index: 0; }
.afk-hero__img { width: 100%; height: 100%; object-fit: cover; }
.afk-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--afk-bg) 0%, var(--afk-overlay) 60%, transparent 100%);
}
.afk-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--afk-maxw);
  width: 100%;
  margin: 0 auto;
  padding: var(--afk-sp-7) var(--afk-sp-4);
}
.afk-hero__title {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-black);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 var(--afk-sp-4);
  max-width: 60%;
}
.afk-hero__sub { color: var(--afk-text-2); font-size: 1.05rem; margin: 0 0 var(--afk-sp-3); max-width: 50%; }
.afk-hero__bonus {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-bold);
  color: var(--afk-highlight);
  font-size: 1.1rem;
  margin: 0 0 var(--afk-sp-5);
}

/* ---------- intro ---------- */
.afk-intro__lead { font-size: 1.05rem; color: var(--afk-text-2); margin: 0; }

/* ---------- rail (horizontal game scroller) ---------- */
.afk-rail {
  display: flex;
  gap: var(--afk-gap-grid);
  overflow-x: auto;
  padding-bottom: var(--afk-sp-3);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.afk-card-game {
  flex: 0 0 160px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--afk-sp-1);
}
.afk-card-game__media {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--afk-bg-raised);
  border: 1px solid var(--afk-border-gold);
  border-radius: var(--afk-r-md);
  overflow: hidden;
}
.afk-card-game__media img { width: 100%; height: 100%; object-fit: cover; }
.afk-card-game__name { font-weight: var(--afk-fw-medium); font-size: .9rem; }
.afk-card-game__prov { font-size: .78rem; color: var(--afk-text-muted); }

/* ---------- grids ---------- */
.afk-grid { display: grid; gap: var(--afk-gap-grid); }
.afk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.afk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.afk-card {
  background: var(--afk-bg-raised);
  border: 1px solid var(--afk-border);
  border-radius: var(--afk-r-md);
  padding: var(--afk-sp-5);
}

/* ---------- bonus cards ---------- */
.afk-card-bonus {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--afk-sp-3);
  background: var(--afk-bg-raised);
  border: 1px solid var(--afk-border);
  border-radius: var(--afk-r-lg);
  padding: var(--afk-sp-5);
  overflow: hidden;
  min-height: 220px;
}
.afk-card-bonus__media { position: absolute; inset: 0; z-index: 0; }
.afk-card-bonus__media img { width: 100%; height: 100%; object-fit: cover; }
.afk-card-bonus__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--afk-bg-raised) 30%, var(--afk-overlay) 100%);
}
.afk-card-bonus > :not(.afk-card-bonus__media) { position: relative; z-index: 1; }
.afk-card-bonus__label {
  display: inline-block;
  align-self: flex-start;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: var(--afk-fw-bold);
  letter-spacing: .08em;
  color: var(--afk-text-2);
  background: rgba(0,0,0,.4);
  padding: var(--afk-sp-1) var(--afk-sp-2);
  border-radius: var(--afk-r-sm);
}
.afk-card-bonus__amount {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-black);
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
  margin: 0;
  max-width: 60%;
}
.afk-card-bonus__terms { color: var(--afk-text-2); font-size: .9rem; margin: 0; max-width: 60%; }
.afk-card-bonus .afk-btn { align-self: flex-start; margin-top: auto; }

/* ---------- facts table ---------- */
.afk-facts { width: 100%; border-collapse: collapse; margin-top: var(--afk-sp-4); }
.afk-facts th, .afk-facts td {
  text-align: left;
  padding: var(--afk-sp-3) var(--afk-sp-4);
  border-bottom: 1px solid var(--afk-border);
}
.afk-facts th { color: var(--afk-text-2); font-weight: var(--afk-fw-medium); width: 40%; }

/* ---------- generic table ---------- */
.afk-table-wrap { overflow-x: auto; }
.afk-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.afk-table th, .afk-table td {
  text-align: left;
  padding: var(--afk-sp-3) var(--afk-sp-4);
  border-bottom: 1px solid var(--afk-border);
}
.afk-table thead th { color: var(--afk-text); font-weight: var(--afk-fw-bold); background: var(--afk-bg-raised); }
.afk-table td { color: var(--afk-text-2); }

/* ---------- steps ---------- */
.afk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--afk-gap-grid);
  counter-reset: step;
}
.afk-step {
  background: var(--afk-bg-raised);
  border: 1px solid var(--afk-border);
  border-radius: var(--afk-r-md);
  padding: var(--afk-sp-5);
}
.afk-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--afk-r-pill);
  background: var(--afk-accent);
  color: #fff;
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-black);
  margin-bottom: var(--afk-sp-3);
}

/* ---------- badges ---------- */
.afk-badges { display: flex; flex-wrap: wrap; gap: var(--afk-sp-3); margin-top: var(--afk-sp-4); }
.afk-badge {
  border: 1px solid var(--afk-border-gold);
  border-radius: var(--afk-r-pill);
  padding: var(--afk-sp-2) var(--afk-sp-4);
  font-size: .85rem;
  color: var(--afk-text-2);
}

/* ---------- app section ---------- */
.afk-app {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--afk-sp-6);
  align-items: center;
  background: var(--afk-bg-section);
  max-width: none;
}
.afk-app > * { position: relative; z-index: 1; }
.afk-app__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--afk-r-lg);
  overflow: hidden;
  background: var(--afk-bg-raised);
}
.afk-app__media img { width: 100%; height: 100%; object-fit: cover; }
.afk-app__scrim { position: absolute; inset: 0; background: var(--afk-overlay); }
.afk-app__stats { display: flex; gap: var(--afk-sp-6); margin: var(--afk-sp-4) 0 var(--afk-sp-5); }
.afk-app__stats strong { display: block; font-family: var(--afk-font-display); font-size: 1.3rem; color: var(--afk-text); }
.afk-app__stats li { color: var(--afk-text-2); font-size: .85rem; }

/* ---------- faq ---------- */
.afk-faq { display: flex; flex-direction: column; gap: var(--afk-sp-2); }
.afk-faq__item {
  background: var(--afk-bg-raised);
  border: 1px solid var(--afk-border);
  border-radius: var(--afk-r-md);
  overflow: hidden;
}
.afk-faq__q {
  cursor: pointer;
  padding: var(--afk-sp-4);
  font-weight: var(--afk-fw-bold);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.afk-faq__q::-webkit-details-marker { display: none; }
.afk-faq__q::after { content: "▾"; color: var(--afk-text-2); transition: transform var(--afk-transition); }
.afk-faq__item[open] .afk-faq__q::after { transform: rotate(180deg); }
.afk-faq__a { padding: 0 var(--afk-sp-4) var(--afk-sp-4); }
.afk-faq__a .afk-p { margin: 0; }

/* ---------- final cta ---------- */
.afk-cta-final { text-align: center; }

/* ---------- footer ---------- */
.afk-footer {
  background: var(--afk-bg-section);
  border-top: 1px solid var(--afk-border);
  padding: var(--afk-sp-7) var(--afk-sp-4);
}
.afk-footer__inner { max-width: var(--afk-maxw); margin: 0 auto; }
.afk-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--afk-sp-5);
  margin-bottom: var(--afk-sp-5);
}
.afk-footer__nav a { color: var(--afk-text-2); }
.afk-footer__nav a:hover { color: var(--afk-text); }
.afk-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--afk-sp-4); color: var(--afk-text-muted); font-size: .85rem; }
.afk-footer__age {
  border: 1px solid var(--afk-border-gold);
  border-radius: var(--afk-r-pill);
  padding: 2px var(--afk-sp-3);
  color: var(--afk-text-2);
}
.afk-footer__disc { flex: 1 1 100%; margin: var(--afk-sp-3) 0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .afk-hero__title { max-width: 80%; }
  .afk-hero__sub { max-width: 70%; }
  .afk-app { grid-template-columns: 1fr; }
}

@media (max-width: 790px) {
  :root { --afk-sidebar-w: 86vw; }
  .afk-hero { min-height: 360px; }
  .afk-hero__title,
  .afk-hero__sub,
  .afk-card-bonus__amount,
  .afk-card-bonus__terms { max-width: 100%; }
  .afk-section { padding: var(--afk-sp-6) var(--afk-sp-4); }
  .afk-app__stats { gap: var(--afk-sp-4); flex-wrap: wrap; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--afk-accent); outline-offset: 2px; }

/* ============================================================
   DESIGN PASS — signature, rhythm, depth
   (added layer; overrides base where intended)
   ============================================================ */

/* ---- new tokens ---- */
:root {
  --afk-bg-warm:    #1c1410;   /* тёплый коричневый для чередования */
  --afk-gold-soft:  #c89a52;
  --afk-gold-line:  linear-gradient(90deg, transparent, var(--afk-border-gold) 20%, var(--afk-gold-soft) 50%, var(--afk-border-gold) 80%, transparent);
  --afk-cta-grad:   linear-gradient(180deg, var(--afk-accent-hover), var(--afk-accent) 55%, #b85a1f);
  --afk-frame-inset: inset 0 0 0 1px rgba(200,154,82,.25);
  --afk-shadow-deep: 0 8px 32px rgba(0,0,0,.55);
}

/* ---- 7. section eyebrow (structural label over H2) ---- */
.afk-eyebrow-s {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--afk-fw-bold);
  color: var(--afk-accent);
  margin-bottom: var(--afk-sp-2);
}

/* ---- 8. signature divider (gold line + diamond) ---- */
.afk-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--afk-sp-4);
  margin: 0 0 var(--afk-sp-5);
}
.afk-divider::before,
.afk-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--afk-gold-line);
}
.afk-divider__gem {
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: var(--afk-border-gold);
  flex: 0 0 auto;
}

/* ---- 2. rhythm: alternate warm fill + deeper anchors ---- */
.afk-section--warm {
  background: var(--afk-bg-warm);
  max-width: none;
}
.afk-section--warm > * { max-width: var(--afk-maxw); margin-inline: auto; }
.afk-section--anchor { padding-block: var(--afk-sp-8); }

/* ---- 3. numeric typography ---- */
.afk-stat { display: flex; flex-direction: column; gap: 2px; }
.afk-stat strong {
  font-family: var(--afk-font-display);
  font-weight: var(--afk-fw-black);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--afk-text);
}
.afk-stat span { font-size: .8rem; color: var(--afk-text-2); }

/* ---- 4 + signature. gold casino frame ---- */
.afk-frame {
  position: relative;
  border: 1px solid var(--afk-border-gold);
  border-radius: var(--afk-r-lg);
  box-shadow: var(--afk-frame-inset), var(--afk-shadow-card);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,154,82,.08), transparent 60%),
    var(--afk-bg-raised);
}
/* corner rivets */
.afk-frame::before,
.afk-frame::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--afk-gold-soft);
  opacity: .8;
}
.afk-frame::before { top: 8px; left: 8px; box-shadow: calc(100% + 0px) 0 0 var(--afk-gold-soft); }
.afk-frame::after  { bottom: 8px; left: 8px; box-shadow: calc(100% + 0px) 0 0 var(--afk-gold-soft); }

/* ---- 5. CTA depth (skeuomorphic keyline) ---- */
.afk-btn--cta {
  background: var(--afk-cta-grad);
  border: 1px solid rgba(200,154,82,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 3px 0 #8f4517,
    var(--afk-shadow-cta);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.afk-btn--cta:hover {
  background: var(--afk-cta-grad);
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.afk-btn--cta:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #8f4517;
}

/* ---- 1. hero as a scene ---- */
.afk-hero { min-height: 480px; }
.afk-hero__scrim {
  background:
    radial-gradient(80% 120% at 78% 35%, rgba(245,197,24,.18), transparent 55%),
    linear-gradient(90deg, var(--afk-bg) 8%, rgba(28,20,16,.85) 45%, rgba(13,11,10,.2) 100%);
}
.afk-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--afk-gold-line);
  z-index: 2;
}
/* bonus "ticket" plate */
.afk-hero__bonus {
  display: inline-block;
  padding: var(--afk-sp-3) var(--afk-sp-5);
  border: 1px solid var(--afk-border-gold);
  border-radius: var(--afk-r-md);
  background: rgba(28,20,16,.7);
  box-shadow: var(--afk-frame-inset);
  backdrop-filter: blur(2px);
}

/* ---- 6. game cards: hover zoom + gold top bar ---- */
.afk-card-game__media { position: relative; }
.afk-card-game__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  background: linear-gradient(180deg, rgba(200,154,82,.9), rgba(200,154,82,0));
  z-index: 1;
}
.afk-card-game__media img { transition: transform var(--afk-transition); }
.afk-card-game:hover .afk-card-game__media img { transform: scale(1.06); }
.afk-card-game:hover .afk-card-game__media { border-color: var(--afk-accent); }

/* ---- bonus cards on gold frame ---- */
.afk-card-bonus {
  border: 1px solid var(--afk-border-gold);
  box-shadow: var(--afk-frame-inset), var(--afk-shadow-card);
}
.afk-card-bonus__amount { color: var(--afk-text); }
.afk-card-bonus__amount em {
  font-style: normal;
  color: var(--afk-highlight);
}

/* ---- VIP tiers: framed + depth ---- */
.afk-card--tier {
  border-color: var(--afk-border-gold);
  box-shadow: var(--afk-frame-inset);
  text-align: center;
}
.afk-card--tier .afk-h3 { color: var(--afk-highlight); }

/* ---- final CTA: framed anchor ---- */
.afk-cta-final {
  border-radius: var(--afk-r-lg);
  background:
    radial-gradient(100% 140% at 50% 0%, rgba(200,154,82,.1), transparent 60%),
    var(--afk-bg-warm);
  border: 1px solid var(--afk-border-gold);
  box-shadow: var(--afk-frame-inset), var(--afk-shadow-deep);
  margin-inline: auto;
  max-width: var(--afk-maxw);
}

/* ---- app stats use numeric type ---- */
.afk-app__stats strong { font-size: 1.6rem; color: var(--afk-highlight); }

/* ---- faq: gold accent on open ---- */
.afk-faq__item[open] { border-color: var(--afk-border-gold); }
.afk-faq__item[open] .afk-faq__q { color: var(--afk-highlight); }

/* ---- section heads spacing for eyebrow+divider ---- */
.afk-h2 { margin-bottom: var(--afk-sp-3); }
.afk-h2 + .afk-divider { margin-top: var(--afk-sp-2); }

/* ---- intro slogan ---- */
.afk-intro__slogan {
  font-family: var(--afk-font-display);
  font-size: 1.15rem;
  color: var(--afk-highlight);
  margin: var(--afk-sp-4) 0 0;
}
.afk-intro__slogan em { font-style: italic; }

/* ---- breadcrumbs ---- */
.afk-breadcrumb {
  max-width: var(--afk-maxw);
  margin: 0 auto;
  padding: var(--afk-sp-3) var(--afk-sp-4) 0;
  font-size: .85rem;
  color: var(--afk-text-muted);
}
.afk-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--afk-sp-2); align-items: center; }
.afk-breadcrumb li { display: flex; align-items: center; gap: var(--afk-sp-2); }
.afk-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--afk-border); }
.afk-breadcrumb a { color: var(--afk-text-2); }
.afk-breadcrumb a:hover { color: var(--afk-accent); }
.afk-breadcrumb [aria-current="page"] { color: var(--afk-text); }

/* ---- compact hero (sub-pages) ---- */
.afk-hero--compact { min-height: 300px; }
.afk-hero--compact .afk-hero__title { max-width: 80%; }
@media (max-width: 790px) {
  .afk-hero--compact .afk-hero__title { max-width: 100%; }
}

/* ============================================================
   IMAGE-SET PLACEHOLDERS (paths to be filled with real assets)
   ============================================================ */
.afk-hero__media {
  background-image: image-set(
    url("/img/hero/hero.avif") type("image/avif"),
    url("/img/hero/hero.webp") type("image/webp"),
    url("/img/hero/hero.png") type("image/png")
  );
  background-size: cover;
  background-position: right center;
}
.afk-app__media {
  background-image: image-set(
    url("/img/app/app.avif") type("image/avif"),
    url("/img/app/app.webp") type("image/webp"),
    url("/img/app/app.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
}
/* game card thumbnails: real <img srcset> set per card in markup;
   this is the fallback background while images load */
.afk-card-game__media {
  background-image: image-set(
    url("/img/games/placeholder.avif") type("image/avif"),
    url("/img/games/placeholder.webp") type("image/webp"),
    url("/img/games/placeholder.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
}

/* hide offer-linked header Log in button on mobile to declutter header */
@media (max-width: 790px) {
  .afk-header__login { display: none; }
}

/* ---- footer language toggle ---- */
.afk-footer__lang { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.afk-footer__lang a.afk-lang { color: var(--afk-text-muted); padding:2px var(--afk-sp-3); border-radius: var(--afk-r-pill); text-decoration:none; }
.afk-footer__lang a.afk-lang:hover { color: var(--afk-text); }
.afk-footer__lang a.afk-lang.is-active { color: var(--afk-text); border:1px solid var(--afk-border-gold); }
.afk-lang__sep { color: var(--afk-text-muted); opacity:.5; }