/* A quiet iOS collection shelf; new ornaments always surround the complete painting. */
.evolution-art{position:relative;width:100%;aspect-ratio:1;isolation:isolate;--evolution-core-size:78%;display:grid;place-items:center;overflow:visible}
.evolution-art .evolution-mantle{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;border-radius:0}
.evolution-core{position:relative;z-index:1;width:var(--evolution-core-size);height:var(--evolution-core-size);display:grid;place-items:center}
.evolution-core>img,.surprise-painting{display:block;object-fit:contain;width:100%;height:100%;border-radius:12px}
.evolution-core>.pet-art-window{width:100%;height:100%}
.stage .evolution-core .pet-art-window{box-shadow:none}
.evolution-core .pet-painting{border-radius:10px}
.presentation-art .evolution-art{width:100%;height:auto;max-height:none}
.presentation-art .evolution-mantle{width:100%;height:100%;object-fit:contain}
.presentation-art .evolution-core>img{width:100%;height:100%;border-radius:12px;object-fit:contain}
.roster-evolution{width:100%;aspect-ratio:1;overflow:hidden}
.roster-evolution>img{width:100%;height:100%;object-fit:contain;display:block}
.surprise-shortcut{display:flex;width:100%;gap:12px;align-items:center;justify-content:flex-start;margin-top:20px;text-align:left}
.surprise-shortcut>span{flex:1}
.surprise-shortcut small{display:block;margin-top:4px;font-weight:400;font-size:12px;line-height:1.5;color:var(--muted)}
.surprise-shortcut>.icon{flex:none}
.advanced-journey{margin:28px 0}
.surprise-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.surprise-section-heading h2{margin:0 0 6px;font-size:21px;letter-spacing:-.4px}
.surprise-section-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.surprise-section-heading>span{flex:none;color:var(--muted);font-size:13px;line-height:1.7}
.advanced-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0;margin:0;list-style:none}
.advanced-forms>li{min-width:0;border-bottom:1px solid var(--line);padding-bottom:20px}
.advanced-forms h3{font-size:17px;margin:8px 0}
.advanced-forms p{font-size:13px;line-height:1.6;margin:0}
.advanced-forms small{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-top:5px}
.advanced-forms .current h3{color:var(--ui-accent)}
.advanced-preview{width:100%;aspect-ratio:1;background:var(--paper);border-radius:18px}
.advanced-forms .locked .advanced-preview{opacity:.8}
.surprise-hub{min-width:0}
.treasure-hero{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr);align-items:center;gap:24px;background:var(--surface);border-radius:24px;padding:28px;margin-bottom:30px}
.treasure-visual{min-width:0;text-align:center}
.treasure-visual img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.treasure-visual>span{font-size:12px;line-height:1.6;color:var(--muted)}
.treasure-copy h2{font-size:27px;line-height:1.35;letter-spacing:-.7px;margin:0 0 14px;text-wrap:balance}
.treasure-copy h2>span{display:inline-block}
.treasure-copy>p{font-size:14px;line-height:1.8;margin:0 0 20px;color:var(--muted)}
.treasure-copy .treasure-caption{font-size:12px;line-height:1.7;margin:14px 0 0}
.treasure-open{min-height:48px}
.treasure-copy a.button{display:inline-flex;min-height:44px;padding:10px 16px;align-items:center;border-radius:10px;text-decoration:none;background:var(--ui-fill);color:var(--ui-accent);font-weight:600}
.surprise-reveal{display:flex;gap:20px;align-items:center;padding:24px;background:#edf4ff;border:1px solid #b8cceb;border-radius:20px;margin-bottom:30px;scroll-margin-top:24px}
.surprise-reveal[hidden]{display:none}
.reveal-symbol{display:grid;place-items:center;flex:none;width:112px;height:112px}
.reveal-symbol .keepsake-art{width:100%;height:100%}
.surprise-reveal h2{font-size:23px;margin:0 0 8px}
.surprise-reveal p{font-size:14px;line-height:1.7;margin:0 0 8px}
.surprise-reveal small{color:var(--muted);font-size:12px}
.keepsake-collection,.pet-letters{margin-top:32px;background:var(--surface);padding:28px;border-radius:24px}
.keepsake-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;margin:0;list-style:none}
.keepsake-item{display:flex;flex-direction:column;align-items:flex-start;padding:20px 14px 24px;border-bottom:1px solid var(--line);min-width:0}
.keepsake-art{display:block;width:128px;max-width:100%;height:128px;overflow:hidden;flex:none}
.keepsake-item.collected .keepsake-art{align-self:center}
.keepsake-item.waiting{justify-content:center}
.keepsake-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#edf4ff;color:var(--ui-accent)}
.keepsake-icon .icon{width:24px;height:24px}
.keepsake-item h3{font-size:14px;margin:14px 0 6px;line-height:1.5}
.keepsake-item p{font-size:12px;line-height:1.7;margin:0;color:var(--muted)}
.keepsake-item small{font-size:11px;margin-top:12px;line-height:1.6;color:var(--muted)}
.keepsake-item.waiting .keepsake-icon{background:var(--ui-fill);color:var(--muted)}
.keepsake-item.waiting h3{color:var(--muted);font-weight:500}
.pet-letter{border-bottom:1px solid var(--line)}
.pet-letter summary{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;cursor:pointer;list-style:none}
.pet-letter summary::-webkit-details-marker{display:none}
.pet-letter summary>span:first-child{display:flex;align-items:center;gap:12px}
.pet-letter summary .icon{flex:none;width:19px;height:19px;color:var(--ui-accent)}
.letter-arrow{transform:rotate(90deg)}
.pet-letter[open] .letter-arrow{transform:rotate(-90deg)}
.pet-letter>div{font-size:15px;line-height:1.9;padding:4px 12px 16px 31px}
.pet-letter p{margin:0 0 12px}
.pet-letter .letter-sign{text-align:right;font-size:13px;color:var(--muted)}
.pet-motion-enabled .surprise-reveal:not([hidden]){animation:surprise-arrival .55s cubic-bezier(.16,1,.3,1) both}
@keyframes surprise-arrival{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:701px) and (max-width:1200px){.treasure-hero{gap:16px;padding:22px}.treasure-copy h2{font-size:23px}.keepsake-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .surprise-layout{display:flex;flex-direction:column}
 .treasure-hero{border-radius:20px;margin-bottom:24px}
 .keepsake-collection,.pet-letters{padding:20px;border-radius:20px;margin-top:24px}
 .keepsake-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .keepsake-item{padding:18px 8px}
 .surprise-section-heading{gap:10px}.surprise-section-heading h2{font-size:19px}
 .surprise-reveal{padding:20px;gap:14px}
 .reveal-symbol{width:84px;height:84px}
 .keepsake-art{width:104px;height:104px}
 .surprise-reveal>div{min-width:0}
 .surprise-reveal h2{font-size:20px}
 .advanced-forms{gap:12px}.advanced-forms h3{font-size:16px}
 .pet-letter>div{padding-left:0}
 .surprise-shortcut{padding:12px}
}
@media(prefers-reduced-motion:reduce){.surprise-reveal{animation:none!important}}

/* On phones the primary action stays ahead of decorative height. */
@media(max-width:700px){
 .treasure-hero{grid-template-columns:80px minmax(0,1fr);gap:12px 16px;padding:18px;align-items:center}
 .treasure-visual,.treasure-copy{display:contents}
 .treasure-visual img{grid-column:1;grid-row:1;width:80px;height:80px}
 .treasure-visual>span{grid-column:1/-1;grid-row:4;text-align:left;font-size:12px}
 .treasure-copy h2{grid-column:2;grid-row:1;font-size:22px;line-height:1.35;margin:0;letter-spacing:-.02em}
 .treasure-copy .treasure-open,.treasure-copy a.button{grid-column:1/-1;grid-row:2;width:100%;min-height:48px;justify-content:center}
 .treasure-copy>p:not(.treasure-caption){grid-column:1/-1;grid-row:3;font-size:14px;line-height:1.8;margin:0}
 .treasure-copy .treasure-caption{grid-column:1/-1;grid-row:5;margin:0}
}