:root {
  --page-lavender: #ddd6fe;
  --page-lavender-light: #e9e4ff;
  --page-lavender-mid: #ede9fe;
  --casino-surface: #e4ddfd;
  --casino-surface-2: #ebe6ff;
  --chip-lavender: #ddd6fe;
  --chip-lavender-mid: #d4c9fd;
  --chip-lavender-deep: #c4b5fd;
  --casino-text: #312e81;
  --casino-muted: #6366f1;
}
@property --border-run-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes border-strip-run { to { --border-run-angle: 360deg; } }
@keyframes pulse { 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; scroll-padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }

.casino-gold-border { position: relative; border: 1px solid rgba(234, 179, 8, 0.2); overflow: hidden; }
.casino-gold-border::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--border-run-angle), transparent 0deg, transparent 265deg, rgba(251, 191, 36, 0.25) 290deg, #fbbf24 315deg, #fffbeb 330deg, #fbbf24 345deg, rgba(251, 191, 36, 0.25) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: border-strip-run 2.6s linear infinite; pointer-events: none; z-index: 3;
}

body.casino-body { background: linear-gradient(180deg, var(--page-lavender-light) 0%, var(--page-lavender) 100%); }
.casino-app {
  background: linear-gradient(180deg, var(--page-lavender-light) 0%, var(--page-lavender) 100%);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.18);
  overflow-x: clip;
}
.bottom-scroll-spacer {
  height: calc(4rem + env(safe-area-inset-bottom, 0px) + 0.5rem);
  flex-shrink: 0;
}

