/* New discoveries get their moment. Familiar arrivals stay easy to review. */
.hatch-review-back{align-self:flex-start;font-size:10px;margin-bottom:16px;flex-shrink:0}
.hatch-review-feedback{font-size:10px;line-height:1.6;color:#dfc39b;margin:8px 0;flex-shrink:0}.hatch-review-feedback:empty{display:none}
.hatch-later-note{font-size:10px;line-height:1.6;color:#a9c4af;margin:8px 0;flex-shrink:0}
#hatches[data-review-mode=familiar] .hatch-results{display:flex;flex-direction:column;gap:7px;margin-top:15px}
#hatches[data-review-mode=familiar] .hatch-card{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding:9px 10px;min-height:68px;text-align:left;background:#14333c;border-color:#3a5b5f}
#hatches[data-review-mode=familiar] .hatch-card .hatch-badge{display:none}
#hatches[data-review-mode=familiar] .hatch-card canvas{grid-column:1;grid-row:1/3;width:66px;height:46px;object-fit:contain}
#hatches[data-review-mode=familiar] .hatch-card h2{grid-column:2;grid-row:1/3;min-height:0;font-size:12px;line-height:1.45;margin:0}
#hatches[data-review-mode=familiar] .hatch-card p{grid-column:3;grid-row:1/3;font-size:10px;color:#b8d0b8;white-space:nowrap;margin:0}
#hatches[data-review-mode=familiar] .hatch-heading h1{font-size:25px}
#hatches[data-review-mode=familiar] .hatch-footnote{margin-top:13px;font-size:10px}
#hatches .hatch-footnote{line-height:1.7}
#hatches[data-review-mode=summary] .hatch-card[data-fresh=false]{background:#15333c;border-color:#426266}
#hatches .hatch-card[data-fresh=false] .hatch-badge{color:#99b7af}
.hatch-companion-actions{width:100%;margin-top:13px;padding-top:12px;border-top:1px solid #54756d66}
#hatch-hero-count{display:block;color:#bbccad;font-size:9px;margin-top:15px}
.hatch-companion-actions>.secondary{width:100%;max-width:240px;min-height:36px;font-size:11px;padding:8px 12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.hatch-companion-actions>p{font-size:9px;line-height:1.6;color:#9bb9b0;margin:7px 0 0}
#hatches .hatch-meet-arrival{display:block;width:100%;font-size:9px;line-height:1.5;min-height:28px;margin:8px 0 0;padding:5px 1px;white-space:normal;overflow-wrap:anywhere}
#hatches[data-review-mode=familiar] .hatch-card h2,#hatches[data-review-mode=familiar] .hatch-card p{grid-row:1}
#hatches[data-review-mode=familiar] .hatch-meet-arrival{grid-column:2/4;grid-row:2;justify-self:start;text-align:left;width:auto;margin:0;min-height:24px;padding:3px 0}
@media(max-width:320px){.hatch-review-back{margin-bottom:11px}.hatch-page{padding-inline:11px}#hatches[data-review-mode=familiar] .hatch-card{grid-template-columns:54px minmax(0,1fr) auto;padding:8px;gap:7px}#hatches[data-review-mode=familiar] .hatch-card canvas{width:54px}#hatches[data-review-mode=familiar] .hatch-card h2{font-size:11px}#hatches[data-review-mode=familiar] .hatch-heading h1{font-size:22px}}
@media(max-height:580px){.hatch-review-back{margin-bottom:9px}.hatch-page .hatch-heading{margin-bottom:0}.hatch-page .hatch-spotlight{margin-top:13px;min-height:260px;padding-block:15px}.hatch-page .reveal-egg{margin-block:10px}.hatch-page .hatch-spotlight>canvas{height:125px}}

/* A quiet, touchable hatch. The frame palette stays neutral until welcome. */
#hatches .hatch-spotlight::before,#hatches .hatch-spotlight::after{content:none}
#hatches .reveal-egg{max-width:100%;width:100%;padding:0;min-width:0;touch-action:manipulation}
#hatches .reveal-egg span{max-width:240px;margin:auto;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
#hatches #hatch-cinematic-art{display:block;width:100%;max-width:300px;height:180px;object-fit:contain;animation:none;image-rendering:pixelated;margin:0 auto 12px}
#hatches #hatch-cinematic-art[hidden]{display:none}
#hatches .hatch-cinematic-status{font-size:10px;min-height:17px;margin:6px auto;color:#a9c9bd}
#hatches .hatch-cinematic-status:empty{display:none}
#hatches .hatch-skip{display:block;margin:8px auto 0;min-height:30px;font-size:10px;padding:5px 12px}
#hatches .hatch-skip[hidden]{display:none}
#hatches .reveal-egg:focus-visible,#hatches .hatch-skip:focus-visible{outline:2px solid #bad5c2;outline-offset:4px}
#hatches[data-review-mode=summary] .hatch-results{display:flex;flex-direction:column;gap:8px;max-width:none;width:100%;margin:16px 0}
#hatches[data-review-mode=summary] .hatch-card{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px;text-align:left;min-width:0}
#hatches[data-review-mode=summary] .hatch-card canvas{grid-column:1;grid-row:1/4;width:66px;height:52px;object-fit:contain}
#hatches[data-review-mode=summary] .hatch-card .hatch-badge{grid-column:2/4;font-size:7px;line-height:1.5;letter-spacing:.5px}
#hatches[data-review-mode=summary] .hatch-card h2{grid-column:2;min-height:0;font-size:12px;line-height:1.4;margin:0;overflow-wrap:anywhere}
#hatches[data-review-mode=summary] .hatch-card p{grid-column:3;grid-row:2;margin:0;font-size:10px;white-space:nowrap}
#hatches[data-review-mode=summary] .hatch-meet-arrival{grid-column:2/4;grid-row:3;width:auto;margin:0;padding:2px 0;min-height:24px;text-align:left}
@media(max-width:320px){#hatches #hatch-cinematic-art{height:150px}#hatches[data-review-mode=summary] .hatch-card{grid-template-columns:48px minmax(0,1fr) auto;gap:4px 7px;padding:8px}#hatches[data-review-mode=summary] .hatch-card canvas{width:48px;height:44px}}
@media(max-height:580px){#hatches #hatch-cinematic-art{height:140px}#hatches .hatch-skip{margin-top:4px}}
@media(prefers-reduced-motion:reduce){#hatches canvas{animation:none}}
.reveal-egg[data-render-paused=true] canvas{animation-play-state:paused!important}