:root {
  --bg: #0a0916;
  --bg-soft: #120f24;
  --card: #171331;
  --border: #2b2650;
  --text: #edeaf9;
  --muted: #9a93bd;
  --accent-a: #22d3ee;
  --accent-b: #d946ef;
  --accent-solid: #7c6cff;
  --accent-green: #22c55e;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Orbitron", -apple-system, "Segoe UI", Roboto, sans-serif;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at top, var(--bg-soft), var(--bg) 60%);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}
main {
  flex: 1 0 auto;
  width: 100%;
}
#particles-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}
h1,
h2,
h3,
.logo-word,
.btn,
.section-heading {
  font-family: var(--font-display);
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Header */

.site-header {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 9, 22, 0.7);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 20px;
  width: 100%;
}
.header-row > * {
  min-width: 0;
}
.header-row .icon-btn {
  justify-self: start;
}
.header-row .logo {
  justify-self: center;
}
.header-row .lang-switch {
  justify-self: end;
}
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.whatsapp-btn {
  background: #25d366;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.5);
}
.whatsapp-btn:hover,
.whatsapp-btn:focus-visible {
  background: #3ae07d;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.8);
  transform: scale(1.12);
}
.whatsapp-btn svg {
  width: 30px;
  height: 30px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  font-size: 2.5rem;
  letter-spacing: 0.02em;
}
.logo-mark {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
.logo-word {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lang-switch {
  position: relative;
}
.lang-switch summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 18px 12px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.lang-switch summary::-webkit-details-marker,
.lang-switch summary::marker {
  display: none;
  content: "";
}
.lang-switch .chevron {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.lang-switch[open] .chevron {
  transform: rotate(180deg);
}
.flag-icon {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}
.flag-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lang-switch ul {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  z-index: 20;
}
.lang-switch a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}
.lang-switch a:hover {
  background: var(--bg-soft);
}
.lang-switch a[aria-current="true"] {
  color: var(--accent-a);
}
.disclosure-banner {
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 8px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
/* Hero */

.hero {
  text-align: center;
  padding: 60px 0 30px;
}
.hero-visual {
  position: relative;
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(124, 108, 255, 0.35);
  background: linear-gradient(160deg, #1b1140 0%, #150c33 55%, #0d0722 100%);
  box-shadow:
    0 30px 80px rgba(76, 38, 175, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* Slow colour drift in the frame around the clip. */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 0deg,
    var(--accent-a),
    var(--accent-b),
    var(--accent-a)
  );
  opacity: 0.14;
  filter: blur(50px);
  animation: spin 12s linear infinite;
}
/* Portrait clip, so the player is phone-shaped and height-driven like the
   game-media frame rather than a 16/9 box that would crop it. */
.hero-player {
  position: relative;
  height: min(58vh, 460px);
  width: fit-content;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.video-poster-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 16px 20px;
  cursor: pointer;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.35)
  );
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.is-playing .video-poster-overlay {
  opacity: 0;
  visibility: hidden;
}
.video-poster-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.video-poster-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.video-poster-mark {
  width: 22px;
  height: 22px;
}
.video-poster-play {
  grid-column: 1 / -1;
  place-self: center;
  width: 76px;
  height: 76px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #d946ef);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(217, 70, 239, 0.45);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.video-poster-play svg {
  width: 34px;
  height: 34px;
  margin-left: 4px; /* physical on purpose: the play triangle points right in RTL too */
}
.video-poster-overlay:hover .video-poster-play {
  transform: scale(1.07);
  box-shadow: 0 16px 40px rgba(217, 70, 239, 0.55);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.hero-lede {
  font-family: "Space Mono", monospace;
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff !important;
  margin: 0 0 10px;
  /* background: red; */
}
.emoji-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
}
.hero p {
  color: var(--muted);
  margin: 0;
}
/* Games grid */

.section-heading {
  text-align: center;
  font-size: 3rem;
  margin: 50px 0 40px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.section-heading-wrap {
  text-align: center;
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 5rem;
}
.game-card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}
.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-solid);
  box-shadow:
    0 0 0 1px var(--accent-solid),
    0 10px 32px rgba(124, 108, 255, 0.4),
    0 0 24px rgba(34, 211, 238, 0.25);
}
.game-card-thumb {
  border-radius: 10px;
  overflow: hidden;
}
.game-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.game-card:hover img {
  transform: scale(1.08);
}
.game-card-body {
  padding: 16px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.game-card-title {
  margin: 0;
  flex: 1;
  color: var(--accent-a);
  font-size: 1.3rem;
}
/* Buttons */

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.btn-gradient {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  color: #fff;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 20px 0;
  border-radius: 10px;
  margin-top: 14px;
}
.btn-lg {
  padding: 18px 22px;
  border-radius: 8px;
}
.signup-rows.guide-cta-row {
  margin-top: 56px;
}
.cta-stack {
  max-width: 820px;
  margin: 0 auto 50px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.btn-placeholder {
  position: relative;
  opacity: 0.9;
}
.btn-placeholder .badge {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 24px;
  color: #fff;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.btn-cta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.btn-whatsapp {
  background: linear-gradient(90deg, #25d366, #128c7e);
}
.btn-apk {
  background: linear-gradient(90deg, #4ade80, #16a34a);
}
.btn-apk svg {
  color: #0b2e1c;
}
.game-media {
  position: relative;
  margin: 30px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
/* Website links play a landscape tutorial, app links a portrait one. */
.game-media-landscape {
  max-width: 550px;
  aspect-ratio: 16 / 9;
}
/* Height-driven so a tall phone clip can't push the buttons off screen; the
   width follows from the clip's ratio. */
.game-media-portrait {
  height: min(65vh, 520px);
  width: fit-content;
  max-width: 320px;
  aspect-ratio: 9 / 16;
}
.game-media-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.platform-select {
  max-width: 450px;
  margin: 16px auto 0;
}
.platform-select .fine-print {
  text-align: center;
  margin-top: 12px;
}
.platform-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.platform-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.platform-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.platform-btn:hover {
  border-color: var(--accent-solid);
  background: rgba(124, 108, 255, 0.15);
}
.platform-btn.active {
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: rgba(34, 197, 94, 0.12);
  box-shadow:
    0 0 0 1px var(--accent-green),
    0 0 16px rgba(34, 197, 94, 0.35);
}
.platform-btn.active:hover {
  background: rgba(34, 197, 94, 0.2);
}
.platform-btn-wide {
  width: 100%;
  text-decoration: none;
  margin-top: 10px;
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--accent-green);
}
.platform-btn-wide:hover {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.12);
}
.callout-box {
  max-width: 700px;
  margin: 50px auto 0;
  padding: 20px 20px;
  border: 1px solid var(--accent-a);
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.08);
  text-align: center;
}
.callout-box p {
    margin: 0;
    color: var(--accent-a);
    font-weight: 600;
    font-size: 1.2rem;
}
/* Signup banner: heavier frame than the plain callouts, with the code and the
   amount picked out the way the deposit note does elsewhere. */
.callout-signup {
  max-width: 620px;
  margin: 30px auto 10px;
  padding: 22px 26px;
  border: 2px solid var(--accent-b);
  border-radius: 16px;
  background: rgba(9, 7, 20, 0.3);
  box-shadow:
    0 0 0 1px rgba(217, 70, 239, 0.25),
    0 0 26px rgba(217, 70, 239, 0.25);
}
.callout-signup p {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.9;
}
.callout-code {
  color: #34d399;
}
.callout-amount {
  color: #facc15;
  font-size: 1.2rem;
}
.signup-rows {
  max-width: 550px;
  margin: 20px auto 0 auto;
}
.signup-row {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}
.pointer-icon {
  width: 40px;
  /* height: 22px; */
  flex-shrink: 0;
  animation: point-nudge 1.1s ease-in-out infinite;
}
@keyframes point-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}
.brand-pill {
  display: inline-flex;
  align-items: stretch;
  width: 160px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.brand-pill:hover {
  transform: translateY(-1px);
}
.brand-pill img {
  flex: 1;
  min-width: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
}
.brand-pill .chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: rgba(217, 70, 239, 0.08);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.promo-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--text);
  background: #0f1117;
}
.promo-pill-label {
  color: #34d399;
  font-weight: 700;
  white-space: nowrap;
}
.promo-pill-label strong {
  color: #facc15;
}
.promo-code {
  border: none;
  border-radius: 8px;
  padding: 5px 18px;
  background: #22c55e;
  color: #06210f;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.promo-code:hover {
  background: #16a34a;
}
.promo-code.copied {
  background: #facc15;
}
.signup-rows .btn-block {
  margin-top: 6px;
}
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 30px 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.fine-print {
  color: #6b6690;
  font-size: 0.78rem;
  margin-top: 8px;
}
/* WhatsApp modal */

.modal-box {
  width: 90vw;
  max-width: 460px;
  margin: auto;
  padding: 35px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--accent-solid);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px var(--accent-solid),
    0 12px 40px rgba(124, 108, 255, 0.45),
    0 0 30px rgba(34, 211, 238, 0.3);
  text-align: center;
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease,
    display 0.18s allow-discrete,
    overlay 0.18s allow-discrete;
}
.modal-box[open] {
  opacity: 1;
  translate: 0 0;
}
@starting-style {
  .modal-box[open] {
    opacity: 0;
    translate: 0 8px;
  }
}
.modal-box::backdrop {
  background: rgba(5, 4, 12, 0.75);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    display 0.18s allow-discrete,
    overlay 0.18s allow-discrete;
}
.modal-box[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .modal-box[open]::backdrop {
    opacity: 0;
  }
}
.modal-box h3 {
  margin: 0 0 10px;
  padding-inline: 26px; /* clears the close button without breaking centring */
  font-size: 1.2rem;
  font-family: 'Courier New', Courier, monospace;
}
.modal-box p {
  color: var(--muted);
  margin: 0 0 20px;
}
.modal-box .btn-cta {
  margin-bottom: 12px;
}
.modal-warning-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  display: block;
}
.modal-yes-no {
  display: flex;
  gap: 12px;
}
.modal-yes-no .btn {
  flex: 1;
  border: none;
  color: #fff;
}
.modal-yes {
  background: #22c55e;
}
.modal-yes:hover {
  background: #16a34a;
}
.modal-no {
  background: #ef4444;
}
.modal-no:hover {
  background: #dc2626;
}
.modal-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover {
  border-color: var(--accent-solid);
}
.modal-dismiss-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.modal-dismiss-btn:hover {
  border-color: var(--accent-solid);
}
/* Signup page */

