/* Welcome screen only. Portraits reuse the in-game character design sheet. */
#start{--home-ink:#355a51;--home-muted:#718277;padding:0;display:block;isolation:isolate;overflow:hidden;overscroll-behavior:none;color:var(--home-ink);font-family:"Trebuchet MS","PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(105deg,#f8f7ea40 0%,#f6f5e933 35%,#eaf2e51f 68%,#deecdf26);font-size:clamp(14px,1.12vw,20px)}
#start::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 22% 42%,#fff9eac4 0%,#fff9ea80 24%,transparent 57%),linear-gradient(#fff9ea66,transparent 16%,transparent 90%,#fff9ea66)}
#start::after{content:"";position:absolute;inset:1.4em;border:1px solid #fffdf4c9;border-radius:2em;pointer-events:none;z-index:-1}
.home-brand{position:absolute;left:6vw;top:5vh;display:flex;align-items:center;gap:.7em;font-size:1.25em;font-weight:800;letter-spacing:.12em}.home-brand-icon{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:35%;background:#fffdf0;color:#d29a5c;font-size:1.45em;box-shadow:0 5px 18px #546b4210;transform:rotate(-8deg)}.home-brand small{display:block;font-size:.52em;letter-spacing:.18em;font-weight:400;margin-top:.45em;color:#71806e}
.home-weather{position:absolute;right:6vw;top:5vh;display:flex;align-items:center;gap:.7em;padding:.65em 1.15em;border:1px solid #fffdf3;border-radius:2em;background:#fffbedc9;font-size:.95em}.home-weather>span{font-size:2em;color:#d2a157}.home-weather small{display:block;font-size:.65em;color:#8a9179;margin-top:.3em}
.home-content{position:relative;width:88%;max-width:86em;margin:0 auto;min-height:100%;display:grid;grid-template-columns:1fr 1.12fr;grid-template-rows:1fr auto;column-gap:5%;align-content:center;padding:19vh 0 13vh}
#start .welcome{min-width:0;width:auto;max-width:none;margin:0;background:none;border:0;border-radius:0;box-shadow:none;align-self:center;padding-top:1em}
.home-kicker{display:inline-flex;gap:.65em;align-items:center;font-size:.78em;letter-spacing:.14em;color:#7d876c}.home-kicker>span{color:#dca961;font-size:1.35em}
#start .welcome h2{font-family:inherit;font-weight:900;font-size:clamp(38px,4.6vw,78px);line-height:1.28;letter-spacing:.025em;margin:.45em 0 .4em;color:var(--home-ink)}#start .welcome em{font-style:normal;font-weight:900;color:#ca8458;white-space:nowrap;position:relative}#start .welcome em::after{content:"";position:absolute;left:2%;right:1%;bottom:-.06em;height:.07em;background:#e3b3656b;border-radius:50%}
#start .welcome p{font-size:1em;line-height:1.9;color:#7c897a;margin:1.15em 0}.home-invitation{font-size:.8em;color:#8b957f;display:flex;align-items:center;gap:.6em}.home-invitation>span{font-size:1.6em;color:#c99777}
.home-cast{grid-column:2;grid-row:1 / 3;position:relative;align-self:center;padding:1em 1.2em 1.7em}.cast-caption{display:flex;justify-content:space-between;align-items:center;margin:0 .8em 1.4em;font-size:.8em;letter-spacing:.15em;color:#7d8d79}.cast-caption>span:last-child{font-size:1.8em;color:#bc985e}
.home-friends{display:grid;grid-template-columns:1fr 1fr;gap:1.2em 1.3em;align-items:center}
.home-pet{--pet-color:#dcebb8;--pet-ink:#708745;position:relative;padding:.65em .65em .85em;border:1px solid #fffdf8;border-radius:1.5em;background:#fffcf2;box-shadow:0 8px 0 #e8e4d4,0 16px 28px #49635117;transform:rotate(-5deg)}
.home-pet-3{--pet-color:#dce4f7;--pet-ink:#7986b4;transform:rotate(5deg) translateY(.8em)}.home-pet-1{--pet-color:#f7e9b9;--pet-ink:#b79442;transform:rotate(3deg)}.home-pet-2{--pet-color:#f3d6bd;--pet-ink:#b98056;transform:rotate(-4deg) translateY(.8em)}
.pet-photo{position:relative;padding:.6em;background:var(--pet-color);border-radius:1.05em;overflow:hidden}.pet-photo::before,.pet-photo::after{content:"";position:absolute;border:1px solid #ffffff80;border-radius:50%;width:90%;aspect-ratio:1;left:5%;top:7%;pointer-events:none}.pet-photo::after{width:110%;left:-5%;top:0}.home-pet .pet-portrait{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1;box-shadow:0 3px 10px #666a4320;border:3px solid #fff9eb}
.pet-spark{position:absolute;right:.2em;bottom:.03em;font-size:2.3em;z-index:2;color:#fffbed;text-shadow:0 2px 1px var(--pet-ink);transform:rotate(15deg)}
.pet-caption{text-align:center;padding-top:.55em}.pet-tag{font-size:.54em;letter-spacing:.14em;color:var(--pet-ink)}.pet-caption h3{font-size:1.1em;margin:.2em 0;color:#475f54;letter-spacing:.08em}.pet-caption p{font-size:.62em;margin:.4em 0 0;color:#8a8c7e;white-space:nowrap}
.cast-sticker{position:relative;width:fit-content;margin:3em auto 0;transform:rotate(-3deg);white-space:nowrap;background:#fbebbf;border:1px solid #fff4d5;box-shadow:0 4px 10px #756c4120;border-radius:.3em;padding:.55em 1.1em;color:#9b7c4f;font-size:.74em;letter-spacing:.06em}.cast-sticker span{margin-left:.5em}
.home-entry{align-self:start;margin-top:2em;max-width:28em}#start #hm-game-start{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:4.2em;padding:.8em 1.3em;border-radius:1.2em;border:1px solid #648c70;background:linear-gradient(115deg,#719577,#456f5e);box-shadow:0 5px 0 #355b4c,0 12px 25px #4c73562b;color:#fffbed;transition:transform .16s,filter .16s;touch-action:manipulation}.entry-copy{text-align:left;font-size:1.25em;font-weight:800;letter-spacing:.1em}.entry-copy small{display:block;font-size:.45em;font-weight:400;letter-spacing:.18em;opacity:.75;margin-top:.5em}#start .entry-arrow{display:grid;place-items:center;width:1.9em;height:1.9em;background:#ffffff1f;border-radius:50%;font-size:1.5em}#start #hm-game-start:focus-visible{outline:3px solid #c98a4c;outline-offset:6px}#start #hm-game-start:active{transform:translateY(4px);box-shadow:0 1px 0 #355b4c}.home-entry>p{text-align:center;font-size:.63em;color:#8a917d;letter-spacing:.07em;margin:1.5em 0 0}
.home-footer{position:absolute;left:6vw;right:6vw;bottom:4vh;display:flex;justify-content:space-between;gap:1em;font-size:.65em;letter-spacing:.1em;color:#8c957f}
@media(hover:hover){#start #hm-game-start:hover{filter:brightness(1.08);transform:translateY(-2px)}}
@media(max-aspect-ratio:6/5){
 #start{font-size:clamp(14px,3.3vw,18px);background:linear-gradient(155deg,#f8f6ea33,#eff3e326 65%,#e8efde33)}#start::before{background:radial-gradient(ellipse 85% 24% at 50% 19%,#fff9eacc 0%,#fff9ea99 38%,transparent 100%),linear-gradient(#fff9ea55,transparent 10%,transparent 92%,#fff9ea88)}#start::after{inset:.7em;border-radius:1.6em}.home-brand{left:7%;top:4vh;font-size:1em}.home-weather{right:7%;top:4.4vh;font-size:.72em}.home-weather>span{font-size:1.75em}
 .home-content{width:86%;min-height:100%;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:0;padding:12vh 0 6vh;align-content:center}
 #start .welcome{text-align:center;padding:0}.home-kicker{font-size:.63em}#start .welcome h2{font-size:clamp(30px,7.7vw,48px);line-height:1.25;margin:.3em 0 .25em}#start .welcome h2 br{display:none}#start .welcome h2 em{display:block;width:fit-content;margin:auto}#start .welcome p{font-size:.75em;line-height:1.65;margin:.6em 0 .2em}.home-invitation{display:none}
 .home-cast{grid-column:1;grid-row:2;width:100%;max-width:24em;justify-self:center;padding:.45em 1em 1.2em;margin-top:.55em}.cast-caption{font-size:.58em;margin:0 .4em .7em}.cast-caption>span:last-child{font-size:1.3em}.home-friends{gap:.85em 1.15em}.home-pet{padding:.4em .4em .6em;border-radius:1.15em;box-shadow:0 5px 0 #e8e4d4,0 10px 20px #49635116}.pet-photo{padding:.35em;border-radius:.85em}.home-pet .pet-portrait{max-width:5.6em;margin:auto;border-width:2px}.pet-caption{padding-top:.25em}.pet-tag{font-size:.48em}.pet-caption h3{font-size:.94em;margin:.08em 0}.pet-caption p{font-size:.52em;margin:.3em 0 0}.pet-spark{font-size:1.6em}.cast-sticker{font-size:.6em;margin-top:3.4em}
 .home-entry{grid-column:1;grid-row:3;width:100%;max-width:23em;justify-self:center;margin-top:1.7em}#start #hm-game-start{min-height:3.8em;padding:.65em 1.2em;border-radius:1em}.entry-copy{font-size:1.08em}.entry-copy small{font-size:.49em}.home-entry>p{font-size:.55em;margin:1.2em 0 0}.home-footer{position:relative;font-size:.48em;bottom:auto;left:auto;right:auto;width:86%;margin:-3vh auto 2.5vh}.home-footer>span:last-child{display:none}
}
@media(max-aspect-ratio:6/5) and (max-height:740px){.home-content{padding-top:13vh;padding-bottom:6vh}#start .welcome h2{font-size:2.1em}.home-brand{top:3vh}.home-weather{top:3vh}.home-pet .pet-portrait{max-width:5.3em}.home-cast{max-width:21em;margin-top:.3em}.pet-caption p{display:none}.cast-caption{margin-bottom:.5em}.home-entry{margin-top:1.3em}.home-footer{display:none}}
@media(min-aspect-ratio:6/5) and (max-height:650px){#start{font-size:14px}.home-content{padding-top:17vh;padding-bottom:11vh;width:86%;grid-template-columns:1fr 1fr;gap:0 7%}.home-cast{max-width:29em;justify-self:center}.home-pet .pet-portrait{max-width:6em;margin:auto}.home-pet{padding:.45em}.pet-caption p{display:none}.home-friends{gap:.8em 1.1em}.cast-caption{margin-bottom:.7em}#start .welcome h2{font-size:clamp(30px,4vw,54px)}.home-entry{margin-top:1em}}
/* Fit the invitation to the viewport instead of extending a scrollable page.
   Portrait size and decorative spacing yield first; the entry stays reachable. */
#start{height:100%;height:100dvh}
.home-content{height:100%;min-height:0}
.home-pet .pet-portrait{max-width:min(8em,14dvh);margin:auto}
@media(max-aspect-ratio:6/5){
 #start{font-size:clamp(12px,min(3.3vw,1.65dvh),18px)}
 .home-brand{top:max(3dvh,env(safe-area-inset-top))}
 .home-weather{top:max(3.4dvh,env(safe-area-inset-top))}
 .home-content{height:100%;min-height:0;padding-top:max(11dvh,calc(env(safe-area-inset-top) + 4.2em));padding-bottom:max(5dvh,calc(env(safe-area-inset-bottom) + 1.5em));grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch}
 #start .welcome h2{font-size:clamp(28px,min(7.7vw,4.5dvh),48px);margin:.22em 0;line-height:1.2}
 #start .welcome p{line-height:1.55;margin:.5em 0 .15em}
 .home-cast{max-width:24em;min-height:0;margin:0;padding:.4em 1em .7em;align-self:center}
 .cast-caption{margin:0 .4em .55em}
 .home-friends{gap:.8em 1.15em}
 .home-pet .pet-portrait{max-width:min(5.6em,9.5dvh)}
 .cast-sticker{margin-top:2em;padding:.4em 1em}
 .home-entry{margin-top:.55em;align-self:end}
 #start #hm-game-start{min-height:max(48px,3.8em);font-size:inherit}
 .home-entry>p{margin:.9em 0 0}
 .home-footer{position:absolute;display:flex;left:7%;right:7%;bottom:max(1.7dvh,env(safe-area-inset-bottom));width:auto;margin:0;font-size:.48em}
}
@media(max-aspect-ratio:6/5) and (max-height:740px){
 .home-cast{max-width:22em}
 .home-pet .pet-portrait{max-width:min(5.3em,9dvh)}
 .pet-caption p{display:none}
 .cast-sticker{margin-top:1.7em}
}
@media(max-aspect-ratio:6/5) and (max-height:580px){
 #start .welcome p,.cast-caption,.cast-sticker,.home-entry>p,.home-footer{display:none}
 .home-content{padding-bottom:max(3dvh,env(safe-area-inset-bottom))}
 .home-cast{padding-bottom:.3em}
 .home-pet{padding:.3em}
 .home-friends{gap:.6em 1.15em}
 .pet-tag{display:none}
 .home-pet .pet-portrait{max-width:8dvh}
}
/* Keep the small captions readable over the now-visible park panorama. */
#start .cast-caption,#start .home-entry>p,#start .home-footer{color:#52644d;text-shadow:0 1px 3px #fffbed,0 0 8px #fffbed}
@media(prefers-reduced-motion:reduce){#start #hm-game-start{transition:none}}