.casino-header {
  position: sticky; top: 0; overflow: visible;
  background: linear-gradient(95deg, #1e1b4b 0%, #312e81 28%, #4338ca 58%, #6d28d9 100%);
  box-shadow: 0 4px 24px rgba(49, 46, 129, 0.5); z-index: 50;
}
.casino-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 42%); pointer-events: none; }
.casino-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent 5%, #fbbf24 35%, #fde68a 50%, #fbbf24 65%, transparent 95%); pointer-events: none; }
.casino-header__inner { position: relative; z-index: 1; }
.casino-header__back { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(253,224,71,0.3); color: #fde68a; flex-shrink: 0; transition: background 0.15s ease; }
.casino-header__back:hover { background: rgba(255,255,255,0.18); }
.casino-brand { color: #fff; text-shadow: 0 1px 8px rgba(253, 224, 71, 0.35); line-height: 1.2; }
.casino-badge { background: linear-gradient(135deg, rgba(251,191,36,0.28) 0%, rgba(180,83,9,0.2) 100%); border: 1px solid rgba(253,224,71,0.55); color: #fef9c3; box-shadow: 0 0 12px rgba(251,191,36,0.22), inset 0 1px 0 rgba(255,255,255,0.18); }
.casino-header__lang { position: relative; z-index: 60; }
.casino-header__lang-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(253,224,71,0.35); color: #fde68a; }
.casino-header__lang-btn:hover { background: rgba(255,255,255,0.18); }
.casino-header__lang-menu { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; z-index: 60; background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%); border: 1px solid rgba(139,92,246,0.25); box-shadow: 0 8px 24px rgba(91,33,182,0.2); }
.casino-header__lang-menu button { color: #4c1d95; }
.casino-header__lang-menu button:hover { background: rgba(221,214,254,0.65); color: #6d28d9; }
.casino-header__lang-menu .lang-check { color: #d97706; }

.casino-panel { background: linear-gradient(145deg, #f5f3ff 0%, var(--casino-surface-2) 45%, var(--page-lavender-mid) 100%); }
.casino-section-title { color: var(--casino-text); }
.casino-section-accent { width: 3px; height: 1rem; border-radius: 9999px; background: linear-gradient(180deg, #fde68a, #f59e0b); flex-shrink: 0; }
.casino-link { color: #7c3aed; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.casino-link:hover { color: #6d28d9; }
.stats-subtitle { font-size: 0.6875rem; font-weight: 500; color: rgba(91, 33, 182, 0.55); margin-bottom: 0.25rem; }

.article-hero { position: relative; overflow: hidden; margin: 0.75rem 0.75rem 0; border-radius: 1rem; min-height: 10rem; }
.article-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.article-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,27,75,0.88) 0%, rgba(49,46,129,0.78) 45%, rgba(76,29,149,0.72) 100%); }
.article-hero__content { position: relative; z-index: 1; padding: 1.25rem 1rem 1.5rem; color: #fff; }
.article-hero__badge { display: inline-block; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fef9c3; background: rgba(251,191,36,0.25); border: 1px solid rgba(253,224,71,0.45); border-radius: 9999px; padding: 0.2rem 0.5rem; margin-bottom: 0.5rem; }
.article-hero__title { font-size: 1.125rem; font-weight: 900; line-height: 1.3; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.article-hero__desc { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.45; color: rgba(255,255,255,0.78); font-weight: 500; }

.article-body { margin: 0.75rem; border-radius: 1rem; }
.article-breadcrumb { font-size: 0.6875rem; font-weight: 600; color: rgba(91, 33, 182, 0.5); margin-bottom: 0.5rem; }
.article-meta { font-size: 0.6875rem; color: rgba(91, 33, 182, 0.55); margin-bottom: 1rem; }
.article-meta time { font-weight: 600; }
.article-breadcrumb a { color: #7c3aed; }
.article-breadcrumb a:hover { color: #6d28d9; }
.article-breadcrumb span { color: rgba(91, 33, 182, 0.7); }

.article-prose { max-width: none; color: #3730a3; font-size: 0.875rem; line-height: 1.65; }
.article-prose h2 { font-size: 1rem; font-weight: 800; color: #4c1d95; margin: 1.5rem 0 0.625rem; padding-bottom: 0.375rem; border-bottom: 1px solid rgba(139, 92, 246, 0.15); }
.article-prose h3 { font-size: 0.875rem; font-weight: 800; color: #5b21b6; margin: 1.125rem 0 0.5rem; }
.article-prose p { margin-bottom: 0.75rem; color: rgba(55, 48, 163, 0.88); }
.article-prose a { color: #7c3aed; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.article-prose a:hover { color: #6d28d9; }

.article-cta { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(139, 92, 246, 0.15); font-size: 0.8125rem; font-weight: 600; color: rgba(91, 33, 182, 0.7); }

.article-toc { background: rgba(255,255,255,0.45); border: 1px solid rgba(139, 92, 246, 0.12); border-radius: 0.75rem; padding: 0.75rem; }
.article-toc h3 { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #4c1d95; margin-bottom: 0.75rem; }
.article-toc a { display: block; font-size: 0.75rem; font-weight: 600; color: rgba(91, 33, 182, 0.65); padding: 0.375rem 0; border-bottom: 1px solid rgba(139, 92, 246, 0.08); transition: color 0.12s ease; }
.article-toc a:last-child { border-bottom: none; }
.article-toc a:hover { color: #7c3aed; }

.related-strategies { border-radius: 0.875rem; }
.related-strategies .guide-list { margin-top: 0.5rem; }

.guide-featured { position: relative; display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; padding: 0.875rem 1rem; border-radius: 0; overflow: hidden; text-decoration: none; background: linear-gradient(145deg, var(--chip-lavender) 0%, var(--chip-lavender-mid) 55%, var(--chip-lavender-deep) 100%); border: none; border-top: 1px solid rgba(139, 92, 246, 0.12); border-bottom: 1px solid rgba(139, 92, 246, 0.12); box-shadow: none; }
.guide-featured::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, transparent 48%); pointer-events: none; }
.guide-featured__tag { position: absolute; top: 0.5rem; right: 0.625rem; z-index: 2; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #b45309; background: rgba(254, 243, 199, 0.9); border: 1px solid rgba(251, 191, 36, 0.45); border-radius: 9999px; padding: 0.125rem 0.5rem; }
.guide-featured__gem { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; color: #451a03; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.guide-featured__text { position: relative; z-index: 1; flex: 1; min-width: 0; padding-right: 3.5rem; }
.guide-featured__title { display: block; font-size: 0.8125rem; font-weight: 800; line-height: 1.3; color: #4c1d95; }
.guide-featured__sub { display: block; margin-top: 0.125rem; font-size: 0.625rem; font-weight: 500; color: rgba(91, 33, 182, 0.55); }
.guide-featured__arrow { position: relative; z-index: 1; flex-shrink: 0; font-size: 1.375rem; font-weight: 700; color: #7c3aed; opacity: 0.8; }
.guide-dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.guide-dot--red { background: linear-gradient(145deg, #f87171, #dc2626); }
.guide-dot--green { background: linear-gradient(145deg, #4ade80, #16a34a); }
.guide-dot--violet { background: linear-gradient(145deg, #c4b5fd, #7c3aed); }
.guide-dot--gold { background: linear-gradient(145deg, #fde68a, #d97706); }
.guide-dot--blue { background: linear-gradient(145deg, #93c5fd, #2563eb); }
.guide-dot--fuchsia { background: linear-gradient(145deg, #f0abfc, #c026d3); }
.guide-list { border-radius: 0; overflow: hidden; border: none; background: rgba(255, 255, 255, 0.45); margin-top: 0; }
.guide-list__item { display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem 0.75rem; text-decoration: none; border-bottom: 1px solid rgba(139, 92, 246, 0.1); transition: background 0.12s ease; }
.guide-list__item:last-child { border-bottom: none; }
.guide-list__item:hover { background: rgba(237, 233, 254, 0.65); }
.guide-list__title { flex: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; line-height: 1.35; color: #4c1d95; }
.guide-list__arrow { flex-shrink: 0; font-size: 1rem; font-weight: 700; color: #a78bfa; }
.guide-list__item:hover .guide-list__arrow { color: #7c3aed; }
.guide-section__foot { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(167, 139, 250, 0.25); display: flex; align-items: center; justify-content: space-between; }
.guide-section__copy { font-size: 0.625rem; color: var(--casino-muted); }
.guide-section__lang { font-size: 0.625rem; font-weight: 600; color: #7c3aed; text-decoration: none; }
.guide-section__lang:hover { color: #6d28d9; }
.seo-guides { width: 100%; max-width: 100%; box-sizing: border-box; }
.seo-guides > div { width: 100%; max-width: 100%; box-sizing: border-box; }
.seo-guides__panel { border-radius: 0; margin-bottom: 0; padding-bottom: 0.75rem; overflow: hidden; }
.seo-guides__panel.casino-gold-border::after { border-radius: 0; }
.guide-featured:hover { background: rgba(237, 233, 254, 0.65); }
.guide-featured.casino-gold-border::after { animation-duration: 3.2s; }

/* Articles stay in the mobile frame on all screen sizes */
.casino-app--article {
  max-width: 28rem;
}

.article-prose .article-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1rem;
  font-size: 0.75rem;
}
.article-prose .article-table th,
.article-prose .article-table td {
  border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 0.5rem 0.625rem;
  text-align: left;
}
.article-prose .article-table th {
  background: rgba(237, 233, 254, 0.85);
  color: #312e81;
  font-weight: 700;
}
.article-prose .article-table td {
  color: #4c1d95;
}
.article-prose ol,
.article-prose ul {
  margin: 0.5rem 0 1rem 1.25rem;
}
.article-prose li {
  margin-bottom: 0.35rem;
  line-height: 1.55;
}