.signup-page {
  max-width: 420px;
  margin: 50px auto 80px;
  text-align: center;
}
.signup-page .section-heading {
  margin: 0 0 24px;
}
.signup-platform-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 50px;
}
.brand-pill-wide {
  width: 70%;
  height: 50px;
  gap: 18px;
}
.brand-pill-wide .lead-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #38bdf8;
  font-weight: 700;
  font-size: 2.5rem;
  flex-shrink: 0;
  animation: point-nudge 1.1s ease-in-out infinite;
}
/* Fixed box so every brand gets the same tile regardless of its logo's aspect ratio. */
.brand-pill-wide .brand-pill-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: auto;
  flex-shrink: 0;
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
/* contain + max-* keeps a tall logo inside the tile instead of overflowing into the crop. */
.brand-pill-wide .brand-pill-logo img {
  flex: none;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.brand-pill-wide.active .brand-pill-logo {
  box-shadow:
    0 0 0 2px #f59e0b,
    0 0 12px rgba(245, 158, 11, 0.45);
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: start;
}
.signup-form label {
  font-size: 1rem;
  color: var(--muted);
  margin: 18px 0 -6px 0;
  text-align: center;
}
.field-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.field-input:focus {
  outline: none;
  border-color: var(--accent-a);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  padding: 20px 14px;
  margin-top: 8px;
  width: 100%;
  align-self: center;
  border-radius: 10px;
}
.btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  font-size: 1rem;
}
/* Game carousel */

