:root {
  color-scheme: dark;
  --ink: #162c2b;
  --cream: #fff8e8;
  --paper: #fffaf0;
  --teal: #1e9c8b;
  --teal-dark: #0d625d;
  --ember: #f47a35;
  --ember-dark: #9f3f20;
  --gold: #f6c85f;
  --moss: #79a64b;
  --blue: #4e9fd5;
  --muted: #6c7069;
  --line: #ded4bd;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1080px; height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--ink);
  background: #152b28 url("./art/hatchery-backdrop-01.webp") center / cover no-repeat;
  font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg, rgba(7,25,23,.52), rgba(7,25,23,.08) 28%, rgba(7,25,23,.08) 72%, rgba(7,25,23,.5)); pointer-events: none; }
button { font: inherit; }

.game {
  position: relative;
  display: grid;
  grid-template-columns: 205px minmax(660px, 1fr) 230px;
  grid-template-rows: 78px minmax(0, 1fr);
  gap: 14px;
  width: min(1350px, calc(100vw - 40px));
  height: calc(100vh - 32px);
  margin: 16px auto;
}

.lab-hud, .keeper-panel, .lab-bench, .roster-panel {
  border: 1px solid rgba(255,245,219,.24);
  background: rgba(255,250,238,.94);
  box-shadow: 0 16px 46px rgba(4,18,17,.28), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
}

