/* Lock and Lay — cutting the clutch (client/js/hatchfx.js; showHatch on both clients).
   The window stays the game's own grey panel, on either theme. On it, in a game look that belongs to the Gem Store's
   and the Level page's family: a warm header band (the title, a short line, Cut all), a dark score plate (how many are
   cut, a pip per egg in its sex's colour, the clutch's worth in gold), and one nest: a cream-rimmed tub of vermiculite
   where each egg is cut and becomes its baby's card on the spot.
   A card is cream paper in a frame of its sex's colour (gold for a rare hatch): a picture, a sex, a gold price plate
   and a name (two lines at most), with one role pill that shows the choice in its role's colour; a tap on the pill
   opens the four choices, a tap on the picture the rest (the rule that sorted it, its projects, every gene, Share).
   Sorting tools and the bulk bar come in once every egg is cut. The bar at the foot has slab buttons like the one at
   the top: green finishes, cream applies, red sells to the wholesaler.
   The cut itself is the game's own (eggfx.js): the slit, the baby's head out of the egg, its card turning over
   (style.css eggFlip). Round it: the worth ticking up, a word and a burst for a good baby, a blink for a rare one,
   and a short finish. The chunky display face (--gmf) is for titles, the worth, those words and the slab buttons.
   Everything sits under .hx (.hx-phone on the phone), so nothing leaks into another modal; the older .egg rules in
   style.css and mobile.css still apply underneath and the selectors here name the nest so they win.
   Only transform and opacity move, each animation plays once, nothing loops, no masks. With reduced motion nothing
   animates and every result still shows. */
.hx { --hx-f: #e07aa9; --hx-m: #6ca0c2; --hx-q1: #e9e2d4; --hx-q2: #d5cab4; --hx-qe: #9c8f74; --hx-qt: #1e1a15;
  display: flex; flex-direction: column; box-sizing: border-box; min-height: 100%; }