.carousel-box {
  max-width: 900px;
  margin: 120px auto 20px auto;
  padding: 20px 0 20px 20px;
  border: 0.5px solid var(--accent-a);
  border-radius: 16px;
  background: rgba(34, 211, 238, 0.05);
}
.carousel-heading {
  text-align: center;
  color: var(--accent-a);
  font-size: 1.1rem;
  margin: 0 24px 18px 0;
}
.carousel-viewport {
  overflow: hidden;
}
.carousel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: carousel-scroll 35s linear infinite;
}
/* .carousel-track:hover { animation-play-state: paused; } */

.carousel-card {
  width: 220px;
  height: 200px;
  flex-shrink: 0;
}
@keyframes carousel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Registration guide page */

.guide-page {
  background: var(--bg);
}
.guide-page #particles-bg {
  display: none;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
.back-btn svg {
  width: 18px;
  height: 18px;
}
.guide-intro {
  text-align: center;
  padding: 10px 0 20px;
}
.guide-logo-mark {
  width: 60px;
  height: 60px;
}
.guide-heading {
  margin: 16px 0 0;
  font-size: 1.6rem;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.guide-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 580px;
  margin: 0 auto 30px;
  padding: 14px 18px;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.9rem;
}
.guide-warning svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.guide-step {
  max-width: 480px;
  margin: 0 auto 30px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  position: relative;
}
.guide-step-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: -12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.guide-step-img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.guide-step-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
}
.guide-step-placeholder svg {
  width: 48px;
  height: 48px;
}
.guide-step-instruction {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
@media (max-width: 480px) {
  .logo {
    font-size: 1.2rem;
    gap: 6px;
  }
  .logo-mark {
    width: 30px;
    height: 30px;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
  }
  .whatsapp-btn svg {
    width: 18px;
    height: 18px;
  }
  .platform-btn {
    padding: 10px 8px;
    font-size: 0.78rem;
    gap: 6px;
  }
  .hero-visual {
    padding: 12px;
    border-radius: 18px;
  }
  .video-poster-play {
    width: 58px;
    height: 58px;
  }
  .video-poster-play svg {
    width: 26px;
    height: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual::before {
    animation: none;
  }
  .modal-box,
  .modal-box::backdrop {
    transition-duration: 0.01ms;
  }
  .apple-row .pick-cell.is-open {
    animation: none;
  }
}

.whatsapp-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}
.whatsapp-strip svg {
  width: 26px;
  height: 26px;
}
.whatsapp-strip strong {
  color: #facc15;
}
.whatsapp-strip:hover strong {
  color: #fde68a;
}
.crash-welcome {
  max-width: 560px;
  margin: 50px auto 30px auto;
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
}
.brand-video-select {
  max-width: none;
}
.brand-video-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
/* Each brand keeps its own colour; the active one lights up in that colour
   rather than the green used by the platform picker on the game pages. */
.brand-video-btn {
  gap: 10px;
  padding: 8px 22px 8px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  font-size: 0.95rem;
  color: #fff;
}
.brand-onexbet {
  --brand-from: #1e3a8a;
  --brand-to: #2563eb;
  --brand-glow: 59, 130, 246;
}
.brand-megapari {
  --brand-from: #3f0d18;
  --brand-to: #6b1224;
  --brand-glow: 239, 68, 68;
}
.brand-video-btn:hover {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  border-color: rgba(var(--brand-glow), 0.6);
}
.brand-video-btn.active,
.brand-video-btn.active:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  border-color: rgb(var(--brand-glow));
  box-shadow:
    0 0 0 1px rgb(var(--brand-glow)),
    0 0 18px rgba(var(--brand-glow), 0.55);
}
.brand-video-chip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 7px;
  background: #0b0b12;
  overflow: hidden;
}
.brand-video-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Pinned frame: brand clips differ in shape, and the layout can't jump between
   them mid-flow, so whatever loads letterboxes inside this box. */
