/* ============================================================
   MinePredict AI — design system + prediction-engine graphics
   Elevated matrix / cyber · probability heat-map · gems + bombs
   ============================================================ */
:root{
  --bg:hsl(200 35% 5%); --bg-2:hsl(202 32% 7%); --surface:hsl(202 30% 9%); --surface-2:hsl(202 28% 12%);
  --line:hsl(150 40% 18%); --line-soft:hsl(200 20% 16%);
  --green:hsl(146 100% 54%); --green-dim:hsl(146 70% 38%); --green-glow:hsl(146 100% 70%);
  --cyan:hsl(180 100% 52%); --amber:hsl(38 100% 58%); --gold:hsl(45 100% 56%);
  --red:hsl(0 85% 62%); --red-glow:hsl(0 95% 70%);
  --fg:hsl(150 35% 94%); --fg-dim:hsl(155 18% 70%); --fg-mute:hsl(160 12% 52%);
  --grad-primary:linear-gradient(135deg, var(--green), var(--cyan));
  --grad-text:linear-gradient(120deg, var(--green-glow), var(--cyan));
  --grad-gold:linear-gradient(135deg, var(--gold), var(--amber));
  --grad-surface:linear-gradient(160deg, hsl(202 30% 11% / .92), hsl(202 34% 7% / .92));
  --glow-green:0 0 0 1px hsl(146 100% 54% / .25), 0 0 28px hsl(146 100% 50% / .22);
  --glow-red:0 0 0 1px hsl(0 85% 62% / .35), 0 0 26px hsl(0 90% 55% / .35);
  --glow-gem:0 0 18px hsl(150 100% 55% / .55);
  --sans:'Chakra Petch', system-ui, sans-serif; --body:'Sora', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
  --radius:16px; --maxw:1160px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body); background:var(--bg); color:var(--fg); line-height:1.6; overflow-x:hidden; position:relative; min-height:100vh; }
::selection{ background:hsl(146 100% 54% / .3); color:#fff; }
img,svg{ display:block; }
a{ color:inherit; }

/* background fx */
.bg-fx{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.bg-fx .grid{ position:absolute; inset:-2px;
  background-image:linear-gradient(hsl(150 60% 50% / .045) 1px, transparent 1px),linear-gradient(90deg, hsl(150 60% 50% / .045) 1px, transparent 1px);
  background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 80%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 80%); }
.bg-fx .glow-a,.bg-fx .glow-b{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; }
.bg-fx .glow-a{ top:-180px; left:50%; transform:translateX(-50%); width:680px; height:480px; background:radial-gradient(circle, hsl(146 100% 45% / .35), transparent 70%); }
.bg-fx .glow-b{ bottom:-200px; right:-120px; width:520px; height:520px; background:radial-gradient(circle, hsl(180 100% 45% / .22), transparent 70%); }
.bg-fx .scan{ position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 3px, hsl(0 0% 0% / .14) 3px 4px); mix-blend-mode:overlay; opacity:.5; }
/* vignette + film grain for depth */
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 120% 95% at 50% -5%, transparent 52%, hsl(200 45% 3% / .6) 100%); }
body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* custom scrollbar */
*{ scrollbar-width:thin; scrollbar-color:hsl(150 45% 26%) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:hsl(150 42% 22%); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--green-dim); }

/* HUD corner brackets */
.cb{ position:absolute; width:15px; height:15px; border:2px solid hsl(180 100% 60% / .55); pointer-events:none; z-index:3; border-radius:2px; }
.cb.tl{ top:9px; left:9px; border-right:0; border-bottom:0; }
.cb.tr{ top:9px; right:9px; border-left:0; border-bottom:0; }
.cb.bl{ bottom:9px; left:9px; border-right:0; border-top:0; }
.cb.br{ bottom:9px; right:9px; border-left:0; border-top:0; }
.cb.gold{ border-color:hsl(45 100% 60% / .55); }
.premium-card{ position:relative; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }

/* type */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; line-height:1.12; letter-spacing:-.005em; }
h1{ letter-spacing:-.01em; }
.grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-gold{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mono{ font-family:var(--mono); }
.eyebrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:8px; }
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--green); display:inline-block; }

/* buttons */
.btn{ font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.01em; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.95em 1.6em; border-radius:12px; border:none; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .25s ease, filter .2s ease; position:relative; white-space:nowrap; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--grad-primary); color:hsl(200 40% 6%); box-shadow:0 6px 24px hsl(146 100% 45% / .35); }
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 8px 34px hsl(146 100% 50% / .5); transform:translateY(-2px); }
.btn-ghost{ background:hsl(150 40% 50% / .06); color:var(--fg); border:1px solid var(--line); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); box-shadow:var(--glow-green); }
.btn-gold{ background:var(--grad-gold); color:hsl(36 60% 10%); box-shadow:0 6px 24px hsl(38 100% 50% / .32); }
.btn-gold:hover{ filter:brightness(1.07); transform:translateY(-2px); }
.btn-lg{ padding:1.1em 2em; font-size:1.08rem; }
.btn-block{ width:100%; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 hsl(146 100% 54% / .7); animation:pulse 1.8s infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 hsl(146 100% 54% / .6);} 70%{ box-shadow:0 0 0 8px hsl(146 100% 54% / 0);} 100%{ box-shadow:0 0 0 0 hsl(146 100% 54% / 0);} }

