/* ==============================================================
   VISUAL OVERHAUL — hero slider, image-based game cards,
   promotions carousel, animation strip (v2 theme).
   Loaded AFTER stake.css so any rule conflicts resolve here.
   ============================================================== */

/* ----- Hero slider (banner carousel at the top of a section) -----
   Inspired by 888casino's rotating promo slider. Full-bleed, flush with
   the topbar (no gap), no rounded corners so it reads as a continuation
   of the header. When placed as the first child of .s-content, negative
   margins cancel the content padding so it spans edge-to-edge.
   Arrows + pagination dots are handled by /js/hero-slider.js. */
.qk-slider {
  position: relative;
  width: 100%;
  margin: -28px -24px 28px;   /* break out of .s-content padding */
  border-radius: 0;
  overflow: hidden;
  background: var(--s-bg-2);
  border: 0;
  border-bottom: 1px solid var(--s-line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  user-select: none;
}
/* When nested NOT inside .s-content (e.g. the shell injects it directly
   after the topbar), the negative margin would pull it above the topbar.
   Use the qk-slider-inline modifier to keep it in-flow. */
.qk-slider.qk-slider-inline {
  margin: 0 0 28px;
  border-radius: 14px;
  border: 1px solid var(--s-line);
  max-width: 1280px;
}
.qk-slider-viewport {
  position: relative;
  width: 100%;
  /* 16.5% (= 6:1 strip) — matches 888-style banners and keeps the home
     hero readable edge-to-edge without forcing a tall photographic
     hero. Briefly bumped to 55.55% for a Gemini hero pass on
     2026-04-25, then reverted at user request. */
  padding-top: 16.5%;
  overflow: hidden;
}
.qk-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s ease, transform .7s ease;
  pointer-events: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--s-bg-3), var(--s-bg-2));
}
.qk-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.qk-slide img,
.qk-slide picture,
.qk-slide picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Image-only slide: the banner is authored at ~6:1 aspect (matches the
   slider viewport exactly), so `object-fit: contain` renders it edge-
   to-edge without cropping. Pointer hint + subtle scale on hover so
   it reads as interactive. */
.qk-slide.qk-slide-imgonly {
  cursor: pointer;
  background: #050608;
}
.qk-slide.qk-slide-imgonly img {
  object-fit: contain;
  object-position: center;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .2s ease;
}
.qk-slide.qk-slide-imgonly:hover img {
  transform: scale(1.02);
  filter: brightness(1.08);
}

/* ----- Single-image banner (.qk-banner) -----
   Used by Casino + Versus pages instead of the rotating slider.
   Renders full-bleed like .qk-slider (negative-margin trick), same
   aspect ratio, no arrows, no dots, no JS. Pure CSS. */
