/* Creature Breeder — the Brindlebeast breeding-center set inside the shared practice shell. */
.cb { position: absolute; inset: 0; display: grid; grid-template-rows: 205px minmax(0, 1fr); gap: 8px; padding: 8px 10px 10px; overflow: hidden; color: var(--tlg-text); }
.cb-scene { position: relative; overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: linear-gradient(#bce7f2 0 54%, #8aca72 55% 100%); box-shadow: inset 0 -16px 30px rgba(31,83,47,.15); }
.cb-sun { position: absolute; width: 100px; height: 100px; border-radius: 50%; right: 39%; top: -32px; background: radial-gradient(circle, #fff8ae 0 22%, rgba(255,228,103,.45) 42%, transparent 70%); }
.cb-hills { position: absolute; inset: 70px -20px 0; background: radial-gradient(ellipse at 15% 100%, #6eb15f 0 38%, transparent 39%), radial-gradient(ellipse at 65% 100%, #75b867 0 42%, transparent 43%); opacity: .92; }
.cb-fence { position: absolute; left: 0; right: 0; bottom: 26px; height: 42px; border-top: 7px solid #855a35; border-bottom: 7px solid #855a35; background: repeating-linear-gradient(90deg, transparent 0 46px, #704724 47px 55px, transparent 56px 88px); opacity: .95; }
.cb-nest { position: absolute; bottom: 12px; width: 178px; height: 135px; border-radius: 18px 18px 8px 8px; border: 3px solid #624326; background: linear-gradient(135deg, #e5c487, #b98044); box-shadow: 0 6px 14px rgba(50,36,20,.25); z-index: 2; }
.cb-nest--a { left: 16px; } .cb-nest--b { left: 208px; }
.cb-nest > span { position: absolute; left: 9px; top: 7px; padding: 2px 7px; border-radius: 7px; background: #fff9e8; color: #4b3927; font-size: 16px; font-weight: 800; z-index: 2; }
.cb-parent-a, .cb-parent-b { position: absolute; inset: 18px 5px 0; display: flex; justify-content: center; align-items: flex-end; }
.cb-parent-a .cb-creature-svg, .cb-parent-b .cb-creature-svg { width: 145px; height: 112px; }
.cb-parent-a strong, .cb-parent-b strong { position: absolute; right: 6px; bottom: 5px; padding: 2px 6px; border-radius: 7px; background: #fff; color: #26352e; font-size: 17px; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.cb-inc { position: absolute; left: 404px; bottom: 10px; width: 155px; height: 155px; border: 4px solid #284743; border-radius: 21px; background: linear-gradient(145deg, #405f5b, #243a38); box-shadow: 0 8px 20px rgba(25,45,40,.3); z-index: 3; color: white; text-align: center; }
.cb-inc::before { content: ""; position: absolute; inset: 10px 10px 45px; border-radius: 13px; background: linear-gradient(#ffefaa, #eaaa4c); box-shadow: inset 0 0 26px #fff3a4; }
.cb-inc-glow { position: absolute; inset: -25px; background: radial-gradient(circle, rgba(255,226,106,.34), transparent 65%); z-index: -1; }
.cb-eggs { position: absolute; left: 20px; right: 20px; top: 33px; display: flex; align-items: end; justify-content: center; }
.cb-eggs svg { width: 38px; height: 47px; margin: 0 -2px; filter: drop-shadow(0 3px 2px rgba(80,45,15,.25)); }
.cb-inc b { position: absolute; bottom: 22px; left: 0; right: 0; font-size: 16px; letter-spacing: .08em; }
.cb-inc small { position: absolute; bottom: 6px; left: 0; right: 0; font-size: 16px; }
.cb-order-card { position: absolute; z-index: 4; top: 10px; right: 12px; width: min(43%, 455px); padding: 9px 12px; border: 2px solid #b9934a; border-radius: 11px 11px 18px 11px; background: #fffdf2; color: #25362e; box-shadow: 0 5px 14px rgba(67,51,25,.19); transform: rotate(.3deg); }
.cb-order-card::before { content: ""; position: absolute; width: 42px; height: 10px; top: -6px; left: 42%; background: rgba(219,199,152,.82); transform: rotate(-2deg); }
.cb-order-k, .cb-mini-k { margin: 0; color: #246b4c; font-size: 16px; font-weight: 900; letter-spacing: var(--tlg-tracking-caps); }
.cb-rule { margin: 4px 0 2px; font-size: 16px; font-weight: 750; line-height: 1.28; }
.cb-real { margin: 0; font-size: 16px; line-height: 1.25; color: #4a6256; }

.cb-work { min-height: 0; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: color-mix(in srgb, var(--tlg-surface) 96%, #dff1e4); padding: 6px 10px; overflow: hidden; }
.cb-predict { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; align-items: center; }
.cb-grid { min-width: 0; height: 100%; display: grid; place-items: center; overflow: auto; }
.cb-grid .ppg { max-height: 100%; }
.cb-grid .ppg--4 { gap: 4px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.cb-grid .ppg--4 > .ppg-tray { grid-column: 1 / -1; }
.cb-grid .ppg--4 .ppg-tray { gap: 5px; padding: 3px 7px; }
.cb-grid .ppg--4 .ppg-pline { gap: 4px; }
.cb-grid .ppg--4 .ppg-grid { --ppg-head: 48px; --ppg-head-row: 34px; --ppg-cell: 48px; --ppg-cell-h: 38px; --ppg-pslot: 36px; gap: 3px; }
.cb-grid .ppg--4 .ppg-pline-k { min-width: 138px; }
.cb-grid .ppg--4 .ppg-readout { font-size: 16px; }
/* 4×4 crosses (dihybrid, epistasis): shorter scene and boxes so all four rows and the readout fit at 1366×768 without scrolling. */
.cb:has(.ppg--4) { grid-template-rows: 158px minmax(0, 1fr); }
.cb:has(.ppg--4) .cb-inc { bottom: 4px; transform: scale(.9); transform-origin: bottom center; }
.cb:has(.ppg--4) .cb-order-card { top: 6px; padding: 6px 12px; }
.cb-answer { min-height: 0; align-self: stretch; padding: 10px; border-radius: var(--tlg-radius-md); border: 2px solid var(--tlg-border); background: var(--tlg-surface-raised, var(--tlg-surface)); display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.cb-target { margin: 0; font-size: 22px; line-height: 1.12; font-weight: 900; }
.cb-help, .cb-msg, .cb-sample-note { margin: 0; font-size: 16px; line-height: 1.25; }
.cb-msg { min-height: 1.25em; font-weight: 750; color: var(--tlg-danger, #a62920); }
.cb-ratio-input { width: 100%; height: 54px; box-sizing: border-box; padding: 4px 10px; border: 3px solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); color: var(--tlg-text); font: 900 27px/1 var(--tlg-font-body); text-align: center; }

.cb-breed { height: 100%; display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px 10px; }
.cb-breed-goal { grid-row: 1; padding: 12px; border-radius: 14px; background: linear-gradient(145deg, #245f46, #184834); color: white; display: flex; flex-direction: column; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.cb-breed-goal span { font-size: 16px; font-weight: 800; letter-spacing: .08em; }
.cb-breed-goal b { margin-top: 8px; font-size: 22px; line-height: 1.15; }
.cb-breed-goal em { margin-top: 10px; padding: 6px; border-radius: 8px; background: rgba(255,255,255,.14); font-size: 16px; font-style: normal; font-weight: 800; }
.cb-select-pens { min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-select-pen { min-width: 0; overflow: auto; padding: 7px; border-radius: 13px; border: 2px solid #a47745; background: linear-gradient(#f4e3bd, #e8cd96); color: #33291f; }
.cb-card-row { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 6px; margin-top: 5px; }
.cb-gcard { position: relative; min-width: 0; min-height: 112px; padding: 2px 4px 5px; border: 2px solid #6a765f; border-radius: 10px; background: #fffdf5; color: #26352e; font: inherit; cursor: pointer; box-shadow: 0 2px 0 #8b6c45; touch-action: none; }
.cb-gcard:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #8b6c45; }
.cb-gcard.is-picked, .cb-gcard[aria-pressed="true"] { border-color: #1f7852; box-shadow: 0 0 0 3px #64c59a; }
.cb-gcard.is-picked::after { content: "✓"; position: absolute; top: 3px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: #1f7852; color: white; font-weight: 900; }
.cb-gcard .cb-creature-svg { width: 76px; height: 60px; display: block; margin: -3px auto -2px; }
.cb-gname { display: block; font-size: 18px; font-weight: 900; line-height: 1.05; }
.cb-gph { display: block; margin-top: 3px; font-size: 16px; line-height: 1.1; }
.cb-breed > .cb-msg { grid-column: 1 / -1; }

.cb-mystery { height: 100%; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; }
.cb-mystery-tally, .cb-mystery-solve { min-height: 0; padding: 8px; border-radius: 13px; border: 2px solid var(--tlg-border); background: var(--tlg-surface); overflow: auto; }
.cb-count-row { display: flex; align-items: center; gap: 6px; min-height: 58px; border-bottom: 1px dashed var(--tlg-border); font-size: 16px; }
.cb-count-row .cb-creature-svg { width: 72px; height: 56px; flex: none; }
.cb-count-row b { font-size: 22px; }
.cb-sample-note { margin-top: 7px; color: var(--tlg-text-muted); }
.cb-mystery-solve { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; }
.cb-token-tray { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding: 3px; }
.cb-token-row { display: grid; grid-template-columns: 76px repeat(auto-fit, minmax(96px, 1fr)); gap: 5px; align-items: stretch; }
.cb-token-row-k { align-self: center; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--tlg-text-muted, var(--tlg-text)); }
.cb-drag-card { min-height: 80px; cursor: grab; }
.cb-token-row .cb-drag-card .cb-creature-svg { width: 50px; height: 34px; }
.cb-mystery-solve .cb-msg:empty { display: none; }
.cb-drag-card.is-placed { width: auto; max-width: 290px; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 3px 8px 4px 4px; text-align: left; }
.cb-drag-card.is-placed .cb-creature-svg { grid-row: 1 / span 2; width: 58px; height: 44px; margin: 0; }
.cb-drag-card.is-placed .cb-gph { margin-top: 1px; }
.cb-parent-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-parent-zone { min-height: 70px; display: flex; align-items: center; gap: 8px; padding: 7px; border: 3px dashed #7a895f; border-radius: 12px; background: #edf4df; color: #293526; }
.cb-parent-zone > b { font-size: 17px; white-space: nowrap; }
.cb-zone-slot { min-width: 0; flex: 1; display: flex; justify-content: center; }
.cb-parent-zone.is-over, html.pdz-armed .cb-parent-zone.is-over { border-style: solid; background: #d7efcf; }
html[data-theme="dark"] .cb-select-pen { background: #3d3425; color: var(--tlg-text); border-color: #8d744d; }
html[data-theme="dark"] .cb-gcard { background: #252b27; color: var(--tlg-text); border-color: #83927d; }
html[data-theme="dark"] .cb-parent-zone { background: #26362c; color: var(--tlg-text); }
html .pdz-ghost.cb-gcard { display: block; width: 108px; }

.cb-hatch { position: absolute; z-index: 20; inset: 8px 10px 10px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 7px; padding: 10px; border: 3px solid #8b662d; border-radius: 18px; background: linear-gradient(155deg, rgba(255,252,225,.98), rgba(250,220,145,.98)); color: #2d352e; box-shadow: 0 15px 50px rgba(23,31,26,.34); animation: cb-pop .24s ease-out both; }
.cb-hatch-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 16px; }
.cb-hatch-head span { font-weight: 950; letter-spacing: .1em; color: #705123; } .cb-hatch-head b { font-size: 16px; }
.cb-babies { min-height: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: center; }
.cb-baby { position: relative; min-height: 96px; display: grid; place-items: center; }
.cb-shell, .cb-born { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .28s ease, opacity .2s ease; }
.cb-shell svg { width: 56px; height: 68px; } .cb-born { opacity: 0; transform: scale(.45) translateY(20px); }
.cb-born .cb-creature-svg { width: 100%; max-width: 112px; height: 90px; }
.cb-baby.is-hatched .cb-shell { opacity: 0; transform: rotate(12deg) scale(.65); } .cb-baby.is-hatched .cb-born { opacity: 1; transform: none; }
.cb-tally { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 16px; }
.cb-tally strong { margin-right: 3px; } .cb-tally span { padding: 4px 7px; border: 1px solid #aa874f; border-radius: 8px; background: #fff9df; }
.cb-tally small { width: 100%; font-size: 16px; color: #5e553e; }
.cb-example { width: 100%; } .cb-example-parents { display: grid; grid-template-columns: 1fr auto auto 1fr auto; gap: 6px; align-items: center; font-size: 20px; }
.cb-example-parents .cb-creature-svg { width: 150px; max-width: 100%; } .cb-example-kids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cb-example-kids .cb-creature-svg { width: 100%; } .cb-example p { margin: 5px 0 0; text-align: center; font-size: 16px; }
.cb-start { width: 100%; height: 100%; }
.cb-creature-svg { overflow: visible; }

@keyframes cb-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cb-hatch { animation: none; } .cb-shell, .cb-born, .cb-gcard { transition: none; } .cb-gcard:hover { transform: none; } }
@media (max-width: 1100px) {
  .cb-order-card { width: 39%; } .cb-real { display: none; } .cb-nest { width: 145px; } .cb-nest--b { left: 174px; } .cb-inc { left: 330px; }
  .cb-card-row { grid-template-columns: repeat(2, minmax(86px, 1fr)); } .cb-token-row { grid-template-columns: 76px repeat(4, minmax(74px, 1fr)); }
}
@media (max-width: 900px) {
  .cb { position: relative; inset: auto; grid-template-rows: 220px auto; overflow: visible; }
  .cb-order-card { width: 45%; } .cb-nest--b { display: none; } .cb-inc { left: 180px; }
  .cb-predict, .cb-mystery { grid-template-columns: 1fr; } .cb-grid { min-height: 360px; } .cb-answer { min-height: 300px; }
  .cb-breed { grid-template-columns: 1fr; } .cb-breed-goal { grid-row: auto; } .cb-select-pens { grid-template-columns: 1fr; }
  .cb-token-row { grid-template-columns: repeat(3, minmax(84px, 1fr)); } .cb-token-row-k { grid-column: 1 / -1; } .cb-hatch { position: fixed; inset: 70px 12px 12px; }
}
@media (max-width: 560px) { .cb-order-card { left: 8px; right: 8px; width: auto; } .cb-nest, .cb-inc { opacity: .5; } .cb-card-row { grid-template-columns: repeat(2, 1fr); } .cb-parent-zones { grid-template-columns: 1fr; } .cb-babies { grid-template-columns: repeat(4, 1fr); } }