.game-media-fixed {
  height: auto;
  width: min(320px, 100%);
  max-width: 320px;
  aspect-ratio: 9 / 16;
}
.btn-green {
  background: #22c55e;
  border: none;
  color: #06210f;
}
.btn-green:hover:not(:disabled) {
  background: #16a34a;
}
.field-error {
  margin: -5px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f87171;
  text-align: start;
}
.field-input.field-invalid {
  border-color: #f87171;
}
.field-input.field-invalid:focus {
  border-color: #f87171;
}
/* The reference sets this flow in plain sans, not the display face used for
   buttons elsewhere on the site. */
.crash-welcome {
  font-family: var(--font-body);
}
/* Game flow: poster clip, brand picker, promo rows, one CTA */

.game-flow {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0 10px;
  text-align: center;
}
.callout-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 580px;
  margin: 18px auto 0;
  padding: 12px 18px;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: start;
}
.callout-warn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.game-flow .signup-rows {
  max-width: 480px;
  margin-top: 24px;
}
.game-flow .signup-row {
  display: grid;
  grid-template-columns: 40px 160px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.game-flow .promo-pill {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  justify-self: end;
  min-width: 190px;
  padding: 8px 10px 8px 14px;
  border-color: #2f3a4f;
  background: #0d1018;
}
.promo-code-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: #34d399;
}
.promo-code-icon svg {
  width: 17px;
  height: 17px;
}
.promo-code-icon:hover {
  background: rgba(52, 211, 153, 0.15);
}
.promo-code-icon.copied {
  background: rgba(52, 211, 153, 0.3);
}
.btn-blue {
  background: #2f80ed;
  color: #fff;
  border: none;
}
.btn-blue:hover {
  background: #1f6fdb;
}
.game-flow-next {
  display: inline-block;
  min-width: 190px;
  margin-top: 26px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 1rem;
}
/* The three-column row (arrow, brand pill, code card) needs ~400px, so on a
   phone the code card drops onto its own line under the pill. Has to sit after
   the .game-flow block above to beat it on source order. */
@media (max-width: 480px) {
  .game-flow .signup-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
  }
  .game-flow .promo-pill {
    grid-column: 2;
    justify-self: stretch;
    min-width: 0;
  }
}
/* Logo gradient stops. In CSS rather than inline style attributes so the CSP
   can forbid inline styles outright. */
