.odds-page { padding-bottom: var(--space-8); }
.odds-tool { display: grid; gap: 1rem; margin-block: 1.5rem var(--space-7); }
.odds-top { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 1rem; }
.odds-panel { min-width: 0; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.odds-panel h2 { margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.35; letter-spacing: -.02em; }
.odds-control-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.odds-controls label { display: block; margin-bottom: .5rem; font-size: .85rem; font-weight: 650; }
.odds-controls select { width: 100%; min-width: 0; min-height: 44px; padding: .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-deep); color: var(--color-text); }
.odds-calculate { width: 100%; min-height: 3rem; margin-top: 1rem; cursor: pointer; }
.odds-controls button:disabled, .odds-controls select:disabled { opacity: .55; cursor: wait; }
.odds-presentation { height: 3px; margin-top: .75rem; overflow: hidden; background: var(--color-border); }
.odds-presentation > div { height: 100%; background: var(--color-primary); transform-origin: left; }
.odds-help { color: var(--color-muted); font-size: .82rem; line-height: 1.65; }
.odds-config, .odds-total { font-size: .85rem; color: var(--color-secondary); }
.odds-total { margin: .65rem 0 1rem; }
.odds-summary, .odds-thresholds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.odds-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.odds-tool dt { color: var(--color-muted); font-size: .8rem; }
.odds-tool dd { margin: .35rem 0 0; font-size: clamp(1.15rem, 1.7vw, 1.65rem); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.odds-chart-scroll { overflow-x: auto; }
.odds-tool [data-chart] { max-width: 900px; margin-inline: auto; }
.odds-tool svg { display: block; width: 100%; height: auto; }
.odds-tool svg rect { fill: var(--color-primary); }
.odds-tool svg line { stroke: var(--color-border); }
.odds-tool svg text { fill: var(--color-muted); font: 12px var(--font-sans); }
.odds-insight { padding: 1rem; margin-bottom: 0; border-left: 3px solid var(--color-primary); background: var(--color-surface-raised); font-size: .85rem; line-height: 1.7; }
.odds-insight strong { color: var(--color-secondary); }
.odds-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.odds-tool table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; font-size: .8rem; font-variant-numeric: tabular-nums; }
.odds-tool th, .odds-tool td { padding: .8rem; border-bottom: 1px solid var(--color-border); text-align: right; }
.odds-tool thead th { background: var(--color-surface-raised); color: var(--color-secondary); }
.odds-tool tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface-raised); text-align: left; border-right: 1px solid var(--color-border); }
.odds-tool td small, .odds-tool th small { display: block; color: var(--color-muted); font-size: .7rem; font-weight: 400; margin-top: .2rem; }
.odds-profit { color: var(--color-success); }
.odds-explanation { display: block; max-width: 52rem; color: var(--color-muted); font-size: .9rem; line-height: 1.75; }
.odds-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; font-size: .8rem; }
.odds-related a { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: .5rem; padding: .5rem; border: 1px solid var(--color-border-purple); border-radius: var(--radius-sm); background: var(--color-surface); color: #b4bac8; font-weight: 720; text-align: center; text-decoration: none; }
.odds-related a::after { content: "→"; flex-shrink: 0; color: var(--color-primary-strong); }
.odds-related a:hover, .odds-related a:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); color: #fff; }
.odds-related a:active { border-color: var(--color-primary-strong); background: rgb(140 92 255 / 19%); color: #fff; }
@media (min-width: 42rem) {
 .odds-related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
 .odds-top { grid-template-columns: minmax(0, 1fr); }
 .odds-panel { padding: 1rem; }
 .odds-thresholds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .odds-explanation { grid-template-columns: minmax(0, 1fr); }
 .odds-tool [data-chart] { min-width: 0; }
 .odds-tool svg text { font-size: 12px; }
 .odds-tool dd { font-size: clamp(1rem, 4.1vw, 1.5rem); }
}
@media (max-width: 30rem) {
 .odds-page { padding-bottom: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
 .odds-tool *, .odds-tool *::before, .odds-tool *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.odds-explanation p {
	margin: 0 0 1rem;
}

.odds-explanation h3 {
	margin: 1.75rem 0 .75rem;
	color: #fff;
}

.odds-explanation--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: none;
}

.odds-explanation__block {
	padding: 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: rgb(20 24 36 / 55%);
}

.odds-explanation__block h3 {
	margin: 0 0 1rem;
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.35;
}

.odds-explanation__block p {
	margin: 0 0 1rem;
}

.odds-explanation__block p:last-child {
	margin-bottom: 0;
}

@media (max-width: 46rem) {
	.odds-explanation--split {
		grid-template-columns: 1fr;
	}
}

.odds-explanation__block {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.odds-explanation--split {
	gap: 3rem;
}

@media (max-width: 46rem) {
	.odds-explanation--split {
		gap: 2rem;
	}
}

.odds-explanation__label {
	margin: 0 0 1rem;
	color: #c9b3ff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Odds-only backdrop and title accent; typography already uses Free's heading class. */
.odds-page { position:relative; isolation:isolate; background:radial-gradient(ellipse 65% 500px at 90% 0,#33145b40,transparent),linear-gradient(#0c0b1d,#090b14 850px); }
.odds-page::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:620px; pointer-events:none; background:url("../images/plinko-odds-background-v2.webp") right top/1000px auto no-repeat; opacity:.42; mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(#000 45%,transparent); mask-composite:intersect; }
.odds-heading__title-accent { color:#bc59ff; background:linear-gradient(120deg,#9f31f5,#d77bff); background-clip:text; -webkit-text-fill-color:transparent; }
@media(max-width:767px) {
 .odds-page::before { height:420px; background-size:600px auto; background-position:right -125px top; opacity:.26; }
}