.how-to-hero { padding-block: 1rem 2.5rem; }
.how-to-hero__grid { display: grid; gap: 1.5rem; align-items: center; }
.how-to-hero__content { max-width: 45rem; }
.how-to-hero h1 { max-width: 12ch; margin: .75rem 0; font-size: clamp(2.5rem, 10vw, 4.7rem); }
.how-to-hero__lede { max-width: 42rem; margin: 0; color: #b4bac8; font-size: clamp(1rem, 2vw, 1.15rem); }
.drop-explainer { display: grid; justify-items: center; width: min(100%, 24rem); margin: 0 auto; padding: 1.25rem; border: 1px solid var(--color-border-purple); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 35%, rgb(140 92 255 / 18%), transparent 52%), var(--color-surface); box-shadow: var(--shadow-purple); }
.drop-explainer__item { display: grid; justify-items: center; gap: .45rem; min-width: 10rem; }
.drop-explainer__ball { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #a45fff; box-shadow: 0 0 1rem rgb(140 92 255 / 72%); }
.drop-explainer__arrow { padding: .2rem; color: #8f79bf; font-size: 1.25rem; }
.drop-explainer__pegs { display: grid; grid-template-columns: repeat(3, .55rem); gap: .5rem .8rem; }
.drop-explainer__pegs i { width: .55rem; height: .55rem; border-radius: 50%; background: #eeeaff; box-shadow: 0 0 .35rem rgb(208 192 255 / 65%); }
.drop-explainer__result { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: .7rem .85rem; border: 1px solid rgb(66 207 125 / 32%); border-radius: var(--radius-sm); background: rgb(66 207 125 / 10%); }
.drop-explainer__result span, .drop-explainer figcaption { color: var(--color-muted); font-size: .78rem; }
.drop-explainer figcaption { margin-top: .7rem; }
.how-to-section { padding-block: 3.5rem; }
.how-to-section > :last-child { margin-bottom: 0; }
.how-to-intro { max-width: 48rem; }
.how-to-intro p:not(.eyebrow) { color: #c2c6d1; font-size: 1.03rem; }
.how-to-section--surface { border-block: 1px solid var(--color-border); background: rgb(16 20 30 / 55%); }
.how-to-split { display: grid; gap: 1.5rem; }
.how-to-split > div > p:last-child, .prediction-section > p { max-width: 42rem; color: var(--color-muted); }
.drop-steps { display: grid; gap: .7rem; max-width: 48rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.drop-steps li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .8rem; min-height: 3rem; padding: .55rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgb(20 24 36 / 75%); }
.drop-steps li > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: #c9b3ff; font-size: .78rem; font-weight: 800; }
.drop-steps p { margin: 0; color: #c6cad4; }
.drop-steps--compact { margin-top: 0; }
.setting-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.setting-card { padding: 1.35rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface)); box-shadow: var(--shadow-sm); }
.setting-card > p { color: var(--color-muted); }
.rows-examples { display: grid; gap: .65rem; margin: 1.25rem 0; }
.rows-example { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); }
.rows-example span { display: flex; align-items: baseline; gap: .3rem; color: #b8bdca; font-size: .8rem; white-space: nowrap; }
.rows-example strong { color: var(--color-text); font-size: 1rem; }
.rows-example i { color: var(--color-primary-strong); font-style: normal; }
.rows-example svg { display: block; width: 6rem; max-width: 42%; flex-shrink: 0; height: auto; }
.rows-example__row { fill: none; stroke: #82739f; stroke-width: 1.5; }
.rows-example__slot { fill: none; stroke: #bd9aff; stroke-width: 3; stroke-linecap: round; }
@media (min-width: 70rem) {
	.rows-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
	.rows-example { flex-direction: column; gap: .7rem; border: 0; padding: 0; }
	.rows-example svg { width: 7rem; max-width: 100%; }
}
.drop-example { padding-bottom: 0; }
.drop-example__intro { max-width: 46rem; color: var(--color-muted); }
.drop-example__panel { padding: 1.25rem; border: 1px solid var(--color-border-purple); border-radius: var(--radius-md); background: var(--color-surface); }
.drop-example__flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.drop-example__flow > div { min-width: 0; padding-left: .75rem; border-left: 2px solid var(--color-border-purple); }
.drop-example__flow dt { margin-bottom: .3rem; color: #b4bac8; font-size: .8rem; }
.drop-example__flow dd { margin: 0; font-size: 1.05rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.drop-example__flow small { display: block; margin-top: .2rem; color: #b4bac8; font-size: .75rem; font-weight: 400; }
.drop-example__flow .drop-example__result { border-color: #bd9aff; }
.drop-example__result dd { color: #d3c4f8; }
.drop-example__equation { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: 1rem; font-variant-numeric: tabular-nums; }
.drop-example__equation strong { color: #d3c4f8; }
.drop-example__equation span { display: block; color: #b4bac8; font-size: .8rem; }
.drop-example__note { margin-top: .8rem; color: var(--color-muted); font-size: .86rem; }
@media (min-width: 42rem) {
	.drop-example__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.drop-example__equation span { display: inline; margin-left: .5rem; }
}
@media (min-width: 70rem) {
	.drop-example__flow { grid-template-columns: 1fr .65fr .85fr .85fr 1.15fr 1.3fr; gap: 1.5rem; }
	.drop-example__flow > div { position: relative; border: 0; padding-left: 0; }
	.drop-example__flow > div + div::before { content: "→"; position: absolute; left: -1.25rem; top: 1.5rem; color: #82739f; }
}
@media (max-width: 30rem) {
	.how-to-section.drop-example { padding-bottom: 0; }
	.drop-example__panel { padding: 1rem .75rem; }
}
.risk-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 1.25rem 0; }
.risk-scale span { padding: .6rem .25rem; border: 1px solid var(--color-border-purple); border-radius: .45rem; background: var(--color-primary-soft); color: #d3c4f8; font-size: .75rem; font-weight: 750; text-align: center; }
.risk-scale span:nth-child(2) { background: rgb(140 92 255 / 19%); }
.risk-scale span:nth-child(3) { background: rgb(140 92 255 / 28%); }
.setting-card__note { margin: 0; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .86rem; }
.definition-list { display: grid; gap: 1.25rem; }
.definition-list > div { padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.definition-list p { margin: 0; color: var(--color-muted); }
.text-link { width: fit-content; font-weight: 750; }
.prediction-section { display: grid; gap: 1rem; }
.prediction-section > p { margin: 0; padding: 1.25rem; border-left: 3px solid var(--color-primary); background: rgb(140 92 255 / 7%); }
.practical-steps__cta { margin-top: 1.25rem; }
.how-to-explore { padding-block: 3.5rem 4rem; border-top: 1px solid var(--color-border); background: var(--color-bg-deep); }
.how-to-link-grid { display: grid; gap: .75rem; }
.how-to-link-grid .game-link-card { min-height: 6.5rem; grid-template-columns: 1fr auto; }
.how-to-link-grid .game-link-card--real-money { border-color: rgb(66 207 125 / 38%); }
.how-to-link-grid .game-link-card--real-money .game-link-card__arrow { color: var(--color-success); }
.how-to-back { display: inline-block; margin-top: 1.5rem; font-size: .88rem; }
@media (min-width: 42rem) {
	.setting-grid, .how-to-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prediction-section { grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr); align-items: center; }
}
@media (min-width: 56rem) {
	.how-to-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); }
	.how-to-split { grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr); align-items: start; }
}
@media (max-width: 30rem) {
	.how-to-hero { padding-bottom: 2rem; }
	.how-to-hero h1 { font-size: 2.4rem; }
	.how-to-hero .button-row { display: grid; }
	.how-to-hero .button { width: 100%; }
	.how-to-section, .how-to-explore { padding-block: 2.5rem; }
	.setting-card { padding: 1rem; }
	.drop-steps li { grid-template-columns: 1.75rem 1fr; padding-inline: .6rem; }
	.drop-steps li > span { width: 1.75rem; height: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.how-to-play-page .button, .how-to-play-page .game-link-card { transition: none; }
}

@media (max-width: 23rem) {
	.practical-steps__cta { flex-direction: column; }
}

/* General guide payout examples: four columns fit within the mobile container. */
.how-to-payout-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.how-to-payout-table caption { padding-bottom: .85rem; color: var(--color-muted); text-align: left; font-size: .85rem; }
.how-to-payout-table th, .how-to-payout-table td { padding: .8rem .5rem; border-bottom: 1px solid var(--color-border); text-align: left; overflow-wrap: anywhere; }
.how-to-payout-table th { color: var(--color-muted); font-size: .85rem; font-weight: 600; }
.how-to-payout-table td { font-weight: 700; }
.how-to-payout-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 30rem) {
	.how-to-payout-table th, .how-to-payout-table td { padding: .7rem .25rem; font-size: .8rem; }
}