/* "What will my babies be?" breeding odds calculator.
   Lilac choice panels on the page card, a night-dark result panel with a neon flask. */

.breed-calc { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); max-width: 1080px; margin: 0 auto; color: rgb(var(--c-ink)); font-family: var(--lh-sans); min-width: 0; }
.breed-calc :is(h1, h2, h3, h4) { font-family: var(--lh-serif); font-weight: 600; line-height: 1.15; margin: 0; }

/* heading */
.bc-hero { text-align: center; padding: .4rem 0 0; }
.bc-kicker { margin: 0 0 .35rem; color: rgb(var(--c-accent)); font: 700 .74rem/1.4 var(--lh-sans); letter-spacing: .16em; text-transform: uppercase; }
.bc-title { font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -.02em; color: rgb(var(--c-deep)); text-wrap: balance; }
.bc-lead { max-width: 40rem; margin: .7rem auto 0; color: rgb(var(--c-muted)); line-height: 1.65; }
.bc-noscript { margin: 0; padding: 1rem 1.2rem; border-radius: 10px; background: rgb(var(--c-surface-soft)); border: 1px solid rgb(var(--c-border) / .5); text-align: center; font-weight: 600; }
.bc-hint { margin: .2rem 0 0; color: rgb(var(--c-muted)); font-size: .95rem; }

/* steps */
.bc-tool { display: grid; gap: clamp(.9rem, 2vw, 1.25rem); min-width: 0; }
.bc-tool[hidden] { display: none; }
.bc-step { min-width: 0; padding: clamp(1rem, 2.2vw, 1.4rem); background: rgb(var(--c-surface-soft)); border: 1px solid rgb(var(--c-border) / .45); border-radius: 12px; box-shadow: inset 0 0 0 3px rgb(var(--c-surface-soft)), inset 0 0 0 4px rgb(var(--c-glass) / .7), 0 6px 16px rgb(var(--c-deep) / .08); }
.bc-step-title, .bc-result-title { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .85rem !important; color: rgb(var(--c-deep)); }
.bc-step-num { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgb(var(--c-deep)); color: rgb(var(--c-white)); font: 700 .95rem/1 var(--lh-sans); box-shadow: 0 0 12px rgb(var(--c-neon) / .45); }