.lab-hud {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 260px 1fr 250px 300px;
  align-items: center;
  gap: 20px;
  padding: 10px 18px;
  border-radius: 22px;
}
.brand-mark { display: flex; align-items: center; gap: 11px; }
.brand-mark small, .mission-progress span, .difficulty-card span, .score-row span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.brand-mark strong { display: block; font-size: 19px; letter-spacing: -.025em; }
.brand-egg { width: 38px; height: 48px; border: 3px solid var(--ember-dark); border-radius: 52% 48% 47% 53% / 61% 61% 39% 39%; background: radial-gradient(circle at 65% 35%, var(--teal) 0 5px, transparent 6px), radial-gradient(circle at 35% 62%, var(--ember) 0 6px, transparent 7px), #ffedbc; box-shadow: 0 4px 0 rgba(71,44,27,.18); transform: rotate(-8deg); }
.mission-progress { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: end; }
.mission-progress strong { font-size: 13px; }
.mission-progress i, .difficulty-card > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #e6dece; }
.mission-progress i b, .difficulty-card > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--gold), var(--ember)); transition: width 250ms ease-out; }
.difficulty-card { display: grid; gap: 7px; padding: 9px 13px; border-radius: 13px; background: #edf4e9; }
.difficulty-card > div { display: flex; justify-content: space-between; align-items: end; }.difficulty-card b { font-size: 17px; }.difficulty-card > i b { width: 18%; }
.score-row { justify-self: end; display: flex; align-items: stretch; border: 1px solid #dfd5c0; border-radius: 14px; background: white; }
.score-row div { min-width: 83px; padding: 7px 12px; text-align: center; }.score-row div + div { border-left: 1px solid #e4dccd; }.score-row strong { display: block; margin-top: 1px; font-size: 21px; line-height: 1; }

.keeper-panel, .roster-panel { min-height: 0; overflow: hidden; border-radius: 22px; }
.keeper-panel { position: relative; display: flex; flex-direction: column; padding: 15px; background: linear-gradient(180deg, rgba(232,247,226,.96), rgba(255,250,238,.96)); }
.keeper-portrait { position: relative; height: 270px; flex: 0 0 auto; margin: -6px -15px 0; overflow: hidden; }
.keeper-portrait img { position: absolute; width: 250px; height: 310px; left: -20px; top: -9px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(22,44,43,.2)); transform-origin: 50% 85%; transition: transform 180ms ease-out; }
.keeper-portrait.is-cheering img { animation: keeper-cheer 620ms cubic-bezier(.2,.85,.3,1); }
.keeper-portrait.is-worried img { animation: keeper-wobble 320ms ease-out; }
.keeper-sparkles { position: absolute; left: 96px; top: 104px; }.keeper-sparkles i { position: absolute; width: 10px; height: 10px; opacity: 0; transform: rotate(45deg); border-radius: 2px; background: var(--gold); }.is-cheering .keeper-sparkles i { animation: sparkle 600ms ease-out both; }.keeper-sparkles i:nth-child(1){--x:-60px;--y:-48px}.keeper-sparkles i:nth-child(2){--x:72px;--y:-38px;animation-delay:60ms}.keeper-sparkles i:nth-child(3){--x:56px;--y:62px;animation-delay:100ms}.keeper-sparkles i:nth-child(4){--x:-48px;--y:52px;animation-delay:140ms}
.speech-card { position: relative; z-index: 2; margin-top: -20px; padding: 15px; border: 2px solid #b8cf9d; border-radius: 18px 18px 18px 5px; background: #f8ffe9; box-shadow: 0 6px 0 #d5dfc3; }
.speech-card span, .legend-card > strong, .notebook-card span { color: var(--teal-dark); font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.speech-card p { margin: 5px 0 0; font-size: 13px; font-weight: 750; line-height: 1.42; }
.legend-card { margin-top: auto; padding: 14px; border-radius: 16px; color: #4e473a; background: rgba(255,255,255,.7); }.legend-card p { display: flex; align-items: center; gap: 7px; margin: 8px 0; font-size: 11px; font-weight: 800; }.legend-card small { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; }
.allele { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: white; font-size: 15px; font-style: normal; }.allele.dominant { background: var(--ember); }.allele.recessive { background: var(--blue); }

.lab-bench { position: relative; min-height: 0; display: grid; grid-template-rows: auto minmax(210px, 1fr) auto auto; overflow: hidden; border-radius: 22px; background: rgba(255,250,238,.965); }
.target-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 17px 20px 0; padding: 12px 15px; border: 2px solid #ddbd6d; border-radius: 17px; background: #fff4c9; box-shadow: 0 5px 0 #e5d19a; }
.target-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--ember); box-shadow: 0 4px 0 var(--ember-dark); font-size: 22px; }.target-card span { color: #87641f; font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.target-card h1 { margin: 1px 0 0; font-size: 20px; line-height: 1.05; letter-spacing: -.025em; }.target-card p { margin: 3px 0 0; color: #6f6247; font-size: 11px; }.target-odds { min-width: 76px; padding-left: 13px; border-left: 1px solid #dfca93; text-align: center; }.target-odds strong { display: block; font-size: 25px; }

.breeding-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 0; padding: 12px 22px 5px; }
.parent-pedestal { position: relative; width: 190px; height: 214px; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 9px 12px 10px; border: 2px solid #d9d2c2; border-radius: 19px; background: linear-gradient(#fff, #f0eee6); box-shadow: 0 6px 0 #d9d2c2; transition: border-color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out; }
.parent-pedestal.is-active { border-color: var(--teal); box-shadow: 0 6px 0 #9bc9bf, 0 0 0 6px rgba(30,156,139,.1); transform: translateY(-2px); }.parent-pedestal > span { color: var(--muted); font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.dragon-slot { position: relative; width: 140px; height: 128px; display: grid; place-items: center; }.dragon-slot > b { display: grid; place-items: center; width: 65px; height: 65px; border: 2px dashed #b9b4aa; border-radius: 50%; color: #9c978e; font-size: 30px; }.dragon-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 4px rgba(24,44,43,.2)); }.parent-name { font-size: 13px; }.gene-strip { min-height: 25px; display: flex; gap: 5px; margin-top: 5px; }.gene-chip { padding: 4px 6px; border-radius: 7px; color: #48433a; background: #eee8dc; font-size: 10px; font-weight: 950; }.gene-chip.is-focus { color: #fff; background: var(--teal-dark); }
.cross-core { display: flex; align-items: center; gap: 4px; color: #bb9c5e; }.cross-core i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }.cross-core b { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid #d0b475; border-radius: 50%; color: #6f5525; background: #ffedbd; font-size: 22px; }
.egg-stage { position: absolute; inset: 5px 18px 0; z-index: 5; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle, rgba(255,245,184,.98), rgba(236,226,196,.88) 54%, rgba(255,250,238,.2) 75%); }.egg-stage[hidden] { display: none; }.egg-image, .baby-image { position: absolute; width: 175px; height: 190px; object-fit: contain; filter: drop-shadow(0 12px 6px rgba(45,39,22,.22)); }.egg-stage.is-cracking .egg-image { animation: egg-crack 760ms ease-in-out; }.egg-stage.is-hatched .egg-image { opacity: 0; transform: scale(.55); transition: 180ms ease-out; }.baby-image { width: 220px; height: 205px; opacity: 0; transform: translateY(18px) scale(.6); }.egg-stage.is-hatched .baby-image { opacity: 1; transform: none; transition: 420ms cubic-bezier(.2,.9,.3,1.18); }.hatch-rays { width: 230px; height: 230px; opacity: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(246,200,95,.85) 0 7deg, transparent 7deg 23deg); }.egg-stage.is-hatched .hatch-rays { animation: ray-burst 800ms ease-out; }.baby-traits { position: absolute; right: 25px; top: 22px; display: grid; gap: 6px; }.baby-traits span { padding: 6px 9px; border: 1px solid #cab77f; border-radius: 99px; color: #5d4a1e; background: #fff6d1; box-shadow: 0 3px 0 #dfd0a3; font-size: 10px; font-weight: 900; animation: trait-pop 300ms ease-out both; }

.model-panel { margin: 0 20px 6px; padding: 11px 13px; border: 1px solid #c9d7ce; border-radius: 16px; background: #edf5ef; }.model-panel[hidden] { display: none; }.model-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }.model-heading span { display: block; color: var(--teal-dark); font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.model-heading strong { font-size: 13px; }.probability-badge { text-align: right; }.probability-badge b { display: block; color: var(--ember-dark); font-size: 18px; }.model-body { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: center; }.punnett-grid { display: grid; grid-template-columns: 34px repeat(2, 1fr); grid-template-rows: 28px repeat(2, 42px); gap: 4px; }.punnett-cell { display: grid; place-items: center; border: 1px solid #b6c9bf; border-radius: 7px; background: white; font-size: 16px; font-weight: 1000; }.punnett-cell.is-header { color: #fff; background: var(--teal-dark); font-size: 13px; }.punnett-cell.is-target { border-color: #db9a3f; background: #fff1c6; box-shadow: inset 0 0 0 2px #f4cf75; }.model-notes p { margin: 0 0 7px; color: #596960; font-size: 11px; line-height: 1.4; }.trait-math { display: flex; flex-wrap: wrap; gap: 6px; }.trait-math span { padding: 5px 8px; border-radius: 7px; color: #326057; background: #d9ebe2; font-size: 10px; font-weight: 900; }

.decision-zone { min-height: 128px; padding: 8px 24px 17px; text-align: center; }.phase-label { margin: 0; color: var(--ember-dark); font-size: 9px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }.decision-zone h2 { margin: 4px 0 8px; font-size: 17px; line-height: 1.15; }.action-area { min-height: 53px; display: flex; justify-content: center; align-items: center; gap: 9px; }.choice, .primary { min-height: 48px; border: 2px solid #ccc4b4; border-radius: 13px; background: white; box-shadow: 0 5px 0 #d8d0c0; color: var(--ink); cursor: pointer; font-weight: 950; transition: transform 130ms ease-out, box-shadow 130ms ease-out, border-color 130ms ease-out; }.choice { min-width: 115px; padding: 8px 15px; font-size: 15px; }.choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }.choice:hover, .primary:hover { transform: translateY(-2px); }.choice:active, .primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #d8d0c0; }.primary { min-width: 200px; padding: 8px 20px; border-color: var(--teal-dark); color: white; background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); }.primary.is-ember { border-color: var(--ember-dark); background: var(--ember); box-shadow: 0 5px 0 var(--ember-dark); }.feedback { min-height: 15px; margin: 5px 0 0; color: var(--ember-dark); font-size: 11px; font-weight: 850; }

.roster-panel { display: flex; flex-direction: column; padding: 17px 14px; }.roster-heading { padding: 0 3px 11px; border-bottom: 1px solid #e0d9cb; }.roster-heading span { color: var(--muted); font-size: 9px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }.roster-heading strong { display: block; margin-top: 2px; font-size: 16px; }.dragon-roster { display: grid; gap: 8px; padding: 11px 0; }.dragon-card { position: relative; min-height: 96px; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 6px; padding: 6px; border: 2px solid #ddd5c7; border-radius: 15px; background: white; box-shadow: 0 4px 0 #ddd5c7; cursor: pointer; text-align: left; transition: 140ms ease-out; }.dragon-card:hover { transform: translateY(-2px); border-color: #83b9ae; box-shadow: 0 6px 0 #bfd6d0; }.dragon-card:active { transform: translateY(3px); box-shadow: 0 1px 0 #bfd6d0; }.dragon-card[disabled] { opacity: .48; cursor: default; transform: none; }.dragon-card img { width: 74px; height: 78px; object-fit: contain; filter: drop-shadow(0 4px 2px rgba(21,45,43,.2)); }.dragon-card strong { display: block; font-size: 13px; }.dragon-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1.25; }.dragon-card .pick-chip { display: inline-block; width: max-content; margin-top: 5px; padding: 3px 6px; border-radius: 99px; color: #fff; background: var(--teal); font-size: 8px; text-transform: uppercase; }.notebook-card { margin-top: auto; padding: 13px; border: 1px solid #d7c58f; border-radius: 13px 13px 13px 3px; background: #fff5ca; transform: rotate(-1deg); }.notebook-card p { margin: 5px 0 0; color: #635638; font-size: 11px; line-height: 1.4; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 25px; max-width: 72%; padding: 10px 17px; opacity: 0; transform: translate(-50%,12px); border-radius: 99px; color: white; background: #163937; pointer-events: none; font-size: 12px; font-weight: 900; transition: 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.is-shaking { animation: shake 280ms ease-out; }
button:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }

@keyframes keeper-cheer { 30% { transform: translateY(-8px) rotate(-3deg) scale(1.04); } 65% { transform: translateY(1px) rotate(2deg); } }
@keyframes keeper-wobble { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes sparkle { 0% { opacity: 0; transform: translate(0,0) rotate(45deg) scale(.2); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(170deg) scale(1.2); } }
@keyframes egg-crack { 20%,60% { transform: rotate(-3deg); } 40%,80% { transform: rotate(3deg) scale(1.04); } }
@keyframes ray-burst { 0% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: .8; } 100% { opacity: 0; transform: scale(1.4) rotate(24deg); } }
@keyframes trait-pop { from { opacity: 0; transform: translateX(12px) scale(.7); } }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

@media (max-height: 760px) {
  .game { height: calc(100vh - 20px); margin: 10px auto; grid-template-rows: 70px minmax(0,1fr); }
  .lab-hud { padding-top: 7px; padding-bottom: 7px; }.keeper-portrait { height: 220px; }.keeper-portrait img { height: 260px; }.speech-card { margin-top: -12px; }.legend-card { padding: 10px; }
  .target-card { margin-top: 11px; padding: 9px 13px; }.breeding-stage { padding-top: 7px; }.parent-pedestal { height: 184px; }.dragon-slot { height: 100px; }.model-panel { padding-top: 8px; padding-bottom: 8px; }.punnett-grid { grid-template-rows: 24px repeat(2,35px); }.decision-zone { min-height: 110px; padding-bottom: 10px; }.dragon-card { min-height: 82px; }.dragon-card img { height: 65px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }