/* ============================================================
   SpinBob (spin-bob.casino) - site overrides
   M PLUS Rounded 1c headings over Fira Sans text (Latin and Greek).
   Deep navy ground and panels from the supplied app screens, yellow
   buttons from Register and Log in, the red category bar of the lobby,
   the sea-glass blue of the bottom navigation and the crown purple.
   Centred layout, content column capped at 1140 px.
   ============================================================ */
:root {
  --font-display: "M PLUS Rounded 1c", "Segoe UI", Arial, sans-serif;
  --font-body: "Fira Sans", "Segoe UI", Arial, sans-serif;
  --sb-yellow: #ffcc00;
  --sb-yellow-2: #ffd83d;
  --sb-yellow-deep: #c99a00;
  --sb-red: #c41d2c;
  --sb-red-deep: #8e1420;
  --sb-glass: #89c5cc;
  --sb-glass-2: #bfe3e7;
  --sb-purple: #b07ad8;
  --sb-panel: #10233c;
  --sb-panel-2: #162b47;
  --sb-line: #24395a;
  --sb-text: #c3d0e0;
  --sb-faint: #8ea2bc;
}

body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  background:
    radial-gradient(900px 520px at 50% -200px, rgba(80, 150, 210, 0.22), transparent 70%),
    radial-gradient(700px 420px at 105% 35%, rgba(176, 122, 216, 0.08), transparent 70%),
    var(--color-bg);
}
.container { max-width: 1140px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 3px solid var(--sb-red); backdrop-filter: blur(10px); }
.site-header .site-logo img { height: 44px; width: auto; }
.nav-main--desktop { gap: 2px; }
.nav-main--desktop a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  color: #e6eef8;
}
.nav-main--desktop a:hover { color: var(--sb-yellow); background: rgba(255, 204, 0, 0.1); }
.btn { font-family: var(--font-display); font-weight: 800; border-radius: 999px; letter-spacing: 0.01em; }
.btn--primary, main a.btn--primary {
  background: var(--sb-yellow);
  color: #0a1a2f !important;
  border: 0;
  box-shadow: 0 4px 0 var(--sb-yellow-deep), 0 10px 22px rgba(255, 204, 0, 0.22);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--sb-yellow-2); color: #0a1a2f !important; transform: translateY(1px); box-shadow: 0 3px 0 var(--sb-yellow-deep), 0 8px 18px rgba(255, 204, 0, 0.2); }
.btn--outline { border: 1px solid #3c5272; color: #f3f7fc; background: #3a4a60; }
.btn--outline:hover { border-color: var(--sb-glass); color: #fff; background: #44566e; }

/* ---------- Language switcher: code chips ---------- */
.lang-switcher__toggle { border-radius: 999px; }
.sb-code {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: #162b47; border: 1px solid #2e4568;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; color: var(--sb-glass-2);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 250px; max-width: 92vw;
  display: grid !important; grid-template-columns: 1fr; gap: 2px;
  padding: 8px; max-height: 70vh; overflow-y: auto;
  background: #10233c; border: 1px solid var(--sb-line); border-radius: 16px;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 7px 10px; }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(255, 204, 0, 0.12); }
.lang-switcher__menu li[aria-selected="true"] .sb-code { background: var(--sb-yellow); color: #0a1a2f; border-color: var(--sb-yellow); }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; padding: 6px 8px; border-radius: 10px; }
.nav-mobile__lang.is-active { background: rgba(255, 204, 0, 0.12); }

/* ---------- Hero: centred headline over a jackpot plate ---------- */
.hero {
  padding: 64px 0 34px;
  background:
    radial-gradient(520px 300px at 50% 0%, rgba(137, 197, 204, 0.18), transparent 72%),
    linear-gradient(180deg, #143a66 0%, #0f2747 45%, var(--color-bg) 100%);
  border-bottom: 0;
}
.hero__content {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 900px; margin: 0 auto; gap: 16px;
}
.hero__badge {
  color: #0a1a2f; background: var(--sb-glass);
  border: 0; border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em;
}
.hero__badge::before { background: var(--sb-red); box-shadow: none; }
.hero h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.16; letter-spacing: -0.01em; color: #fff;
}
.hero h1 .sb-accent { color: var(--sb-yellow); text-shadow: 0 2px 0 #7a5d00; }
.hero__subtitle { margin: 0; color: var(--sb-text); }
.hero__subtitle p { margin: 0 auto; max-width: 68ch; }
.hero__bonus-box {
  margin: 10px auto 4px; width: 100%; max-width: 560px;
  padding: 18px 26px 18px; text-align: center; position: relative;
  background: linear-gradient(180deg, #1d3a5e, #12294a);
  border: 3px solid var(--sb-yellow); border-radius: 22px;
  box-shadow: inset 0 0 0 3px #0a1a2f, 0 0 0 1px #7a5d00, 0 18px 44px rgba(2, 8, 20, 0.55);
}
.hero__bonus-box .hero__bonus-label {
  display: inline-block; padding: 3px 14px; border-radius: 999px; background: var(--sb-red);
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.hero__bonus-box .hero__bonus-value {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  line-height: 1.05; color: var(--sb-yellow); margin: 10px 0 8px; text-shadow: 0 3px 0 #7a5d00;
}
.hero__bonus-box .hero__bonus-extra { color: #dbe6f2; font-size: 0.95rem; line-height: 1.5; }
.hero__ctas { justify-content: center; margin-top: 6px; }
@media (max-width: 760px) {
  .hero { padding: 40px 0 26px; }
  .hero__bonus-box { padding: 16px 16px; }
}

/* ---------- Stats: sea-glass chips ---------- */
.stats-bar { background: transparent; border: 0; padding: 4px 0 16px; }
.stats-bar__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.stats-bar__inner .stat {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 14px 10px; border-radius: 16px; background: var(--sb-panel); border: 1px solid var(--sb-line);
  border-bottom: 3px solid var(--sb-glass);
}
.stats-bar__inner .stat__value { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: #fff; white-space: nowrap; }
.stats-bar__inner .stat:nth-child(-n+3) .stat__value { color: var(--sb-yellow); }
.stat__label { font-size: 0.8rem; line-height: 1.35; color: var(--sb-faint); text-transform: none; letter-spacing: 0; }
@media (max-width: 1100px) { .stats-bar__inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stats-bar__inner .stat { padding: 12px 8px; }
  .stats-bar__inner .stat__value { font-size: 1.15rem; }
}

/* ---------- Sections: rounded navy panels inside the centred column ---------- */
.content-section { padding: 20px 0; }
.content-section > .container {
  background: var(--sb-panel); border: 1px solid var(--sb-line); border-radius: 24px;
  padding: 44px 46px 32px; max-width: 1140px;
}
.content-section--alt { background: transparent; border: 0; }
.content-section--alt > .container { background: #0d1f36; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -0.005em;
  color: #fff; margin: 0 0 22px; padding: 0; border: 0; max-width: none;
}
.content-section h2::before { display: none !important; }
.content-section h2::after {
  content: ""; display: block !important; position: static; width: 72px; height: 5px; margin-top: 12px;
  border-radius: 5px; background: linear-gradient(90deg, var(--sb-yellow) 0 60%, var(--sb-red) 60% 100%);
}
.content-section h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; line-height: 1.35;
  color: var(--sb-glass-2); margin: 32px 0 12px; padding: 0; border: 0; text-transform: none;
}
.content-section h3::before { display: none; }
.content-section p { margin-bottom: 1rem; color: var(--sb-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.45rem; color: var(--sb-text); }
.content-section li::marker { color: var(--sb-yellow); }
.content-section a:not(.btn) { color: var(--sb-yellow); }
@media (max-width: 900px) {
  .content-section { padding: 12px 0; }
  .content-section > .container { padding: 30px 22px 22px; border-radius: 18px; }
}
@media (max-width: 560px) {
  .content-section > .container { margin: 0 10px; width: auto; padding: 26px 16px 18px; }
}

/* ---------- Supplied phone artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 370px; max-width: 370px; height: auto;
  background: transparent; box-shadow: none; border-radius: 0;
  filter: drop-shadow(0 0 26px rgba(137, 197, 204, 0.22));
}
.content-section .section-illus--right { float: right; margin: -34px -34px 0 18px; }
.content-section .section-illus--left { float: left; margin: -34px 18px 0 -34px; }
.sb-clear { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 320px; max-width: 86%; margin: -10px auto 4px; }
}

/* ---------- Tables: red category band like the lobby bar ---------- */
.sb-table-wrap {
  clear: both; margin: 24px 0 28px; border-radius: 16px; overflow: hidden;
  background: #0b1b30; border: 1px solid var(--sb-line);
}
.sb-table-wrap .sb-table-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff;
  padding: 12px 20px; margin: 0; max-width: none;
  background: linear-gradient(90deg, var(--sb-red), var(--sb-red-deep));
}
.sb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .sb-table-wrap table { width: 100%; min-width: 540px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 0.95rem; }
.content-section .sb-table-wrap th, .content-section .sb-table-wrap td {
  padding: 11px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--sb-line); white-space: normal;
}
.content-section .sb-table-wrap thead th {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sb-glass-2); background: #10233c;
}
.content-section .sb-table-wrap tbody tr:nth-child(even) td { background: rgba(22, 43, 71, 0.45); }
.content-section .sb-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .sb-table-wrap td:first-child { color: #fff; font-weight: 600; }
.sb-table-note { font-size: 0.86rem; color: var(--sb-faint); padding: 12px 20px; margin: 0 !important; border-top: 1px solid var(--sb-line); max-width: none !important; }
@media (max-width: 560px) {
  .content-section .sb-table-wrap table { min-width: 480px; font-size: 0.88rem; }
  .content-section .sb-table-wrap th, .content-section .sb-table-wrap td { padding: 9px 12px; }
}

/* ---------- Numbered steps: yellow coins ---------- */
.sb-steps { display: flow-root; counter-reset: sbstep; list-style: none; margin: 16px 0 24px !important; padding: 0; }
.sb-steps li { counter-increment: sbstep; position: relative; padding: 4px 0 4px 50px; margin-bottom: 14px; }
.sb-steps li::before {
  content: counter(sbstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; color: #0a1a2f; background: var(--sb-yellow);
  box-shadow: 0 3px 0 var(--sb-yellow-deep);
}

/* ---------- FAQ ---------- */
.sb-faq { clear: both; margin: 18px 0 8px; display: grid; gap: 10px; }
.sb-faq details { border: 1px solid var(--sb-line); border-radius: 14px; background: #0b1b30; overflow: hidden; }
.sb-faq summary {
  cursor: pointer; list-style: none; padding: 14px 52px 14px 20px; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
}
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; color: #0a1a2f; background: var(--sb-yellow);
}
.sb-faq details[open] summary::after { content: "\2212"; }
.sb-faq details[open] summary { color: var(--sb-yellow); }
.sb-faq details p { padding: 0 20px 16px; margin: 0; }

/* ---------- CTA banner, footer, sticky ---------- */
.cta-banner { background: transparent; border: 0; text-align: center; padding: 26px 0 40px; }
.cta-banner .container {
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(176, 122, 216, 0.35), transparent 70%),
    linear-gradient(180deg, #1b3d66, #11294a);
  border: 3px solid var(--sb-yellow); border-radius: 24px; padding: 42px 30px;
}
.cta-banner h2 { font-family: var(--font-display); font-weight: 800; border: 0; padding: 0; color: #fff; }
.cta-banner h2::after { display: none !important; }
.cta-banner p { margin-left: auto; margin-right: auto; color: #dbe6f2; }
.site-footer { border-top: 3px solid var(--sb-red); background: #071322; }
.site-footer h5 { font-family: var(--font-display); font-weight: 800; font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-glass-2); }
.site-footer .site-logo img { height: 42px; width: auto; }
.footer-badge { border-color: var(--sb-line); border-radius: 999px; }
.sticky-cta { border-top: 2px solid var(--sb-yellow); background: rgba(10, 26, 47, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 800; }
.sticky-cta__bonus { color: var(--sb-yellow); font-weight: 600; }

/* ---------- Anchor offset, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 32px; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 6px; }
  .nav-toggle { flex-shrink: 0; margin-left: 6px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.74rem !important; padding: 0.5rem 0.8rem !important; white-space: nowrap; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .hero__badge::before { display: none; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.9rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.66rem !important; padding: 0.45rem 0.55rem !important; } }

.hero h1, .content-section h2, .content-section h3, .cta-banner h2, .sb-table-wrap .sb-table-title { text-transform: none; }

/* Text uses the full panel width next to the floated artwork */
.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2 { clear: none; }
.content-section h3 { clear: both; }
.content-section .sb-clear + h2 { margin-top: 56px; }
.content-section h2 { overflow: visible; }
@media (max-width: 560px) { .hero__badge { font-size: 0.72rem; } }
@media (max-width: 600px) {
  .content-section .sb-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.86rem; }
  .content-section .sb-table-wrap th, .content-section .sb-table-wrap td { padding: 9px 10px; overflow-wrap: break-word; hyphens: auto; }
  .content-section .sb-table-wrap th:first-child, .content-section .sb-table-wrap td:first-child { width: 38%; }
}