.logo-grad-from {
  stop-color: var(--accent-a);
}
.logo-grad-to {
  stop-color: var(--accent-b);
}
/* Start button + script-server modal (see assets/js/signup-form.js) */

.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  margin-inline-end: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .btn-spinner {
  display: inline-block;
}
.spinner-ring {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-a);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Crash toolkit (script.php) — the prediction card is the whole page */

.toolkit {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 0 30px;
}
.toolkit .back-btn {
  margin: 0 0 10px;
}
/* Round forecast — the reference predictor layout, real numbers behind it */

.forecast {
  max-width: 460px;
  margin: 0 auto 22px;
  padding: 26px 22px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #12151f 0%, #0c0e16 100%);
  text-align: center;
}
.forecast-label {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.forecast-figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: #4ade80;
  text-shadow: 0 0 34px rgba(74, 222, 128, 0.55);
}
.forecast-figure-long {
  font-size: 2.6rem;
}
.forecast-sub {
  margin: 10px 0 22px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.forecast-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.forecast-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #161a26;
  text-align: start;
}
.forecast-row-time {
  font-family: "Space Mono", monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.forecast-row-status {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.forecast-row-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.forecast-refresh {
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
/* Apple of Fortune board: covered cells, the route opening bottom-up */

.forecast-apple {
  max-width: 420px;
}
.apple-rows {
  gap: 4px;
}
.apple-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
}

/* The level you are told to play next: green badge, live cells, like the board. */
.apple-row.is-target {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.09);
}

.apple-coef {
  padding: 5px 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  text-align: center;
}

.apple-row.is-target .apple-coef {
  background: #4ade80;
  color: #06210f;
}

.apple-row .pick-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

/* Covered cell: the wooden disc the board starts every level with. */
.apple-row .pick-cell {
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 40px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: radial-gradient(circle at 35% 30%, #8a5c36, #4f3320 72%);
}

/* Cells on a level the route has already passed — resolved, no longer a choice. */
.apple-row .pick-cell.is-spent {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.apple-row .pick-cell.is-open {
  border-color: #4ade80;
  background: radial-gradient(circle at 50% 38%, #2f8047, #14532d 75%);
  animation: apple-open 0.32s ease-out both;
}

.apple-row.is-target .pick-cell.is-open {
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.55);
}

.apple-row .pick-cell svg {
  width: 62%;
  height: 62%;
  display: block;
}

@keyframes apple-open {
  from {
    transform: scale(0.35);
    opacity: 0;
  }
}

.forecast-body {
  position: relative;
}
.forecast.is-loading .forecast-body > :not(.forecast-spinner) {
  opacity: 0.18;
  filter: blur(2px);
}
.forecast-spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  z-index: 1;
}
.forecast.is-loading .forecast-spinner {
  display: block;
}
@media (max-width: 480px) {
  .forecast-figure {
    font-size: 2.8rem;
  }
  .forecast-figure-long {
    font-size: 2rem;
  }
  .forecast-row {
    padding: 12px 14px;
    gap: 8px;
  }
  .apple-row {
    grid-template-columns: 54px 1fr;
    padding: 5px 8px;
  }
  .apple-coef {
    font-size: 0.7rem;
  }
}

/* Arabic (RTL) ------------------------------------------------------------
   The layout mirrors on its own — everything above uses logical properties.
   What is left is the type (Orbitron, Inter and Space Mono carry no Arabic
   glyphs) and the handful of marks that have to be flipped by hand. */

[lang="ar"] {
  --font-body: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] .btn,
[lang="ar"] .section-heading,
[lang="ar"] .hero-lede {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* The wordmark and the big multiplier stay on the display face — one is a
   brand, the other is digits. */
[lang="ar"] .logo-word,
[lang="ar"] .forecast-figure {
  font-family: var(--font-display);
}

/* Arrows and carets point the other way once the page is mirrored. The pointing
   hand uses `scale` rather than `transform` so it keeps its nudge animation. */
[dir="rtl"] .back-btn svg,
[dir="rtl"] .brand-pill .chevron,
[dir="rtl"] .lead-chevron {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .pointer-icon {
  scale: -1 1;
}

/* Multipliers, clocks and level numbers are Latin runs: without their own
   direction the RTL paragraph drags the × to the wrong side (×4.02). */
[dir="rtl"] .forecast-figure,
[dir="rtl"] .forecast-row-time,
[dir="rtl"] .forecast-row-value,
[dir="rtl"] .forecast-row-status,
[dir="rtl"] .apple-coef {
  direction: ltr;
}