/*
 * Apple-style skin for asiabetreview.com. 2026-09-21.
 *
 * A re-creation of Apple's design language (system type, generous space, pill
 * buttons, frosted navigation, large soft cards, #f5f5f7 bands, restrained motion),
 * not a copy of apple.com: none of Apple's code, images, fonts or marks are used.
 * The system font stack renders San Francisco on Apple devices, which is the only
 * licensed way to get it on the web.
 *
 * Everything is scoped under html.abr-apple so the skin can be previewed (patch.js
 * adds the class for ?preview=apple) without touching the live look. Rolling it
 * out means adding the class for everyone, nothing else.
 *
 * The React source is lost, so this works by overriding the compiled Tailwind
 * classes. Several buttons carry their gradient as an inline style, hence the
 * !important on backgrounds.
 */

html.abr-apple {
  --a-text: #1d1d1f;
  --a-sub: #6e6e73;
  --a-band: #f5f5f7;
  --a-line: #d2d2d7;
  --a-blue: #0071e3;
  --a-blue-hover: #0077ed;
  --a-link: #0066cc;
  --a-link-dark: #2997ff;
  --a-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* ------------------------------------------------------------------ type */
html.abr-apple body,
html.abr-apple #root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
               "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--a-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
html.abr-apple #root h1 {
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.07 !important;
}
html.abr-apple #root h2 {
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.12 !important;
}
html.abr-apple #root h3 { font-weight: 600 !important; letter-spacing: -0.016em !important; }
html.abr-apple #root .font-extrabold,
html.abr-apple #root .font-black { font-weight: 600 !important; }
html.abr-apple #root .text-slate-900 { color: var(--a-text) !important; }
html.abr-apple #root .text-slate-500,
html.abr-apple #root .text-slate-600 { color: var(--a-sub) !important; }

/* ------------------------------------------------------------ navigation */
html.abr-apple #root header {
  background: rgba(251, 251, 253, 0.8) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
html.abr-apple #root header nav a {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--a-text) !important;
  opacity: 0.8;
  background: transparent !important;
  transition: opacity 0.3s var(--a-ease) !important;
}
html.abr-apple #root header nav a:hover { opacity: 1; }
html.abr-apple #root header nav a[class*="bg-indigo-50"] { opacity: 1; font-weight: 600 !important; }
/* The "Free Credit" call to action in the nav: a small blue pill. */
html.abr-apple #root header nav a[class*="ml-3"] {
  background: var(--a-blue) !important;
  color: #fff !important;
  opacity: 1;
  border-radius: 980px !important;
  box-shadow: none !important;
  padding: 6px 15px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transform: none !important;
}
html.abr-apple #root header nav a[class*="ml-3"]:hover { background: var(--a-blue-hover) !important; }

/* ---------------------------------------------------------------- bands */
html.abr-apple #root section[class*="bg-slate-900"] { background: #000 !important; }
/* The hero draws a purple gradient and two pulsing blurred blobs behind itself.
   Apple heroes are flat black; the colour stays only in the headline text. */
html.abr-apple #root section[class*="bg-slate-900"] > .absolute { display: none !important; }
html.abr-apple #root .bg-slate-50 { background: var(--a-band) !important; }
html.abr-apple #root section { padding-top: clamp(56px, 8vw, 104px) !important; padding-bottom: clamp(56px, 8vw, 104px) !important; }

/* -------------------------------------------------------------- buttons */
/* Primary: every filled white-text button outside the nav becomes the blue pill. */
html.abr-apple #root main a.text-white[class*="rounded"][class*="font-"],
html.abr-apple #root main button.text-white[class*="rounded"] {
  background: var(--a-blue) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 980px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transform: none !important;
  transition: background-color 0.3s var(--a-ease) !important;
}
html.abr-apple #root main a.text-white[class*="rounded"][class*="font-"]:hover,
html.abr-apple #root main button.text-white[class*="rounded"]:hover { background: var(--a-blue-hover) !important; }
/* Hover overlays some buttons draw on top of themselves. */
html.abr-apple #root main a.text-white[class*="rounded"] > span.absolute { display: none !important; }

/* Secondary on dark (hero "Claim Free Credit"): outlined pill in light blue. */
/* Selector deliberately heavier than the primary rule above, which also matches it. */
html.abr-apple #root main a.text-white[class*="rounded"][class*="font-"][class*="border-white/30"] {
  background: transparent !important;
  border: 1px solid var(--a-link-dark) !important;
  color: var(--a-link-dark) !important;
}
html.abr-apple #root main a.text-white[class*="rounded"][class*="font-"][class*="border-white/30"]:hover { background: var(--a-link-dark) !important; color: #fff !important; }

/* Secondary on light ("Read Review", "Review", "See all reviews"): outlined blue pill. */
html.abr-apple #root main a[class*="border-slate-200"][class*="rounded"] {
  background: transparent !important;
  border: 1px solid var(--a-blue) !important;
  color: var(--a-blue) !important;
  border-radius: 980px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color 0.3s var(--a-ease), color 0.3s var(--a-ease) !important;
}
html.abr-apple #root main a[class*="border-slate-200"][class*="rounded"]:hover {
  background: var(--a-blue) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------- cards */