.qk-banner {
  position: relative;
  width: 100%;
  margin: -28px -24px 28px;
  border-radius: 0;
  overflow: hidden;
  background: var(--s-bg-2);
  border: 0;
  border-bottom: 1px solid var(--s-line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  user-select: none;
}
.qk-banner-inner {
  position: relative;
  width: 100%;
  padding-top: 16.5%;         /* match the slider ratio (888-style banner) */
  overflow: hidden;
}
.qk-banner-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qk-banner-inner .qk-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5% 4%;
  color: #fff;
  gap: 6px;
}
.qk-banner.qk-banner-casino .qk-banner-fallback {
  background:
    linear-gradient(135deg, rgba(127,248,0,.22), rgba(0,0,0,.82)),
    radial-gradient(circle at 82% 22%, rgba(252,228,3,.35), transparent 55%),
    radial-gradient(circle at 14% 82%, rgba(127,248,0,.4), transparent 58%),
    linear-gradient(135deg, #0b1a06, #050608);
}
.qk-banner.qk-banner-versus .qk-banner-fallback {
  background:
    linear-gradient(135deg, rgba(127,248,0,.16), rgba(0,0,0,.82)),
    radial-gradient(circle at 78% 20%, rgba(239,60,78,.38), transparent 55%),
    radial-gradient(circle at 18% 84%, rgba(127,248,0,.35), transparent 58%),
    linear-gradient(135deg, #1a0608, #050608);
}
.qk-banner-fallback .qk-chip {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s-gold, #fce403);
  background: rgba(252,228,3,.10);
  border: 1px solid rgba(252,228,3,.42);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 800;
}
.qk-banner-fallback h2 {
  margin: 0;
  font-size: clamp(18px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.05;
  text-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.qk-banner-fallback p {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 14px);
  color: rgba(255,255,255,.9);
  max-width: 560px;
  line-height: 1.35;
}
.qk-banner-fallback .qk-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--s-green, #7ff800);
  color: #001a00;
  font-weight: 900;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(127,248,0,.48), inset 0 -2px 0 rgba(0,0,0,.18);
  transition: filter .15s, transform .15s;
}
.qk-banner-fallback .qk-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
/* Right-side decorative accent (stylized chips) — pure CSS */
.qk-banner-deco {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 45%;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 50%, rgba(127,248,0,.6), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(252,228,3,.4), transparent 50%);
  filter: blur(8px);
  opacity: .7;
}
.qk-slide .qk-slide-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5% 4%;
  background:
    linear-gradient(135deg, rgba(127,248,0,.18), rgba(0,0,0,.75)),
    radial-gradient(circle at 82% 18%, rgba(252,228,3,.28), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(127,248,0,.35), transparent 60%),
    linear-gradient(135deg, #0a1d05, #050608);
  color: #fff;
  gap: 6px;
}
/* Versus theme — red→green diagonal, hot-pink chip border. Used by
   the $100 Versus fee-forgiveness slide and any future PvP promo. */
.qk-slide .qk-slide-fallback.qk-slide-fallback-versus {
  background:
    linear-gradient(135deg, rgba(239,60,78,.32), rgba(0,0,0,.85)),
    radial-gradient(circle at 80% 24%, rgba(252,228,3,.30), transparent 55%),
    radial-gradient(circle at 16% 80%, rgba(127,248,0,.42), transparent 58%),
    linear-gradient(135deg, #1a0608, #050608);
}
.qk-slide .qk-slide-fallback.qk-slide-fallback-versus .qk-chip {
  color: #fff;
  background: rgba(239,60,78,.18);
  border-color: rgba(239,60,78,.55);
}
.qk-slide .qk-slide-fallback h3 {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: -.5px;
  text-shadow: 0 4px 20px rgba(0,0,0,.6);
  line-height: 1.1;
}
.qk-slide .qk-slide-fallback p {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 14px);
  color: rgba(255,255,255,.9);
  max-width: 560px;
  line-height: 1.35;
}
.qk-slide .qk-slide-fallback .qk-chip {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s-gold, #fce403);
  background: rgba(252,228,3,.10);
  border: 1px solid rgba(252,228,3,.42);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 800;
}
.qk-slide .qk-slide-fallback .qk-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--s-green, #7ff800);
  color: #001a00;
  font-weight: 900;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(127,248,0,.48), inset 0 -2px 0 rgba(0,0,0,.18);
  transition: filter .15s, transform .15s;
}
.qk-slide .qk-slide-fallback .qk-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }

