.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px;
  padding: 10px max(14px, calc((100vw - 1180px) / 2));
  background: rgba(42, 7, 64, .92); color: #fff; border-bottom: 1px solid rgba(255, 227, 107, .22); backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; color: #fff; text-decoration: none; font-weight: 1000; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 12px; color: #250733; background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 8px 24px rgba(255, 185, 0, .38); font-size: .76rem; }
.main-nav { display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.main-nav a { padding: 9px 10px; color: rgba(255,255,255,.86); text-decoration: none; font-weight: 800; font-size: .92rem; border-radius: 10px; }
.main-nav a:hover { color: #1b0d2b; background: var(--gold-2); }
.country-select { display: none !important; }
.country-select select { display:none; }
.country-select option { color: var(--ink); }
.header-cta { position: relative; overflow: hidden; min-width: max-content; padding: 11px 18px; color: #2a0637; background: linear-gradient(135deg, #ffe36b 0%, #ffba08 35%, #fff0a6 52%, #ff9f1c 100%); border: 1px solid rgba(255,236,173,.55); border-radius: 14px; text-decoration: none; font-weight: 1000; box-shadow: 0 10px 28px rgba(255,185,0,.35), inset 0 1px 0 rgba(255,255,255,.55); }

.hero { position: relative; padding: 56px 0 62px; color: #fff; overflow: hidden; background: #210634; }
.hero-bg { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(22,2,38,.94), rgba(69,11,95,.82), rgba(22,2,38,.72)), url('../images/joker-jewels-background.jpg'); background-size: cover; background-position: center; filter: saturate(1.18); }
.hero::after { content: ""; position: absolute; inset: auto -10% -140px -10%; height: 260px; background: radial-gradient(ellipse at center, rgba(255,185,0,.25), transparent 62%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .96fr) minmax(360px, 1.04fr); gap: 42px; align-items: center; }
.eyebrow { margin-bottom: 14px; color: var(--gold-2); font-weight: 1000; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow.dark { color: var(--purple-3); }
.hero p { color: rgba(255, 255, 255, .9); font-size: 1.12rem; }
.hero-actions, .demo-actions, .review-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border-radius: 14px; text-decoration: none; font-weight: 1000; line-height: 1.1; box-shadow: 0 12px 28px rgba(35, 18, 53, .22); }
.btn-primary { position: relative; overflow: hidden; color: #2a0637; background: linear-gradient(135deg, #ffe36b 0%, #ffba08 35%, #fff0a6 52%, #ff9f1c 100%); border: 1px solid rgba(255,236,173,.55); box-shadow: 0 12px 34px rgba(255,185,0,.34), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-secondary { color: #fff; background: linear-gradient(135deg, #8930ff, #d91cff 56%, #ff4fbf); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 28px rgba(128,34,199,.25); }
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); }
.trust-line { font-weight: 900; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.facts span { position: relative; min-height: 74px; padding: 13px 14px; border: 1px solid rgba(255, 214, 102, .24); border-radius: 12px; background: linear-gradient(180deg, rgba(79, 23, 112, .98), rgba(45, 10, 69, .98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.18); }
.facts b { display: block; color: var(--gold-2); font-size: .78rem; text-transform: uppercase; }
.hero-media { position: relative; display: grid; gap: 14px; }
.hero-logo { width: min(420px, 70%); margin: 0 auto -42px; position: relative; z-index: 2; filter: drop-shadow(0 14px 26px rgba(0,0,0,.52)); }
.hero-screen { border: 3px solid rgba(255, 227, 107, .46); border-radius: 24px; box-shadow: 0 28px 95px rgba(0, 0, 0, .48), 0 0 0 10px rgba(255,255,255,.08); }
.game-badge { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 2px; padding: 13px 15px; color: #250733; background: linear-gradient(135deg, rgba(255, 242, 176, .96), rgba(255, 185, 0, .94)); border-radius: 16px; box-shadow: var(--shadow); font-weight: 800; }

.subhero { padding: 56px 0; color: #fff; background-image: linear-gradient(90deg, rgba(27,5,43,.94), rgba(84,18,133,.84)), url('../images/joker-jewels-banner.jpg'); background-size: cover; background-position: center; }
.subhero p { max-width: 800px; color: rgba(255,255,255,.88); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: rgba(255,255,255,.78); font-size: .9rem; }
.breadcrumbs a { color: #fff; text-decoration: none; }

.casino-grid, .info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.casino-card, .info-card, .pros-cons > div, .directory section, .faq-list details, .table-wrap, .toc, .review-card, .demo-shell { border: 1px solid rgba(255, 217, 102, .18); border-radius: var(--radius); background: var(--panel); box-shadow: 0 18px 44px rgba(7, 0, 16, .32); }
.casino-card { position: relative; display: grid; gap: 12px; padding: 20px; overflow: hidden; }
.casino-card::before { content: ""; position: absolute; inset: 0; height: 7px; background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan)); }
.casino-top { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.casino-logo { display: grid; place-items: center; width: 56px; aspect-ratio: 1; color: #250733; background: linear-gradient(135deg, var(--gold), #fff2a4); border-radius: 16px; font-weight: 1000; font-size: 1.4rem; box-shadow: 0 10px 22px rgba(255,185,0,.25); }
.casino-label { margin: 0 0 2px; color: var(--pink); font-size: .76rem; font-weight: 1000; text-transform: uppercase; }
.score { color: #250733; background: #ffeeb0; border-radius: 10px; padding: 7px 10px; font-weight: 1000; }
.rating, .bonus, .market { margin-bottom: 0; }
.bonus { color: var(--ruby); font-weight: 1000; font-size: 1.05rem; }
.market { font-weight: 800; color: var(--muted); }
.casino-card ul, .info-card ul { margin: 0; padding-left: 18px; color: var(--ink); }
.casino-card li { margin: 5px 0; }
.casino-card small { color: var(--muted); font-weight: 700; }

.section-casinos { background: linear-gradient(180deg, #220536, #32084f); }
.section-casinos h2::after, .section-demo h2::after, .section-faq h2::after, .section-article h2::after { content: ""; display: block; width: 84px; height: 5px; margin-top: 13px; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan)); }
.section-cta { margin-top: 22px; }

.review-card { display: grid; grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr); gap: 24px; padding: 22px; align-items: center; background: linear-gradient(135deg, rgba(74,17,107,.98), rgba(33,6,49,.98)); }
.review-media img { width: 100%; border-radius: 20px; border: 2px solid rgba(255,185,0,.35); box-shadow: 0 18px 48px rgba(34, 5, 57, .18); }
.review-body h2 { margin-bottom: .55rem; }
.rating-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.rating-row b, .rating-row span { position: relative; padding: 11px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(88, 28, 126, .98), rgba(56, 14, 85, .98)); color: #fff5e9; border: 1px solid rgba(255, 214, 102, .2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.18); font-weight: 900; }
.rating-row b { background: linear-gradient(180deg, #ffe36b 0%, #ffc527 100%); color: #250733; border-color: rgba(255,255,255,.35); }
.table-wrap { overflow-x: auto; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
th { width: 36%; color: #fff5e9; background: rgba(255, 185, 0, .14); }
tr:last-child th, tr:last-child td { border-bottom: 0; }

.toc { padding: 24px; background: linear-gradient(135deg, #2b083f, #661d8d); color: #fff; }
.toc h2 { color: #fff; }
.toc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.toc a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255, 214, 102, .18); border-radius: 12px; color: rgba(255,255,255,.9); text-decoration: none; background: linear-gradient(180deg, rgba(87, 28, 123, .98), rgba(56, 14, 85, .98)); font-weight: 800; }
.toc span { color: var(--gold-2); font-size: 1.2rem; }

.demo-shell { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr); gap: 24px; padding: 22px; align-items: center; background: linear-gradient(135deg, rgba(74,17,107,.98), rgba(33,6,49,.98)); }
.demo-image img { border-radius: 20px; border: 2px solid rgba(127,31,190,.25); }
.pill { display: inline-flex; padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; background: linear-gradient(180deg, #d91cff, #a10fc2); border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 1000; font-size: .76rem; letter-spacing: .06em; box-shadow: 0 8px 18px rgba(0,0,0,.16); }

.bonus-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px; border-radius: 24px; color: #fff; background-image: linear-gradient(90deg, rgba(35,5,52,.94), rgba(125,20,138,.82)), url('../images/joker-jewels-banner.jpg'); background-size: cover; background-position: center; box-shadow: 0 22px 70px rgba(44, 8, 72, .22); }
.bonus-banner p { color: rgba(255,255,255,.9); }
.bonus-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.info-card { padding: 20px; }
.info-card h3 { color: #fff2ea; }
.steps { counter-reset: step; display: grid; gap: 12px; padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding: 17px 18px 17px 62px; border-radius: 18px; background: linear-gradient(135deg, rgba(74,17,107,.98), rgba(33,6,49,.98)); border: 1px solid rgba(255,217,102,.16); box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 32px; aspect-ratio: 1; border-radius: 50%; color: #250733; background: linear-gradient(135deg, var(--gold), var(--gold-2)); font-weight: 1000; }
.article-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0 0; list-style: none; }
.article-list li { padding: 9px 13px; border-radius: 10px; background: linear-gradient(180deg, rgba(85, 27, 121, .98), rgba(55, 14, 83, .98)); color: #fff2ea; border: 1px solid rgba(255, 214, 102, .18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); font-weight: 900; }
.section-article .container { max-width: 980px; }
.section-article p { font-size: 1.08rem; }

.pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.pros-cons > div { padding: 22px; }
.pros h3 { color: var(--green); }
.cons h3 { color: var(--ruby); }
.pros-cons li { margin: 8px 0; }

.faq-list { display: grid; gap: 12px; margin-top: 24px; }
.faq-list details { padding: 17px 20px; }
.faq-list summary { cursor: pointer; font-weight: 1000; color: var(--purple); }
.faq-list p { margin: 12px 0 0; }
.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.directory section { padding: 20px; }
.directory ul { padding-left: 18px; }
.directory li { margin: 10px 0; }
.directory a { display: block; color: #fff2ea; font-weight: 1000; }
.directory span { display: block; color: var(--muted); font-size: .92rem; }
.site-footer { padding: 46px 0 80px; color: rgba(255,255,255,.88); background: #210634; }
.site-footer p { color: rgba(255,255,255,.72); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 22px; }
.site-footer a { display: block; margin: 7px 0; color: rgba(255,255,255,.83); text-decoration: none; }
.mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-cta a { display: grid; place-items: center; min-height: 48px; border-radius: 14px; color: #250733; background: linear-gradient(135deg, var(--gold), var(--gold-2)); text-decoration: none; font-weight: 1000; box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.mobile-cta a:last-child { color: #fff; background: linear-gradient(135deg, var(--pink), var(--ruby)); }

@media (max-width: 940px) {
  .hero-grid, .review-card, .demo-shell, .bonus-banner { grid-template-columns: 1fr; }
  .casino-grid, .info-grid { grid-template-columns: 1fr 1fr; }
  .country-select { display: none; }
  .main-nav { max-width: 52vw; }
  .bonus-banner-actions { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .site-header { gap: 8px; }
  .brand span:last-child { display: none; }
  .header-cta { display: none; }
  .main-nav { max-width: calc(100vw - 72px); }
  .hero { padding-top: 38px; }
  .hero-logo { width: 84%; margin-bottom: -24px; }
  .facts, .casino-grid, .info-grid, .toc-grid, .pros-cons, .directory, .footer-grid { grid-template-columns: 1fr; }
  .casino-top { grid-template-columns: 50px 1fr; }
  .score { grid-column: 1 / -1; width: max-content; }
  h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .mobile-cta { display: grid; }
  .site-footer { padding-bottom: 90px; }
}

.brand-image img { width: 64px; height: 42px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
.brand-image span { font-size: .98rem; }
.casino-ribbon { position:absolute; right:-38px; top:15px; transform:rotate(35deg); background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#250733; padding:7px 44px; font-weight:1000; font-size:.72rem; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.demo-frame { margin-top: 24px; border-radius: 24px; overflow: hidden; border: 3px solid rgba(255,185,0,.45); background:#1b052b; box-shadow:0 24px 80px rgba(34,5,57,.22); }
.demo-toolbar { display:flex; justify-content:space-between; gap:14px; padding:12px 16px; background:linear-gradient(90deg,#2a0740,#6d1795); color:#fff; font-weight:1000; }
.demo-toolbar span:last-child { color: var(--gold-2); }
.demo-frame iframe { display:block; width:100%; height:min(78vh, 720px); min-height:560px; border:0; background:#000; }
.demo-fallback { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:rgba(255,255,255,.08); }
.demo-fallback p { margin:0; color:#fff2ea; font-weight:800; }
.section-demoiframe { background: linear-gradient(180deg, #210533, #2f074a); }
.footer-email a { display:inline; color:var(--gold-2); font-weight:1000; }
@media (max-width: 680px) { .brand-image img { width:52px; height:34px; } .demo-frame iframe { min-height:480px; height:72vh; } .demo-toolbar { display:grid; } }


.section-media { background: linear-gradient(180deg, #230537, #32084d); }
.section-symbols { background: linear-gradient(180deg, #26053b, #33084f); }
.media-block { display: grid; grid-template-columns: minmax(300px, .98fr) minmax(0, 1.02fr); gap: 26px; align-items: center; }
.media-block-reverse .media-figure { order: 2; }
.media-block-reverse .media-copy { order: 1; }
.media-figure img, .symbols-hero img { width: 100%; border-radius: 24px; border: 2px solid rgba(255,185,0,.35); box-shadow: 0 22px 54px rgba(38,7,60,.16); background: #2a0740; }
.media-copy { border: 1px solid rgba(255, 217, 102, .16); border-radius: var(--radius); background: var(--panel); padding: 24px; box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.media-copy h2 { margin-bottom: 12px; }
.media-actions { margin-top: 20px; }
.symbols-wrap { display: grid; gap: 18px; }
.symbols-note { display: inline-flex; width: max-content; max-width: 100%; padding: 9px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-weight: 1000; }
.symbols-hero { margin: 0; }
.symbol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.symbol-card { padding: 20px; border: 1px solid rgba(255, 217, 102, .16); border-radius: 22px; background: linear-gradient(180deg, rgba(74,17,107,.98), rgba(33,6,49,.98)); box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.symbol-card h3 { margin-bottom: 8px; color: #fff2ea; }
.symbol-payout { margin: 0 0 10px; color: var(--ruby); font-weight: 1000; }
.info-kicker { display: inline-block; margin-bottom: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff2ea; font-weight: 900; font-size: .8rem; }
@media (max-width: 940px) {
  .media-block { grid-template-columns: 1fr; }
  .media-block-reverse .media-figure, .media-block-reverse .media-copy { order: initial; }
  .symbol-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .symbol-grid { grid-template-columns: 1fr; }
}

.symbol-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  align-content: start;
}
.symbol-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
}
.symbol-icon {
  display: grid;
  place-items: center;
  min-height: 138px;
  margin: 2px 0 8px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.18), transparent 46%),
    linear-gradient(135deg, #2a0740, #5b137e 55%, #2a0740);
  box-shadow: inset 0 0 24px rgba(255,255,255,.06);
}
.symbol-icon img {
  max-width: 168px;
  max-height: 122px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}
.symbol-grid-mini .symbol-icon {
  min-height: 118px;
}
.symbol-grid-mini .symbol-icon img {
  max-width: 138px;
  max-height: 104px;
}

.btn, .header-cta { transition: transform .22s ease, filter .22s ease, box-shadow .22s ease; }
.btn-primary::before, .header-cta::before { content: ""; position: absolute; inset: -40% auto -40% -120%; width: 62%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); animation: premiumShine 3.2s ease-in-out infinite; }
.btn-primary:hover, .header-cta:hover { box-shadow: 0 16px 42px rgba(255,185,0,.42), inset 0 1px 0 rgba(255,255,255,.62); }
@keyframes premiumShine { 0%, 15% { left: -120%; } 45% { left: 155%; } 100% { left: 155%; } }
main { position: relative; overflow: hidden; }
main::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 20%, rgba(255,80,191,.09), transparent 28%), radial-gradient(circle at 85% 16%, rgba(65,233,255,.08), transparent 24%), radial-gradient(circle at 50% 60%, rgba(255,185,0,.06), transparent 30%); }
.section { position: relative; }
.section .container { position: relative; z-index: 1; }
.review-card p, .demo-shell p, .media-copy p, .info-card p, .pros-cons p, .faq-list p, .directory span, .symbol-card p, .table-wrap td { color: rgba(245, 230, 255, .84); }
.review-body h2, .directory h3, .faq-list summary, .media-copy h2, .toc h2, .bonus-banner h2, .section h2 { color: #fff2ea; }
.score { color: #2a0637; background: linear-gradient(135deg, #ffe36b, #ffb900); }
.demo-image img, .review-media img { border-radius: 20px; border: 2px solid rgba(255,185,0,.28); box-shadow: 0 18px 44px rgba(0,0,0,.24); }