/* choices: real radio inputs under a big tappable face */
.bc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .7rem; }
.bc-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.bc-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bc-choice-face { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-height: 3.6rem; height: 100%; padding: .8rem 1rem; border-radius: 12px; background: rgb(var(--c-white)); border: 1.5px solid rgb(var(--c-border) / .45); box-shadow: 0 2px 6px rgb(var(--c-deep) / .06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.bc-choice-main { font-weight: 700; font-size: 1.05rem; color: rgb(var(--c-ink)); overflow-wrap: anywhere; }
.bc-choice-sub { font-size: .86rem; color: rgb(var(--c-muted)); line-height: 1.4; overflow-wrap: anywhere; }
.bc-tab .bc-choice-face { align-items: center; text-align: center; min-height: 3.4rem; }
.bc-tab .bc-choice-main { font-family: var(--lh-serif); font-size: 1.45rem; font-weight: 600; }
.bc-genotype .bc-choice-main { font-size: 1.3rem; letter-spacing: .02em; }
.bc-choice:hover .bc-choice-face { transform: translateY(-2px); border-color: rgb(var(--c-neon)); box-shadow: 0 8px 18px rgb(var(--c-deep) / .12), 0 0 16px rgb(var(--c-neon) / .35); }
.bc-choice input:focus-visible + .bc-choice-face { outline: 3px solid rgb(var(--c-accent)); outline-offset: 2px; }
.bc-choice input:checked + .bc-choice-face { background: linear-gradient(135deg, rgb(var(--c-white)), rgb(var(--c-violet-100))); border-color: rgb(var(--c-accent)); box-shadow: inset 0 0 0 1px rgb(var(--c-accent)), 0 0 18px rgb(var(--c-neon) / .45); }
.bc-choice input:checked + .bc-choice-face .bc-choice-main { color: rgb(var(--c-deep)); }

/* parents */
.bc-parents { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; align-items: start; }
.bc-parents:empty { display: none; }
.bc-parent { min-width: 0; margin: 0; padding: 0; border: 0; }
.bc-parent-label { padding: 0; margin: 0 0 .5rem; font: 700 .8rem/1.3 var(--lh-sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c-accent)); }
.bc-parent .bc-grid { grid-template-columns: minmax(0, 1fr); }
.bc-cross { align-self: center; font: 600 2rem/1 var(--lh-serif); color: rgb(var(--c-accent)); padding-top: 1.4rem; }

/* result: the night panel */
.bc-result { min-width: 0; padding: clamp(1.1rem, 2.6vw, 1.8rem); border-radius: 14px; background: radial-gradient(120% 90% at 20% 0%, rgb(var(--c-deep) / .55), transparent 60%), rgb(var(--c-night)); color: rgb(var(--c-surface-soft)); border: 1px solid rgb(var(--c-neon) / .45); box-shadow: 0 0 0 4px rgb(var(--c-bg-2)), 0 0 28px rgb(var(--c-neon) / .25), 0 18px 40px rgb(var(--c-black) / .35); }
.bc-result[hidden] { display: none; }
.bc-result .bc-result-title { color: rgb(var(--c-white)); }
.bc-result .bc-step-num { background: rgb(var(--c-neon)); color: rgb(var(--c-night)); }
.bc-result-body { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: start; }
.bc-flask-wrap { margin: 0; text-align: center; min-width: 0; }
.bc-flask { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; overflow: visible; }
.bc-flask-glass { fill: rgb(var(--c-glass) / .06); }
.bc-flask-outline { fill: none; stroke: rgb(var(--c-violet-200)); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgb(var(--c-neon))) drop-shadow(0 0 12px rgb(var(--c-neon) / .75)); }
.bc-flask-shine { fill: none; stroke: rgb(var(--c-white) / .35); stroke-width: 3; stroke-linecap: round; }
.bc-pairing { margin-top: .6rem; font: 600 1.1rem/1.3 var(--lh-serif); color: rgb(var(--c-violet-100)); }

.bc-liquid { transform-origin: 100px 217px; }
.bc-flask-wrap.is-animated .bc-liquid { transform: scaleY(0); transition: transform 1.3s cubic-bezier(.22, .9, .3, 1); }
.bc-flask-wrap.is-animated.is-filled .bc-liquid { transform: scaleY(1); }
.bc-band-2 { fill: rgb(var(--c-neon)); background: rgb(var(--c-neon)); }
.bc-band-1 { fill: rgb(var(--c-potion-teal)); background: rgb(var(--c-potion-teal)); }
.bc-band-0 { fill: rgb(var(--c-candle)); background: rgb(var(--c-candle)); }
.bc-band { opacity: .92; }
.bc-band-label { fill: rgb(var(--c-night)); font: 700 15px/1 var(--lh-sans); }
.bc-surface { fill: none; stroke: rgb(var(--c-white) / .55); stroke-width: 2; }
.bc-bubble { fill: rgb(var(--c-white) / .5); opacity: 0; }
.bc-flask-wrap.is-animated.is-filled .bc-bubble { animation: bc-bubble 3.6s ease-in 1.2s infinite; }
.bc-flask-wrap.is-animated.is-filled .bc-bubble-1 { animation-delay: 2s; }
.bc-flask-wrap.is-animated.is-filled .bc-bubble-2 { animation-delay: 2.8s; }
@keyframes bc-bubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(-70px); } }