.qk-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(6px);
  transition: background .15s, transform .15s;
}
.qk-slider-arrow:hover { background: var(--s-green, #7ff800); color: #001a00; transform: translateY(-50%) scale(1.08); box-shadow: 0 0 18px rgba(127,248,0,.45); }
.qk-slider-arrow.left { left: 12px; }
.qk-slider-arrow.right { right: 12px; }
.qk-slider-arrow svg { width: 22px; height: 22px; display: block; }

.qk-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.qk-slider-dots .qk-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 0;
  cursor: pointer;
  transition: background .15s, width .15s;
}
.qk-slider-dots .qk-dot.active {
  background: var(--s-green, #7ff800);
  width: 26px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(127,248,0,.55);
}

.qk-slider.qk-slider-compact .qk-slider-viewport { padding-top: 14%; }
.qk-slider.qk-slider-compact .qk-slide .qk-slide-fallback h3 { font-size: clamp(18px, 2.2vw, 30px); }

/* ----- Canvas animation strip (decorative band on Casino + Versus) -----
   Sits flush against the top banner. Aspect roughly 1244:142 like the
   888casino reference. Fully responsive, and the JS canvas inside scales
   to fit. */
.qk-canvas-strip {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 4px auto 22px;
  height: 142px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
/* Hero variant — full-bleed, flush with the topbar (no gap above),
   replaces the static banner entirely. Taller than the regular strip
   so it carries the page top. */
.qk-canvas-strip.qk-canvas-strip-hero {
  margin: -28px -24px 28px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--s-line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  height: 240px;
  max-width: none;
}
.qk-canvas-strip canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .qk-canvas-strip { height: 96px; margin: 4px auto 16px; }
  .qk-canvas-strip.qk-canvas-strip-hero { height: 160px; margin: -16px -12px 24px; }
}
@media (max-width: 480px) {
  .qk-canvas-strip { height: 76px; }
  .qk-canvas-strip.qk-canvas-strip-hero { height: 120px; }
}

/* Animated gradient strip — a non-interactive decorative band between
   sections. Purely visual, replaces the 888 "canvas" banner. */
.qk-anim-strip {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 26px auto;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #0f1724, #1c2a42, #0f1724);
  border: 1px solid var(--s-line);
}
.qk-anim-strip::before,
.qk-anim-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(127,248,0,.45), transparent 55%);
  filter: blur(22px);
  opacity: .7;
  animation: qkAnimSweep 8s ease-in-out infinite;
}
.qk-anim-strip::after {
  background: radial-gradient(circle at 50% 50%, rgba(252,228,3,.35), transparent 55%);
  animation-delay: -4s;
}
@keyframes qkAnimSweep {
  0%   { left: -60%; }
  50%  { left: 100%; }
  100% { left: -60%; }
}
.qk-anim-strip .qk-anim-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,.9);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  z-index: 2;
}
.qk-anim-strip .qk-anim-text span { color: var(--s-green, #7ff800); text-shadow: 0 0 8px rgba(127,248,0,.55); }

/* ----- Game tile cards (big portrait image) ----- */
.s-tile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--s-text);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.s-tile-card:hover { transform: translateY(-6px); }
.s-tile-card .s-tile-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 555;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--s-bg-3), var(--s-bg-2));
  border: 1px solid var(--s-line);
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  transition: border-color .2s, box-shadow .2s;
}
.s-tile-card:hover .s-tile-img-wrap {
  border-color: var(--s-green, #7ff800);
  box-shadow: 0 14px 36px rgba(0,0,0,.6), 0 0 30px rgba(127,248,0,.45);
}
.s-tile-card .s-tile-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  background:
    radial-gradient(circle at 30% 20%, rgba(127,248,0,.22), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(252,228,3,.18), transparent 55%),
    linear-gradient(160deg, var(--s-bg-3), var(--s-bg-2));
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
  transition: transform .4s ease;
}
/* Hover effect is external only (lift + glow + border on the wrap).
   No inner image transform — any scale inside an overflow:hidden wrap
   risks clipping signature artwork at the edges. */
.s-tile-card:hover .s-tile-img-fallback { transform: none; }
/* Full-bleed game tile illustrations (dice, tower, crash, mines, keno, hilo
   PNGs — the source artwork already has its own painted background, so we
   let it cover the whole wrap instead of floating a small icon on top of
   the default dark gradient). */
