/* Crash round simulator in the hero + bonus popup */
.sim { width: 100%; max-width: 440px; margin: 0 auto; background: linear-gradient(160deg, #0b1630, #060b19); border: 1px solid var(--card-border); border-radius: 20px; padding: 16px; box-shadow: 0 0 40px rgba(255,140,26,0.18), 0 20px 50px rgba(0,0,0,0.5); }
.sim-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.sim-title { font-family: 'Orbitron', sans-serif; font-size: 13px; letter-spacing: 1px; color: var(--cyan); text-transform: uppercase; }
.sim-hist { display: flex; gap: 6px; overflow: hidden; justify-content: flex-end; min-height: 22px; }
.sim-hist span { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(56,217,255,0.12); color: var(--cyan); white-space: nowrap; }
.sim-hist span.hi { background: rgba(255,176,32,0.15); color: var(--gold); }
.sim-hist span.lo { background: rgba(130,145,179,0.15); color: var(--muted); }
.sim-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 20% 110%, rgba(255,140,26,0.25), transparent 55%), repeating-linear-gradient(90deg, rgba(56,217,255,0.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(56,217,255,0.05) 0 1px, transparent 1px 40px), #050914; }
.sim-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sim-mult { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(34px, 9vw, 52px); color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,0.6); pointer-events: none; font-variant-numeric: tabular-nums; }
.sim-mult small { font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }
.sim-stage.crashed .sim-mult { color: var(--jet); }
.sim-stage.won .sim-mult small { color: #3ee08f; }
.sim-stage.crashed .sim-mult small { color: var(--jet); }
.sim-btn { display: block; width: 100%; margin-top: 12px; min-height: 52px; border: none; border-radius: 14px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--jet), var(--jet-dark)); box-shadow: 0 6px 22px rgba(255,140,26,0.35); transition: transform .15s, filter .15s; }
.sim-btn:hover { filter: brightness(1.08); }
.sim-btn:active { transform: translateY(1px); }
.sim-btn.cash { background: linear-gradient(135deg, #2fd27f, #149a55); box-shadow: 0 6px 22px rgba(47,210,127,0.35); }
.sim-btn:focus-visible, .bonus-card a:focus-visible, .bonus-card button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.sim-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; text-align: center; line-height: 1.5; }
.sim-note a { color: var(--cyan); }

.bonus-pop { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(3,6,14,0.75); backdrop-filter: blur(4px); }
.bonus-pop.show { display: flex; animation: bp-fade .2s ease-out; }
.bonus-card { position: relative; width: 100%; max-width: 420px; background: linear-gradient(160deg, #13224a, #0a1226); border: 1px solid rgba(255,176,32,0.45); border-radius: 20px; padding: 30px 24px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.bonus-card .bp-big { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 52px; line-height: 1; color: var(--gold); margin: 4px 0 8px; }
.bonus-card h3 { font-size: 19px; color: #fff; margin-bottom: 10px; }
.bonus-card p { color: #c3d3ee; font-size: 15px; margin-bottom: 18px; line-height: 1.6; }
.bonus-card .bp-cta { display: flex; justify-content: center; align-items: center; min-height: 52px; border-radius: 14px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--jet), var(--jet-dark)); box-shadow: 0 6px 22px rgba(255,140,26,0.4); }
.bonus-card .bp-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: none; background: transparent; color: var(--muted); font-size: 26px; cursor: pointer; border-radius: 10px; }
.bonus-card .bp-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.bonus-card .bp-skip { margin-top: 10px; min-height: 44px; background: none; border: none; color: var(--muted); font-size: 14px; text-decoration: underline; cursor: pointer; }
.bonus-card .bp-fine { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.sticky-play { display: none; }
@media (max-width: 760px) {
    .sticky-play { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; min-height: 52px; align-items: center; justify-content: center; border-radius: 14px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--jet), var(--jet-dark)); box-shadow: 0 8px 30px rgba(0,0,0,0.5); transform: translateY(140%); transition: transform .25s ease; }
    .sticky-play.on { transform: none; }
    body { padding-bottom: 76px; }
}
@keyframes bp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bonus-pop.show { animation: none; } .sticky-play { transition: none; } }

/* guide pages */
.guide-crumbs { font-size: 13px; color: var(--muted); margin: 6px 4px 14px; }
.guide-crumbs a { color: var(--cyan); text-decoration: none; }
.guide-crumbs span { opacity: .5; margin: 0 4px; }
.guide-updated { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.guide-steps { list-style: none; counter-reset: gs; display: grid; gap: 14px; }
.guide-steps li { counter-increment: gs; position: relative; padding: 18px 20px 18px 66px; background: rgba(0,0,0,0.28); border: 1px solid var(--card-border); border-radius: 16px; }
.guide-steps li::before { content: counter(gs); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: 'Orbitron', sans-serif; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--jet), var(--jet-dark)); }
.guide-steps h3 { font-size: 16px; color: #fff; margin-bottom: 6px; }
.guide-steps p { font-size: 14.5px; color: #c3d3ee; line-height: 1.7; }
.guide-list { padding-left: 20px; display: grid; gap: 10px; color: #c3d3ee; font-size: 15px; line-height: 1.75; }
.guide-list strong { color: var(--gold); }
.guide-list a, .section p.copy a { color: var(--cyan); }
.guide-note { font-size: 13.5px; color: var(--muted); margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--gold); background: rgba(255,176,32,0.06); border-radius: 0 10px 10px 0; }
.guide-table-wrap { overflow-x: auto; }
.guide-table th { text-align: left; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--card-border); }
.guide-cards .card h3 { color: var(--gold); }
a.guide-link { text-decoration: none; display: block; }
a.guide-link h3 { color: #fff; }
a.guide-link:hover h3 { color: var(--cyan); }