.bc-result-copy { min-width: 0; }
.bc-odds { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.bc-odd { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .65rem; align-items: baseline; padding: .7rem .85rem; border-radius: 10px; background: rgb(var(--c-white) / .05); border: 1px solid rgb(var(--c-glass) / .18); }
.bc-swatch { width: .9rem; height: .9rem; border-radius: 50%; align-self: center; box-shadow: 0 0 8px currentColor; }
.bc-odd-pct { font: 700 1.5rem/1 var(--lh-serif); color: rgb(var(--c-white)); min-width: 3.2ch; }
.bc-odd-text { line-height: 1.5; color: rgb(var(--c-surface-soft)); overflow-wrap: anywhere; }
.bc-notes:empty { display: none; }
.bc-note { margin: .85rem 0 0; padding: .75rem .9rem; border-radius: 10px; background: rgb(var(--c-candle) / .1); border: 1px solid rgb(var(--c-candle) / .35); color: rgb(var(--c-candle-core)); font-size: .94rem; line-height: 1.55; }
.bc-note strong { color: rgb(var(--c-candle)); }

.bc-punnett-box { margin-top: .9rem; }
.bc-punnett-box summary { cursor: pointer; color: rgb(var(--c-violet-200)); font-weight: 600; font-size: .95rem; padding: .35rem 0; }
.bc-punnett-box summary:hover { color: rgb(var(--c-white)); }
.bc-punnett-scroll { overflow-x: auto; max-width: 100%; }
.bc-punnett { width: auto; border-collapse: separate; border-spacing: 4px; margin-top: .4rem; font-size: .85rem; color: rgb(var(--c-surface-soft)); }
.bc-punnett tbody tr { background: none; }
.bc-punnett :is(th, td) { vertical-align: middle; border-bottom: 0; }
.bc-punnett caption { caption-side: bottom; padding-top: .35rem; text-align: left; color: rgb(var(--c-glass)); font-size: .8rem; }
.bc-punnett th { background: none; color: rgb(var(--c-violet-100)); font: 700 1rem/1.2 var(--lh-sans); padding: .25rem .4rem; text-align: center; letter-spacing: 0; }
.bc-punnett .bc-sq-corner { font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: rgb(var(--c-glass)); max-width: 7rem; }
.bc-punnett td { min-width: 5.4rem; padding: .4rem .5rem; border-radius: 8px; text-align: center; background: rgb(var(--c-white) / .06); border: 1px solid rgb(var(--c-glass) / .2); }
.bc-punnett td strong { display: block; color: rgb(var(--c-white)); font-size: .98rem; }
.bc-punnett td span { display: block; color: rgb(var(--c-glass)); font-size: .72rem; line-height: 1.25; }
.bc-punnett .bc-sq-2 { border-color: rgb(var(--c-neon) / .7); }
.bc-punnett .bc-sq-1 { border-color: rgb(var(--c-potion-teal) / .7); }
.bc-punnett .bc-sq-0 { border-color: rgb(var(--c-candle) / .7); }

.bc-disclaimer { margin: 1.2rem 0 0; font-size: .88rem; color: rgb(var(--c-glass)); line-height: 1.55; }
.bc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(var(--c-glass) / .2); }
.bc-cta p { margin: 0; flex: 1 1 14rem; font: 600 1.2rem/1.3 var(--lh-serif); color: rgb(var(--c-white)); }
.bc-cta-link { color: rgb(var(--c-violet-200)); text-underline-offset: .2em; }
.bc-cta-link:hover { color: rgb(var(--c-white)); }