.s-tile-card .s-tile-img-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s-tile-card .s-tile-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--s-green, #7ff800);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 12px 34px rgba(127,248,0,.6);
  pointer-events: none;
}
.s-tile-card:hover .s-tile-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(.85);
}
.s-tile-card .s-tile-play::before {
  content: '';
  width: 0; height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #001a00;
}
.s-tile-card .s-tile-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  color: var(--s-gold, #fce403);
  border: 1px solid rgba(252,228,3,.42);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.s-tile-card .s-tile-badge.live {
  color: #001a00;
  background: var(--s-green, #7ff800);
  border-color: rgba(127,248,0,.8);
  box-shadow: 0 0 14px rgba(127,248,0,.45);
}
.s-tile-card .s-tile-badge.hot {
  color: #fff;
  background: linear-gradient(135deg, var(--s-red, #ef3c4e), #fc6200);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 0 14px rgba(252,98,0,.45);
}
.s-tile-card .s-tile-maint {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(245,180,0,.15);
  color: #f5b400;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  border: 1px solid rgba(245,180,0,.4);
  z-index: 2;
}
.s-tile-card .s-tile-meta {
  padding: 2px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.s-tile-card .s-tile-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--s-text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Game-name labels are baked into the tile illustrations for the six
   main games, so the HTML title below would duplicate the name. Hide
   the HTML title only for those tiles; keep it visible for tiles that
   use a non-PNG fallback (e.g. the RPS emoji). The node stays in the
   DOM for screen readers. */
.s-tile-card[href="/games/dice"] .s-tile-title,
.s-tile-card[href="/games/tower"] .s-tile-title,
.s-tile-card[href="/games/crash"] .s-tile-title,
.s-tile-card[href="/games/mines"] .s-tile-title,
.s-tile-card[href="/games/keno"] .s-tile-title,
.s-tile-card[href="/games/hilo"] .s-tile-title {
  display: none;
}
.s-tile-card .s-tile-jackpot {
  font-size: 13px;
  font-weight: 900;
  color: var(--s-gold, #fce403);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-shadow: 0 0 14px rgba(252,228,3,.45);
}
.s-tile-card .s-tile-jackpot .s-tile-jackpot-lbl {
  display: block;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--s-muted, #9aa6b4);
  font-weight: 700;
  margin-bottom: 1px;
  text-shadow: none;
}

/* ----- Game tile grid override: slightly larger tiles ----- */
.s-tiles.s-tiles-cards {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* ---------------- Category subrow + horizontal carousel ---------------- */
.s-subrow { margin: 0 0 28px 0; }
.s-subrow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px 0;
}
.s-subrow-head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--s-text, #fff);
  margin: 0;
}
.s-row-nav { display: flex; gap: 6px; }
.s-row-arrow {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  background: var(--s-bg-3, rgba(255,255,255,.04));
  color: var(--s-text, #e9edf2);
  border: 1px solid var(--s-line, rgba(255,255,255,.08));
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s, box-shadow .15s;
  padding: 0;
}
.s-row-arrow:hover:not(:disabled) {
  background: var(--s-bg-2, rgba(255,255,255,.08));
  border-color: var(--s-green, #7ff800);
  box-shadow: 0 4px 12px rgba(127,248,0,.25);
}
.s-row-arrow:disabled {
  opacity: .35;
  cursor: default;
}
.s-tiles-scroll {
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  /* scroll-behavior intentionally NOT set here. The momentum decay loop
     in qk-carousel.js writes scroller.scrollLeft every ~16ms via
     requestAnimationFrame; if scroll-behavior: smooth is active, the
     browser tries to smoothly animate ~300ms toward each frame's target,
     fighting the next frame's update and producing a stalled / jittery
     glide. Arrow buttons pass { behavior: 'smooth' } explicitly in their
     scrollBy() calls so they still animate nicely. */
  padding-top: 12px;
  margin-top: -12px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.s-tiles-scroll::-webkit-scrollbar { display: none; }
.s-tiles-scroll { scrollbar-width: none; }
.s-tiles-scroll .s-tiles-cards {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px;
}
.s-tiles-scroll .s-tile-card {
  flex: 0 0 180px;
}
@media (min-width: 900px) {
  .s-tiles-scroll .s-tile-card { flex-basis: 200px; }
}
/* Drag-to-scroll cursor affordance — users can grab any tile and drag
   horizontally to scroll the carousel. Native touch-swipe on mobile
   is unaffected (handled by overflow-x: auto). */
.s-tiles-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.s-tiles-scroll.is-dragging .s-tile-card {
  cursor: grabbing;
}
.s-tiles-scroll .s-tile-card,
.s-tiles-scroll .s-tile-card img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;   /* disables long-press callout on iOS Safari */
}
.s-tile-soon {
  position: absolute;
  top: 12px; left: 12px;
  background: linear-gradient(180deg, #7ff800, #5bc700);
  color: #0a0b15;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 3;
  text-transform: uppercase;
}
.s-tile-card-soon {
  cursor: pointer;
  opacity: .85;
}
.s-tile-card-soon:hover { opacity: 1; }

/* Maintenance badge — same geometry as .s-tile-soon but amber/gold so
   it reads as "temporarily down" rather than "not built yet". Paired
   with data-maintenance="Game name" on the <a> tile so qk-carousel.js
   can intercept the click and toast an explanation. */
.s-tile-maint {
  position: absolute;
  top: 12px; left: 12px;
  background: linear-gradient(180deg, #ffbf40, #d89500);
  color: #1a1205;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 3;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(216, 149, 0, .25);
}
.s-tile-card-maint {
  cursor: pointer;
  opacity: .75;
  filter: grayscale(.25);
}
.s-tile-card-maint:hover { opacity: .9; }

/* ----- Promotions page (888-inspired carousel) ----- */
.qk-promo-carousel {
  margin: 0 auto 40px;
  max-width: 1280px;
}
.qk-promo-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.qk-promo-carousel-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.qk-promo-carousel-head h2 .qk-promo-accent {
  background: linear-gradient(135deg, var(--s-green, #7ff800), var(--s-gold, #fce403));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qk-promo-arrows {
  display: flex;
  gap: 8px;
}
.qk-promo-arrows .qk-promo-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--s-line);
  background: var(--s-bg-2);
  color: var(--s-text);
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.qk-promo-arrows .qk-promo-arrow:hover {
  background: var(--s-green, #7ff800);
  border-color: var(--s-green, #7ff800);
  color: #001a00;
  box-shadow: 0 0 14px var(--s-green-glow, rgba(127,248,0,.4));
}
.qk-promo-arrows .qk-promo-arrow[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.qk-promo-swiper {
  position: relative;
  /* overflow: hidden clips the horizontal translateX() wrap (needed so
     off-screen teasers don't leak out the side). The extra vertical
     padding + negative margin gives the teaser's hover lift
     (translateY(-4px)) and glow shadow room to render without being
     clipped at the top/bottom edges, while the horizontal clip stays
     tight against the swiper edges. */
  overflow: hidden;
  padding: 12px 0 28px;
  margin: -12px 0 -28px;
}
.qk-promo-swiper-wrap {
  display: flex;
  gap: 16px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.qk-promo-teaser {
  flex: 0 0 calc((100% - 32px) / 3);
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0e1510, #050608);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.qk-promo-teaser:hover {
  transform: translateY(-4px);
  border-color: var(--s-green, #7ff800);
  box-shadow: 0 18px 44px rgba(127,248,0,.28);
}
@media (max-width: 1100px) {
  .qk-promo-teaser { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (max-width: 720px) {
  .qk-promo-teaser { flex: 0 0 100%; }
}
.qk-promo-teaser-top {
  padding: 14px 18px 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.qk-promo-teaser-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.qk-promo-teaser-tc {
  font-size: 11px;
  color: var(--s-muted, #8a9bba);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 2px;
  transition: color .15s;
}
.qk-promo-teaser-tc:hover { color: var(--s-green, #7ff800); }
.qk-promo-teaser-img {
  position: relative;
  width: 100%;
  aspect-ratio: 655 / 293;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(127,248,0,.22), rgba(0,0,0,.85)),
    radial-gradient(circle at 80% 20%, rgba(252,228,3,.35), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(127,248,0,.28), transparent 55%),
    linear-gradient(135deg, #0a1d05, #050608);
}
/* Versus teaser variant — red glow on top of the green base for the
   $100 Versus fee-forgiveness promo. */
.qk-promo-teaser.qk-promo-teaser-versus .qk-promo-teaser-img {
  background:
    linear-gradient(135deg, rgba(239,60,78,.32), rgba(0,0,0,.85)),
    radial-gradient(circle at 78% 22%, rgba(252,228,3,.32), transparent 55%),
    radial-gradient(circle at 18% 82%, rgba(127,248,0,.38), transparent 58%),
    linear-gradient(135deg, #1a0608, #050608);
}
.qk-promo-teaser.qk-promo-teaser-versus:hover {
  border-color: var(--s-red, #ef3c4e);
  box-shadow: 0 18px 44px rgba(239,60,78,.28);
}
.qk-promo-teaser.qk-promo-teaser-versus .qk-promo-teaser-headline h3 {
  color: var(--s-gold, #fce403);
  text-shadow: 0 3px 14px rgba(0,0,0,.6), 0 0 18px rgba(252,228,3,.25);
}
.qk-promo-teaser-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.qk-promo-teaser-img .qk-promo-teaser-headline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px;
  color: #fff;
  gap: 6px;
  text-shadow: 0 3px 12px rgba(0,0,0,.55);
}
.qk-promo-teaser-headline h3 {
  margin: 0;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.qk-promo-teaser-headline span {
  font-size: 12px;
  color: rgba(255,255,255,.82);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}
.qk-promo-teaser-bot {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.qk-promo-teaser-text {
  color: var(--s-text);
  font-size: 13.5px;
  line-height: 1.5;
  flex: 1;
}
.qk-promo-teaser-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qk-promo-teaser-cta .qk-cta-btn {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter .15s, transform .15s;
  cursor: pointer;
  border: 0;
}
.qk-promo-teaser-cta .qk-cta-btn.primary {
  background: transparent;
  color: var(--s-text);
  border: 1px solid var(--s-line);
}
.qk-promo-teaser-cta .qk-cta-btn.primary:hover {
  background: var(--s-bg-3);
  border-color: var(--s-green, #7ff800);
  color: var(--s-green, #7ff800);
}
.qk-promo-teaser-cta .qk-cta-btn.secondary {
  background: var(--s-green, #7ff800);
  color: #001a00;
  box-shadow: 0 10px 24px rgba(127,248,0,.42), inset 0 -2px 0 rgba(0,0,0,.18);
}
.qk-promo-teaser-cta .qk-cta-btn.secondary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.qk-promo-disclaimer {
  padding: 0 18px 14px;
  font-size: 11px;
  color: var(--s-muted-2, #5f738f);
  line-height: 1.5;
}

/* Tier list for the video contest promotion */
.qk-promo-teaser .promo-tier-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--s-text);
  font-size: 13px;
}

/* Sidebar collapses: user card + bell still render at the top of the
   drawer on mobile. */
@media (max-width: 900px) {
  .s-shell { grid-template-columns: 1fr; }
  .s-side { width: 240px; }
  .s-notif-dropdown-side { left: 100% !important; }
}
@media (max-width: 768px) {
  .s-notif-dropdown-side {
    width: calc(100vw - 40px) !important;
    max-width: 320px;
  }
  /* Slider full-bleed flush with topbar works on mobile too — the
     negative horizontal margin needs to match the mobile .s-content
     padding (12px instead of 24px on desktop). */
  .qk-slider { margin: -16px -12px 24px; }
}
@media (max-width: 520px) {
  /* Keep the image-banner aspect locked at 16.5% so the banner never
     turns into a tall square on tablet portrait. */
  .qk-slider-viewport { padding-top: 16.5%; }
  .qk-banner-inner { padding-top: 16.5%; }
  .qk-slider-arrow { width: 32px; height: 32px; }
  .qk-slider-arrow svg { width: 16px; height: 16px; }
  .qk-anim-strip { height: 56px; }
  .qk-anim-strip .qk-anim-text { font-size: 11px; letter-spacing: .16em; gap: 8px; }
  .qk-promo-carousel-head h2 { font-size: 18px; }
  .s-side-user-avatar { width: 52px; height: 52px; }
  .s-side-user-name { font-size: 13px; }
}

/* ----- Featured-video player (Get Paid To Post promo) -----
   Slot fills the same 655:293 aspect that the headline previously
   occupied. Renders either an embedded YouTube iframe (when an admin
   has set a featured video) or a placeholder with a play icon. Admins
   see a "Change video" button overlay in the corner. */
.qk-promo-video {
  position: relative;
  width: 100%;
  aspect-ratio: 655 / 293;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(127,248,0,.18), rgba(0,0,0,.85)),
    radial-gradient(circle at 80% 20%, rgba(252,228,3,.25), transparent 55%),
    linear-gradient(135deg, #0a1d05, #050608);
}
.qk-promo-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.qk-promo-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  text-align: center;
  padding: 0 20px;
}
.qk-promo-video-placeholder .play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--s-green, #7ff800);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(127,248,0,.45), inset 0 -2px 0 rgba(0,0,0,.18);
}
.qk-promo-video-placeholder .play-icon::before {
  content: '';
  width: 0; height: 0;
  margin-left: 6px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid #001a00;
}
.qk-promo-video-placeholder .qk-promo-video-msg {
  max-width: 320px;
  line-height: 1.45;
  font-weight: 600;
}

/* Admins get a small "Change video" affordance in the corner. The
   whole container is also clickable for them (cursor: pointer). */
.qk-promo-video-admin { cursor: pointer; }
.qk-promo-video-admin .qk-promo-video-placeholder { cursor: pointer; }
.qk-promo-video-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(0,0,0,.78);
  color: var(--s-green, #7ff800);
  border: 1px solid var(--s-green, #7ff800);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s, transform .12s;
}
.qk-promo-video-edit:hover {
  background: var(--s-green, #7ff800);
  color: #001a00;
  transform: translateY(-1px);
}

/* =====================================================================
 * FAQ <details>/<summary> used by /support and /why-quikash. Browsers
 * default the summary cursor inconsistently (some show I-beam over the
 * label text since it's selectable text inside an interactive element).
 * Force pointer + disable text selection so the whole row reads as a
 * click target the way the user expects.
 * =================================================================== */
.qk-faq-item > summary,
.qk-faq summary,
details.qk-faq-item > summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.qk-faq-item > summary * { user-select: none; }

/* =====================================================================
 * Homepage About + Glossary, redesigned as scannable card grids rather
 * than wall-of-text paragraphs. Used by src/seo-inject.js → renderAbout
 * Block / renderGlossaryBlock. Drop the layout into the homepage by
 * placing <!--QK-ABOUT--> and <!--QK-GLOSSARY--> markers in index.html.
 * =================================================================== */

/* About: hero copy + 4-up stat grid + fineprint + CTA. */
.qk-about {
  margin: 28px 0 36px;
}
.qk-about > h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--s-text, #e7edf3);
  line-height: 1.2;
}
.qk-about-lead {
  margin: 0 0 18px;
  color: var(--s-muted, #8b96a3);
  font-size: 14px;
  line-height: 1.5;
}
.qk-stat-grid {
  display: grid;
  /* 4-up on wide, 2-up on mid, 1-up on narrow. The minmax floor is
   * generous enough that "0% House Edge on PvP. 1% tax on winnings only"
   * fits without breaking weirdly across rows. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.qk-stat {
  background: var(--s-bg-2, #161b22);
  border: 1px solid var(--s-line, #2a3037);
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qk-stat-num {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--s-green, #66ffe5);
  margin-bottom: 6px;
}
.qk-stat-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--s-text, #e7edf3);
  line-height: 1.4;
}
.qk-stat-base {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--s-muted, #8b96a3);
  line-height: 1.45;
}
.qk-about-fineprint {
  color: var(--s-muted, #aab4bf);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.qk-about-cta {
  margin: 0;
}
.qk-about-link {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--s-bg-2, #161b22);
  border: 1px solid var(--s-line, #2a3037);
  color: var(--s-green, #66ffe5);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease;
}
.qk-about-link:hover {
  background: var(--s-bg-3, #1c222b);
  border-color: var(--s-green, #66ffe5);
}

/* Glossary: 2-up card grid on desktop, 1-up on mobile. Each card is
 * still a <dt>+<dd> (definition list) wrapped in a presentation div so
 * AEO engines parse the term/definition relationship cleanly. */
.qk-glossary {
  margin: 28px 0;
}
.qk-glossary > h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--s-text, #e7edf3);
}
.qk-gloss-intro {
  margin: 0 0 16px;
  color: var(--s-muted, #8b96a3);
  font-size: 13.5px;
  line-height: 1.55;
}
.qk-gloss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.qk-gloss-card {
  background: var(--s-bg-2, #161b22);
  border: 1px solid var(--s-line, #2a3037);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qk-gloss-card dt {
  font-size: 14px;
  font-weight: 800;
  color: var(--s-green, #66ffe5);
  margin: 0;
  letter-spacing: 0;
}
.qk-gloss-card dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--s-text, #e7edf3);
}
.qk-gloss-base {
  margin-top: 4px;
  display: block;
  font-size: 12px;
  color: var(--s-muted, #8b96a3);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .qk-about > h1 { font-size: 22px; }
  .qk-stat { padding: 14px 14px 12px; }
  .qk-stat-num { font-size: 28px; }
}