:root {
  --bg: #080a0d;
  --panel: #101318;
  --panel-2: #151920;
  --line: #3b414a;
  --line-soft: #242931;
  --text: #f2f4f7;
  --muted: #a8afb9;
  --silver: #d7dce2;
  --blue: #7dd3fc;
  --blue-strong: #38bdf8;
  --amber: #f59e0b;
  --radius: 18px;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -10%, rgba(125, 211, 252, .08), transparent 33rem),
    linear-gradient(180deg, #0b0e12 0%, var(--bg) 55%, #050608 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; }
img { max-width: 100%; }

.shell { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(8, 10, 13, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .95rem;
}
.brand-mark {
  width: 29px;
  height: 29px;
  border: 2px solid var(--silver);
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 4px #191d23;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #777f8a;
  border-radius: 50%;
}
nav { display: flex; gap: 18px; align-items: center; }
nav a { color: var(--muted); font-size: .9rem; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--text); }

.hero {
  padding: 92px 0 72px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(40px, 7vw, 88px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(125, 211, 252, .10); }
h1 {
  margin: 16px 0 18px;
  font-size: clamp(3.2rem, 8vw, 6.6rem);
  line-height: .86;
  letter-spacing: -.055em;
  font-weight: 950;
  text-transform: uppercase;
}
h1 span { display: block; color: var(--silver); }
.hero-copy p { max-width: 620px; color: var(--muted); font-size: clamp(1.04rem, 2vw, 1.18rem); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .035em;
  font-size: .9rem;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--silver); color: #111419; border-color: var(--silver); }
.button.primary:hover { background: white; }
.button.secondary { background: #11151a; color: var(--text); }
.button.secondary:hover { border-color: #777f8a; }

.hero-art {
  width: min(100%, 410px);
  justify-self: center;
  border: 1px solid #4a515b;
  border-radius: 26px;
  overflow: hidden;
  background: #0c0f13;
  box-shadow: 0 34px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
}

.section { padding: 74px 0; border-top: 1px solid var(--line-soft); }
.section-heading { margin: 0 0 12px; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.035em; }
.section-intro { margin: 0 0 32px; color: var(--muted); max-width: 650px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: linear-gradient(180deg, #13171c, #0e1115); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; }
.card h3 { margin: 8px 0 7px; font-size: 1.02rem; }
.card p { margin: 0; color: var(--muted); font-size: .94rem; }
.card-kicker { color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .14em; }

.purchase-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 28px;
  background: #101318;
  border: 1px solid #3d444e;
  border-radius: var(--radius);
}
.purchase-note p { color: var(--muted); margin: 7px 0 0; }

.site-footer { padding: 34px 0 48px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .85rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }

.legal { padding: 68px 0 84px; max-width: 790px; }
.legal h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: .95; margin-bottom: 14px; }
.legal .updated { color: var(--muted); margin-bottom: 38px; }
.legal h2 { font-size: 1.3rem; margin-top: 34px; }
.legal p, .legal li { color: #c1c6cd; }
.legal a { color: var(--blue); }
.legal .notice { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: #11151a; }

@media (max-width: 760px) {
  .shell { width: min(100% - 28px, var(--max)); }
  nav .optional { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 62px; }
  .hero-art { max-width: 330px; }
  .grid { grid-template-columns: 1fr; }
  .purchase-note { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

/* Stylized in-page game preview */
.hero-art {
  width: min(100%, 430px);
  justify-self: center;
  border: 1px solid #454c55;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #11151a 0%, #090b0e 100%);
  box-shadow: 0 34px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
  padding: 14px;
}
.machine-preview {
  position: relative;
  min-height: 520px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(180deg, #15191f 0%, #0b0e12 46%, #07090b 100%);
  border: 1px solid #2f353d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -26px 50px rgba(0,0,0,.32);
  overflow: hidden;
}
.machine-topbar {
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #343b44;
  background: linear-gradient(180deg, #181c22, #101318);
}
.machine-title {
  font-size: .67rem;
  letter-spacing: .14em;
  font-weight: 950;
  color: #eef1f4;
  white-space: nowrap;
}
.machine-title::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 5px;
  background: #747c86;
  box-shadow: 0 -4px 0 #30363d;
}
.balance-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.balance-label.right { align-items: flex-end; }
.balance-label span { color: #8f98a4; font-size: .48rem; font-weight: 850; letter-spacing: .12em; }
.balance-label strong { color: #f0f2f4; font-size: .82rem; margin-top: 3px; }

.machine-stage { position: relative; height: 385px; padding: 16px 62px 10px; }
.machine-side {
  position: absolute;
  top: 18px;
  display: grid;
  gap: 9px;
  z-index: 4;
}
.machine-side.left { left: 10px; }
.machine-side.right { right: 10px; }
.machine-side span {
  width: 46px;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 4px 2px;
  border-radius: 7px;
  background: #171b20;
  border: 1px solid #5a626d;
  color: #d9dde2;
  font-size: .42rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.machine-side.left span:nth-child(2) { border-color: #7dd3fc; color: #bae6fd; }
.machine-side.right .mini { border-color: #d5b744; color: #f6da61; }
.machine-side.right .max { border-color: #4ca06e; color: #71d594; }
.machine-side.right .frenzy { border-color: #c66a37; color: #ef925d; }

.cabinet {
  height: 100%;
  border-radius: 12px 12px 9px 9px;
  border: 1px solid #555d68;
  background: linear-gradient(90deg, #242a31 0, #0e1115 9%, #0b0e11 91%, #242a31 100%);
  padding: 11px 10px 12px;
  box-shadow: inset 0 0 24px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.34);
}
.cabinet-back {
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #2f353d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 20%),
    linear-gradient(180deg, #12161b 0%, #0d1014 53%, #0a0c0f 100%);
}
.cabinet-back::before,
.cabinet-back::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 32px;
  width: 5px;
  background: linear-gradient(180deg, #848b94, #2c3239 32%, #7b828b 100%);
  opacity: .72;
}
.cabinet-back::before { left: 7px; }
.cabinet-back::after { right: 7px; }
.meter-row {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.meter-row div { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center; }
.meter-row b { font-size: .42rem; color: #b7bec7; letter-spacing: .08em; }
.meter-row i { height: 5px; border-radius: 9px; background: #262c33; overflow: hidden; position: relative; }
.meter-row i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--fill); background:linear-gradient(90deg,#7d858f,#d8dde3); border-radius:inherit; }
.pusher-plate {
  position: absolute;
  left: 29px;
  right: 29px;
  top: 73px;
  height: 82px;
  border: 1px solid #69717b;
  border-radius: 5px;
  background: linear-gradient(180deg, #606872 0%, #30363d 13%, #1b2026 76%, #7a828c 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,.45), inset 0 1px #a8afb7;
}
.pusher-plate::after {
  content:"";
  position:absolute;
  left:9px; right:9px; bottom:-8px; height:8px;
  background:linear-gradient(180deg,#8a9199,#2b3036);
  border-radius:0 0 3px 3px;
}
.coin-bed { position:absolute; left:20px; right:20px; top:142px; bottom:48px; }
.coin {
  position:absolute;
  width:41px;
  height:18px;
  border-radius:50%;
  background: linear-gradient(180deg,#f0f2f4 0%,#8d949c 30%,#c7ccd1 55%,#676e76 100%);
  border:1px solid #e6e8ea;
  box-shadow: 0 5px 7px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.28);
}
.coin::after { content:""; position:absolute; left:15px; top:4px; width:10px; height:8px; transform:rotate(45deg); border:1px solid rgba(60,65,71,.65); background:rgba(235,238,241,.25); }
.coin.gold { background:linear-gradient(180deg,#ffe897,#aa7613 34%,#e9bd44 62%,#76510f); border-color:#f0cb65; }
.coin.blue { background:linear-gradient(180deg,#a7dbff,#317fb4 35%,#69b6ea 65%,#235b7e); border-color:#9ad7ff; }
.coin.red { background:linear-gradient(180deg,#ffb0a7,#b23d34 35%,#e56b5f 65%,#70251f); border-color:#ffaba1; }
.coin.green { background:linear-gradient(180deg,#aaf0c0,#3d9a60 35%,#70ca8d 65%,#275f3d); border-color:#9fe5b5; }
.coin.rainbow { background:linear-gradient(90deg,#ff6666,#ffd45e,#6de58d,#63b8ff,#c878ff); border-color:#f0f0f0; }
.c1{left:10%;top:16%}.c2{left:34%;top:11%}.c3{left:60%;top:17%}.c4{left:18%;top:29%}.c5{left:49%;top:28%}.c6{left:72%;top:33%}.c7{left:4%;top:43%}.c8{left:31%;top:44%}.c9{left:59%;top:47%}.c10{left:77%;top:51%}.c11{left:17%;top:59%}.c12{left:43%;top:61%}.c13{left:67%;top:65%}.c14{left:3%;top:74%}.c15{left:30%;top:76%}.c16{left:53%;top:80%}.c17{left:75%;top:79%}.c18{left:40%;top:91%}
.win-zone {
  position:absolute;
  left:22px; right:22px; bottom:8px; height:26px;
  border-top:1px solid #777f88;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  display:flex; align-items:center; justify-content:center;
}
.win-zone span { font-size:.43rem; letter-spacing:.16em; color:#777f88; font-weight:850; }
.machine-controls {
  height: 63px;
  border-top: 1px solid #343b44;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: linear-gradient(180deg, #101318, #0b0e12);
}
.machine-controls span, .machine-controls strong {
  min-height: 40px;
  display:grid;
  place-items:center;
  border:1px solid #59616a;
  border-radius:8px;
  color:#cbd0d5;
  background:#171b20;
  font-size:.48rem;
  letter-spacing:.035em;
  font-weight:900;
}
.machine-controls span:first-child { border-color:#38bdf8; color:#8bdcff; }
.machine-controls strong { background:#d9dde2; color:#111419; border-color:#eff1f3; font-size:.55rem; }
.machine-controls span:last-child { border-color:#f59e0b; color:#f6b84b; }

@media (max-width: 760px) {
  .hero-art { max-width: 380px; padding: 11px; }
  .machine-preview { min-height: 486px; }
  .machine-stage { height: 352px; padding-left: 56px; padding-right: 56px; }
  .machine-side span { width: 42px; min-height: 35px; font-size: .39rem; }
  .coin { width: 37px; height: 16px; }
}

/* 2026-09-11 landing-page hero refinement */
body {
  background: linear-gradient(180deg, #0d0f12 0%, #090b0e 42%, #050607 100%);
}
.hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .62fr);
  gap: clamp(44px, 7vw, 92px);
  padding: 88px 0 74px;
}
h1 {
  font-size: clamp(3.15rem, 7vw, 6rem);
  line-height: .88;
}
.hero-copy p { max-width: 650px; }
.gameplay-shot.hero-art {
  width: min(100%, 390px);
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #080a0d;
  border: 1px solid #4b515a;
  box-shadow: 0 26px 58px rgba(0,0,0,.46);
}
.gameplay-crop {
  height: 520px;
  overflow: hidden;
  background: #000;
}
.gameplay-shot img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-58px) scale(1.075);
  transform-origin: top center;
}
.gameplay-label {
  padding: 8px 10px 9px;
  border-top: 1px solid #2a2f36;
  color: #8f98a4;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
}
.hero + .section { border-top: 1px solid #343a42; }
#purchases { border-top: 1px solid #343a42; }
.site-footer { border-top: 1px solid #343a42; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .gameplay-shot.hero-art { width: min(88vw, 340px); }
  .gameplay-crop { height: 455px; }
  .gameplay-shot img { transform: translateY(-48px) scale(1.07); }
}


/* 2026-09-11 hero screenshot balance pass */
.hero {
  grid-template-columns: minmax(0, 1.18fr) minmax(250px, .58fr);
  gap: clamp(46px, 7vw, 94px);
  align-items: center;
}
.hero-copy {
  max-width: 690px;
}
.hero-copy p {
  max-width: 650px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: clamp(1rem, 1.85vw, 1.14rem);
}
.hero-copy p + p {
  margin-top: 4px;
}
.hero-copy .actions {
  margin-top: 24px;
}
.gameplay-shot.hero-art {
  width: min(100%, 286px);
  border-radius: 15px;
  justify-self: center;
}
.gameplay-crop {
  height: 548px;
  overflow: hidden;
  background: #000;
}
.gameplay-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
}
.gameplay-label {
  padding: 7px 8px 8px;
  font-size: .58rem;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 38px; }
  .gameplay-shot.hero-art { width: min(72vw, 286px); }
  .gameplay-crop { height: auto; aspect-ratio: 472 / 938; }
  .gameplay-shot img { width: 100%; height: 100%; object-fit: cover; }
}

/* 2026-09-11 user-cropped gameplay hero */
.gameplay-shot.hero-art {
  width: min(100%, 270px);
}
.gameplay-crop {
  height: auto;
  aspect-ratio: 480 / 801;
}
.gameplay-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
@media (max-width: 760px) {
  .gameplay-shot.hero-art { width: min(68vw, 270px); }
  .gameplay-crop { aspect-ratio: 480 / 801; }
}

/* 2026-09-11 desktop hero polish */
:root { --max: 1140px; }

.header-inner { min-height: 66px; }
nav { gap: 20px; }
.header-cta {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #4b535d;
  border-radius: 8px;
  color: var(--text);
  font-weight: 750;
  background: #11151a;
}
.header-cta:hover,
.header-cta:focus-visible {
  border-color: #7a838e;
  background: #161b21;
}

.hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
  gap: clamp(34px, 4.7vw, 62px);
  padding: 72px 0 68px;
}
.hero-copy { max-width: 675px; }
h1 {
  margin: 15px 0 20px;
  font-size: clamp(3.15rem, 6.35vw, 5.75rem);
  line-height: .89;
}
.hero-copy p {
  max-width: 640px;
  line-height: 1.58;
}
.hero-copy p + p { margin-top: 10px; }
.hero-copy .actions { margin-top: 25px; }

.gameplay-shot.hero-art {
  width: min(100%, 302px);
  justify-self: start;
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.02);
}
.gameplay-label {
  letter-spacing: .17em;
  color: #a5acb5;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
    gap: 34px;
  }
  .gameplay-shot.hero-art { width: min(100%, 280px); }
}

@media (max-width: 760px) {
  nav .header-cta { display: none; }
  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 54px 0 58px;
  }
  .hero-copy { max-width: 100%; }
  h1 { font-size: clamp(3rem, 17vw, 5rem); }
  .gameplay-shot.hero-art {
    width: min(72vw, 290px);
    justify-self: center;
  }
}

/* 2026-09-11 compact hero + branded header mark */
.brand {
  gap: 11px;
  font-size: 1rem;
  letter-spacing: .07em;
}
.brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 5px 14px rgba(0,0,0,.38);
}
.brand-wordmark {
  display: inline-block;
  color: #eef1f4;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

/* The gameplay image should support the hero copy, not be taller than it. */
.gameplay-shot.hero-art {
  width: min(100%, 286px);
  justify-self: start;
}
.gameplay-crop {
  height: 428px;
  aspect-ratio: auto;
}
.gameplay-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.gameplay-label {
  padding: 6px 8px 7px;
  font-size: .55rem;
}

@media (max-width: 900px) {
  .gameplay-shot.hero-art { width: min(100%, 268px); }
  .gameplay-crop { height: 402px; }
}

@media (max-width: 760px) {
  .brand-logo { width: 34px; height: 34px; flex-basis: 34px; }
  .brand { font-size: .9rem; }
  .gameplay-shot.hero-art { width: min(70vw, 270px); }
  .gameplay-crop { height: 404px; aspect-ratio: auto; }
}

/* 2026-09-11 compact gameplay alignment pass */
.hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(285px, .50fr);
  gap: clamp(30px, 4vw, 54px);
  align-items: center;
}
.hero-copy {
  max-width: 690px;
}
.hero-copy p {
  max-width: 665px;
}
.gameplay-shot.hero-art {
  width: min(100%, 300px);
  justify-self: center;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #050607;
  border-color: #444b54;
}
.gameplay-crop {
  position: relative;
  height: auto;
  aspect-ratio: 480 / 665;
  overflow: hidden;
  background: #000;
}
.gameplay-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.gameplay-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid rgba(150,160,172,.42);
  border-radius: 6px;
  background: rgba(5,7,9,.78);
  backdrop-filter: blur(6px);
  color: #c0c6ce;
  font-size: .52rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .13em;
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(255px, .48fr);
    gap: 30px;
  }
  .gameplay-shot.hero-art { width: min(100%, 276px); }
}
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .gameplay-shot.hero-art {
    width: min(76vw, 300px);
    justify-self: center;
  }
}