/* gene notes: always rendered, so the page reads fine without JavaScript */
.bc-genes-info { min-width: 0; padding: clamp(1rem, 2.2vw, 1.4rem); border-radius: 12px; background: rgb(var(--c-surface-soft)); border: 1px solid rgb(var(--c-border) / .45); }
.bc-genes-info > h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: rgb(var(--c-deep)); }
.bc-genes-animal { margin-top: 1.1rem !important; font-size: 1.3rem; color: rgb(var(--c-accent)); }
.bc-genes-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .8rem; margin-top: .6rem; }
.bc-gene-card { min-width: 0; padding: .9rem 1rem; border-radius: 10px; background: rgb(var(--c-white)); border: 1px solid rgb(var(--c-border) / .3); scroll-margin-top: 7rem; }
.bc-gene-card h4 { font-size: 1.25rem; color: rgb(var(--c-deep)); }
.bc-gene-card p { margin: .4rem 0; font-size: .92rem; line-height: 1.55; color: rgb(var(--c-muted)); }
.bc-gene-card dl { margin: .5rem 0; display: grid; gap: .3rem; }
.bc-gene-card dl div { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .5rem; font-size: .9rem; line-height: 1.45; }
.bc-gene-card dt { font-weight: 700; color: rgb(var(--c-accent)); }
.bc-gene-card dd { margin: 0; overflow-wrap: anywhere; }
.bc-gene-links { font-size: .9rem; }

@media (max-width: 760px) {
    .bc-result-body { grid-template-columns: minmax(0, 1fr); }
    .bc-flask { max-width: 190px; }
    .bc-parents { grid-template-columns: minmax(0, 1fr); }
    .bc-cross { padding: 0; text-align: center; }
}

/* motion: none when sparkles are off, or when the visitor asked for less motion */
html[data-sparkles='off'] .bc-flask-wrap .bc-liquid { transition: none !important; transform: none !important; }
html[data-sparkles='off'] .bc-bubble { animation: none !important; opacity: 0 !important; }
html[data-sparkles='off'] .bc-choice-face { transition: none; }
@media (prefers-reduced-motion: reduce) {
    html:not([data-sparkles='on']) .bc-flask-wrap .bc-liquid { transition: none !important; transform: none !important; }
    html:not([data-sparkles='on']) .bc-bubble { animation: none !important; opacity: 0 !important; }
    html:not([data-sparkles='on']) .bc-choice-face { transition: none; }
}

/* One headline for the whole pairing, then what the results mean. */
.bc-headline { margin: 0 0 .9rem; padding: .8rem 1rem; border-radius: 12px; font-weight: 700; line-height: 1.45; border: 1px solid; }
.bc-headline[hidden] { display: none; }
.bc-headline.is-warn { color: rgb(var(--c-candle-core)); background: rgb(var(--c-red-500-2) / .22); border-color: rgb(var(--c-red-300) / .7); box-shadow: 0 0 16px rgb(var(--c-red-300) / .25); }
.bc-headline.is-good { color: rgb(var(--c-funding-ink)); background: rgb(var(--c-funding-accent) / .12); border-color: rgb(var(--c-funding-accent) / .55); }
.bc-headline.is-info { color: rgb(var(--c-violet-100)); background: rgb(var(--c-neon) / .12); border-color: rgb(var(--c-neon) / .5); }
.bc-explain-box { margin-top: 1rem; }
.bc-explain-box > summary, .bc-punnett-box > summary { cursor: pointer; font-weight: 700; color: rgb(var(--c-violet-200)); }
.bc-explain { display: grid; gap: .6rem; margin: .7rem 0 0; }
.bc-explain-item { padding: .6rem .8rem; border-left: 3px solid rgb(var(--c-neon) / .7); border-radius: 0 10px 10px 0; background: rgb(var(--c-white) / .05); }
.bc-explain dt { font-weight: 700; color: rgb(var(--c-white)); }
.bc-explain dd { margin: .15rem 0 0; color: rgb(var(--c-surface-deep)); font-size: .94rem; line-height: 1.5; }
.bc-gene-explain { display: grid; gap: .45rem; margin: .6rem 0 .8rem; }
.bc-gene-explain dt { font-weight: 700; color: var(--lh-ink); }
.bc-gene-explain dd { margin: 0; color: var(--lh-muted); font-size: .93rem; }
.bc-gene-codes-title { margin: .4rem 0 .2rem; font: 700 .75rem/1.2 var(--lh-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--lh-accent); }