:root[data-theme="dark"] .hx { --hx-q1: #4a433a; --hx-q2: #39332c; --hx-qe: #14110d; --hx-qt: #f3ece0; }
.hx > * { flex: none; }
#modalBox:has(> .hx:not(.hx-phone)) { width: min(1040px, 95vw); height: 90vh; } /* one size from the first egg to Apply: the nest never jumps as the window grows */

/* ---- slab buttons: Cut all at the top, the three at the foot, the bulk bar's. One shape; the colour says what it does.
   (#modalBox gives the shape one id's weight: enough to beat the phone's own button styles, and each button's own
   rules below still win.) ---- */
#modalBox .hx :where(.cut-all, .hatch-foot .actions button, .bulk-btns button:not(.quiet)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 42px; padding: 0 18px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--s1), var(--s2)); color: var(--st); font: 400 16px/1.05 var(--gmf); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 0 var(--se), inset 0 2px 0 rgba(255, 255, 255, var(--sh, .45)); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
#modalBox .hx :where(.cut-all, .hatch-foot .actions button, .bulk-btns button:not(.quiet)):hover:not(:disabled) { background: linear-gradient(180deg, var(--s1), var(--s2)); color: var(--st); filter: brightness(1.06); transform: translateY(-1px); }
#modalBox .hx :where(.cut-all, .hatch-foot .actions button, .bulk-btns button:not(.quiet)):active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--se), inset 0 2px 0 rgba(255, 255, 255, var(--sh, .45)); }
:root .hx :is(.hatch-foot .actions button, .bulk-btns button):disabled { opacity: .45; cursor: default; filter: saturate(.6); }
.hx .cut-all { --s1: #ffe46a; --s2: #ffbd1c; --st: #3d2600; --se: #a86400; --sh: .55; } /* gold: cut */
.hx .hatch-foot .actions button, .hx .bulk-btns button { --s1: var(--hx-q1); --s2: var(--hx-q2); --st: var(--hx-qt); --se: var(--hx-qe); --sh: .12; } /* the quiet one: Done while there is nothing to apply, and the bulk bar's */
.hx .hatch-foot .actions #hatchApply { --s1: #fbf3de; --s2: #e6d7b3; --st: #3a2a1c; --se: #8f7d55; --sh: .6; } /* cream: apply, and stay */
.hx .hatch-foot .actions #hatchWhole { --s1: #f77a5c; --s2: #d9432a; --st: #fff; --se: #7f1f0c; --sh: .3; } /* red: sell to the wholesaler, for good */
.hx.all-cut .hatch-foot .actions #hatchDone, .hx.reopened .hatch-foot .actions #hatchDone, .hx .hatch-foot .actions:has(#hatchApply:not(.hidden)) #hatchDone { --s1: #62e58a; --s2: #25b352; --st: #06310f; --se: #0e6e2e; --sh: .45; } /* green: finish (once there is something to apply, or every egg is cut) */
#modalBox .hx .cut-all { padding: 0 18px 0 15px; font-size: 17px; }
#modalBox .hx .cut-all svg { width: 20px; height: 20px; }
#modalBox .hx .cut-all.busy { filter: saturate(.75); cursor: progress; }
#modalBox .hx .cut-all.done { background: rgba(60, 20, 0, .28); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); cursor: default; opacity: 1; transform: none; filter: none; }

/* ---- the header band: the screen's name, the pairing on one line (in full in its tooltip), and Cut all ---- */
.hx .hatch-head { align-items: center; margin: -26px -30px 0; padding: 18px 30px 14px; border-radius: 15px 15px 0 0; background: linear-gradient(180deg, #f08a26, #c9560f); box-shadow: 0 4px 0 #6f2a06; }
.hx .hatch-head > div { min-width: 0; }
#modalBox .hx .hatch-head h2 { margin: 0; font: 400 27px/1.12 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.hx .hatch-head .meta { margin-top: 3px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx .hatch-head .cut-for, .hx .hatch-head .cut-mixed { color: #fff; }

/* ---- the score: a dark plate. How many are cut and a pip per egg (in its baby's sex colour once cut) on the left;
   the clutch's worth, counting up with a coin for each baby, on the right ---- */
.hx .hx-score { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0; padding: 8px 18px 8px 16px; border-radius: 14px; background: #14110d; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .5), 0 0 0 2px #a8712c, 0 4px 0 2px #4d300c; }
.hx:not(.hx-phone):not(.all-cut):not(.reopened) .hx-score { position: sticky; top: 4px; z-index: 5; } /* in sight while eggs are being cut, as the page scrolls to a lower row */
.hx .hs-cut { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; font: 400 14px/1.3 var(--sans); color: #d9cfbd; }
.hx .hs-n { font: 400 24px/1 var(--gmf); color: #fff; font-variant-numeric: tabular-nums; }
.hx .hs-pips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hx .hs-pips i { box-sizing: border-box; width: 11px; height: 14px; border: 1.5px solid #5d5346; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.hx .hs-pips i.F { background: var(--hx-f); border-color: var(--hx-f); } .hx .hs-pips i.M { background: var(--hx-m); border-color: var(--hx-m); }
.hx .hs-pips i.slug { background: #b9a24e; border-color: #b9a24e; opacity: .5; } .hx .hs-pips i.dead, .hx .hs-pips i.gone { background: #8d8578; border-color: #8d8578; opacity: .55; }
.hx .hs-sex { font-size: 13px; color: #b9ae98; font-variant-numeric: tabular-nums; white-space: nowrap; } .hx .hs-sex:empty { display: none; }
.hx .hs-pips + .hs-sex { display: none; } /* the pips say it; the line is for a cut too big for pips */
.hx .hs-worth { position: relative; flex: none; display: flex; align-items: center; gap: 12px; }
.hx .hs-lbl { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b9ae98; }
.hx .hs-val { display: inline-flex; align-items: center; gap: 7px; }
.hx-coin { flex: none; width: 26px; height: 26px; fill: #ffd84a; stroke: #14110d; stroke-width: 1.7; stroke-linecap: round; opacity: .3; }
.hx-crown { flex: none; width: 16px; height: 16px; fill: #ffd84a; }
.hx .hs-num { min-width: 2.2em; text-align: right; font: 400 36px/1.1 var(--gmf); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #6f6557; }
.hx .hx-score.has .hs-num { color: #ffd84a; text-shadow: 0 3px 0 #8a5200; } .hx .hx-score.has .hx-coin { opacity: 1; }
.hx .hs-plus { position: absolute; right: 2px; top: -24px; font: 700 13px/1 var(--mono); font-style: normal; color: var(--moss-2); white-space: nowrap; opacity: 0; pointer-events: none; }
.hx .hs-plus.go { animation: hxPlus 1s ease-out both; }
@keyframes hxPlus { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 18% { opacity: 1; transform: translateY(-4px) scale(1.1); } 30% { transform: translateY(-3px) scale(1); } 75% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-18px); } }
.hx .hx-score.tick .hx-coin { animation: hxCoin .5s ease-out; }
@keyframes hxCoin { 0% { transform: none; } 30% { transform: translateY(-6px) scaleX(.1); } 60% { transform: translateY(-3px) scaleX(-1); } 100% { transform: none; } }
.hx .hx-score.landed .hs-num { animation: hxLanded .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes hxLanded { 0% { transform: scale(1.3); } 100% { transform: none; } }
/* what the clutch proved (the server's lines), kept under the score once the finish has shown them */
.hx .hx-news { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 0; padding: 9px 14px; border-radius: 10px; background: var(--paper-2); box-shadow: inset 4px 0 0 var(--moss-2); }
.hx .hx-news > b { flex: none; padding-top: 1px; font: 400 14px/1.4 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: var(--moss-2); white-space: nowrap; }
.hx-newsl { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; font: 500 13px/1.4 var(--sans); color: var(--ink); }
.hx-newsl li { padding: 1px 0 1px 18px; }
.hx-newsl li::before { content: '•'; float: left; width: 18px; margin-left: -18px; text-align: center; color: var(--ink-3); }
.hx-newsl li.proven { color: var(--moss-2); font-weight: 600; } .hx-newsl li.proven::before { content: '✔'; color: var(--moss-2); }
.hx-newsl li.mutation, .hx-newsl li.paradox { color: var(--amber); font-weight: 600; } .hx-newsl li.mutation::before, .hx-newsl li.paradox::before { content: '★'; color: var(--amber); }
.hx-newsl li.cleared, .hx-newsl li.unlikely { color: var(--brick); } .hx-newsl li.more { color: var(--ink-3); }

/* the Grow-out parents' question (growoutui.js), in the look: a rounded plate, the parent's long label cut short, the
   answers as pills (the one picked keeps its role's colour from style.css) */
.hx #growDigest:not(:empty) { margin-top: 12px; }
.hx #growDigest .hatch-keep, .hx #growDigest .gdigest { margin-top: 0; border-left: 0; border-radius: 10px; box-shadow: inset 4px 0 0 var(--moss-2); }
.hx #growDigest .hatch-keep.gd-one.k-failed { box-shadow: inset 4px 0 0 var(--amber); } .hx #growDigest .hatch-keep.gd-one:not(.k-proved):not(.k-failed) { box-shadow: inset 4px 0 0 var(--rule-2); }
.hx #growDigest .hatch-keep { padding: 9px 14px; }
.hx #growDigest .gd-one .gd-txt > b { display: inline-block; max-width: min(30ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
:root .hx #growDigest .gd-acts button, :root .hx #growDigest .gd-bulk button { min-height: 30px; padding: 0 13px; border-width: 1.5px; border-radius: 99px; font: 600 12.5px/1 var(--sans); box-shadow: none; }
:root .hx #growDigest .gd-acts button:not(.on):not(.quiet) { border-color: var(--rule-2); background: transparent; color: var(--ink); }
body:not(.mobile) .hx #growDigest .gd-acts button:not(.on):hover { background: var(--paper-3); color: var(--ink); }
.hx .hatch-sort { justify-content: flex-end; margin-top: 12px; }
.hx:not(.all-cut):not(.reopened) .hatch-sort { visibility: hidden; } /* nothing to sort while eggs are still being cut: the row keeps its place and comes in with the last egg */

/* ---- the nest: a cream-rimmed tub of vermiculite, lit from above; an egg sits in each place and becomes its baby's card there ---- */
.hx .eggs.hx-nest { --hx-th: 252px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; margin: 8px 0 18px; padding: 12px; border: 4px solid #f1e2bf; border-radius: 22px;
  background-color: #9a7645; background-image: radial-gradient(ellipse 100% 65% at 50% 0, rgba(255, 238, 196, .32), transparent 75%), linear-gradient(180deg, rgba(60, 28, 6, 0) 60%, rgba(60, 28, 6, .3)), var(--verm, none); background-size: 100% 100%, 100% 100%, 220px 220px;
  box-shadow: inset 0 6px 12px rgba(50, 24, 4, .55), 0 0 0 2px #2c2118, 0 6px 0 2px #15100b; }
.hx .eggs.hx-nest .egg { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; height: auto; min-width: 0; min-height: 168px; scroll-margin: 96px 0 96px; padding: 0; border: 0; border-radius: 14px; background: none; box-shadow: none; overflow: visible; isolation: isolate; text-align: left; }
/* one clutch: every place is a card's size from the start, so cutting an egg moves nothing. A big cut (several
   clutches) keeps its eggs close and lets the cards grow. */
.hx .eggs.hx-nest.few .egg { height: var(--hx-th); min-height: 0; }
.hx .eggs.hx-nest .egg:not(.open) { touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M13 13 L27 27' stroke='%231c1814' stroke-width='6.5' stroke-linecap='round'/><path d='M13 13 L27 27' stroke='%2393a1a8' stroke-width='4' stroke-linecap='round'/><path d='M3 3 Q11 3.5 15 11 L11 15 Q3.5 11 3 3 Z' fill='%23eef2f3' stroke='%231c1814' stroke-width='1.2' stroke-linejoin='round'/></svg>") 3 3, pointer; }
.hx .eggs.hx-nest .egg.cutting { cursor: progress; }
/* the egg is the game's own (eggfx.js): a canvas in each place, slit and opened by its own animation, on its shadow
   in the bedding as the tray always drew it. The card that follows turns over in place (style.css eggFlip). */
.hx .eggs.hx-nest .egg:not(.open), .hx .eggs.hx-nest .egg.open.hx-dud { background-image: radial-gradient(ellipse 40% 22% at 50% 80%, rgba(30, 18, 6, .5), transparent 72%); }
.hx .eggs.hx-nest .egg canvas.egg-cv { display: block; flex: none; }
.hx .eggs.hx-nest .egg:not(.open):not(.cutting)::after { bottom: 14px; z-index: 1; }
body.mobile .hx .eggs.hx-nest .egg:not(.open)::after { display: none; }
/* how to cut, over the nest's corner, in the Sort row's band: until the first egg is cut */
.hx .hx-sign { position: absolute; left: 4px; top: -31px; font: 400 13px/1.5 var(--sans); color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.hx.began .hx-sign, .hx.all-cut .hx-sign { display: none; }

/* a baby's card: cream paper in a frame of its sex's colour (gold for a rare hatch). Its picture, its sex and a gold
   price plate on the picture's edge, its name (two lines at most, in full in its tooltip), and its role pill. One size,
   whatever the morph is called. Inside it the game's colour names are ink on paper again, on either theme. */
.hx .eggs.hx-nest .egg.open:not(.hx-dud) { --hx-card: #fff8e9; --ink: #2a1a10; --ink-2: #6b5847; --ink-3: #9c8872; --rule: #e3d5b8; --rule-2: #cdb994; --paper: #fff8e9; --paper-2: #f1e5cb; --paper-3: #e6d7b6; --moss: #2f8f4f; --moss-2: #2f8f4f; --amber: #d08a1c; --sky: #2f7fc0; --brick: #a3402f;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-height: 0; padding: 6px 6px 7px; border: 3px solid #e4d2aa; border-radius: 14px; background: #fff8e9; box-shadow: 0 5px 0 rgba(40, 18, 4, .55), 0 12px 14px -8px rgba(0, 0, 0, .5); color: var(--ink); cursor: default; }
.hx .eggs.hx-nest.many .egg.open:not(.hx-dud) { height: var(--hx-th); }
.hx .eggs.hx-nest .egg.open.hx-f:not(.hx-dud) { border-color: #d76a9f; } .hx .eggs.hx-nest .egg.open.hx-m:not(.hx-dud) { border-color: #4f9bd6; }
.hx .eggs.hx-nest .egg.open.hx-rare:not(.hx-dud) { border-color: #ffb81c; background: linear-gradient(180deg, #fff9dc, #ffeeb0); }
.hx .hx-pic { position: relative; border-radius: 8px; overflow: hidden; background: var(--thumb-bg); }
.hx .eggs.hx-nest .egg.open .hx-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 52 / 26; object-fit: cover; border-radius: 0; background: none; }
.hx .eggs.hx-nest .egg.open.decided .hx-pic canvas { opacity: .5; }
.hx .hx-plate { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: -13px 4px 0; pointer-events: none; }
.hx .hx-plate .baby-sex { flex: none; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 99px; color: #fff; font: 700 12px/1.5 var(--sans); box-shadow: 0 0 0 2px #fff8e9; }
.hx .hx-plate .baby-sex.F { background: #b5457a; } .hx .hx-plate .baby-sex.M { background: #2f6f9f; }
.hx .eggs.hx-nest .egg.open .hx-plate .v { flex: none; padding: 4px 9px 2px; border-radius: 8px; background: linear-gradient(180deg, #ffe27a, #f4b934); color: #3d2600; font: 400 16px/1.25 var(--gmf); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 2px #fff8e9, 0 3px 0 2px #9a6200; }
.hx .eggs.hx-nest .egg.open .n { margin: 7px 3px 0; min-height: 2.6em; font: 600 13.5px/1.3 var(--sans); color: var(--ink); text-align: left; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the role: four buttons, always there, one tap each (#1104). A pill that opened a menu cost a second tap on every baby,
   and players sort a whole clutch at a time. The one chosen is filled in its role's colour; Wholesale says what it
   pays. A baby with no choice yet (a rare one, or with the hatch rules off) has none filled. */
.hx .eggs.hx-nest .egg.open .eggacts { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; min-height: 0; margin: auto 0 0; padding: 7px 1px 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; min-width: 0; min-height: 0; height: 27px; margin: 0; padding: 0 5px; border: 1.5px solid color-mix(in srgb, var(--rc) 40%, #d9c9a6); border-radius: 8px; background: #fffdf6; color: #3a2a1c; box-shadow: none; font: 700 12px/1 var(--sans); white-space: nowrap; overflow: hidden; transition: none; --rc: #3a2a1c; --re: #1d140c; --rt: #fff; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip[data-act="growout"] { --rc: #2f9a54; --re: #1c6a36; } :root .hx .eggs.hx-nest .egg.open .eggacts .chip:is([data-act="sell"], [data-act="list"]) { --rc: #3186cb; --re: #1d5a8f; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip[data-act="wholesale"] { --rc: #f0a92a; --re: #a86a08; --rt: #3d2600; }
/* Wholesale carries a price, so it gets the wider place on the second row; List is one short word */
:root .hx .eggs.hx-nest .egg.open .eggacts .chip { grid-column: span 5; } :root .hx .eggs.hx-nest .egg.open .eggacts .chip[data-act="wholesale"] { grid-column: span 7; } :root .hx .eggs.hx-nest .egg.open .eggacts .chip[data-act="list"] { grid-column: span 3; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip small { display: inline; margin: 0; font: 600 10.5px/1 var(--mono); opacity: .9; }
body:not(.mobile) .hx .eggs.hx-nest .egg.open .eggacts .chip:hover:not(.on):not(:disabled) { background: color-mix(in srgb, var(--rc) 16%, #fffdf6); border-color: var(--rc); color: #2a1a10; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip.on { background: var(--rc); border-color: var(--re); color: var(--rt); box-shadow: 0 2px 0 var(--re), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip:disabled { opacity: .5; box-shadow: none; }
/* the picture is the way in to the rest: a tap opens the card's details (the Genes toggle, laid over the picture) */
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 1; aspect-ratio: 52 / 26; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; color: transparent; font-size: 0; cursor: pointer; }
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn::after { content: 'Details'; position: absolute; top: 5px; right: 5px; padding: 0 7px; border-radius: 6px; background: rgba(20, 16, 12, .7); color: #f3ece0; font: 500 10.5px/20px var(--sans); opacity: 0; transition: opacity .12s; }
body:not(.mobile) .hx .eggs.hx-nest .egg.open:hover > .baby-genes-btn::after, .hx .eggs.hx-nest .egg.open > .baby-genes-btn:focus-visible::after { opacity: 1; }
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"] { top: 11px; left: auto; right: 11px; z-index: 4; aspect-ratio: auto; width: auto; height: 22px; }
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"]::after { content: 'Close'; position: static; display: block; padding: 0 8px; background: #3a2a1c; color: #fff; line-height: 22px; opacity: 1; }
.hx .hx-more { display: none; position: absolute; left: 6px; right: 6px; top: 6px; bottom: 76px; z-index: 3; flex-direction: column; gap: 6px; box-sizing: border-box; padding: 8px 8px 6px; border: 1px solid var(--rule-2); border-radius: 8px; background: #fffdf6; overflow: hidden; }
.hx .eggs.hx-nest .egg.open:has(> .baby-genes-btn[aria-expanded="true"]) > .hx-more { display: flex; }
.hx .hx-more .egg-meta { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-right: 54px; min-height: 22px; max-height: 62px; overflow: hidden; }
.hx .hx-more .egg-meta:empty { display: none; }
.hx .hx-more .egg-rule { display: contents; }
.hx .hx-more .rule-chip { white-space: normal; text-align: left; }
.hx .hx-more .proj-lines { flex-basis: 100%; align-items: flex-start; }
.hx .hx-more .egg-proj { margin: 0; }
.hx .hx-more .egg-hets { display: none; } /* (the phone's short het pills: every gene is listed just below) */
.hx .hx-more .hx-rarenote { flex-basis: 100%; font: 500 12px/1.4 var(--sans); color: var(--ink-2); }
.hx .hx-more .egg-from { flex-basis: 100%; font-size: 11px; color: var(--ink-3); text-align: left; white-space: normal; }
.hx .eggs.hx-nest .egg.open .hx-more .baby-genes { flex: 1 1 0; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; gap: 4px; overflow-y: auto; overscroll-behavior: contain; }
.hx .eggs.hx-nest .egg.open .hx-more .baby-genes.hidden { display: flex; } /* the panel is what opens and closes */
.hx .hx-more .gene, .hx .hx-more .tag { background: #fff; color: #1e1a15; }
/* a gene's type shows in its pill's colour, as it did on the old dark cards where the border alone was enough (#1097):
   gold a co-dom, blue a dominant, purple a recessive; a het is white with a dashed purple edge, an unlikely one faint */
.hx .hx-more .gene.codom { background: #fdeab0; border-color: #b9820f; color: #563900; font-weight: 600; }
.hx .hx-more .gene.dom { background: #d9e7fb; border-color: #4a80c6; color: #143a6c; font-weight: 600; }
.hx .hx-more .gene.rec { background: #ead8f7; border-color: #8e58be; color: #46206e; font-weight: 600; }
.hx .hx-more .gene.rec.het { background: #fff; border-style: dashed; color: #5f3888; font-weight: 500; }
.hx .hx-more .gene.rec.het.unlikely { opacity: .6; border-color: #b9a9c8; color: #7b6a8c; }
.hx .hx-more .egg-tools { flex: none; display: flex; justify-content: flex-end; }
:root .hx .hx-more .egg-tools .chip { min-height: 0; height: 24px; padding: 0 10px; }
/* what hangs on a card: how many of its look are owned, the by-hand pin, the Best mark, the Rare mark, the decided stamp */
.hx .eggs.hx-nest .egg.open > .own-n { top: 10px; left: 10px; z-index: 2; } .hx .eggs.hx-nest .egg.open > .hand-pin { top: 10px; left: 10px; z-index: 2; } .hx .eggs.hx-nest .egg.open > .own-n ~ .hand-pin { top: 29px; }
.hx .eggs.hx-nest .egg.open.best::after { content: '♛ Best'; top: -10px; right: 10px; left: auto; bottom: auto; z-index: 2; padding: 0 8px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #ffe27a, #f4b934); color: #3d2600; font: 400 11.5px/1.7 var(--gmf); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 0 #9a6200; animation: hxTag .36s cubic-bezier(.2, .9, .3, 1.4) both; }
.hx .eggs.hx-nest .egg.open.best.hx-crownwait::after { display: none; }
@keyframes hxTag { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.hx .hx-tag { position: absolute; top: -10px; left: 10px; z-index: 2; padding: 4px 9px 3px; border-radius: 6px; background: linear-gradient(180deg, #ff5b8d, #ff2a66); color: #fff; font: 400 11.5px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); pointer-events: none; }
.hx .eggs.hx-nest .egg.open:has(> .hx-tag) > .own-n, .hx .eggs.hx-nest .egg.open:has(> .hx-tag) > .hand-pin { top: 18px; }
.hx .eggs.hx-nest .egg.open .stamp { top: auto; bottom: 10px; left: 9px; right: auto; z-index: 2; padding: 3px 8px; font-size: 11px; background: #fffdf6; transform: rotate(-3deg); } /* an applied card: what it became, stamped where its pill was */
.hx .eggs.hx-nest .egg.open.decided .eggacts { visibility: hidden; }
.hx .eggs.hx-nest .egg.open.gone:not(.hx-dud) { align-items: center; justify-content: center; opacity: .7; } .hx .eggs.hx-nest .egg.open.gone .stamp { position: static; margin-top: 8px; }
/* a slug, or one that went bad: its egg stays as the cut left it (a slug sagged; one that went bad gaping a little), under what it was */
.hx .eggs.hx-nest .egg.open.hx-dud { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 0 0 8px; cursor: default; overflow: hidden; } /* its egg never spills out of its cell (#1339) */
.hx .eggs.hx-nest .egg.hx-dud.revealed { animation: none; } /* nothing turns over: the egg is still there */
.hx .eggs.hx-nest .egg.open.hx-dud canvas.egg-cv { position: absolute; left: 0; top: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; background: none; opacity: .9; }
.hx .eggs.hx-nest .egg.open.hx-dud .n { position: relative; margin: 0; padding: 4px 10px 3px; border-radius: 6px; background: rgba(28, 12, 4, .82); color: #f6e7c8; font: 400 12px/1 var(--gmf); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hx .eggs.hx-nest .egg.open.hx-dud .v { font: 600 11.5px/1.3 var(--sans); color: #fff3d6; text-shadow: 0 1px 2px rgba(30, 14, 4, .9); }

/* ---- round the card as it turns over: its word and a soft glow behind a keeper or a rare baby; the crown ---- */
.hx .hx-rays { position: absolute; left: 50%; top: 46%; z-index: -1; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(closest-side, var(--hg, rgba(255, 176, 20, .6)) 0%, transparent 70%); pointer-events: none; animation: hxRays .7s cubic-bezier(.2, .7, .3, 1) both; }
.hx .eggs.hx-nest .egg.hx-rare > .hx-rays { --hg: rgba(255, 200, 40, .65); }
@keyframes hxRays { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.hx .hx-word { position: absolute; left: 50%; top: -36px; z-index: 5; translate: -50% 0; font: 400 30px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: #ffe763; text-shadow: 0 3px 0 #8a5200, 0 6px 0 rgba(0, 0, 0, .3); transform: rotate(-4deg); pointer-events: none; animation: hxSlam .42s cubic-bezier(.2, .9, .3, 1.2) .1s both; }
.hx .eggs.hx-nest .egg.hx-rare > .hx-word { top: -42px; font-size: 36px; }
@keyframes hxSlam { 0% { opacity: 0; transform: scale(2.6) rotate(-10deg); } 60% { opacity: 1; transform: scale(.9) rotate(-4deg); } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
#hxSky { position: fixed; inset: 0; z-index: 400; overflow: hidden; pointer-events: none; }
.hx-blink { position: absolute; inset: 0; background: #fff6cf; opacity: 0; }
.hx-crownfly { position: fixed; z-index: 2; width: 26px; height: 26px; pointer-events: none; } .hx-crownfly .hx-crown { width: 26px; height: 26px; fill: #ffd84a; }

/* ---- the finish: the clutch for a moment (its worth, its best baby, what it proved); a click, or two seconds, and
   it is gone into the score. It takes no clicks of its own. In the header band's colours. ---- */
.hx-fin { --hx-f: #ffb3d4; --hx-m: #b5dcff; position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(14, 12, 9, .62); pointer-events: none; animation: hxFade .2s ease-out both; }
@keyframes hxFade { from { opacity: 0; } }
.hx-fin-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(420px, 100%); box-sizing: border-box; padding: 24px 22px 20px; border: 4px solid #ffe487; border-radius: 22px; background: radial-gradient(100% 80% at 50% 24%, #f7a13c 0%, #d9621a 52%, #7b2a08 100%); box-shadow: 0 7px 0 rgba(0, 0, 0, .45), 0 30px 50px -16px rgba(0, 0, 0, .8); color: #fff; text-align: center; animation: hxFinIn .34s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes hxFinIn { from { opacity: 0; transform: translateY(26px) scale(.86); } }
.hx-fin-card > .hx-rays { display: none; }
.hx-fin-word { font: 400 42px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: #ffe763; text-shadow: 0 4px 0 #8a4a00, 0 8px 0 rgba(0, 0, 0, .3); transform: rotate(-3deg); animation: hxSlam2 .5s cubic-bezier(.2, .9, .3, 1.2) .12s both; }
@keyframes hxSlam2 { 0% { opacity: 0; transform: scale(2.4) rotate(-9deg); } 60% { opacity: 1; transform: scale(.92) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
.hx-fin-sub { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font: 600 13.5px/1.2 var(--sans); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.hx-fin-sub i { display: inline-flex; align-items: center; gap: 3px; font: 700 13.5px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; } .hx-fin-sub svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hx-fin-sub .F { color: var(--hx-f); } .hx-fin-sub .M { color: var(--hx-m); }
.hx-fin-worth { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 12px; }
.hx-fin-worth span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.hx-fin-worth b { font: 400 54px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 4px 0 #7a2e06, 0 8px 0 rgba(0, 0, 0, .3); }
.hx-fin-best { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; box-sizing: border-box; margin-top: 16px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(30, 10, 2, .5); text-align: left; }
.hx-fin-best canvas { display: block; width: 112px !important; height: 65px !important; border-radius: 8px; background: var(--thumb-bg); }
.hx-fin-best > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; align-items: center; min-width: 0; }
.hx-fin-best span { font: 600 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffe763; }
.hx-fin-best b { grid-column: 1 / -1; font: 600 13.5px/1.3 var(--sans); color: #fff; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-fin-best i { grid-column: 1 / -1; font: 400 17px/1.1 var(--gmf); font-style: normal; color: #ffe763; }
.hx-fin-card .hx-newsl { width: 100%; box-sizing: border-box; max-height: none; overflow: hidden; margin-top: 12px; padding: 9px 12px; border-radius: 14px; background: rgba(30, 10, 2, .5); color: #fff; text-align: left; }
.hx-fin-card .hx-newsl li.proven, .hx-fin-card .hx-newsl li.proven::before { color: #8dffb0; } .hx-fin-card .hx-newsl li.mutation, .hx-fin-card .hx-newsl li.paradox, .hx-fin-card .hx-newsl li.mutation::before, .hx-fin-card .hx-newsl li.paradox::before { color: #ffe763; }
.hx-fin-card .hx-newsl li.cleared, .hx-fin-card .hx-newsl li.unlikely { color: #ffc3b6; } .hx-fin-card .hx-newsl li::before, .hx-fin-card .hx-newsl li.more { color: rgba(255, 255, 255, .7); }

/* ---- the bulk bar: it comes in with the last egg (nothing to do in bulk while eggs are still being cut). Its long
   explanation waits behind the "?"; Rules… and the switch stay in reach ---- */
.hx:not(.all-cut):not(.reopened) :is(#hatchBulk, #hatchPrice) { display: none; } /* (the phone's asking-price row is its own block) */
.hx .hatch-bulk { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.hx #hatchBulk .bulk-title { position: relative; align-items: center; padding-right: 36px; }
.hx .bulk-title b { font: 400 18px/1.2 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.hx #hatchBulk:not(.explain) #bulkMeta { font-size: 0; } .hx #hatchBulk:not(.explain) #bulkMeta .linkish { margin-right: 12px; font-size: 12.5px; }
:root .hx .hx-why { position: absolute; top: 0; right: 0; width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: none; box-shadow: none; color: var(--ink-2); font: 700 12px/1 var(--sans); } :root .hx .hx-why[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#modalBox .hx .bulk-btns button:not(.quiet) { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; box-shadow: 0 3px 0 var(--se), inset 0 2px 0 rgba(255, 255, 255, var(--sh, .12)); }
#modalBox .hx .bulk-btns #bulkSell small { display: block; margin-top: 1px; font: 600 10.5px/1 var(--sans); letter-spacing: 0; text-transform: none; opacity: .8; }
:root .hx .bulk-btns button.quiet { border: 0; background: none; box-shadow: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---- the bar at the foot: the summary and the slab buttons ---- */
.hx .hatch-foot { margin-top: auto; padding-top: 12px; padding-bottom: 18px; }
.hx .hatch-foot .meta b { font: 400 16px/1 var(--gmf); color: var(--ink); }
.hx .hatch-foot .actions { display: flex; align-items: center; gap: 10px; }
/* Sort the babies (a clutch already cut): the cards straight away */
.hx.reopened .eggs.hx-nest { margin-top: 10px; }

/* ---- the phone: two places across; the eggs sit close and a place grows when its egg is cut ---- */
.hx.hx-phone { min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px - env(safe-area-inset-bottom)); }
.hx.hx-phone .hatch-head { display: block; margin: -20px -18px 0; padding: max(18px, env(safe-area-inset-top)) 64px 13px 18px; border-radius: 0; }
#modalBox .hx.hx-phone .hatch-head h2 { font-size: 24px; }
.hx.hx-phone .hatch-head .meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx.hx-phone .hx-cutrow { margin: 14px 0 0; } #modalBox .hx.hx-phone .hx-cutrow .cut-all { width: 100%; min-height: 48px; font-size: 18px; }
.hx.hx-phone .hx-cutrow:has(.cut-all.done) { display: none; } /* every egg is cut: the score says so, and the row gives its room back */
.hx.hx-phone .hx-score { margin-top: 14px; padding: 8px 13px; }
.hx.hx-phone .hs-cut { flex-direction: column; align-items: flex-start; gap: 4px; } .hx.hx-phone .hs-worth { flex-direction: column; align-items: flex-end; gap: 0; }
.hx.hx-phone .hs-n { font-size: 21px; } .hx.hx-phone .hs-num { font-size: 31px; }
.hx.hx-phone .hx-news { flex-direction: column; gap: 3px; }
.hx.hx-phone .hatch-sort { justify-content: flex-start; flex-wrap: nowrap; gap: 6px; margin: 12px -18px 0; padding: 0 18px; overflow-x: auto; scrollbar-width: none; } .hx.hx-phone .hatch-sort::-webkit-scrollbar { display: none; }
.hx.hx-phone .hatch-sort .lbl { display: none; } .hx.hx-phone .hatch-sort .chip { flex: none; white-space: nowrap; }
.hx.hx-phone .hatch-sort .hs-genes { display: contents; }
.hx.hx-phone .hx-sign { top: -33px; }
.hx.hx-phone .eggs.hx-nest { --hx-th: 240px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px; border-radius: 20px; }
.hx.hx-phone .eggs.hx-nest.few .egg { height: 150px; } .hx.hx-phone .eggs.hx-nest.few .egg.open:not(.hx-dud) { height: var(--hx-th); }
.hx.hx-phone .eggs.hx-nest .egg { min-height: 150px; scroll-margin: 70px 0 150px; }
.hx.hx-phone .eggs.hx-nest .egg.open .hx-pic canvas { width: 100% !important; height: auto !important; aspect-ratio: 52 / 30; object-fit: cover; } /* the phone's painter leaves an inline size */
:root .hx.hx-phone .eggs.hx-nest .egg.open > .baby-genes-btn { aspect-ratio: 52 / 30; }
:root .hx.hx-phone .eggs.hx-nest .egg.open > .baby-genes-btn::after { content: '⋯'; top: 4px; right: 4px; width: 24px; padding: 0; text-align: center; font: 700 15px/20px var(--sans); opacity: .85; }
:root .hx.hx-phone .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"] { aspect-ratio: auto; height: 26px; }
:root .hx.hx-phone .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"]::after { content: 'Close'; width: auto; padding: 0 10px; font: 500 11.5px/26px var(--sans); }
.hx.hx-phone .hx-plate .baby-sex { padding: 1px 8px 1px 5px; font-size: 11.5px; } .hx.hx-phone .eggs.hx-nest .egg.open .hx-plate .v { padding: 4px 7px 2px; font-size: 15px; }
:root .hx.hx-phone .eggs.hx-nest .egg.open .eggacts .chip { height: 32px; font-size: 11.5px; padding: 0 3px; gap: 3px; } :root .hx.hx-phone .eggs.hx-nest .egg.open .eggacts .chip small { font-size: 10px; }
:root .hx.hx-phone .hx-more .egg-tools .chip { min-height: 28px; }
.hx.hx-phone .eggs.hx-nest .egg.open > .own-n, .hx.hx-phone .eggs.hx-nest .egg.open > .hand-pin { top: 10px; left: 10px; } .hx.hx-phone .eggs.hx-nest .egg.open > .own-n ~ .hand-pin { top: 28px; }
.hx.hx-phone .hx-word { font-size: 25px; top: -31px; } .hx.hx-phone .eggs.hx-nest .egg.hx-rare > .hx-word { font-size: 29px; top: -35px; }
.hx-fin.phone .hx-fin-word { font-size: 36px; } .hx-fin.phone .hx-fin-worth b { font-size: 46px; }
.hx.hx-phone #growDigest .gd-one .gd-txt { flex: 1 1 100%; min-width: 0; } .hx.hx-phone #growDigest .gd-one .gd-txt > b { max-width: 14ch; }
:root .hx.hx-phone #bulkMeta .linkish { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--moss-2); font-weight: 500; text-decoration: underline; }
.hx.hx-phone .bulk-btns { gap: 8px; } #modalBox .hx.hx-phone .bulk-btns button:not(.quiet) { flex: 1 1 calc(50% - 8px); min-height: 44px; padding: 2px 8px; white-space: normal; }
/* the foot on the phone: the summary, then the buttons across, each a thumb high */
#modalBox .hx.hx-phone .hatch-foot .actions button { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 2px 6px; font-size: 14px; line-height: 1.08; white-space: normal; }

/* ---- Show all genes (the Sort row's switch, remembered from clutch to clutch): every card lists its rule, projects
   and genes under its name, with the picture left in sight, and the cards grow to fit. A tap on a picture folds
   that one card again. ---- */
.hx .eggs.hx-nest:is(.few, .many) .egg.open:not(.hx-dud) { height: auto; min-height: var(--hx-th); }
.hx .eggs.hx-nest .egg.open:has(> .baby-genes-btn[aria-expanded="true"]) > .hx-more { position: static; margin: 6px 2px 2px; padding: 0; border: 0; background: none; overflow: visible; }
.hx .eggs.hx-nest .egg.open .hx-more .egg-meta { padding-right: 0; max-height: none; }
.hx .eggs.hx-nest .egg.open .hx-more .baby-genes { flex: none; overflow: visible; }
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"] { top: 6px; left: 6px; right: 6px; z-index: 1; aspect-ratio: 52 / 26; width: auto; height: auto; }
:root .hx.hx-phone .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"] { aspect-ratio: 52 / 30; height: auto; }
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"]::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .hx .hs-plus.go, .hx .hx-score.tick .hx-coin, .hx .hx-score.landed .hs-num, .hx .eggs.hx-nest .egg.open.best::after, .hx .eggs.hx-nest .egg.open > .baby-genes-btn::after, .hx .hx-rays, .hx .hx-word, .hx-fin, .hx-fin-card, .hx-fin-word { animation: none !important; }
  #modalBox .hx :is(.cut-all, .hatch-foot .actions button, .bulk-btns button) { transition: none; }
}

/* ---- the card, tidied (#1101). Drew, of a card with its genes shown: "this is hard to read and the buttons are
   everywhere". Top to bottom it now reads: name, genes, then one quiet line (the rule that sorted it and its project);
   Share sits at the end of that line, and the role buttons take the foot. The small print is a size up
   and darker. ---- */
.hx .eggs.hx-nest .egg.open .n { font-weight: 700; font-size: 14px; }
.hx .hx-more .gene, .hx .hx-more .tag { padding: 3px 8px; border-radius: 6px; font-size: 12px; line-height: 1.25; }
.hx .hx-more .rule-chip { padding: 1px 7px; border-radius: 6px; font: 600 11px/16px var(--sans); letter-spacing: 0; background: color-mix(in srgb, var(--rc) 16%, #fff); color: color-mix(in srgb, var(--rc) 50%, #1e1a15); border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
.hx .hx-more .proj-line { font-size: 11.5px; font-style: normal; color: var(--ink-2); }
.hx .hx-more .proj-lines { align-items: flex-start; }
:root .hx .hx-more .egg-tools .chip.share { height: 28px; padding: 0 12px; border: 1.5px solid #2f7fc0; border-radius: 99px; background: #fff; color: #1d5a8f; font: 700 12px/1 var(--sans); }
body:not(.mobile) .hx .hx-more .egg-tools .chip.share:hover { background: #2f7fc0; color: #fff; }
/* with every card's genes shown: the genes come straight after the name, the quiet line after them; a rule above the foot row, with Share on it at the right */
/* every card in a row is as tall as the tallest (Drew: "now all the cards are uneven"): the name keeps its two lines so the
   genes start level, and the foot row sits on the bottom edge of each */
.hx .eggs.hx-nest { align-items: stretch; }
.hx .eggs.hx-nest:is(.few, .many) .egg.open:not(.hx-dud) { height: auto; align-self: stretch; }
.hx .eggs.hx-nest .egg.open:has(> .baby-genes-btn[aria-expanded="true"]) > .hx-more { margin: 7px 3px 9px; gap: 7px; }
.hx .eggs.hx-nest .egg.open .hx-more .baby-genes { order: 1; gap: 4px; }
.hx .eggs.hx-nest .egg.open .hx-more .egg-meta { order: 2; }
.hx .eggs.hx-nest .egg.open:has(> .baby-genes-btn[aria-expanded="true"]) > .hx-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hx .eggs.hx-nest .egg.open .hx-more .baby-genes { grid-column: 1 / -1; }
.hx .eggs.hx-nest .egg.open .hx-more .egg-tools { order: 3; }
/* two lines of genes, then "+N more" opens the rest on that card (babygenes.js clampGenes, #1101) */
.hx .hx-more .gene.gx { display: none; }
:root .hx .hx-more .gene-more { display: inline-flex; align-items: center; min-height: 0; height: auto; margin: 0; padding: 3px 8px; border: 1px dashed #b9a47c; border-radius: 6px; background: #fff; color: #5a4634; box-shadow: none; font: 700 12px/1.25 var(--sans); white-space: nowrap; cursor: pointer; }
:root .hx .hx-more .gene-more[hidden] { display: none; }
body:not(.mobile) .hx .hx-more .gene-more:hover { border-style: solid; border-color: #6b5847; background: #f1e5cb; color: #2a1a10; }
/* what the cut proved, under the score (#1105): three lines, then "Show all N". It used to be a little scroll area of its
   own, which caught the wheel (and a finger) whenever more than three animals proved, so the page under it would not
   move. Nothing on this screen scrolls inside the page now except a card's own Details. */
.hx-news:not(.all) .hx-newsl li:nth-child(n+4):not(.more) { display: none; }
:root .hx-news .hx-news-all { flex: none; align-self: flex-start; min-height: 0; height: 24px; margin: 0 0 0 10px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 99px; background: transparent; color: var(--ink-2); box-shadow: none; font: 600 12px/1 var(--sans); white-space: nowrap; cursor: pointer; }
body:not(.mobile) .hx-news .hx-news-all:hover { background: var(--paper-3); color: var(--ink); }

/* ---- the clutch on one screen (#1118). Drew: "i have to scroll on most clutches of eggs". On a computer the window
   is wider and taller and the nest is five across, so a clutch of up to ten eggs is two rows; the card is slimmer (a
   shorter picture, the name on one line since the pills spell it out, Share on the picture's corner, no "no project"
   line) and the header and score take less height. Every card shows its gene pills (#1117); a key to their colours
   sits by Show all genes. ---- */
#modalBox:has(> .hx:not(.hx-phone)) { width: min(1240px, 96vw); height: 95vh; max-height: 95vh; }
.hx:not(.hx-phone) .hatch-head { padding: 12px 30px 10px; }
#modalBox .hx:not(.hx-phone) .hatch-head h2 { font-size: 24px; }
.hx:not(.hx-phone) .hx-score { margin-top: 12px; padding-top: 5px; padding-bottom: 5px; }
.hx:not(.hx-phone) .hatch-sort { margin-top: 8px; }
.hx:not(.hx-phone) .eggs.hx-nest { --hx-th: 260px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 6px 0 12px; padding: 10px; }
.hx .eggs.hx-nest .egg.open .hx-pic canvas, :root .hx .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"] { aspect-ratio: 52 / 21; }
.hx .eggs.hx-nest .egg.open .n { min-height: 1.3em; margin-top: 6px; -webkit-line-clamp: 1; }
.hx .eggs.hx-nest .egg.open:has(> .baby-genes-btn[aria-expanded="true"]) > .hx-more { margin: 6px 2px 7px; gap: 5px; }
.hx .hx-more .gene, .hx .hx-more .tag, :root .hx .hx-more .gene-more { padding: 2px 7px; font-size: 11.5px; }
.hx .hx-more .egg-rule > .proj-line:not(.on) { display: none; } /* "no project" said nothing the card needed */
.hx .hx-more .egg-rule > .rule-chip:not(.overridden):not(.set-before) { display: none; } /* the role buttons already show what the rules picked; the chip comes back, struck through, when you change it */
.hx .hx-more .egg-meta:not(:has(.rule-chip.overridden, .rule-chip.set-before, .proj-line.on, .hx-rarenote, .egg-from, .egg-proj)) { display: none; }
/* after the cut the nest stays put: what the cut proved and the Grow-out parents' question come under it, above the bulk bar */
.hx:not(.hx-phone) > .hx-news, .hx:not(.hx-phone) > #growDigest, .hx:not(.hx-phone) > #hatchBulk { order: 1; }
.hx:not(.hx-phone) > .hatch-foot { order: 2; }
.hx:not(.hx-phone) > .hx-news { margin-top: 0; }
.hx .eggs.hx-nest .egg.open .hx-more .egg-tools { position: absolute; top: 10px; right: 10px; z-index: 3; }
:root .hx .hx-more .egg-tools .chip.share { height: 22px; padding: 0 9px; font-size: 11px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.hx .eggs.hx-nest .egg.open .eggacts { padding-top: 6px; }
:root .hx .eggs.hx-nest .egg.open .eggacts .chip { height: 26px; }
/* the key: the four kinds of pill, as they look on the cards */
.hx .gene-key { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.hx .gene-key .gene { padding: 1px 7px; border: 1px solid; border-radius: 6px; font: 600 11px/1.4 var(--sans); cursor: help; }
.hx .gene-key .gene.codom { background: #fdeab0; border-color: #b9820f; color: #563900; }
.hx .gene-key .gene.dom { background: #d9e7fb; border-color: #4a80c6; color: #143a6c; }
.hx .gene-key .gene.rec { background: #ead8f7; border-color: #8e58be; color: #46206e; }
.hx .gene-key .gene.rec.het { background: #fff; border-style: dashed; color: #5f3888; font-weight: 500; }
.hx.hx-phone .gene-key { flex: none; margin-right: 2px; }
/* the phone (#1117): cards grow with their pills like the computer's, and a picture never says "Close" (the genes are
   always out; a tap on the picture still folds that one card) */
.hx.hx-phone .eggs.hx-nest:is(.few, .many) .egg.open:not(.hx-dud) { height: auto; min-height: 0; align-self: stretch; }
.hx.hx-phone .eggs.hx-nest { align-items: stretch; }
:root .hx.hx-phone .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"]::after { content: none; }

/* ---- (#1126) Drew: "remove the clutch worth thing at the top of cutting the clutch and bring back the sorting buttons +
   the show all genes for all snakes button". The score keeps the count and the pips; the finish card still says the
   worth. The Sort row, the gene key and Show all genes are there from the first egg (they waited for the last one). ---- */
.hx .hx-score .hs-worth { display: none; }
.hx:not(.hx-phone) .hx-score { padding-top: 7px; padding-bottom: 7px; }
.hx:not(.all-cut):not(.reopened) .hatch-sort { visibility: visible; }

/* ---- the Sort row in the game's language (Drew: "make these look a lot better to match the UI"). Sort is one sunk
   well with the four orders in it, the chosen one a raised cream slab; the gene key is a labelled legend in its own
   well; Show all genes is a slab with a switch in it, green when on. What you only read is sunk, what you press is
   raised, as in the top bar. ---- */
.hx .hatch-sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; margin: 10px 0 6px; }
.hx .hatch-sort > .lbl { margin: 0 -4px 0 2px; font: 400 13px/1 var(--gmf); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
/* the four orders: one well */
:root .hx .hatch-sort > .chip[data-hsort] { height: 32px; min-height: 0; margin: 0; padding: 0 13px; border: 0; border-radius: 0; background: #14110d; color: #c9bfae; font: 700 12.5px/1 var(--sans); letter-spacing: 0; box-shadow: inset 0 4px 4px -3px rgba(0, 0, 0, .7); cursor: pointer; transition: color .12s; } /* (a top-only shadow: no seams between the four) */
:root .hx .hatch-sort > .chip[data-hsort] + .chip[data-hsort] { margin-left: -10px; } /* (the row's gap, taken back: one well) */
:root .hx .hatch-sort > .chip[data-hsort]:first-of-type { border-radius: 10px 0 0 10px; padding-left: 15px; }
:root .hx .hatch-sort > .chip[data-hsort]:last-of-type { border-radius: 0 10px 10px 0; padding-right: 15px; }
body:not(.mobile) .hx .hatch-sort > .chip[data-hsort]:hover:not(.on) { background: #14110d; color: #fff; }
:root .hx .hatch-sort > .chip[data-hsort].on, :root .hx .hatch-sort > .chip[data-hsort].on:hover { position: relative; z-index: 1; height: 28px; margin-top: 2px; margin-bottom: 2px; border-radius: 8px; background: linear-gradient(180deg, #fffdf4, #ecdcb8); color: #2a1a10; box-shadow: 0 3px 0 #8f7d55, inset 0 1px 0 #fff; }
:root .hx .hatch-sort > .chip[data-hsort].on:first-of-type { margin-left: 2px; } :root .hx .hatch-sort > .chip[data-hsort].on:last-of-type { margin-right: 2px; }
/* the genes: the key in its own well, then the switch */
.hx .hatch-sort > .hs-genes { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.hx .gene-key { display: inline-flex; align-items: center; gap: 5px; height: 32px; margin: 0; padding: 0 8px 0 11px; border-radius: 10px; background: #14110d; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .55); }
.hx .gene-key::before { content: 'Genes'; margin-right: 3px; font: 400 12px/1 var(--gmf); letter-spacing: .06em; text-transform: uppercase; color: #8f8574; }
.hx .gene-key .gene { padding: 2px 8px; border-width: 1.5px; border-radius: 6px; font: 700 11.5px/1.3 var(--sans); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.hx .gene-key .gene.rec.het { background: transparent; border-color: #b48ad8; color: #e3cdf5; }
:root .hx .hatch-sort [data-allgenes], :root .hx .hatch-sort [data-allgenes]:hover { display: inline-flex; align-items: center; gap: 9px; height: 32px; min-height: 0; margin: 0; padding: 0 13px 0 8px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #4a433a, #39332c); color: #f3ece0; font: 700 12.5px/1 var(--sans); letter-spacing: 0; box-shadow: 0 3px 0 #14110d, inset 0 1px 0 rgba(255, 255, 255, .1); cursor: pointer; }
.hx .hatch-sort [data-allgenes]::before { content: ''; flex: none; width: 30px; height: 18px; border-radius: 99px; background: #14110d radial-gradient(circle at 9px 50%, #9c9282 6px, transparent 6.5px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); transition: background .15s; }
:root .hx .hatch-sort [data-allgenes].on, :root .hx .hatch-sort [data-allgenes].on:hover { background: linear-gradient(180deg, #5fbb77, #3f9257); color: #fff; box-shadow: 0 3px 0 #24603a, inset 0 1px 0 rgba(255, 255, 255, .25); }
.hx .hatch-sort [data-allgenes].on::before { background: #1f5a33 radial-gradient(circle at 21px 50%, #fff 6px, transparent 6.5px); }
.hx .hatch-sort [data-allgenes]:active { transform: translateY(2px); box-shadow: 0 1px 0 #14110d; }
/* light theme: the wells stay dark (they are the cutting screen's), the words around them follow the page */
:root:not([data-theme="dark"]) .hx .hatch-sort > .lbl { color: #5d564c; }
/* the phone: one line that scrolls sideways, as before; the key keeps its label short */
.hx.hx-phone .hatch-sort { flex-wrap: nowrap; gap: 8px; }
.hx.hx-phone .hatch-sort > .lbl { display: none; }
.hx.hx-phone .hatch-sort > .hs-genes { display: inline-flex; flex: none; margin-left: 4px; }
:root .hx.hx-phone .hatch-sort > .chip[data-hsort] { flex: none; height: 34px; }
:root .hx.hx-phone .hatch-sort > .chip[data-hsort].on { height: 30px; }
:root .hx.hx-phone .hatch-sort [data-allgenes] { height: 34px; flex: none; white-space: nowrap; }
.hx.hx-phone .gene-key { flex: none; height: 34px; }

/* ---- a cut baby, big (#1141): a tap on its picture. The picture says so with a zoom-in cursor and, on a computer, a
   magnifier as the mouse comes over it ---- */
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn { cursor: zoom-in; }
:root .hx .eggs.hx-nest .egg.open > .baby-genes-btn[aria-expanded="true"]::after, :root .hx .eggs.hx-nest .egg.open > .baby-genes-btn::after { content: ''; position: absolute; inset: 0; top: 0; right: 0; width: auto; padding: 0; border-radius: 8px; background: rgba(20, 16, 12, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 34px no-repeat; opacity: 0; transition: opacity .12s; }
body:not(.mobile) .hx .eggs.hx-nest .egg.open:hover > .baby-genes-btn::after { opacity: 1; }
.hx-big { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 6, .78); cursor: zoom-out; animation: hxBigIn .18s ease-out both; }
@keyframes hxBigIn { from { opacity: 0; } to { opacity: 1; } }
.hx-big-card { position: relative; box-sizing: border-box; width: min(820px, 100%); max-height: 100%; overflow: auto; padding: 12px 12px 14px; border: 4px solid #e4d2aa; border-radius: 20px; background: #fff8e9; color: #2a1a10; box-shadow: 0 8px 0 rgba(40, 18, 4, .55), 0 30px 60px rgba(0, 0, 0, .6); animation: hxBigPop .24s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes hxBigPop { from { transform: scale(.9); } to { transform: none; } }
.hx-big-pic { border-radius: 12px; overflow: hidden; background: var(--thumb-bg, #8b8378); }
.hx-big-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 1040 / 600; }
.hx-big-info { display: flex; align-items: center; gap: 10px; margin: 12px 4px 8px; }
.hx-big-info .baby-sex { flex: none; padding: 2px 10px 2px 7px; border-radius: 99px; color: #fff; font: 700 13px/1.5 var(--sans); } .hx-big-info .baby-sex.F { background: #b5457a; } .hx-big-info .baby-sex.M { background: #2f6f9f; }
.hx-big-n { flex: 1; min-width: 0; font: 700 18px/1.25 var(--sans); }
.hx-big-v { flex: none; padding: 4px 11px 2px; border-radius: 8px; background: linear-gradient(180deg, #ffe27a, #f4b934); color: #3d2600; font: 400 20px/1.25 var(--gmf); box-shadow: 0 3px 0 #9a6200; }
.hx-big-genes { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 4px; }
.hx-big-genes .gene { padding: 3px 9px; border: 1px solid #cdb994; border-radius: 6px; background: #fff; color: #1e1a15; font: 600 13px/1.3 var(--sans); }
.hx-big-genes .gene.codom { background: #fdeab0; border-color: #b9820f; color: #563900; } .hx-big-genes .gene.dom { background: #d9e7fb; border-color: #4a80c6; color: #143a6c; } .hx-big-genes .gene.rec { background: #ead8f7; border-color: #8e58be; color: #46206e; }
.hx-big-genes .gene.rec.het { background: #fff; border-style: dashed; color: #5f3888; font-weight: 500; } .hx-big-genes .gene.rec.het.unlikely { opacity: .6; }
.hx-big-hint { display: block; margin: 10px 4px 0; font: 500 12px/1 var(--sans); color: #9c8872; text-align: center; }
:root .hx-big-x { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 16, 12, .7); color: #fff; font: 400 24px/1 var(--sans); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hx-big, .hx-big-card { animation: none; } }

/* (#1146) "Click an egg to cut it…" sat on top of the Sort row once the row showed from the first egg (Drew: "there's text
   overlapping here"): the hint now sits inside the nest, at the head of the bedding above the eggs, on its own little
   plate (at the foot it fell below the screen on a big clutch). And the Sort row keeps its distance from the score plate. */
.hx .hx-sign, .hx.hx-phone .hx-sign { top: 8px; bottom: auto; left: 50%; z-index: 2; transform: translateX(-50%); padding: 4px 12px; border-radius: 99px; background: rgba(28, 12, 4, .72); color: #f6e7c8; font: 600 12.5px/1.4 var(--sans); }
.hx .hatch-sort { margin-top: 16px; }
.hx:not(.hx-phone) .hx-score + .hatch-sort, .hx:not(.hx-phone) .hx-score ~ .hatch-sort { margin-top: 16px; }

/* a baby's parents on a cut of several clutches: a pink ♀ tag over a blue ♂ tag, each one line, clipped; the full labels
   are the tooltip (it was the two whole morph names run together, hets and all) */
.hx .hx-more .egg-from, .hx .egg.open .egg-from { display: flex; flex-direction: column; gap: 3px; max-width: 100%; margin-top: 2px; padding-top: 5px; border-top: 1px dashed rgba(120, 90, 50, .3); white-space: normal; text-align: left; }
.hx .egg-from .ef-lbl { font: 700 10px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } /* "From:" (#1186) */
.hx .egg-from .ef-p { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 7px 2px 3px; border-radius: 999px; font: 600 11px/1.3 var(--sans); }
.hx .egg-from .ef-p i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; color: #fff; font: 900 11px/1 var(--sans); font-style: normal; }
.hx .egg-from .ef-p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hx .egg-from .ef-p.F { background: rgba(181, 69, 122, .12); color: #8a2f5c; } .hx .egg-from .ef-p.F i { background: #b5457a; }
.hx .egg-from .ef-p.M { background: rgba(47, 111, 159, .12); color: #23557c; } .hx .egg-from .ef-p.M i { background: #2f6f9f; }
/* a long parent tag: a ▾, and a tap unfolds the whole label over as many lines as it needs */
.hx .egg-from .ef-p.long { cursor: pointer; } .hx .egg-from .ef-p.long:hover { filter: brightness(.96); }
.hx .egg-from .ef-p em { flex: none; margin-left: auto; padding-left: 4px; font: 700 10px/1 var(--sans); font-style: normal; opacity: .7; transition: transform .15s; }
.hx .egg-from .ef-p .ef-full { display: none; }
.hx .egg-from .ef-p.long.open { align-items: flex-start; border-radius: 10px; }
.hx .egg-from .ef-p.long.open > b:not(.ef-full) { display: none; }
.hx .egg-from .ef-p.long.open .ef-full { display: block; white-space: normal; overflow: visible; text-overflow: clip; }
.hx .egg-from .ef-p.long.open em { transform: rotate(180deg); }
/* a big cut (#1419): cards out of view skip layout and paint until they scroll near, so 1,000 cards stay light */
.hx.hx-many .eggs.hx-nest .egg { content-visibility: auto; contain-intrinsic-block-size: auto 260px; } /* its height only: the grid gives its width */
.hx.hx-many .eggs.hx-nest .egg.cutting { content-visibility: visible; }
/* Needs a look (#1419): the cards on their rule leave the grid (blend.css's .egg.hx-quiet lost to the nest's own .egg
   rules), and a grid with none left says so instead of standing empty */
.hx.hx-many .eggs.hx-nest .egg.hx-quiet, .hx.hx-many .eggs.hx-nest .egg.open.hx-quiet { display: none; } /* over .egg.open:not(.hx-dud) */
.hx .eggs.hx-nest:has(.egg.hx-quiet):not(:has(.egg:not(.hx-quiet)))::before { content: 'Nothing needs a look: every baby is on its rule. All shows them.'; grid-column: 1 / -1; padding: 18px 8px; text-align: center; color: #6b5a3e; font-weight: 600; }

/* ---- readable on any theme (#1639): the "nothing needs a look" line on its own plate over the vermiculite; the
   projects under the title as cream badges; the clutch news as a raised card where every line is bright text with a
   round badge for its kind (proved, cleared, rare) instead of coloured words on grey ---- */
.hx .eggs.hx-nest:has(.egg.hx-quiet):not(:has(.egg:not(.hx-quiet)))::before { justify-self: center; align-self: center; max-width: min(560px, 92%); margin: 22px auto; padding: 14px 20px 14px 52px; border-radius: 16px; background: rgba(24, 18, 12, .88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd69f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3 3 6-6.3'/%3E%3C/svg%3E") 16px center / 24px no-repeat; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); color: #f6efe2; font: 600 14.5px/1.4 var(--sans); text-align: left; text-shadow: none; }
/* the projects under the title */
.hx .hatch-head .cut-projs { gap: 6px; margin-top: 8px; }
:root .hx .hatch-head .cut-projs .pj-fit { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 11px; border: 0; border-radius: 999px; background: #fff6e6; color: #9a3d06; font: 400 13.5px/1 var(--gmf); letter-spacing: .03em; box-shadow: 0 2px 0 rgba(90, 30, 0, .45); }
:root .hx .hatch-head .cut-projs .pj-fit small { display: grid; place-items: center; min-width: 18px; height: 18px; margin: 0; padding: 0 5px; border-radius: 999px; background: #f07d1c; color: #fff; font: 700 11px/1 var(--sans); opacity: 1; }
:root .hx .hatch-head .cut-projs .pj-fit.maybe { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
/* the clutch news */
:root .hx .hx-news { gap: 14px; padding: 12px 14px 12px 16px; border: 1px solid var(--bl-line, var(--rule-2)); border-radius: 16px; background: var(--bl-lift, var(--paper-2)); box-shadow: 0 3px 0 var(--bl-edge, rgba(0, 0, 0, .3)); }
:root .hx .hx-news > b { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #6fd18a, #3f9c5a); color: #fff; font: 400 14px/1 var(--gmf); letter-spacing: .05em; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: 0 2px 0 #23653a; }
:root .hx .hx-newsl { display: grid; gap: 6px; font: 500 13.5px/1.45 var(--sans); }
:root .hx .hx-newsl li, :root .hx .hx-newsl li.proven, :root .hx .hx-newsl li.cleared, :root .hx .hx-newsl li.unlikely, :root .hx .hx-newsl li.mutation, :root .hx .hx-newsl li.paradox { position: relative; padding: 8px 12px 8px 40px; border-radius: 12px; background: var(--bl-well, var(--paper)); color: var(--ink); font-weight: 500; }
:root .hx .hx-newsl li::before { position: absolute; left: 10px; top: 8px; float: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border-radius: 50%; background: #8f8679; color: #fff; font: 700 12px/1 var(--sans); content: 'i'; }
:root .hx .hx-newsl li.proven::before { content: '✔'; background: #3f9c5a; color: #fff; }
:root .hx .hx-newsl li.cleared::before, :root .hx .hx-newsl li.unlikely::before { content: '!'; background: #e5563d; color: #fff; }
:root .hx .hx-newsl li.mutation::before, :root .hx .hx-newsl li.paradox::before { content: '★'; background: #f0a51b; color: #3d2600; }
:root .hx .hx-newsl li.proven { box-shadow: inset 3px 0 0 #3f9c5a; } :root .hx .hx-newsl li.cleared, :root .hx .hx-newsl li.unlikely { box-shadow: inset 3px 0 0 #e5563d; } :root .hx .hx-newsl li.mutation, :root .hx .hx-newsl li.paradox { box-shadow: inset 3px 0 0 #f0a51b; }
:root .hx .hx-newsl li b { color: var(--ink); font-weight: 700; }
:root .hx .hx-newsl li.more { padding: 4px 12px; background: none; color: var(--ink-3); } :root .hx .hx-newsl li.more::before { display: none; }
:root .hx .hx-news .hx-news-all { height: 30px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bl-line-2, var(--rule-2)); background: var(--bl-lift, var(--paper)); color: var(--ink); font: 700 12.5px/28px var(--sans); box-shadow: 0 3px 0 var(--bl-edge, rgba(0, 0, 0, .3)); }

/* ---- the cutting screen's top bar (#1615): more depth (a warm gradient, a soft sheen, a dotted pattern), an egg coin
   before the title, and the project the clutch is for as a cream badge instead of green words ---- */
.hx .hatch-head { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 15% 0%, #ffa94a 0%, #f07d1c 42%, #c4500c 100%); box-shadow: 0 4px 0 #6f2a06, inset 0 1px 0 rgba(255, 255, 255, .35); }
/* the dots fade in from the left under a layer of the bar's own orange, not a mask: this sheet keeps to the fast rules (tests/hatchfx.mjs) */
.hx .hatch-head::before { content: ''; position: absolute; inset: 0 0 0 30%; pointer-events: none; background: linear-gradient(90deg, #f07d1c, rgba(240, 125, 28, 0) 45%), radial-gradient(circle, rgba(255, 255, 255, .13) 1.6px, transparent 2.2px) 0 0 / 18px 18px; }
.hx .hatch-head > * { position: relative; }
#modalBox .hx .hatch-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#modalBox .hx .hatch-head h2::before { content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 58%, #fff8e6 0 9px, transparent 10px) center / 100% 100% no-repeat, radial-gradient(circle at 35% 30%, #ffe08a, #f5a623 60%, #b4650a); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .35); clip-path: none; }
.hx .hatch-head .cut-proj { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #fff6e6; color: #9a3d06; font: 400 15px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; text-shadow: none; box-shadow: 0 3px 0 rgba(90, 30, 0, .45); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hx .hatch-head .cut-proj::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #f07d1c; box-shadow: 0 0 0 2px #ffd7a8; }
.hx .hatch-head .cut-proj.likely { background: rgba(255, 255, 255, .22); color: #fff; font-style: normal; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.hx .hatch-head .cut-proj.likely::before { background: #fff; box-shadow: none; }
.hx .hatch-head .meta { opacity: .95; font-weight: 600; }
#modalBox .hx.hx-phone .hatch-head h2::before { width: 28px; height: 28px; }
.hx.hx-phone .hatch-head .cut-proj { font-size: 13px; }
/* Cut all on the orange bar (#1639): one big gold button, the egg in its own dark coin, a deep pressed edge */
#modalBox .hx .hatch-head .cut-all:not(.done) { min-height: 50px; padding: 0 22px 0 7px; gap: 11px; border-radius: 16px; background: linear-gradient(180deg, #fff0a0 0%, #ffd23a 45%, #f5a815 100%); color: #3d2600; font-size: 18px; letter-spacing: .05em; box-shadow: 0 5px 0 #8a4f00, 0 8px 14px rgba(60, 20, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .7); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
#modalBox .hx .hatch-head .cut-all:not(.done) svg { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 50%; background: #3d2600; color: #fff6dd; fill: #fff6dd; stroke: #3d2600; stroke-width: 1.4; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35); }
#modalBox .hx .hatch-head .cut-all:not(.done):hover:not(:disabled) { background: linear-gradient(180deg, #fff4b4 0%, #ffd94f 45%, #f7b028 100%); }
#modalBox .hx .hatch-head .cut-all:not(.done):active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #8a4f00, inset 0 2px 0 rgba(255, 255, 255, .7); }
#modalBox .hx .hatch-head .meta { color: #fff; text-shadow: 0 1px 0 rgba(90, 30, 0, .45); }

/* ---- tag and name a baby at the reveal (#609): its tags, + tag, where Apply sends it, and the pencil on its name ---- */
.hx .egg .egg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 2px; }
.hx .egg .egg-tags .chip.tiny { min-height: 24px; padding: 0 8px; font-size: 11px; }
.hx .egg .egg-dest { flex-basis: 100%; font-size: 11px; line-height: 1.3; color: var(--moss, #4f9a62); }
.hx .egg .hx-ren { min-width: 24px; min-height: 24px; padding: 0 4px; border: 0; background: none; color: var(--ink-3, #a79f90); font-size: 13px; line-height: 1; cursor: pointer; }
.hx .egg .hx-ren:hover, .hx .egg .hx-ren:focus-visible { color: var(--ink, #eee); }