/* header */
header.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:hsl(200 35% 5% / .72); border-bottom:1px solid var(--line-soft); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; color:var(--fg); text-decoration:none; }
.logo .mark{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--grad-primary); box-shadow:var(--glow-green); }
.logo .mark svg{ width:20px; height:20px; }
.logo b{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:none; gap:26px; margin-inline:auto; }
.nav-links a{ font-size:.92rem; color:var(--fg-dim); text-decoration:none; transition:color .2s; }
.nav-links a:hover{ color:var(--green); }
@media(min-width:900px){ .nav-links{ display:flex; } }
.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-live{ display:none; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; color:var(--fg-dim); }
@media(min-width:760px){ .nav-live{ display:flex; } }
.nav-cta{ padding:.6em 1.2em; font-size:.92rem; }

/* hero */
.hero{ padding:46px 0 26px; }
.hero-grid{ display:grid; gap:34px; }
@media(min-width:980px){ .hero-grid{ grid-template-columns:1fr 1.05fr; align-items:center; gap:44px; } .hero{ padding:60px 0 34px; } }
.hero h1{ font-size:clamp(2.1rem,5.6vw,3.3rem); margin:16px 0 14px; }
.hero p.lead{ font-size:clamp(1.02rem,2.3vw,1.16rem); color:var(--fg-dim); max-width:46ch; }
.hero .lead b{ color:var(--fg); }
.hero-cta{ margin-top:26px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:24px; }
.hero-trust .ht{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; color:var(--fg-mute); }
.hero-trust .ht svg{ width:16px; height:16px; color:var(--green); flex:none; }
/* hero graphic (illustrative board, no controls) */
.hero-engine .hero-board{ padding:18px; }
.hero-engine .pboard{ gap:9px; }
.hero-cap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:14px;
  font-family:var(--mono); font-size:.78rem; color:var(--fg-dim); }
.hero-cap b{ color:var(--green); font-weight:700; }
.hero-cap .cap-keys{ display:inline-flex; align-items:center; gap:14px; }
.hero-cap .cap-k{ display:inline-flex; align-items:center; gap:7px; color:var(--fg-mute); }
.hero-cap .cap-k i{ width:11px; height:11px; border-radius:3px; flex:none; }
.hero-cap .cap-k.safe i{ background:hsl(146 100% 50% / .55); box-shadow:0 0 8px hsl(146 100% 50% / .6); }
.hero-cap .cap-k.avoid i{ background:hsl(0 80% 58%); box-shadow:0 0 8px hsl(0 85% 55% / .5); }
.hero-cap .cap-k.avoid b{ color:hsl(0 85% 72%); }

/* ============================================================
   PREDICTION ENGINE PANEL  (not a game — an analysis tool)
   ============================================================ */