html.abr-apple #root .rounded-3xl { border-radius: 28px !important; }
html.abr-apple #root .rounded-2xl { border-radius: 20px !important; }
html.abr-apple #root main [class*="bg-white"][class*="rounded-3xl"],
html.abr-apple #root main a.group[class*="bg-white"][class*="rounded-2xl"] {
  border: 0 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.6s var(--a-ease), box-shadow 0.6s var(--a-ease) !important;
}
html.abr-apple #root main [class*="bg-white"][class*="rounded-3xl"]:hover,
html.abr-apple #root main a.group[class*="bg-white"][class*="rounded-2xl"]:hover {
  transform: scale(1.015) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
}

/* The game-category tiles: Apple keeps the card white on hover and lets the
   icon carry the colour, instead of flooding the whole card. */
html.abr-apple #root a.group[href^="/games#"]:hover { background: #fff !important; }
html.abr-apple #root a.group[href^="/games#"]:hover p { color: var(--a-text) !important; }
html.abr-apple a.group[href^="/games#"]:hover .abr-gi {
  color: var(--gi-c);
  background: linear-gradient(135deg, var(--gi-a), var(--gi-b));
  box-shadow: inset 0 0 0 1px var(--gi-b);
  transform: scale(1.08);
}

/* ----------------------------------------------------------- long-form */
html.abr-apple #root .rich-content { font-size: 17px; line-height: 1.6; color: var(--a-text); }
html.abr-apple #root .rich-content p,
html.abr-apple #root .rich-content li { color: #333336; }
html.abr-apple #root .rich-content h2 { font-size: clamp(26px, 3.2vw, 36px) !important; margin-top: 1.8em !important; }
html.abr-apple #root .rich-content hr { border-color: var(--a-line) !important; margin: 2.5em 0 !important; }
html.abr-apple #root .text-indigo-600,
html.abr-apple #root .rich-content a { color: var(--a-link) !important; text-decoration: none !important; }
html.abr-apple #root .rich-content a:hover { text-decoration: underline !important; }
html.abr-apple #root .rich-content table { font-size: 15px; border-radius: 18px; }
html.abr-apple #root .rich-content td { border-color: var(--a-line) !important; }
html.abr-apple #root .rich-content tr:first-child td { background: var(--a-band); font-weight: 600; }

/* --------------------------------------------------------------- footer */
html.abr-apple #root footer {
  background: var(--a-band) !important;
  color: var(--a-sub) !important;
  font-size: 12px;
  border-top: 1px solid var(--a-line);
}
html.abr-apple #root footer .text-white,
html.abr-apple #root footer h4 { color: var(--a-text) !important; }
html.abr-apple #root footer a { color: #424245 !important; }
html.abr-apple #root footer a:hover { color: var(--a-text) !important; text-decoration: underline; }
html.abr-apple #root footer p,
html.abr-apple #root footer li { color: var(--a-sub) !important; }
html.abr-apple #root footer [class*="border-slate-800"] { border-color: var(--a-line) !important; }

/* --------------------------------------------------------------- motion */
/* Added by patch.js to elements below the fold: they rise into place as they
   scroll into view, the way Apple product pages do. */
html.abr-apple .abr-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--a-ease), transform 0.9s var(--a-ease);
}
html.abr-apple .abr-reveal.abr-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.abr-apple .abr-reveal { opacity: 1; transform: none; transition: none; }
  html.abr-apple #root main [class*="rounded-3xl"]:hover { transform: none !important; }
}

/* Preview badge (only shown while previewing). */
.abr-preview-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 9999;
  display: flex; gap: 10px; align-items: center;
  padding: 8px 8px 8px 14px; border-radius: 980px;
  background: rgba(29, 29, 31, 0.86); color: #fff;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.abr-preview-badge a { color: #fff; background: rgba(255, 255, 255, 0.18); padding: 6px 10px; border-radius: 980px; text-decoration: none; }

/* ----------------------------------------------------------- small parts */
/* Offer chips: neutral grey instead of indigo, as Apple tags are. */
html.abr-apple #root main [class*="bg-indigo-50"][class*="rounded"] {
  background: var(--a-band) !important;
  color: var(--a-text) !important;
  border-color: transparent !important;
  font-weight: 500 !important;
  border-radius: 980px !important;
}
/* Back-to-top: a quiet translucent dark circle, not a purple tile. */
html.abr-apple button.fixed[class*="bottom-6"][class*="right-6"] {
  background: rgba(29, 29, 31, 0.72) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Affiliate buttons on the static pages sit inside .rich-content, whose link rule
   would otherwise turn their text link-blue on a blue pill. */
html.abr-apple #root .rich-content a.text-white[class*="rounded"][class*="font-"] {
  color: #fff !important;
  text-decoration: none !important;
}