/* Betify France — shared design tokens and buildless page components */
:root {
  color-scheme:dark;
  --bg:#0B0F0D;
  --surface:#101713;
  --card:#151D18;
  --green:#22C55E;
  --mint:#86EFAC;
  --text:#F2F7F3;
  --muted:#A5B5A9;
  --line:#2b3830;
  --radius:18px;
  --wrap:1240px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65
}
a {
  color:inherit;
  text-decoration:none
}
button,summary {
  font:inherit
}
button {
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  display:block;
  flex-shrink:0
}
p {
  margin:0 0 1.1em;
  color:var(--muted)
}
strong {
  color:var(--text);
  font-weight:600
}
h1,h2,h3 {
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.045em;
  margin:0 0 .65em;
  text-wrap:balance
}
h1 {
  font-size:clamp(40px,5vw,66px)
}
h2 {
  font-size:clamp(28px,3.2vw,42px)
}
h3 {
  font-size:22px;
  letter-spacing:-.025em
}
ul,ol {
  padding-left:1.25em
}
li {
  margin:.45em 0
}
::selection {
  background:var(--mint);
  color:var(--bg)
}
:focus-visible {
  outline:3px solid var(--mint);
  outline-offset:5px;
  border-radius:4px
}
[id] {
  scroll-margin-top:110px
}
.container {
  width:min(var(--wrap),calc(100% - 80px));
  margin-inline:auto
}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  padding:12px 20px;
  background:var(--mint);
  color:var(--bg);
  z-index:100
}
.skip:focus {
  top:12px
}
.icon {
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:22px
}
.eyebrow::before {
  content:"";
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--green)
}
.tag {
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.04em
}
.accent {
  color:var(--mint)
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  min-height:48px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:14px;
  font-weight:650;
  background:var(--green);
  color:#08170d;
  transition:background .18s,transform .18s
}
.btn:hover {
  background:var(--mint);
  transform:translateY(-2px)
}
.btn.secondary {
  background:transparent;
  border-color:#415447;
  color:var(--text)
}
.btn.secondary:hover {
  background:var(--card);
  border-color:var(--mint)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--mint);
  font-size:14px;
  font-weight:600
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px
}
.small {
  font-size:13px;
  line-height:1.6
}
.muted {
  color:var(--muted)
}
/* Header: native details remain usable without JavaScript. */
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(11,15,13,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.header-inner {
  display:flex;
  align-items:center;
  min-height:84px;
  gap:32px
}
.brand {
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0
}
.brand img {
  width:125px;
  height:auto
}
.brand-label {
  border-left:1px solid var(--line);
  padding-left:16px;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
  letter-spacing:.12em;
  text-transform:uppercase
}
.desktop-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:27px;
  flex:1;
  font-size:13px;
  font-weight:550
}
.desktop-nav>a,.more-nav>summary {
  padding-block:28px;
  color:var(--muted)
}
.desktop-nav a:hover,.desktop-nav [aria-current=page],.more-nav>summary:hover {
  color:var(--text)
}
.desktop-nav [aria-current=page] {
  box-shadow:inset 0 -2px var(--green)
}
.more-nav {
  position:relative
}
.more-nav>summary {
  display:flex;
  gap:5px;
  align-items:center;
  list-style:none;
  cursor:pointer
}
.more-nav>summary::-webkit-details-marker {
  display:none
}
.more-nav summary .icon {
  width:15px
}
.more-panel {
  position:absolute;
  top:70px;
  right:0;
  width:230px;
  padding:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 16px 40px #0008
}
.more-panel a {
  display:block;
  padding:10px 12px;
  border-radius:6px
}
.more-panel a:hover {
  background:#223027
}
.header-legal {
  font-size:12px;
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px 13px;
  color:var(--mint)
}
.mobile-menu {
  display:none
}
.notice-bar {
  background:var(--surface);
  border-bottom:1px solid #1f2c23;
  font-size:11px;
  color:var(--muted)
}
.notice-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:9px 0
}
.age {
  border:1px solid #5c7262;
  border-radius:50%;
  font-weight:700;
  line-height:25px;
  min-width:28px;
  text-align:center;
  font-size:10px;
  color:var(--text)
}
.notice-inner a {
  color:var(--mint);
  text-decoration:underline;
  text-underline-offset:3px
}
.breadcrumb {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  margin-top:25px
}
.breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  list-style:none;
  padding:0;
  margin:0
}
.breadcrumb li {
  margin:0
}
.breadcrumb li+li::before {
  content:"/";
  margin-right:9px;
  color:#657e6c
}
.breadcrumb a:hover {
  color:var(--mint)
}
/* Homepage */
.hero {
  display:grid;
  grid-template-columns:1.03fr 1fr;
  gap:22px;
  align-items:center;
  padding:48px 0 54px;
  position:relative;
  min-height:510px
}
.hero h1 {
  font-size:clamp(48px,5.8vw,78px);
  letter-spacing:-.055em;
  line-height:1.02;
  margin-bottom:25px
}
.hero h1 span {
  color:var(--mint)
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero-copy>p {
  max-width:490px;
  font-size:16px;
  line-height:1.75
}
.hero-art {
  position:relative;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}
.hero-art::before {
  content:"";
  position:absolute;
  inset:5% 0;
  border-radius:50%;
  background:radial-gradient(ellipse,#194d2b55,transparent 66%)
}
.hero-art img {
  position:relative;
  width:112%;
  max-width:112%;
  filter:drop-shadow(0 24px 25px #0005)
}
.hero-caption {
  position:absolute;
  bottom:3px;
  right:15px;
  left:15px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:15px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase
}
.hero-meta {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:25px;
  font-size:11px;
  color:var(--muted)
}
.hero-meta .icon {
  width:15px;
  height:15px;
  color:var(--mint)
}
.overview-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  padding:24px 0
}
.overview-strip>div {
  display:flex;
  align-items:center;
  gap:17px;
  padding:0 30px
}
.overview-strip>div+div {
  border-left:1px solid var(--line)
}
.overview-strip .icon {
  color:var(--mint);
  width:26px;
  height:26px
}
.overview-strip strong {
  display:block;
  font-size:14px
}
.overview-strip span {
  display:block;
  font-size:12px;
  color:var(--muted)
}
.section {
  padding:80px 0
}
.section+.section {
  border-top:1px solid var(--line)
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:30px
}
.section-head h2 {
  margin:0
}
.section-head p {
  max-width:380px;
  font-size:14px;
  margin:0
}
.section-head .eyebrow {
  margin-bottom:15px
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.guide-card {
  position:relative;
  display:flex;
  gap:18px;
  padding:24px 22px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(140deg,#151d18,#101713);
  transition:border-color .2s,transform .2s
}
.guide-card:hover {
  border-color:#587b60;
  transform:translateY(-3px)
}
.guide-card>.icon {
  color:var(--mint);
  margin-top:4px
}
.guide-card h3 {
  font-size:17px;
  margin:0 0 7px;
  letter-spacing:-.02em
}
.guide-card p {
  font-size:12px;
  line-height:1.6;
  margin:0;
  padding-right:14px
}
.guide-card .arrow {
  position:absolute;
  right:18px;
  top:22px;
  font-size:18px;
  color:#98b39f
}
.guide-card .card-no {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-bottom:13px;
  letter-spacing:.07em
}
.editorial-split {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:72px;
  align-items:start
}
.editorial-split h2 {
  max-width:540px
}
.editorial-split p {
  max-width:600px
}
.fact-list {
  border-top:1px solid var(--line);
  margin:0
}
.fact-list>div {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding:15px 0;
  font-size:13px
}
.fact-list dt {
  color:var(--muted)
}
.fact-list dd {
  margin:0;
  text-align:right;
  max-width:65%
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px
}
.game-card {
  min-width:0
}
.game-art {
  aspect-ratio:3/4;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #38463c;
  background:var(--card)
}
.game-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s
}
.game-card:hover .game-art img {
  transform:scale(1.04)
}
.game-card h3 {
  font-size:13px;
  letter-spacing:0;
  line-height:1.4;
  margin:12px 0 5px
}
.game-card p {
  font-size:11px;
  margin:0;
  color:var(--muted)
}
.game-note {
  font-size:11px;
  margin:20px 0 0
}
.mobile-feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--surface);
  align-items:center
}
.mobile-feature .feature-copy {
  padding:42px
}
.mobile-feature img {
  width:100%;
  height:100%;
  object-fit:cover
}
.mobile-feature h2 {
  font-size:38px
}
.mobile-feature p {
  font-size:14px
}
.faq-layout {
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:80px
}
.faq-list {
  border-top:1px solid var(--line)
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  cursor:pointer;
  list-style:none;
  padding:22px 0;
  font-size:15px;
  font-weight:550;
  line-height:1.5
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary::after {
  content:"+";
  font-weight:400;
  font-size:22px;
  color:var(--mint);
  flex-shrink:0
}
.faq-list details[open] summary::after {
  content:"−"
}
.faq-list details p {
  font-size:14px;
  padding-right:20px
}
.faq-list a,.prose a,.source-note a,.callout a {
  color:var(--mint);
  text-decoration:underline;
  text-underline-offset:3px
}
.faq-list summary:hover {
  color:var(--mint)
}
/* Interior pages */
.page-hero {
  padding:55px 0 45px;
  border-bottom:1px solid var(--line);
  position:relative
}
.page-hero>p {
  font-size:18px;
  max-width:740px;
  margin:0
}
.page-hero .eyebrow {
  margin-bottom:18px
}
.page-hero h1 {
  max-width:850px
}
.page-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px
}
.article-layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:65px;
  padding:45px 0 70px
}
.toc {
  align-self:start;
  position:sticky;
  top:110px
}
.toc-label {
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700;
  color:var(--muted);
  margin-bottom:17px
}
.toc nav {
  border-left:1px solid var(--line);
  display:grid
}
.toc a {
  font-size:12px;
  padding:9px 0 9px 18px;
  color:var(--muted);
  line-height:1.5;
  border-left:2px solid transparent;
  margin-left:-1px
}
.toc a:hover {
  border-color:var(--green);
  color:var(--text)
}
.toc-bottom {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  padding:17px;
  margin-top:28px
}
.toc-bottom p {
  font-size:11px;
  margin:0 0 12px
}
.toc-bottom .text-link {
  font-size:11px
}
.prose {
  min-width:0
}
.prose>section {
  margin-bottom:50px
}
.prose h2 {
  font-size:30px;
  margin-bottom:22px
}
.prose h3 {
  font-size:20px;
  margin-top:28px
}
.prose p,.prose li {
  font-size:15px;
  line-height:1.85
}
.prose ul,.prose ol {
  color:var(--muted)
}
.source-note {
  padding:17px 20px;
  border-left:2px solid #72947c;
  background:var(--surface);
  font-size:12px;
  color:var(--muted);
  margin-bottom:36px;
  border-radius:0 8px 8px 0
}
.source-note strong {
  display:block;
  margin-bottom:4px
}
.callout {
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:10px;
  padding:24px;
  margin:25px 0
}
.callout p:last-child {
  margin:0
}
.callout.warning {
  border-left-color:#ddbb79;
  background:#211e15
}
.callout.warning strong {
  color:#f0d7a7
}
.callout .eyebrow {
  margin-bottom:10px
}
.fact-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:28px 0
}
.fact-card {
  padding:25px 20px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px
}
.fact-card .number {
  font-size:37px;
  letter-spacing:-.05em;
  font-weight:600;
  color:var(--mint);
  line-height:1.2;
  display:block;
  margin-bottom:8px
}
.fact-card h3 {
  font-size:15px;
  margin:0 0 10px
}
.fact-card p {
  font-size:12px;
  margin:0;
  line-height:1.7
}
.media-figure {
  margin:30px 0
}
.media-figure img {
  border-radius:14px;
  border:1px solid var(--line);
  width:100%;
  max-height:470px;
  object-fit:contain;
  background:var(--surface)
}
.media-figure figcaption {
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}
.media-split {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:28px;
  align-items:start
}
.media-split .media-figure {
  margin:0
}
.media-split .media-figure img {
  max-height:460px;
  object-fit:contain
}
.table-wrap {
  width:100%;
  margin:25px 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px;
  line-height:1.65
}
caption {
  text-align:left;
  padding:15px 18px;
  background:var(--surface);
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid var(--line)
}
th {
  color:var(--text);
  background:#1a291f;
  font-weight:600;
  font-size:12px
}
th,td {
  padding:14px 17px;
  border-bottom:1px solid var(--line);
  vertical-align:top
}
td {
  color:var(--muted)
}
td:first-child {
  color:var(--text)
}
tbody tr:last-child td {
  border:0
}
tbody tr:nth-child(even) {
  background:#101713
}
tbody tr:hover {
  background:#17251c
}
.payment-icons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0
}
.payment-icon {
  width:65px;
  height:43px;
  background:#25352b;
  border:1px solid #526b5a;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  padding:9px
}
.payment-icon img {
  height:100%;
  max-width:100%;
  width:auto
}
.provider-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0
}
.provider-tags span {
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  color:var(--muted)
}
.prose .game-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 16px
}
.prose .game-card h3 {
  font-size:13px;
  margin:12px 0 4px
}
.prose .game-card p {
  font-size:11px;
  line-height:1.5
}
.prose .game-card {
  scroll-margin-top:120px
}
.prose .faq-list p {
  font-size:14px
}
.steps {
  list-style:none;
  counter-reset:steps;
  padding:0!important
}
.steps li {
  counter-increment:steps;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  margin:0
}
.steps li::before {
  content:counter(steps,decimal-leading-zero);
  font-size:13px;
  color:var(--mint);
  font-weight:650
}
.steps li p {
  margin:6px 0 0
}
.related {
  padding-top:40px;
  border-top:1px solid var(--line)
}
.related-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.related-card {
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px
}
.related-card:hover {
  border-color:#658d71
}
.related-card span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:8px
}
.related-card strong {
  font-size:14px
}
.related-card b {
  float:right;
  color:var(--mint);
  font-weight:400
}
.article-end {
  font-size:11px;
  color:var(--muted);
  padding-top:20px
}
.inline-disclosure {
  padding:18px 0;
  border-block:1px solid var(--line);
  margin:25px 0
}
.inline-disclosure summary {
  cursor:pointer;
  color:var(--mint);
  font-size:14px
}
.inline-disclosure p {
  margin-top:15px;
  font-size:13px
}
.legal-sources {
  font-size:13px
}
.site-footer {
  border-top:1px solid var(--line);
  background:#090d0b;
  padding:52px 0 25px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr 1fr;
  gap:35px;
  padding-bottom:38px
}
.footer-brand img {
  width:125px
}
.footer-brand p {
  font-size:12px;
  max-width:250px;
  margin:20px 0
}
.footer-col h2 {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin:8px 0 20px;
  color:var(--muted)
}
.footer-col a {
  display:block;
  font-size:12px;
  margin-bottom:9px;
  color:var(--text)
}
.footer-col a:hover {
  color:var(--mint)
}
.footer-legal {
  display:flex;
  align-items:flex-start;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:23px
}
.footer-legal p {
  font-size:11px;
  line-height:1.7;
  margin:0;
  max-width:900px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:28px;
  color:var(--muted);
  font-size:10px
}
.footer-bottom a:hover {
  color:var(--mint)
}
@media(min-width:1700px) {
  :root {
    --wrap:1360px
  }
  .hero {
    min-height:570px
  }
  .hero h1 {
    font-size:86px
  }
  .hero-copy>p {
    font-size:18px
  }
  .guide-card {
    padding:28px
  }
  .section {
    padding:88px 0
  }
}
@media(max-width:1150px) {
  .header-inner {
    gap:20px
  }
  .brand-label {
    display:none
  }
  .desktop-nav {
    gap:20px
  }
  .header-legal {
    display:none
  }
  .hero h1 {
    font-size:62px
  }
  .hero-art img {
    width:106%;
    max-width:106%
  }
  .article-layout {
    gap:35px;
    grid-template-columns:200px minmax(0,1fr)
  }
  .editorial-split,.faq-layout {
    gap:40px
  }
  .overview-strip>div {
    padding:0 20px
  }
}
@media(max-width:850px) {
  .container {
    width:calc(100% - 44px)
  }
  .desktop-nav {
    gap:16px;
    font-size:12px
  }
  .hero {
    min-height:440px
  }
  .hero h1 {
    font-size:49px
  }
  .hero-copy>p {
    font-size:14px
  }
  .hero-art img {
    width:110%;
    max-width:110%
  }
  .hero .btn {
    padding:11px 15px;
    font-size:12px
  }
  .hero-caption {
    font-size:9px;
    bottom:30px
  }
  .overview-strip>div {
    padding:0 14px;
    gap:10px
  }
  .overview-strip strong {
    font-size:12px
  }
  .overview-strip span {
    font-size:10px
  }
  .overview-strip .icon {
    width:20px
  }
  .guide-card {
    padding:20px 16px;
    gap:12px
  }
  .guide-card h3 {
    font-size:15px
  }
  .guide-card>.icon {
    width:18px
  }
  .guide-card p {
    font-size:11px
  }
  .game-grid {
    gap:12px
  }
  .game-card h3 {
    font-size:12px
  }
  .article-layout {
    grid-template-columns:1fr;
    gap:26px;
    padding-top:26px
  }
  .toc {
    position:static
  }
  .toc nav {
    display:flex;
    flex-wrap:wrap;
    border:0;
    gap:8px
  }
  .toc a {
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:6px;
    margin:0;
    font-size:11px
  }
  .toc-label {
    margin-bottom:12px
  }
  .toc-bottom {
    display:none
  }
  .source-note {
    margin-bottom:32px
  }
  .prose .game-grid {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .mobile-feature .feature-copy {
    padding:28px
  }
  .mobile-feature h2 {
    font-size:30px
  }
  .footer-grid {
    grid-template-columns:1.3fr 1fr 1fr;
    gap:20px
  }
  .footer-grid .footer-col:last-child {
    grid-column:2/4;
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px
  }
  .footer-grid .footer-col:last-child h2 {
    width:100%;
    margin:4px 0
  }
  .section {
    padding:60px 0
  }
}
@media(max-width:650px) {
  html {
    scroll-padding-top:80px
  }
  [id] {
    scroll-margin-top:85px
  }
  .container {
    width:calc(100% - 36px)
  }
  .header-inner {
    min-height:70px;
    justify-content:space-between
  }
  .brand img {
    width:108px
  }
  .brand-label {
    display:block;
    font-size:8px;
    padding-left:12px
  }
  .brand {
    gap:12px
  }
  .desktop-nav {
    display:none
  }
  .mobile-menu {
    display:block
  }
  .mobile-menu>summary {
    border:1px solid #415447;
    padding:6px 10px;
    border-radius:6px;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    cursor:pointer;
    min-height:36px
  }
  .mobile-menu>summary::-webkit-details-marker {
    display:none
  }
  .mobile-menu .icon {
    width:17px;
    height:17px
  }
  .mobile-panel {
    position:absolute;
    left:0;
    right:0;
    top:70px;
    background:var(--surface);
    border-bottom:1px solid #536b5b;
    padding:15px 18px 23px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    max-height:calc(100dvh - 90px);
    overflow-y:auto;
    box-shadow:0 20px 25px #0008
  }
  .mobile-panel a {
    padding:10px;
    border-radius:6px;
    font-size:13px
  }
  .mobile-panel a:hover,.mobile-panel a[aria-current=page] {
    background:#203026;
    color:var(--mint)
  }
  .notice-inner {
    font-size:9px;
    line-height:1.55;
    gap:9px;
    justify-content:flex-start;
    padding:9px 0
  }
  .notice-inner .age {
    font-size:9px;
    line-height:23px;
    min-width:26px
  }
  .breadcrumb {
    margin-top:19px;
    font-size:10px
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding:31px 0 32px;
    gap:12px;
    min-height:0;
    align-items:stretch
  }
  .hero h1 {
    font-size:clamp(42px,10.7vw,66px);
    max-width:520px;
    line-height:1.02;
    margin-bottom:20px
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:19px
  }
  .hero-copy>p {
    font-size:14px;
    max-width:450px
  }
  .hero .actions {
    margin-top:23px;
    gap:10px
  }
  .hero .btn {
    font-size:12px;
    padding:12px 15px;
    min-height:46px
  }
  .hero-meta {
    margin-top:18px;
    font-size:10px
  }
  .hero-art {
    height:280px;
    align-self:auto;
    overflow:hidden
  }
  .hero-art img {
    max-width:100%;
    width:100%;
    height:auto;
    max-height:290px;
    object-fit:contain
  }
  .hero-caption {
    bottom:0;
    left:0;
    right:0;
    font-size:8px;
    letter-spacing:.04em;
    padding-top:10px;
    background:linear-gradient(transparent,var(--bg) 30%)
  }
  .overview-strip {
    grid-template-columns:1fr;
    padding:4px 18px;
    border-radius:10px
  }
  .overview-strip>div {
    padding:15px 0;
    gap:15px
  }
  .overview-strip>div+div {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .overview-strip strong {
    font-size:13px
  }
  .overview-strip span {
    font-size:11px
  }
  .overview-strip .icon {
    width:23px;
    height:23px
  }
  .section {
    padding:48px 0
  }
  .section-head {
    display:block;
    margin-bottom:25px
  }
  .section-head h2 {
    font-size:31px
  }
  .section-head>p,.section-head>.text-link {
    margin-top:16px
  }
  .section-head p {
    font-size:13px
  }
  .guide-grid {
    grid-template-columns:1fr;
    gap:9px
  }
  .guide-card {
    padding:20px;
    gap:17px
  }
  .guide-card>.icon {
    width:22px
  }
  .guide-card h3 {
    font-size:17px
  }
  .guide-card p {
    font-size:12px
  }
  .guide-card .card-no {
    margin-bottom:7px;
    font-size:9px
  }
  .guide-card .arrow {
    top:28px;
    right:20px
  }
  .editorial-split {
    grid-template-columns:1fr;
    gap:27px
  }
  .editorial-split p {
    font-size:14px
  }
  .game-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 12px
  }
  .game-card h3 {
    font-size:11px
  }
  .game-card p {
    font-size:10px
  }
  .game-art {
    border-radius:8px
  }
  .mobile-feature {
    grid-template-columns:1fr
  }
  .mobile-feature .feature-copy {
    padding:29px 25px
  }
  .mobile-feature img {
    max-height:300px;
    object-fit:cover
  }
  .mobile-feature h2 {
    font-size:32px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .faq-layout h2 {
    font-size:31px
  }
  .faq-list summary {
    font-size:14px;
    padding:19px 0
  }
  .faq-list details p {
    font-size:13px
  }
  .page-hero {
    padding:34px 0 31px
  }
  .page-hero h1 {
    font-size:39px;
    line-height:1.08
  }
  .page-hero>p {
    font-size:15px
  }
  .page-index {
    font-size:95px;
    top:20px
  }
  .page-meta {
    margin-top:20px
  }
  .tag {
    font-size:9px
  }
  .prose h2 {
    font-size:27px;
    line-height:1.15
  }
  .prose h3 {
    font-size:20px
  }
  .prose p,.prose li {
    font-size:14px
  }
  .prose>section {
    margin-bottom:38px
  }
  .source-note {
    font-size:11px;
    padding:14px 16px
  }
  .callout {
    padding:19px
  }
  .fact-cards {
    grid-template-columns:1fr
  }
  .fact-card {
    display:grid;
    grid-template-columns:88px 1fr;
    gap:4px 12px;
    padding:20px
  }
  .fact-card .number {
    grid-row:1/3;
    font-size:32px;
    align-self:center;
    margin:0
  }
  .fact-card h3 {
    font-size:14px;
    margin:0
  }
  .fact-card p {
    font-size:11px
  }
  .media-split {
    grid-template-columns:1fr
  }
  .media-split .media-figure img {
    max-height:370px
  }
  .prose .game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 14px
  }
  .prose .game-card h3 {
    font-size:13px
  }
  .prose .game-card p {
    font-size:11px
  }
  .table-wrap {
    border-radius:10px
  }
  table,tbody,tr,td {
    display:block;
    width:100%
  }
  thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
  }
  caption {
    display:block;
    width:100%;
    font-size:11px;
    padding:13px 15px
  }
  tr {
    padding:12px 15px;
    border-bottom:1px solid var(--line)
  }
  tbody tr:last-child {
    border:0
  }
  td {
    display:grid;
    grid-template-columns:minmax(90px,.85fr) minmax(0,1.15fr);
    gap:15px;
    padding:7px 0;
    border:0;
    font-size:12px;
    overflow-wrap:anywhere
  }
  td::before {
    content:attr(data-label);
    font-size:11px;
    color:var(--muted);
    font-weight:500
  }
  td:first-child {
    font-size:13px;
    font-weight:600
  }
  td:first-child::before {
    font-weight:500
  }
  .related-grid {
    grid-template-columns:1fr
  }
  .related-card {
    padding:17px 20px
  }
  .related-card span {
    margin-bottom:4px
  }
  .article-layout {
    padding-bottom:45px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:27px 22px
  }
  .footer-brand {
    grid-column:1/3
  }
  .footer-brand p {
    max-width:320px
  }
  .footer-grid .footer-col:last-child {
    grid-column:1/3
  }
  .footer-col h2 {
    font-size:10px
  }
  .footer-col a {
    font-size:11px
  }
  .site-footer {
    padding-top:35px
  }
  .footer-legal p {
    font-size:10px
  }
  .footer-bottom {
    font-size:9px;
    flex-wrap:wrap
  }
  .page-meta .tag {
    max-width:100%
  }
}
@media(max-width:360px) {
  .container {
    width:calc(100% - 28px)
  }
  .brand-label {
    display:none
  }
  .hero h1 {
    font-size:41px
  }
  .hero .btn {
    font-size:11px;
    padding-inline:12px
  }
  .hero-art {
    height:230px
  }
  .hero-art img {
    max-height:240px
  }
  .hero-caption span:last-child {
    display:none
  }
  .page-hero h1 {
    font-size:35px
  }
  .guide-card {
    padding:17px
  }
  .notice-inner {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
@media print {
  .site-header,.notice-bar,.toc,.site-footer,.related,.actions {
    display:none
  }
  body {
    background:white;
    color:black;
    font-size:11pt
  }
  .container {
    width:100%
  }
  .prose p,.prose li,p,td {
    color:#222
  }
  .article-layout {
    display:block
  }
  h1,h2,h3,strong {
    color:black
  }
  .page-hero {
    padding:20px 0
  }
  .table-wrap {
    break-inside:avoid
  }
  a {
    color:#164c29
  }
  .source-note,.callout {
    background:#f3f3f3;
    color:#222
  }
  .hero-art {
    display:none
  }
  .hero {
    display:block
  }
}
/* CTA buttons, thematic page banners and return-to-top */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero .cta{min-height:60px;min-width:192px;justify-content:space-between;padding:12px 15px 12px 24px;border-radius:12px;font-size:15px;font-weight:800;letter-spacing:.035em;gap:26px;box-shadow:0 8px 30px #22c55e12}
.cta .icon{width:32px;height:32px;padding:6px;border-radius:50%;background:#0b0f0d;color:var(--mint);flex-shrink:0}
.hero .cta.secondary{border-color:var(--green);color:var(--mint);background:#12311f66;box-shadow:none}
.cta.secondary .icon{background:var(--green);color:#08170d}
.hero .cta.secondary:hover{background:#1c432b;border-color:var(--mint)}
.hero-copy .cta-note{font-size:10px;line-height:1.5;margin:12px 0 0;color:var(--muted)}
.hero-meta{margin-top:22px}
.page-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:55px;align-items:center;padding:44px 0 48px}
.page-hero h1{font-size:clamp(38px,4.4vw,62px);line-height:1.06;letter-spacing:-.055em;margin-bottom:25px}
.page-hero-copy>p{font-size:17px;line-height:1.75;max-width:600px;margin:0}
.page-banner{height:340px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #2a4634;border-radius:22px;background:radial-gradient(ellipse at 50% 30%,#265f36 0%,#12241a 46%,#101713 80%);box-shadow:inset 0 0 60px #0003}
.page-banner::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.25;background-image:linear-gradient(#86efac17 1px,transparent 1px),linear-gradient(90deg,#86efac17 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(black,transparent)}
.page-banner::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#0b130ef0);pointer-events:none;z-index:2}
.page-banner .art-chip{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 28px);padding:9px 13px;border:1px solid #86efac38;border-radius:30px;background:#101e16e8;color:#d2f5de;font-size:10px;letter-spacing:.02em;line-height:1.4;z-index:3;white-space:nowrap}
.art-chip .icon{width:17px;height:17px;color:var(--mint)}
.banner-games{position:absolute;inset:30px 18px 55px;display:flex;justify-content:center;align-items:center;gap:0}
.banner-games img{width:32%;height:230px;object-fit:cover;border:2px solid #a2ddb64d;border-radius:13px;box-shadow:0 18px 35px #0009}
.banner-games img:first-child{transform:rotate(-11deg) translateX(8px)}
.banner-games img:nth-child(2){transform:translateY(-9px);z-index:1}
.banner-games img:last-child{transform:rotate(11deg) translateX(-8px)}
.bonus-card{position:absolute;top:25px;right:58px;height:266px;width:162px;transform:rotate(9deg);border:2px solid #c3f9ac7a;border-radius:15px;overflow:hidden;box-shadow:0 15px 38px #0008}
.bonus-card img{width:100%;height:100%;object-fit:cover}
.bonus-orbit{position:absolute;left:11%;top:74px;width:142px;height:142px;display:grid;place-items:center;background:linear-gradient(145deg,#bbffd1,#22c55e);border-radius:32px;box-shadow:0 20px 60px #22c55e38,inset 0 1px 0 #fff8;transform:rotate(-12deg);z-index:1}
.bonus-orbit .icon{width:78px;height:78px;color:#0b331a;stroke-width:1.35}
.sport-poster{width:100%;height:100%;object-fit:cover;object-position:center 44%;opacity:.9}
.mobile-poster{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1.13) translateY(-15px)}
.vip-poster{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.wallet-card{position:absolute;width:68%;height:197px;top:49px;left:13%;padding:22px 24px;border-radius:20px;background:linear-gradient(125deg,#244e33,#12271c);border:1px solid #8effb36b;box-shadow:0 25px 40px #0007;transform:rotate(-7deg)}
.wallet-label{font-size:9px;letter-spacing:.15em;color:#b3d5bd;font-weight:600}
.wallet-card>.icon{position:absolute;right:20px;top:20px;width:30px;height:30px;color:#86efac}
.wallet-card strong{display:block;font-size:24px;letter-spacing:-.04em;margin-top:25px}
.wallet-logos{display:flex;gap:18px;margin-top:21px;align-items:center}
.wallet-logos img{width:36px;height:24px;object-fit:contain}
.orbit-coin{position:absolute;right:8%;top:165px;width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#b3ffce,#37c766);border:6px solid #8af2aa;color:#164c2a;display:grid;place-items:center;font-size:45px;font-weight:700;transform:rotate(13deg);box-shadow:0 15px 25px #0005}
.transfer-visual{display:flex;align-items:center;justify-content:center;position:absolute;inset:60px 28px auto;gap:18px}
.transfer-node{display:grid;place-items:center;width:98px;height:98px;flex-shrink:0;border:1px solid #557e61;border-radius:24px;background:linear-gradient(140deg,#254f35,#14271c);box-shadow:0 15px 30px #0004;transform:rotate(-7deg)}
.transfer-node .icon{width:48px;height:48px;stroke-width:1.4;color:var(--mint)}
.transfer-node.destination{background:linear-gradient(135deg,#a2ffc3,#22c55e);transform:rotate(7deg)}
.transfer-node.destination .icon{color:#124425}
.transfer-line{display:flex;align-items:center;color:var(--mint)}
.transfer-line .icon{width:58px;height:58px;stroke-width:1.2}
.transfer-stages{position:absolute;left:0;right:0;top:204px;display:flex;justify-content:center;gap:10px}
.transfer-stages span{font-size:10px;padding:6px 10px;border:1px solid #4a6e55;border-radius:30px;color:#c7e6d0}
.profile-card{position:absolute;top:49px;left:16%;width:67%;height:192px;padding:23px;border:1px solid #679c78;border-radius:18px;background:linear-gradient(135deg,#254c32,#14291d);transform:rotate(-6deg);box-shadow:0 18px 40px #0006;display:flex;gap:20px;flex-wrap:wrap}
.profile-avatar{width:65px;height:65px;display:grid;place-items:center;border-radius:15px;background:#86efac22;color:var(--mint)}
.profile-avatar .icon{width:38px;height:38px;stroke-width:1.3}
.profile-lines{flex:1;padding-top:12px;min-width:60px}
.profile-lines span{display:block;height:5px;background:#86efac55;margin-bottom:12px;border-radius:5px}
.profile-lines span:nth-child(2){width:70%}.profile-lines span:last-child{width:45%}
.profile-id{width:100%;display:flex;align-items:center;gap:9px;font-size:12px;color:#bce2c8;border-top:1px solid #45634e;padding-top:13px}
.profile-id .icon{width:20px;height:20px}
.profile-shield{position:absolute;right:12%;top:179px;background:var(--green);border:5px solid #163321;border-radius:50%;padding:15px;transform:rotate(8deg);box-shadow:0 10px 30px #0005}
.profile-shield .icon{width:40px;height:40px;color:#10341c;stroke-width:1.5}
.shield-orbits{position:absolute;inset:12px 0 48px;display:grid;place-items:center}
.shield-orbits>span{position:absolute;width:255px;height:255px;border:1px solid #86efac24;border-radius:50%}
.shield-orbits>span:nth-child(2){width:205px;height:205px;border-style:dashed;transform:rotate(25deg)}
.shield-emblem{width:145px;height:165px;display:grid;place-items:center;filter:drop-shadow(0 18px 25px #22c55e40);transform:rotate(-8deg)}
.shield-emblem .icon{width:145px;height:165px;stroke-width:1.1;color:#aeffcd;fill:#22c55e33}
.back-to-top{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:40;width:50px;height:50px;display:grid;place-items:center;border:1px solid #86efac80;border-radius:14px;background:var(--green);color:#08170d;box-shadow:0 8px 25px #0005;transition:background .18s,transform .18s}
.back-to-top:hover{background:var(--mint);transform:translateY(-3px)}
.back-to-top .icon{width:23px;height:23px}
.footer-bottom{padding-right:60px}
@media(min-width:1700px){.page-banner{height:370px}.banner-games img{height:250px}.bonus-card{height:290px;width:175px}.bonus-orbit{top:92px}}
@media(max-width:1150px){.page-hero{gap:30px}.page-banner{height:300px}.page-hero h1{font-size:46px}.page-hero-copy>p{font-size:15px}.banner-games img{height:205px}.bonus-card{right:30px;height:225px;width:135px}.bonus-orbit{width:112px;height:112px;left:8%}.bonus-orbit .icon{width:65px;height:65px}.wallet-card{top:35px;width:76%;left:9%;padding:20px}.orbit-coin{top:160px;right:5%;width:70px;height:70px;font-size:35px}.transfer-visual{gap:13px;inset:49px 15px auto}.transfer-node{width:77px;height:77px}.transfer-line .icon{width:40px}.transfer-stages{top:169px}.profile-card{top:30px;left:10%;width:77%}.profile-shield{right:7%;top:160px}.art-chip{font-size:9px}}
@media(max-width:850px){.page-hero{grid-template-columns:1fr 1fr;gap:22px}.page-hero h1{font-size:39px}.page-banner{height:290px}.page-meta{gap:6px}.page-meta .tag{font-size:9px}.wallet-card strong{font-size:21px}.wallet-logos{gap:14px}.wallet-logos img{width:28px}.bonus-card{right:22px;width:128px}.bonus-orbit{left:7%;width:100px;height:100px}.transfer-stages{gap:6px}.transfer-stages span{padding:5px 7px;font-size:9px}}
@media(max-width:650px){.hero .actions{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:11px}.hero .cta{width:100%;min-width:0;min-height:56px;font-size:14px;padding:11px 15px 11px 23px}.hero-copy .cta-note{font-size:9px}.page-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:30px 0}.page-hero h1{font-size:clamp(34px,9.3vw,49px);margin-bottom:20px}.page-hero-copy>p{font-size:15px}.page-banner{height:280px;width:100%;border-radius:18px}.page-meta{margin-top:19px}.banner-games img{height:200px}.banner-games{inset:25px 15px 55px}.bonus-card{right:17%;height:221px;width:134px;top:19px}.bonus-orbit{left:13%;top:60px;width:115px;height:115px}.wallet-card{top:28px;left:14%;width:69%;height:188px}.orbit-coin{right:9%;top:149px}.transfer-visual{top:44px;gap:21px}.transfer-node{width:82px;height:82px}.transfer-line .icon{width:44px}.transfer-stages{top:164px;gap:9px}.transfer-stages span{font-size:10px;padding:6px 10px}.profile-card{left:16%;width:68%;height:184px;top:30px}.profile-shield{right:12%;top:156px;padding:12px}.profile-shield .icon{width:35px;height:35px}.shield-orbits{inset:0 0 40px}.shield-orbits>span{width:228px;height:228px}.shield-orbits>span:nth-child(2){width:182px;height:182px}.shield-emblem,.shield-emblem .icon{width:126px;height:144px}.back-to-top{width:46px;height:46px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));border-radius:12px}.site-footer{padding-bottom:50px}.footer-bottom{padding-right:0}}
@media(max-width:360px){.page-hero h1{font-size:33px}.page-banner{height:260px}.bonus-card{right:10%;height:206px;width:124px}.bonus-orbit{left:8%;width:104px;height:104px}.wallet-card{left:8%;width:78%;height:174px}.wallet-card strong{font-size:20px}.wallet-label{font-size:8px}.wallet-logos{gap:14px;margin-top:15px}.wallet-logos img{width:27px}.orbit-coin{right:4%;top:141px;width:62px;height:62px;font-size:29px}.transfer-visual{gap:14px}.transfer-node{width:74px;height:74px}.transfer-line .icon{width:35px}.profile-card{left:9%;width:78%}.profile-shield{right:6%;top:152px}.page-banner .art-chip{font-size:9px;padding:8px 10px}.banner-games img{height:182px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}.back-to-top:hover{transform:none}}
@media print{.back-to-top,.page-banner,.cta-note{display:none}.page-hero{display:block}.page-hero h1{font-size:32px}}