.engine{ background:var(--grad-surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 30px 80px hsl(0 0% 0% / .5), var(--glow-green); overflow:hidden; position:relative; }
.engine::before{ content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1px;
  background:linear-gradient(160deg, hsl(146 100% 54% / .5), transparent 40%, hsl(180 100% 52% / .35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.engine-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line-soft); background:hsl(200 35% 6% / .6); }
.engine-title{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:.95rem; }
.engine-title svg{ width:20px; height:20px; color:var(--green); }
.engine-title small{ font-family:var(--mono); font-size:.64rem; color:var(--cyan); letter-spacing:.1em; text-transform:uppercase; }
.engine-status{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.72rem; color:var(--green); }
.engine-body{ padding:18px; display:grid; gap:16px; }
@media(min-width:560px){ .engine-body{ grid-template-columns:1fr 158px; align-items:start; } }

/* ---- engine tool: two-zone layout (controls | live output) ---- */
.engine-tool{ max-width:940px; margin-inline:auto; }
.engine-grid{ display:grid; gap:20px; padding:20px; }
@media(min-width:840px){ .engine-grid{ grid-template-columns:minmax(0,360px) 1fr; align-items:start; gap:26px; } }
.engine-ctrl{ display:flex; flex-direction:column; min-width:0; }
.engine-ctrl .use-steps{ margin:0 0 16px; }
.ctrl-mines{ margin-top:16px; }
.ctrl-mines .field-label{ margin-top:0; }

/* in-engine flow stepper (register → email → predict) */
.flow-steps{ list-style:none; display:grid; gap:0; margin:0 0 18px; padding:16px 16px 18px; border:1px solid var(--line-soft); border-radius:13px; background:hsl(200 40% 4% / .4); }
.flow-steps .fstep{ position:relative; display:flex; align-items:flex-start; gap:12px; padding-bottom:16px; }
.flow-steps .fstep:last-child{ padding-bottom:0; }
.flow-steps .fstep:not(:last-child)::before{ content:''; position:absolute; left:12px; top:25px; bottom:1px; width:2px;
  background:linear-gradient(hsl(146 100% 54% / .55), hsl(146 100% 54% / .1)); }
.flow-steps .us-n{ position:relative; z-index:1; flex:none; width:25px; height:25px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.76rem; font-weight:700; color:hsl(200 40% 6%); background:var(--grad-primary); box-shadow:0 0 0 4px hsl(200 40% 4%); }
.flow-steps .fs-tx{ display:flex; flex-direction:column; gap:2px; padding-top:1px; flex:1; min-width:0; }
.flow-steps .fs-tx b{ font-family:var(--sans); font-size:.95rem; color:var(--fg); font-weight:600; line-height:1.25; }
.flow-steps .fs-tx span{ font-size:.79rem; color:var(--fg-mute); line-height:1.35; }
.flow-steps .fstep.accent .fs-tx b{ color:var(--green); }
.flow-steps .fs-go{ flex:none; align-self:center; font-family:var(--sans); font-weight:600; font-size:.82rem; color:hsl(200 40% 6%);
  background:var(--grad-primary); border:none; border-radius:9px; padding:8px 13px; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 14px hsl(146 100% 45% / .3), inset 0 1px 0 hsl(150 100% 86% / .5); transition:filter .15s, transform .15s; }
.flow-steps .fs-go:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.flow-steps .fs-go:active{ transform:translateY(0); }
/* output column */
.engine-out{ display:grid; gap:14px; min-width:0; }
@media(min-width:480px){ .engine-out{ grid-template-columns:1fr; } }
.board-wrap{ position:relative; background:hsl(200 40% 4% / .55); border:1px solid var(--line-soft); border-radius:14px; padding:14px; transition:border-color .25s, box-shadow .25s; }
.board-wrap.scanning{ border-color:hsl(146 100% 54% / .45); box-shadow:inset 0 0 30px hsl(146 100% 45% / .12), 0 0 24px hsl(146 100% 45% / .12); }
.board-tag{ display:flex; align-items:center; gap:7px; margin-bottom:12px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
.board-tag svg{ width:13px; height:13px; color:var(--cyan); }
.board-wrap.scanning .board-tag{ color:var(--green); }
.engine-out .pboard{ gap:9px; }
@media(min-width:600px){ .engine-out .pboard{ gap:11px; } }

/* board AI-scan sweep (during analysis) */
.pboard-stage{ position:relative; border-radius:10px; }
.board-scan{ position:absolute; inset:0; border-radius:10px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .25s; z-index:4; }
.board-wrap.scanning .board-scan{ opacity:1; }
.board-scan::before{ content:''; position:absolute; left:-2px; right:-2px; height:42%;
  background:linear-gradient(hsl(146 100% 50% / 0), hsl(146 100% 50% / .18) 72%, hsl(146 100% 62% / .42));
  border-bottom:1.5px solid hsl(146 100% 64% / .85); box-shadow:0 0 24px hsl(146 100% 50% / .5);
  animation:scan-sweep 1.3s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes scan-sweep{ 0%{ transform:translateY(-45%); } 100%{ transform:translateY(265%); } }

/* heat-map board */
.pboard{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.ptile{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:linear-gradient(160deg, hsl(202 26% 15%), hsl(202 30% 10%)); border:1px solid hsl(200 20% 22%);
  box-shadow:inset 0 1px 0 hsl(200 30% 30% / .35), inset 0 -3px 6px hsl(0 0% 0% / .35); }
.ptile .face{ width:38%; height:38%; display:grid; place-items:center; opacity:0; transform:scale(.4) rotateY(90deg); }
.ptile .face svg{ width:100%; height:100%; }
.ptile.reveal .face{ animation:tile-flip .4s ease forwards; }
.ptile .pval{ font-family:var(--mono); font-weight:600; color:var(--fg-mute); line-height:1; }
.ptile .spark{ position:absolute; top:7%; right:7%; width:26%; height:26%; color:var(--green-glow); opacity:0; }

/* tier 1 — SAFE PICK: bright gem + filled confidence chip */
.ptile.safe{ background:linear-gradient(160deg, hsl(146 100% 50% / .22), hsl(160 80% 30% / .1)); border-color:hsl(146 100% 54% / .65); box-shadow:inset 0 0 18px hsl(146 100% 50% / .28), var(--glow-gem); }
.ptile.safe .face{ color:var(--green); width:42%; height:42%; }
.ptile.safe .pval{ font-size:.62rem; font-weight:700; color:hsl(146 100% 7%); background:var(--green); padding:2px 8px; border-radius:99px; box-shadow:0 0 10px hsl(146 100% 50% / .45); }
.ptile.safe .spark{ animation:sparkle 1.6s ease-in-out .35s infinite; }

/* tier 2 — MINE: clear red "avoid" tile */
.ptile.danger{ background:linear-gradient(160deg, hsl(0 80% 55% / .18), hsl(0 60% 25% / .12)); border-color:hsl(0 85% 62% / .5); box-shadow:inset 0 0 18px hsl(0 85% 55% / .28); }
.ptile.danger .face{ color:var(--red); width:42%; height:42%; }
.ptile.danger .pval{ font-size:.62rem; font-weight:700; color:#fff; background:hsl(0 78% 52%); padding:2px 8px; border-radius:99px; }

/* tier 3 — NEUTRAL: scanned, calm, recedes into the background */
.ptile.neutral{ opacity:.5; }
.ptile.neutral .face,.ptile.neutral .spark{ display:none; }
.ptile.neutral .pval{ font-size:.78rem; font-weight:600; color:hsl(155 12% 58%); }
/* locked safe tile (register on Ivybet to reveal) */
.ptile .lockico{ position:absolute; inset:0; display:none; place-items:center; pointer-events:none; z-index:2; }
.ptile.locked .lockico{ display:grid; }
.ptile.locked .lockico svg{ width:38%; height:38%; color:var(--green-glow); filter:drop-shadow(0 0 6px hsl(146 100% 50% / .7)); }
.ptile.locked .face{ filter:blur(5px); opacity:.55; }
.ptile.locked .spark{ display:none; }
.ptile.locked{ box-shadow:inset 0 0 18px hsl(146 100% 50% / .2); }

/* readout: confidence banner + stat chips */
.readout{ display:flex; flex-direction:column; gap:12px; }
.ro-status{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:7px; }
.ro-big{ position:relative; text-align:center; border-radius:14px; padding:18px 14px 16px;
  background:radial-gradient(120% 100% at 50% 0%, hsl(146 100% 50% / .12), hsl(200 40% 4% / .65) 70%);
  border:1px solid hsl(146 100% 54% / .28); box-shadow:inset 0 0 30px hsl(146 100% 45% / .1); }
.ro-big .ro-status{ margin-bottom:10px; }
.ro-big b{ font-family:var(--sans); font-size:2.7rem; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; filter:drop-shadow(0 0 14px hsl(150 100% 55% / .35)); }
.ro-big .ro-cap{ font-family:var(--mono); font-size:.62rem; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.14em; margin-top:8px; display:block; }
.ro-rows{ display:grid; gap:8px; }
@media(min-width:480px){ .ro-rows{ grid-template-columns:repeat(3,1fr); } }
.ro-row{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:11px; background:hsl(200 35% 7% / .55); border:1px solid var(--line-soft); font-family:var(--mono); font-size:.66rem; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.06em; }
.ro-row b{ color:var(--green); font-size:1.15rem; text-transform:none; letter-spacing:0; }
.ro-row b small{ color:var(--fg-mute); font-weight:400; font-size:.6em; }
.ro-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; padding-top:11px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:.7rem; color:var(--fg-mute); }
.ro-legend .lg{ display:inline-flex; align-items:center; gap:7px; }
.ro-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.ro-legend i.safe{ background:hsl(146 100% 50% / .55); box-shadow:0 0 8px hsl(146 100% 50% / .6); }
.ro-legend i.mine{ background:hsl(0 80% 58%); box-shadow:0 0 8px hsl(0 85% 55% / .5); }
.ro-legend i.neu{ background:hsl(155 13% 38%); }

/* controls */
.field-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:8px; display:block; }
.input-row{ display:flex; gap:10px; }
.input{ flex:1; min-width:0; background:hsl(200 35% 4%); border:1px solid var(--line-soft); border-radius:11px; padding:.85em 1em; color:var(--fg); font-family:var(--mono); font-size:1rem; outline:none; transition:border-color .2s, box-shadow .2s; }
.input::placeholder{ color:var(--fg-mute); }
.input:focus{ border-color:var(--green); box-shadow:0 0 0 3px hsl(146 100% 50% / .15); }
.input.locked{ border-color:hsl(146 100% 54% / .45); color:var(--green); cursor:not-allowed; background:hsl(146 100% 50% / .06); }
.uname-lock{ display:flex; align-items:center; gap:7px; margin-top:8px; font-family:var(--mono); font-size:.74rem; color:var(--green-dim); }
.uname-lock svg{ width:13px; height:13px; color:var(--green); flex:none; }
.mines-select{ display:flex; gap:6px; }
.mines-select .ms{ flex:1; font-family:var(--mono); font-size:.82rem; padding:8px 0; border-radius:9px; border:1px solid var(--line-soft); background:hsl(200 35% 6%); color:var(--fg-dim); cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:4px; }
.mines-select .ms:hover{ border-color:var(--green); color:var(--green); }
.mines-select .ms.active{ border-color:var(--green); color:hsl(200 40% 6%); background:var(--green); font-weight:700; }
.mines-select .ms.locked{ color:var(--gold); border-color:hsl(45 100% 56% / .4); }
.mines-select .ms.locked svg{ width:11px; height:11px; }
.meta-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-family:var(--mono); font-size:.8rem; color:var(--fg-dim); flex-wrap:wrap; }
.remaining b{ color:var(--green); }
.err{ display:none; margin-top:12px; background:hsl(0 80% 55% / .1); border:1px solid hsl(0 80% 60% / .35); color:hsl(0 85% 78%); border-radius:10px; padding:10px 12px; font-family:var(--mono); font-size:.82rem; }
.err.show{ display:block; }

/* analysis terminal */
.analysis{ display:none; margin-top:14px; }
.analysis.show{ display:block; animation:fade .3s ease; }
.term{ background:hsl(200 40% 3%); border:1px solid var(--line-soft); border-radius:11px; padding:12px 14px; font-family:var(--mono); font-size:.8rem; min-height:84px; }
.term .ln{ color:var(--green-dim); display:flex; gap:8px; align-items:center; animation:fade .2s; }
.term .ln::before{ content:'›'; color:var(--cyan); }
.term .ln.active{ color:var(--green); }
.term .ln .ok{ color:var(--green); margin-left:auto; }
.progress{ height:6px; border-radius:99px; background:hsl(200 30% 14%); overflow:hidden; margin-top:12px; }
.progress i{ display:block; height:100%; width:0; background:var(--grad-primary); transition:width .25s ease; box-shadow:0 0 12px hsl(146 100% 50% / .6); }

.result-cta{ display:none; margin-top:14px; }
.result-cta.show{ display:block; animation:fade .4s ease; }
.result-hint{ text-align:center; font-family:var(--mono); font-size:.76rem; color:var(--fg-mute); margin-top:10px; }
.badge-preview{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.74rem; color:var(--gold); background:hsl(45 100% 56% / .1); border:1px solid hsl(45 100% 56% / .3); padding:5px 11px; border-radius:99px; margin-bottom:10px; }
.badge-preview svg{ width:13px; height:13px; }
.badge-preview.ok{ color:var(--green); background:hsl(146 100% 50% / .1); border-color:hsl(146 100% 54% / .35); }
.pred-timer{ display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 12px; font-family:var(--mono); font-size:.8rem; color:var(--amber); }
.pred-timer svg{ width:14px; height:14px; }
.pred-timer b{ color:var(--amber); }

/* engine telemetry bar */
.engine-tele{ display:flex; flex-wrap:wrap; gap:8px 16px; padding:10px 16px; border-bottom:1px solid var(--line-soft);
  background:hsl(200 40% 4% / .5); font-family:var(--mono); font-size:.7rem; color:var(--fg-mute); letter-spacing:.02em; }
.engine-tele span{ display:inline-flex; align-items:center; gap:5px; }
.engine-tele span + span{ position:relative; padding-left:16px; }
.engine-tele span + span::before{ content:'·'; position:absolute; left:5px; color:var(--line); }
.engine-tele b{ color:var(--green); } .engine-tele small{ color:var(--fg-mute); }

/* scan meta (live seed + rounds during analysis) */
.scan-meta{ margin-top:9px; font-family:var(--mono); font-size:.72rem; color:var(--fg-mute); letter-spacing:.02em; min-height:1em; }
.scan-meta b{ color:var(--cyan); }

/* proof + trust row */
.proof-row{ max-width:880px; margin:0 auto; display:grid; gap:14px; }
.results-proof{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px;
  background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:13px; padding:14px 18px; }
.rp-label{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.76rem; color:var(--fg-dim); }
.rp-label svg{ width:14px; height:14px; color:var(--green); }
.rp-dots{ display:inline-flex; gap:3px; }
.rp-dots i{ width:8px; height:13px; border-radius:2px; background:var(--green); box-shadow:0 0 5px hsl(146 100% 50% / .5); }
.rp-dots i.miss{ background:hsl(0 80% 58%); box-shadow:none; opacity:.8; }
.rp-stat{ font-family:var(--mono); font-size:.78rem; color:var(--fg-mute); }
.rp-stat b{ color:var(--green); font-size:.92rem; }
.trust-badges{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(min-width:760px){ .trust-badges{ grid-template-columns:repeat(4,1fr); } }
.trust-badges span{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--fg-dim);
  background:hsl(200 30% 8% / .5); border:1px solid var(--line-soft); border-radius:10px; padding:11px 12px; line-height:1.25; }
.trust-badges svg{ width:18px; height:18px; color:var(--green); flex:none; }

/* live feed */
.feed{ border-block:1px solid var(--line-soft); background:hsl(146 100% 50% / .04); overflow:hidden; }
.feed .track{ display:flex; gap:40px; padding:11px 0; white-space:nowrap; width:max-content; animation:marquee 42s linear infinite; font-family:var(--mono); font-size:.82rem; }
.feed .it{ display:inline-flex; align-items:center; gap:8px; color:var(--fg-dim); }
.feed .it b{ color:var(--green); } .feed .it .u{ color:var(--cyan); } .feed .it svg{ width:13px; height:13px; color:var(--green); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* sections */
section.blk{ padding:60px 0; }
.sec-head{ text-align:center; max-width:640px; margin:0 auto 42px; }
.sec-head h2{ font-size:clamp(1.7rem,4vw,2.4rem); margin:14px 0 12px; }
.sec-head p{ color:var(--fg-dim); }

/* steps */
.steps{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 22px; position:relative; transition:border-color .25s, transform .25s; }
.step:hover{ border-color:var(--green); transform:translateY(-4px); box-shadow:var(--glow-green); }
.step .n{ font-family:var(--mono); font-size:.8rem; color:var(--cyan); }
.step .mini{ margin:14px 0 14px; }
.step h3{ font-size:1.1rem; margin-bottom:8px; }
.step p{ color:var(--fg-dim); font-size:.92rem; }
.mini-board{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; width:112px; }
.mini-board .mt{ aspect-ratio:1; border-radius:5px; background:hsl(202 26% 15%); border:1px solid hsl(200 20% 22%); display:grid; place-items:center; font-family:var(--mono); font-size:.42rem; color:var(--fg-mute); }
.mini-board .mt svg{ width:62%; height:62%; }
.mini-board .mt.gem{ background:hsl(146 100% 50% / .15); border-color:hsl(146 100% 54% / .5); color:var(--green); box-shadow:0 0 8px hsl(146 100% 50% / .3); }
.mini-board .mt.mine{ background:hsl(0 80% 55% / .14); border-color:hsl(0 85% 62% / .45); color:var(--red); }

/* under the hood */
.tech-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:640px){ .tech-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .tech-grid{ grid-template-columns:repeat(4,1fr); } }
.tech-card{ background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px 20px; transition:border-color .25s, transform .25s; }
.tech-card:hover{ border-color:var(--line); transform:translateY(-3px); }
.tech-card .tc-ic{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:hsl(146 100% 50% / .1); border:1px solid hsl(146 100% 54% / .3); margin-bottom:14px; }
.tech-card .tc-ic svg{ width:20px; height:20px; color:var(--green); }
.tech-card h3{ font-size:1rem; margin-bottom:8px; }
.tech-card p{ color:var(--fg-dim); font-size:.88rem; line-height:1.5; }
.tech-card b{ color:var(--green); }

/* supported casinos */
.casino-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:760px){ .casino-grid{ grid-template-columns:repeat(3,1fr); } }
.casino-card{ position:relative; display:flex; flex-direction:column; background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 22px; text-decoration:none; color:var(--fg); transition:border-color .25s, transform .25s, box-shadow .25s; }
.casino-card.live{ border-color:hsl(146 100% 54% / .35); }
.casino-card.live:hover{ border-color:var(--green); transform:translateY(-3px); box-shadow:var(--glow-green); }
.casino-card.soon{ opacity:.6; }
.casino-card .cc-badge{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); background:hsl(146 100% 50% / .1); border:1px solid hsl(146 100% 54% / .3); padding:5px 11px; border-radius:99px; }
.casino-card .cc-badge.soon{ color:var(--fg-mute); background:hsl(200 20% 50% / .08); border-color:var(--line-soft); }
.casino-card .cc-badge svg{ width:13px; height:13px; }
.casino-card .cc-logo{ font-family:var(--sans); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; margin:18px 0 12px; color:var(--fg); }
.casino-card .cc-logo small{ color:var(--green); font-size:1rem; font-weight:600; }
.casino-card .cc-logo.locked{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; border:1px dashed var(--line-soft); margin-bottom:14px; }
.casino-card .cc-logo.locked svg{ width:24px; height:24px; color:var(--fg-mute); }
.casino-card .cc-desc{ color:var(--fg-dim); font-size:.9rem; line-height:1.5; flex:1; margin:0; }
.casino-card .cc-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--green); }
.casino-card .cc-cta svg{ width:16px; height:16px; }
.casino-card .cc-cta.muted{ color:var(--fg-mute); }

