/* Little Hatch: readable cards, clear destinations, comfortable touch targets. */
:root{--ink:#283f38;--muted:#5d7067;--line:#dce5d9;--paper:#fffef8;--green:#3d7059;--purple:#725493;--gold:#a77728;color:var(--ink);background:#f4f5ec;font-family:'DM Sans',system-ui,sans-serif}
body{background:radial-gradient(ellipse at 0 0,#e5eddb,transparent 55%),#f4f5ec;min-height:100vh}button,input,select{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a37cc3;outline-offset:3px}button:disabled{opacity:.62}button[aria-disabled=true]{opacity:.72}.app{max-width:1160px;padding:24px 32px 30px}header{margin-bottom:18px}.brand{font-size:32px;color:var(--ink)}.brand span{color:var(--muted);font-size:10px}.header-actions{gap:8px}.reset-farm{min-height:44px;padding:8px 12px;font-size:12px}.sound{width:44px;height:44px}
.wallet{padding:18px 24px;border:1px solid #d6e1d0;background:#ffffffcf;box-shadow:0 5px 22px #30473306;border-radius:22px;gap:16px}.wallet strong{font-size:32px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.eyebrow{color:#566f5f;font-size:10px;letter-spacing:1.5px}.wallet-right{flex-shrink:0}.token-balance{display:inline-block;border:1px solid #d7c6e5;border-radius:99px;padding:10px 14px;min-height:44px;background:#f2eaf8;color:#694784;font-size:13px;font-weight:700;margin-bottom:8px}.income{font-size:12px;color:#4b6c58;font-variant-numeric:tabular-nums}.live-dot{background:#568967}
.farm-tabs{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:6px;margin:22px 0 0;padding:6px;background:#e5ebdf;border-radius:16px}.farm-tabs button{display:flex;justify-content:center;align-items:center;gap:7px;min-height:48px;padding:8px;font-size:13px;font-weight:600;color:#546b5d;white-space:normal}.farm-tabs button>span{font-size:19px}.farm-tabs button[aria-pressed=true]{background:#fffef8;color:#2c5b45;box-shadow:0 2px 8px #23452f10}.farm-tabs button[data-tab=stars][aria-pressed=true]{background:#efe3f7;color:#6b468b}
[data-panel]{animation:panel-in .18s ease-out}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0 20px}.page-heading h2{font-size:30px;margin:5px 0 0;letter-spacing:-.6px}.status-pill{background:#e6eddf;border-radius:30px;padding:10px 14px;font-size:12px;color:#567047}.home-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start}.hatchery{margin:0;padding:22px 26px;border-radius:24px;box-shadow:0 7px 28px #37472c05}.hatchery h1{font-size:29px;margin:24px 0 9px}.hatchery>p{font-size:13px;color:var(--muted);line-height:1.6}.section-label{font-size:10px;color:#61735f;letter-spacing:1px}.scene{height:240px}.progress-copy{font-size:13px;color:var(--muted)}.progress-copy strong{color:#3f654d}.progress{height:10px;background:#e1e8d8}#progress{background:#77a171}.hatchery .hint{font-size:12px;color:#66765e;min-height:38px}.home-grid>.shop>.section-title{margin:0 0 14px}.section-title h2{font-size:25px;color:var(--ink)}.section-title>span{font-size:11px;color:var(--muted);letter-spacing:.4px}.section-note{font-size:13px;line-height:1.7;color:var(--muted);max-width:85ch}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-card{border-radius:18px;background:var(--paper);padding:16px;color:var(--ink);min-width:0;min-height:140px;box-shadow:0 2px 7px #30473303}.shop-card:hover{box-shadow:0 5px 16px #3047330c;transform:translateY(-2px)}.item-icon{font-size:29px;margin:0 0 10px}.shop-card strong{font-size:15px}.shop-card small{font-size:12px;color:var(--muted);line-height:1.5;min-height:36px}.price{margin-top:12px;font-size:14px;color:#3c694c}.tag{font-size:8px;color:#725489}.mystery{background:#f2edf8;border-color:#d8cbe6}.mystery .price{color:#725493}.rare-egg{background:#eaf2ec;border-color:#c8dcd0}.enchanted-egg{background:#ececfa;border-color:#d0cdee}.mythic-egg{background:#f9efda;border-color:#e3cca0}.egg-guide{margin-top:14px;font-size:12px;color:#536b5b}.egg-guide summary{min-height:44px;padding:12px 4px;cursor:pointer;font-weight:600}.egg-odds-row{padding:12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fffef8}.egg-odds-row strong{font-size:13px}.egg-odds-row p{font-size:12px;line-height:1.7;margin:6px 0 0;color:var(--muted)}.auto-shop{margin-top:22px;padding:18px;background:#edf1e5;border:1px solid #d8e1ce;border-radius:20px}.auto-card{min-height:80px;background:#fffef8}.auto-card small{min-height:0}.auto-shop>.hint{font-size:12px;color:#61725b}.upgrade-row .small-button{font-size:12px;min-height:44px}
.star-banner{display:flex;align-items:center;gap:24px;width:100%;margin:22px 0 0;padding:22px 28px;border:1px solid #d6c6e2;border-radius:22px;text-align:left;background:linear-gradient(105deg,#e9e0f1,#f8f2df);color:#583f73}.banner-art{font-size:38px;color:#9b87b4}.star-banner small{display:block;font-size:10px;letter-spacing:1px}.star-banner strong{display:block;font:25px Fraunces,Georgia,serif;margin:5px 0}.star-banner span>span{font-size:13px}
.small-button,.primary-button{min-height:44px;font-size:13px;padding:11px 14px}.primary-button,.pet-actions .small-button.interact-button{background:var(--green);color:#fffef6}.primary-button:hover,.pet-actions .small-button.interact-button:hover{background:#315d49}.filter-bar{display:flex;align-items:end;gap:12px;margin:20px 0}.filter-bar label:first-child{flex:1}.filter-bar label{min-width:0}.filter-bar label>span,.search-field>span{display:block;font-size:12px;font-weight:600;color:#566c5d;margin-bottom:7px}.filter-bar input,.filter-bar select,.book-search input{width:100%;min-height:46px;border:1px solid #ccd8c7;border-radius:12px;background:#fffef9;color:var(--ink);padding:10px 13px;font-size:16px}.book-search{display:block;margin-bottom:20px;max-width:440px}#flock{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pet-card{padding:20px;border-radius:22px;background:#fffef8;box-shadow:0 3px 10px #29422c03}.pet-card.selected{border-color:#5b8b68;box-shadow:0 0 0 2px #74a07b24}.pet-top{gap:13px}.pet-top strong{font-size:17px}.pet-top small{font-size:12px;line-height:1.5;color:#5c6e60}.pet-face{font-size:46px;min-width:64px;min-height:66px}.pet-face img{width:76px;height:76px;object-fit:contain;display:block}.cat-pet .pet-face{filter:none;text-shadow:none}.hearts{margin-top:16px;font-size:23px;color:#b76580}.hearts span{font-size:11px;color:#6d7869;letter-spacing:0}.pet-income{font-size:15px;font-weight:700;color:#3f6c52;line-height:1.6;margin:10px 0}.growth-label{font-size:12px;color:#6a7765;min-height:20px}.pet-growth{height:5px;background:#e8eddf;border-radius:8px;margin:9px 0 3px;overflow:hidden}.pet-growth span{display:block;height:100%;background:#9ab482}.pet-actions{gap:8px}.pet-actions .small-button,.pet-actions .small-button.interact-button{font-size:12px;padding:10px;min-height:44px}.pet-actions .sell-pet{font-size:11px;background:transparent;color:#7b6b68;border-color:#dedbd2}.exclusive-pet{background:linear-gradient(140deg,#fffef8,#f0e7f7);border-color:#ccb8dc}.exclusive-pet .pet-income{color:#775097}.pet-home-note{font-size:11px;color:#7a5d90;margin:9px 0 0}.empty{padding:28px;font-size:14px;line-height:1.7;color:#65755d}
#collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.collection-card{padding:20px;border-radius:19px}.collection-card strong{font-size:15px}.collection-card small{font-size:12px;color:#667660}.variant-label{font-size:12px;color:#3f7452;margin-top:12px}.variant-label.golden{color:#8e651f}.variant-label.rainbow{color:#795094}.variant-label.undiscovered{color:#778273}.book-emoji{height:64px;font-size:44px;margin-bottom:14px}.book-emoji img{width:80px;height:72px;object-fit:contain}.coat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.coat-card{padding:12px;text-align:center;background:#fffef8;border:1px solid var(--line);border-radius:15px}.coat-card img{width:100%;max-width:110px}.coat-card strong,.coat-card small{display:block;font-size:12px;line-height:1.6}.coat-card small{color:#68765e}.coat-card.locked{opacity:.65}.list-row{padding:18px 0;gap:20px}.list-row strong{font-size:14px}.list-row small{font-size:12px;color:#61735e}.list-row .small-button{font-size:12px}.life-feature{border-radius:20px;background:#edf1e6;padding:20px}.life-select select,.pet-studio select{min-height:44px;font-size:16px}.trail-card{border-radius:20px;padding:22px;background:#fffef8}.trail-card .section-note,.trail-rewards{font-size:13px;color:#566d5f}.section-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.section-shortcuts button,.back-link{border:1px solid #d3dfca;border-radius:12px;background:#fffdf6;color:#42644e;min-height:44px;font-size:13px;padding:10px 16px}.back-link{margin-top:24px}.section-shortcuts button:hover{background:#e6eedf}.farm-level-5,.farm-level-6{min-height:300px;background:linear-gradient(#e4edf1 0 40%,#d5e1bf 40% 55%,#bfd6aa 55%)}
.star-hero{position:relative;text-align:center;margin-top:24px;padding:38px 24px 30px;background:radial-gradient(ellipse at 15% 10%,#eadcf4,transparent 65%),linear-gradient(120deg,#f3eef8,#fff4df);border:1px solid #dfd1e7;border-radius:26px}.star-hero:before,.star-hero:after{position:absolute;font-size:44px;color:#c6b3d5;content:'✧';top:45px;left:9%}.star-hero:after{left:auto;right:10%;top:100px;font-size:26px}.star-hero .eyebrow{color:#806398}.star-hero h2{font-size:37px;line-height:1.2;letter-spacing:-.7px;margin:14px 0}.star-hero p{max-width:470px;margin:0 auto 20px;font-size:14px;line-height:1.7;color:#766483}.star-wallet{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid #dbc5a2;border-radius:40px;background:#fff9e9;color:#91651e}.star-wallet strong{font-size:25px;font-variant-numeric:tabular-nums}.star-wallet span{font-size:12px}.shop-promise{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:20px 10px;font-size:12px;color:#6c5d78}#exclusive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.exclusive-card{display:flex;flex-direction:column;border:1px solid #dbd0e5;border-radius:24px;background:#fffcfa;overflow:hidden}.exclusive-art{position:relative;display:grid;place-items:center;min-height:210px;background:radial-gradient(ellipse at center,var(--pet-color),#f8f4ee 72%)}.exclusive-art img{width:240px;height:210px;object-fit:contain}.exclusive-badge{position:absolute;top:15px;left:16px;border:1px solid #ffffffa8;background:#fffef8c9;border-radius:30px;padding:7px 10px;font-size:10px;letter-spacing:.6px;color:#5d476b}.exclusive-copy{padding:24px;display:flex;flex-direction:column;flex:1}.exclusive-copy h3{font-size:25px;margin:0 0 5px}.exclusive-tag{font-size:12px;color:#8b6ca0;margin:0 0 12px}.exclusive-description{font-size:13px;line-height:1.7;color:#6d6172;min-height:44px;margin:0 0 16px}.exclusive-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0;border-top:1px solid #e9dfec;border-bottom:1px solid #e9dfec;margin-bottom:16px}.exclusive-stats span{font-size:11px;color:#786785}.exclusive-stats strong{display:block;font-size:20px;color:#634682;margin-top:4px}.exclusive-note{font-size:11px;line-height:1.7;color:#786d7d;margin:0 0 15px}.star-progress{height:6px;border-radius:20px;background:#eee4f4;overflow:hidden;margin-top:auto}.star-progress span{display:block;height:100%;background:#af8fc3}.exclusive-saving{font-size:12px;color:#766180;margin:9px 0 14px}.exclusive-buy{min-height:48px;border:1px solid #80609c;border-radius:13px;background:#795791;color:#fffdf7;font-size:14px;font-weight:600;padding:12px}.exclusive-buy:hover{background:#65467c}.exclusive-buy:disabled{background:#e8dff0;border-color:#d2c2df;color:#6b557c;opacity:1}.earn-stars{padding:24px;margin-top:24px;border-radius:20px;background:#ebe7f0;border:1px solid #ddd4e5}.earn-stars h3{margin:0 0 10px;font-size:23px}.earn-stars p{font-size:13px;line-height:1.7;color:#6e6276}
dialog{max-width:420px;padding:28px;max-height:calc(100dvh - 32px);overflow-y:auto}dialog p{font-size:14px;color:#586c5e}dialog button{min-height:44px;font-size:14px}#exclusive-picture{display:block;margin:auto;width:190px;height:170px;object-fit:contain}#exclusive-balance{font-weight:600;color:#76538c}#confirm-exclusive{width:100%;background:#795791}#interact-dialog .cuddle-top{position:sticky;top:-1px;z-index:10;padding:10px 0;background:#fffcf3;box-shadow:0 7px 10px #fffcf3}#interact-dialog .cuddle-top button{width:44px;height:44px;min-height:44px;background:#e4eada;color:#3e5c49}#interact-kind,#interact-bond,#interact-ready{font-size:12px!important;color:#5c705e!important}#interact-dialog #pat-pet{font-size:14px;min-height:48px}#interact-reaction{font-size:13px!important;color:#4c6c53}.cuddle-tip{font-size:11px;color:#627559}.pet-studio summary{min-height:44px;font-size:14px;padding:12px 0}.pet-studio label{font-size:12px}.life-controls button{min-height:44px;font-size:13px}.view-controls #pet-view-reset{font-size:12px}.cuddle-hearts{color:#b86580}#toast{z-index:1000;border-radius:16px;font-size:13px;line-height:1.5;box-shadow:0 5px 20px #213c3033}footer{font-size:11px;color:#6c7b62}
@keyframes panel-in{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:850px){.app{padding:22px 22px 32px}.home-grid{grid-template-columns:1fr}.home-grid>.shop>.section-title{margin-top:6px}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#flock{grid-template-columns:repeat(2,minmax(0,1fr))}#collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page-heading h2{font-size:27px}.status-pill{display:none}}
@media(max-width:600px){.app{padding:18px 16px calc(100px + env(safe-area-inset-bottom))}.brand{font-size:27px}.brand span{font-size:8px}.reset-farm{font-size:11px;padding:8px}.wallet{padding:16px;gap:8px}.wallet strong{font-size:27px}.wallet .eyebrow{font-size:9px}.token-balance{font-size:12px;padding:9px 12px}.income{font-size:11px}.farm-tabs{position:fixed;bottom:0;left:0;right:0;z-index:50;margin:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;border:1px solid #d6dfcd;background:#f6f8efed;backdrop-filter:blur(14px);box-shadow:0 -5px 24px #2f4c2d0c;gap:2px}.farm-tabs button{flex-direction:column;gap:3px;min-height:57px;font-size:10px;padding:6px 1px;border-radius:12px}.farm-tabs button>span{font-size:21px}.page-heading{margin-top:22px}.page-heading h2{font-size:25px}.hatchery{padding:19px}.hatchery h1{font-size:27px}.scene{height:213px}.home-grid{gap:22px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-card{padding:16px;min-height:145px}.shop-card strong{font-size:14px}.shop-card small{font-size:12px;min-height:36px}.tag{font-size:8px}.section-title{margin-top:25px}.section-title h2{font-size:24px}.section-title>span{font-size:11px}.auto-shop{padding:14px}.auto-card{min-height:90px;gap:10px}.auto-card .price{font-size:13px}.auto-card small{min-height:0}.star-banner{padding:20px;gap:16px}.banner-art{font-size:25px}.star-banner strong{font-size:23px}.pet-card{padding:16px}.pet-top strong{font-size:16px}.pet-top small{font-size:12px}.pet-top{gap:10px}.pet-face{min-width:54px;font-size:42px}.pet-face img{width:64px;height:64px}.pet-actions .small-button{font-size:12px}.pet-income{font-size:14px}.hearts span{font-size:11px}.growth-label{font-size:12px;min-height:20px}.filter-bar{gap:10px}.filter-bar select{max-width:140px}.list-row{gap:12px;align-items:flex-start}.list-row strong{font-size:14px}.list-row small{font-size:12px}.list-row .small-button{font-size:12px;padding:10px}.collection-card{padding:16px}#collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.star-hero{padding:29px 18px 24px}.star-hero h2{font-size:32px}.star-hero:before{left:5%;font-size:25px;top:25px}.star-hero:after{right:5%;top:100px;font-size:19px}.shop-promise{gap:12px;font-size:11px}#exclusive-grid{grid-template-columns:1fr;gap:18px}.exclusive-art{min-height:200px}.exclusive-copy{padding:22px}.exclusive-description{min-height:0}.earn-stars{padding:20px}.section-shortcuts button{flex:1;white-space:normal;font-size:12px}#toast{bottom:calc(86px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 30px)}#interact-dialog{padding:16px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.cuddle-scene{height:270px}}
@media(max-width:430px){#flock{grid-template-columns:1fr}.filter-bar label:first-child{min-width:0}.wallet strong{font-size:24px}.income{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#egg[data-tier=rare] .egg-shape{background:linear-gradient(135deg,#dbeed8,#87b59d)}#egg[data-tier=enchanted] .egg-shape{background:linear-gradient(135deg,#e6dff9,#9b99d6)}#egg[data-tier=mythic] .egg-shape{background:linear-gradient(135deg,#fff0b6,#c79b59);box-shadow:0 0 32px #e3bd6d66}

#new-animal img{display:block;width:190px;height:170px;object-fit:contain;margin:auto}#new-animal.cat-portrait{filter:none;text-shadow:none}

/* Income comparisons and pinned pets. */
.favourite-toggle{flex:0 0 44px;width:44px;height:44px;min-height:44px;border:1px solid #dccbd5;border-radius:50%;background:#fffaf6;color:#916375;font-size:23px;padding:0;align-self:flex-start}.favourite-toggle[aria-pressed=true]{background:#f5dce6;border-color:#c991a7;color:#a34c70}.pet-top>div{flex:1}.income-tier{display:inline-block;width:fit-content;border-radius:30px;padding:5px 9px;margin:8px 0 3px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.2px;background:#e9ebe4;color:#596650;border:1px solid #d5dccd}.tier-uncommon{background:#e2eee0;color:#3e6c47;border-color:#bdd2bb}.tier-rare{background:#e0edf4;color:#3f6981;border-color:#bed3df}.tier-epic{background:#ede4f6;color:#755091;border-color:#d5bfe6}.tier-legendary{background:#faf0cf;color:#8c661e;border-color:#e5cd8c}.tier-celestial{background:linear-gradient(110deg,#eee1f7,#f7e7d5);color:#79518b;border-color:#cbb0d8}.pen-comparison{font-weight:600!important;color:#45684e!important}.pen-shortcut{width:100%;margin-top:10px}.ranking-note{margin-bottom:8px}.tier-guide{font-size:12px;color:#5c705e;margin-bottom:12px}.tier-guide summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:600}.tier-guide p{line-height:1.8;max-width:75ch;margin-top:0}.latest-hatch{width:100%;margin-top:18px;padding:14px;border:1px solid #c8d8bd;border-radius:15px;color:#466a4e;background:#edf4e5;min-height:48px;font-size:14px}#new-animal.hatch-portrait{margin:12px 0 0;font-size:0;min-height:230px}#hatch-canvas{display:block;width:100%;height:240px;touch-action:none}#hatch-fallback{display:grid;place-items:center;height:240px;font-size:110px}#hatch-dialog{width:min(430px,calc(100% - 24px));max-width:430px}#hatch-dialog #welcome{width:100%}

.auto-roadmap{font-size:12px;color:#4c6754;margin-top:10px}.auto-roadmap summary{min-height:44px;padding:12px 0;cursor:pointer}.auto-roadmap p{white-space:pre-line;line-height:2;margin:0 0 12px}

/* Keep modal exits reachable on short phones and prevent background scroll chaining. */
dialog{overscroll-behavior:contain;scroll-padding-block:64px 20px}body:has(dialog[open]){overflow:hidden}.modal-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-1px;z-index:10;background:#fffcf3;padding:8px 0;box-shadow:0 7px 10px #fffcf3}.modal-top button{margin:0;width:44px;height:44px;padding:0;background:#e4eada;color:#3e5c49;font-size:25px}.filter-bar input{min-width:0}
@media(max-height:720px){.cuddle-scene{height:clamp(150px,32dvh,220px)}#hatch-canvas,#hatch-fallback{height:clamp(140px,30dvh,210px)}#new-animal.hatch-portrait{min-height:0}dialog{padding:16px;max-height:calc(100dvh - 16px)}#interact-dialog{max-height:calc(100dvh - 16px)}}
@media(max-width:600px){input,select{font-size:16px}.pet-card{content-visibility:auto;contain-intrinsic-size:auto 350px}}

#hatch-dialog[data-rarity=golden]{border:3px solid #d7af47;background:radial-gradient(ellipse at center,#fff2bc,#fffcf3 75%)}#hatch-dialog[data-rarity=rainbow]{border:3px solid #b29bd4;background:linear-gradient(135deg,#fae5ee,#eee8fa,#e2f3ec)}#hatch-celebration{font-weight:700;color:#75603a}#hatch-rewards{font-size:12px;color:#674c83}

.home-missions{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;margin:0 0 20px;padding:16px 20px;border:1px solid #bfceb0;border-radius:18px;background:#eaf1df;color:#34543c;text-align:left}.home-missions>span:nth-child(2){flex:1}.home-missions strong{display:block;font-size:17px}.home-missions small{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:#526849}.mission-shortcut-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fffef8;font-size:24px}

/* Egg reveal: crack, split, then reveal the actual pet portrait. */
#egg-opening,#skip-hatching{display:none}#hatch-dialog.egg-opening #egg-opening{display:grid;place-items:center;position:absolute;inset:90px 20px 90px;z-index:3;pointer-events:none}#hatch-dialog.egg-opening #skip-hatching{display:block;position:relative;z-index:4;margin:8px auto}#hatch-dialog.egg-opening #new-animal,#hatch-dialog.egg-opening #new-description,#hatch-dialog.egg-opening #new-name,#hatch-dialog.egg-opening #hatch-rewards,#hatch-dialog.egg-opening #hatch-celebration,#hatch-dialog.egg-opening #welcome{visibility:hidden}#egg-opening p{align-self:end;font-size:14px;color:#536b4c}.opening-shell{position:relative;width:140px;height:180px;animation:egg-wobble 1s ease-in-out both}.shell-top,.shell-bottom{position:absolute;inset:0;border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;background:radial-gradient(ellipse at 32% 25%,#fffdf1,#edddb4 65%,#c9b480);box-shadow:inset -8px -5px 14px #a68f4933}.shell-top{clip-path:polygon(0 0,100% 0,100% 51%,91% 51%,74% 44%,59% 57%,48% 46%,35% 56%,24% 43%,9% 52%,0 52%);animation:shell-lift .65s 1s ease-in forwards}.shell-bottom{clip-path:polygon(0 52%,9% 52%,24% 43%,35% 56%,48% 46%,59% 57%,74% 44%,91% 51%,100% 51%,100% 100%,0 100%);animation:shell-drop .65s 1s ease-in forwards}.shell-crack{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#8e794b;stroke-width:3;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;animation:crack-draw .5s .45s forwards,crack-hide .1s 1s forwards}.opening-glow{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#fff4b8,transparent 70%);animation:hatch-glow 1.65s both}#hatch-dialog[data-rarity=golden] .shell-top,#hatch-dialog[data-rarity=golden] .shell-bottom{background:radial-gradient(ellipse at 30% 20%,#fff2b6,#e9bd4e 65%,#af7d24)}#hatch-dialog[data-rarity=rainbow] .shell-top,#hatch-dialog[data-rarity=rainbow] .shell-bottom{background:linear-gradient(140deg,#f7c4dc,#c5b1ee,#a5dfcd)}
@keyframes egg-wobble{0%,100%{transform:rotate(0)}20%,55%{transform:rotate(-7deg)}35%,75%{transform:rotate(7deg)}}@keyframes crack-draw{to{stroke-dashoffset:0}}@keyframes crack-hide{to{opacity:0}}@keyframes shell-lift{to{transform:translate(-38px,-65px) rotate(-24deg);opacity:0}}@keyframes shell-drop{to{transform:translate(32px,52px) rotate(18deg);opacity:0}}@keyframes hatch-glow{0%,45%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2)}}

.mission-link{display:block;text-align:left;padding:10px 0;min-height:44px;border:0;background:transparent;color:#3d7059;font:600 14px inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.mission-link:hover{color:#274c3b}

.trade-picks{display:grid;gap:6px;max-height:320px;overflow:auto;overscroll-behavior:contain}.trade-pick{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px;background:#f2f4e9;border-radius:10px}.trade-pick input{width:22px;height:22px;flex-shrink:0}#trading-post>.small-button{margin:8px 8px 0 0}

.farm-tabs{overflow-x:auto}.trade-auto{display:block;margin-top:12px;min-height:44px}

/* Two rows keep all eight destinations visible and comfortably tappable on phones. */
@media(max-width:600px){.farm-tabs{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}.farm-tabs button{min-height:54px}.app{padding-bottom:calc(160px + env(safe-area-inset-bottom))}#toast{bottom:calc(140px + env(safe-area-inset-bottom))}}

.book-pet-art{display:block;width:96px;height:80px;object-fit:contain;margin:0 auto 8px}.pet-face img[src*="axolotl"]{width:76px;height:64px;object-fit:contain}

.pet-face img{width:76px;height:76px;object-fit:contain}.farm-pet-art{width:72px;height:72px;object-fit:contain;z-index:1}.pen-pet-art{display:block;width:64px;height:64px;object-fit:contain}.visitor-face{width:64px;height:64px;object-fit:contain}.fallback-pet-art{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;pointer-events:none}#hatch-fallback .fallback-pet-art{max-width:280px}

/* Keep retired canvases out of the illustrated portrait layout. */
#hatch-canvas[hidden],#pet-canvas[hidden]{display:none}
#hatch-fallback .fallback-pet-art{width:100%;height:100%;min-width:0;min-height:0}

/* Explicit image dimensions avoid percentage sizing inside the mobile dialog grid. */
#hatch-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:auto;min-height:180px;font-size:14px}
#new-animal #hatch-fallback .fallback-pet-art{flex:none;width:240px;height:240px;max-width:100%;max-height:none;margin:0;object-fit:contain}
#hatch-fallback .hatch-art-status{font-size:12px;margin:4px 0}
#hatch-fallback [hidden]{display:none}
@media(max-height:720px){#new-animal #hatch-fallback .fallback-pet-art{width:180px;height:180px}}

.collect-all-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}.collect-all-bar button{min-height:44px}.collect-all-bar .section-note{margin:0}

/* Mythic earning tier: distinct from golden/rainbow portrait variants. */
.income-tier.tier-mythic{color:#a31d33;background:#ffe3e8;border:1px solid #e9a4af}

#hatch-dialog[data-income-tier="mythic"] #hatch-celebration{color:#a31d33}
#hatch-dialog[data-income-tier="mythic"] #new-description{border-left:3px solid #bd2944;padding-left:10px}

.family-tree{text-align:left;margin:14px 0;padding:12px;border:1px solid #d5dccd;border-radius:14px;background:#fffdf7}.family-tree summary{cursor:pointer;min-height:44px;padding:8px;font-weight:600}.family-member{margin:6px 0 6px 10px;padding-left:8px;border-left:2px solid #d5dccd}.family-member summary{display:flex;align-items:center;gap:8px;font-size:13px}.family-portrait{width:52px;height:52px;object-fit:contain;flex:none}.family-child{font-size:13px}

.app-settings{margin-top:16px;border:1px solid #cbd8c4;border-radius:16px;padding:12px 16px;background:#f0f4e9;font-size:13px;line-height:1.6}.app-settings summary{cursor:pointer;min-height:32px;font-weight:700}.app-settings button{padding:12px;margin:4px;border:1px solid #bdceb5;border-radius:10px;background:#fffdf5;min-height:44px}.app-settings [hidden]{display:none}

.backup-toolbar{margin:0 0 16px;padding:10px 12px}.backup-toolbar>button{margin:0 6px 0 0}.backup-toolbar>p:empty{display:none}.backup-toolbar #import-review{padding-top:8px;border-top:1px solid #cbd8c4;margin-top:10px}@media(max-width:600px){.backup-toolbar>button{font-size:13px;padding:10px 12px}}

#feed-dialog{max-width:430px;max-height:calc(100dvh - 24px);overflow:auto}#feed-choice{display:block;width:100%;margin:12px 0;padding:12px;font:inherit;border:1px solid #bdceb5;border-radius:10px;background:#fffdf5}.feed-portrait{width:140px;height:140px;object-fit:contain}#confirm-feed:disabled{opacity:.5;cursor:default}