/* sticky mobile CTA */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:hsl(200 38% 6% / .92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -8px 30px hsl(0 0% 0% / .5); }
.sticky-cta.show{ display:flex; animation:slideUp .35s ease; }
.sticky-cta .sc-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.sticky-cta .sc-text b{ font-family:var(--sans); font-size:.92rem; }
.sticky-cta .sc-text span{ font-size:.74rem; color:var(--fg-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .btn{ padding:.7em 1.2em; font-size:.92rem; flex:none; }
@keyframes slideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media(min-width:760px){ .sticky-cta.show{ display:none; } } /* mobile only */

/* comparison */
.compare{ max-width:760px; margin:0 auto; background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.compare .row{ display:grid; grid-template-columns:1.3fr 1fr 1fr; align-items:center; }
.compare .row + .row{ border-top:1px solid var(--line-soft); }
.compare .row > div{ padding:15px 14px; }
.compare .row.head > div{ font-family:var(--sans); font-weight:700; text-align:center; }
.compare .row.head .free{ color:var(--fg-dim); }
.compare .row.head .prem{ color:var(--gold); }
.compare .feat{ font-family:var(--body); color:var(--fg-dim); font-size:.92rem; }
.compare .free,.compare .prem{ text-align:center; font-family:var(--mono); font-size:.86rem; }
.compare .free{ color:var(--fg-mute); } .compare .prem{ color:var(--green); background:hsl(146 100% 50% / .05); }
.compare .x{ color:var(--red); } .compare .v{ color:var(--green); }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:center; background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:14px; padding:22px 14px; }
.stat b{ font-family:var(--sans); font-size:clamp(1.7rem,4vw,2.2rem); background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.stat span{ font-family:var(--mono); font-size:.72rem; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.1em; }

/* premium */
.premium-card{ background:linear-gradient(160deg, hsl(45 60% 10% / .5), hsl(202 34% 8% / .92)); border:1px solid hsl(45 100% 55% / .35); border-radius:var(--radius); padding:34px 28px; box-shadow:0 24px 60px hsl(0 0% 0% / .45), 0 0 0 1px hsl(45 100% 55% / .12); max-width:780px; margin-inline:auto; }
.premium-card .tag{ display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); border:1px solid hsl(45 100% 55% / .4); padding:5px 11px; border-radius:99px; margin-bottom:14px; }
.premium-card h2{ font-size:clamp(1.6rem,4vw,2.2rem); }
.price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:18px 0; }
.price b{ font-family:var(--sans); font-size:2.8rem; color:var(--fg); line-height:1; }
.price s{ color:var(--fg-mute); font-family:var(--mono); }
.price .save{ font-family:var(--mono); font-size:.8rem; color:hsl(36 60% 12%); background:var(--grad-gold); padding:4px 10px; border-radius:99px; font-weight:700; }
.price .once{ font-family:var(--mono); font-size:.74rem; color:var(--fg-mute); width:100%; }
.perks{ list-style:none; display:grid; gap:11px; margin:18px 0 24px; }
.perks li{ display:flex; gap:11px; align-items:center; color:var(--fg-dim); font-size:.95rem; }
.perks li svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.ptimer{ font-family:var(--mono); font-size:.82rem; color:var(--gold); text-align:center; margin-top:14px; }

/* faq */
.faq{ max-width:760px; margin-inline:auto; display:grid; gap:12px; }
.qa{ background:var(--grad-surface); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; transition:border-color .2s; }
.qa[open]{ border-color:var(--line); }
.qa summary{ list-style:none; cursor:pointer; padding:18px 20px; font-family:var(--sans); font-weight:600; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .plus{ flex:none; color:var(--green); font-size:1.3rem; transition:transform .25s; font-family:var(--mono); }
.qa[open] summary .plus{ transform:rotate(45deg); }
.qa .ans{ padding:0 20px 18px; color:var(--fg-dim); font-size:.94rem; }

/* disclaimer + footer */
.disclaimer{ background:hsl(0 60% 50% / .05); border:1px solid hsl(0 60% 55% / .22); border-radius:var(--radius); padding:22px 26px; display:flex; gap:16px; align-items:flex-start; max-width:880px; margin:0 auto; }
.disclaimer svg{ width:26px; height:26px; color:var(--red); flex:none; }
.disclaimer h3{ font-size:1.05rem; margin-bottom:6px; color:hsl(0 80% 80%); }
.disclaimer p{ color:var(--fg-dim); font-size:.86rem; }
footer{ border-top:1px solid var(--line-soft); padding:38px 0 54px; margin-top:28px; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center; }
footer .small{ color:var(--fg-mute); font-size:.82rem; max-width:60ch; margin-top:12px; }
footer .reset{ font-family:var(--mono); font-size:.8rem; color:var(--fg-dim); margin-top:10px; }
footer .reset b{ color:var(--green); }
.age{ flex:none; width:46px; height:46px; border-radius:50%; border:2px solid var(--red); color:hsl(0 85% 72%); display:grid; place-items:center; font-family:var(--sans); font-weight:700; }

/* modals */
.modal-back{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:hsl(200 40% 2% / .8); backdrop-filter:blur(6px); }
.modal-back.open{ display:flex; animation:fade .25s ease; }
.modal{ width:100%; max-width:440px; background:var(--grad-surface); border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:0 30px 80px hsl(0 0% 0% / .6), var(--glow-green); text-align:center; position:relative; animation:pop-in .3s ease; }
.modal.gold{ box-shadow:0 30px 80px hsl(0 0% 0% / .6), 0 0 0 1px hsl(45 100% 55% / .3), 0 0 40px hsl(45 100% 50% / .2); border-color:hsl(45 100% 55% / .4); }
.modal .close{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:8px; border:1px solid var(--line-soft); background:transparent; color:var(--fg-dim); cursor:pointer; font-size:1rem; }
.modal .close:hover{ color:var(--fg); border-color:var(--line); }
.modal .m-ico{ width:58px; height:58px; border-radius:14px; margin:0 auto 16px; display:grid; place-items:center; background:hsl(45 100% 55% / .12); }
.modal .m-ico svg{ width:30px; height:30px; color:var(--gold); }
.modal .m-ico.green{ background:hsl(146 100% 50% / .12); }
.modal .m-ico.green svg{ color:var(--green); }
.modal .perks.green li svg{ color:var(--green); }
.email-form{ display:flex; flex-direction:column; gap:12px; text-align:left; margin-top:4px; }
.email-form .input{ width:100%; text-align:center; font-family:var(--body); }
.email-form .optin{ display:flex; align-items:flex-start; gap:9px; font-size:.82rem; color:var(--fg-dim); cursor:pointer; line-height:1.4; }
.email-form .optin input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin-top:1px; border:1px solid var(--line); border-radius:5px; background:hsl(200 35% 4%); cursor:pointer; position:relative; transition:.15s; }
.email-form .optin input:checked{ background:var(--green); border-color:var(--green); }
.email-form .optin input:checked::after{ content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:hsl(200 40% 6%); font-size:.78rem; font-weight:700; }
/* "how to use" numbered guide inside the engine */
.use-steps{ list-style:none; display:grid; gap:9px; margin:0 0 4px; padding:15px 17px; border:1px solid var(--line-soft); border-radius:12px; background:hsl(146 100% 50% / .04); }
.use-steps li{ display:flex; align-items:flex-start; gap:11px; font-size:.9rem; color:var(--fg-dim); line-height:1.45; }
.use-steps li b{ color:var(--fg); font-weight:600; }
.use-steps .us-n{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:.76rem; font-weight:700; color:hsl(200 40% 6%); background:var(--grad-primary); }
.use-steps .us-link{ color:var(--green); font-weight:600; white-space:nowrap; cursor:pointer; }
.use-steps .us-link:hover{ text-decoration:underline; }

/* start guide: steps + the game tile to look for */
.start-guide{ display:grid; gap:18px; grid-template-columns:1fr; align-items:center; }
@media(min-width:600px){ .start-guide{ grid-template-columns:1fr auto; } }
.start-guide .use-steps{ margin:0; }
.game-tile{ margin:0; display:flex; flex-direction:column; align-items:center; gap:9px; justify-self:center; }
.gt-card{ position:relative; width:152px; height:198px; border-radius:16px; overflow:hidden; isolation:isolate;
  background:radial-gradient(125% 80% at 72% 64%, #ff6f93 0%, #ec2060 36%, #b8155f 68%, #6f0d4e 100%);
  box-shadow:0 12px 34px hsl(330 80% 22% / .5), inset 0 0 0 1px hsl(330 100% 82% / .28); }
.gt-card .gt-streak{ position:absolute; top:-34%; left:-22%; width:85%; height:85%; border-radius:50%;
  background:radial-gradient(closest-side, hsl(180 100% 72% / .55), transparent 70%); filter:blur(6px); transform:rotate(-18deg); }
.gt-card .gt-glow{ position:absolute; right:-12%; bottom:-8%; width:75%; height:70%; border-radius:50%;
  background:radial-gradient(closest-side, hsl(8 100% 66% / .45), transparent 72%); filter:blur(4px); }
.gt-brand{ position:absolute; top:14px; left:15px; z-index:2; font-family:var(--mono); font-size:.56rem; font-weight:700; letter-spacing:.2em; color:hsl(180 100% 88%); text-shadow:0 0 9px hsl(180 100% 60% / .85); }
.gt-name{ position:absolute; top:25px; left:14px; z-index:2; font-family:var(--sans); font-size:1.55rem; font-weight:700; color:#fff; letter-spacing:.01em; text-shadow:0 2px 12px hsl(330 60% 12% / .55); }
.gt-bomb{ position:absolute; right:8px; bottom:14px; z-index:2; width:104px; height:104px;
  filter:drop-shadow(0 0 9px hsl(16 100% 60% / .9)) drop-shadow(0 0 3px hsl(40 100% 72% / .85)); }
.gt-heart{ position:absolute; left:15px; bottom:14px; z-index:2; width:18px; height:18px; color:hsl(0 0% 100% / .9); }
.game-tile figcaption{ font-size:.78rem; color:var(--fg-mute); text-align:center; max-width:170px; line-height:1.4; }
.game-tile figcaption b{ color:var(--fg-dim); }

/* ---- mobile polish (phones) ---- */
@media(max-width:559px){
  .engine{ max-width:100%; }
  .engine-body{ padding:14px; }
  .engine-grid{ padding:14px; gap:18px; }
  .pboard{ gap:6px; }
  .engine-out .pboard{ gap:7px; }
  .board-wrap{ padding:11px; }
  .ro-big b{ font-size:2.3rem; }
  .hero-engine .pboard{ gap:7px; }
  .engine-tele{ font-size:.6rem; padding:9px 13px; gap:6px 11px; }
  .engine-title{ font-size:.86rem; }
  .engine-title small{ font-size:.58rem; }
  .hero-visual{ display:none; }              /* drop the big duplicate preview board on phones */
  .start-guide{ gap:0; }
  .start-guide .game-tile{ display:none; }   /* drop the game-tile picture on phones — declutter */
  .use-steps{ padding:13px 14px; gap:10px; }
  .use-steps li{ font-size:.92rem; }
  .input-row{ gap:8px; }
  .input-row .btn{ padding-inline:1em; }
  .readout{ margin-top:2px; }
}

/* engine inline opt-in (under the account-email field) */
.engine-optin{ display:flex; align-items:flex-start; gap:9px; margin-top:11px; font-size:.82rem; color:var(--fg-dim); cursor:pointer; line-height:1.4; }
.engine-optin input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin-top:1px; border:1px solid var(--line); border-radius:5px; background:hsl(200 35% 4%); cursor:pointer; position:relative; transition:.15s; }
.engine-optin input:checked{ background:var(--green); border-color:var(--green); }
.engine-optin input:checked::after{ content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:hsl(200 40% 6%); font-size:.78rem; font-weight:700; }
.email-form .err{ margin-top:0; }
.modal .m-sub{ margin-top:14px; font-family:var(--mono); font-size:.76rem; color:var(--fg-mute); }
.modal .m-sub b{ color:var(--fg-dim); }
.modal .m-sub a{ color:var(--gold); text-decoration:none; }
.modal .m-sub a:hover{ text-decoration:underline; }
.modal h3{ font-size:1.4rem; margin-bottom:8px; }
.modal p{ color:var(--fg-dim); font-size:.92rem; margin-bottom:18px; }
.modal .perks{ text-align:left; margin:0 0 22px; }
.modal .m-price{ font-family:var(--sans); font-weight:700; }
.modal .m-price b{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.modal .pay-badge{ font-family:var(--mono); font-size:.72rem; color:var(--fg-mute); margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; }
.modal .pay-badge svg{ width:14px; height:14px; color:var(--green); }

/* reveal + keyframes */
.reveal-on{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal-on.in{ opacity:1; transform:none; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes pop-in{ from{ opacity:0; transform:scale(.94) translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes tile-flip{ 0%{ opacity:0; transform:scale(.4) rotateY(90deg); } 60%{ opacity:1; transform:scale(1.1) rotateY(0); } 100%{ opacity:1; transform:scale(1) rotateY(0); } }
@keyframes sparkle{ 0%,100%{ opacity:0; transform:scale(.6) rotate(0); } 50%{ opacity:1; transform:scale(1) rotate(40deg); } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .feed .track{ animation:none; }
  .ptile .face{ opacity:1; transform:none; }
}

/* ============ desktop polish pass (2026-06-17) ============ */
.hero h1{ font-size:clamp(2.1rem,5.6vw,3.5rem); }
.hero h1 .grad{ filter:drop-shadow(0 0 16px hsl(150 100% 55% / .35)); }
.hero-trust{ gap:12px 14px; }
.hero-trust .ht{ padding:7px 13px; border:1px solid var(--line-soft); border-radius:99px; background:hsl(150 40% 50% / .045); }
/* button depth: subtle top sheen */
.btn-primary{ box-shadow:0 6px 24px hsl(146 100% 45% / .35), inset 0 1px 0 hsl(150 100% 86% / .55); }
.btn-gold{ box-shadow:0 6px 24px hsl(38 100% 50% / .32), inset 0 1px 0 hsl(45 100% 86% / .5); }
/* consistent card hover lift + glow */
.step{ transition:border-color .25s, transform .25s, box-shadow .25s; }
.step:hover{ border-color:hsl(146 100% 54% / .42); transform:translateY(-3px); box-shadow:0 16px 36px hsl(160 100% 18% / .2); }
.qa:hover{ border-color:hsl(146 100% 54% / .3); }
.stat{ transition:border-color .25s, transform .25s; }
.stat:hover{ border-color:hsl(146 100% 54% / .35); transform:translateY(-2px); }
.casino-card.soon{ transition:opacity .25s, border-color .25s; }
.casino-card.soon:hover{ opacity:.82; }