.pet-onboarding{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 25%,#fffdf0 0,#eee9d9 48%,#cbded1 100%);display:grid;place-items:center;padding:20px;overflow:auto;color:#184d40;font-family:Heebo,Arial,sans-serif}.pet-onboarding[hidden],.pet-onboarding [hidden]{display:none!important}.onboarding-active .app-shell{display:none}.pet-onboarding-inner{width:min(100%,660px);text-align:center;margin:auto}.pet-onboarding-mark{font-size:30px;color:#bc862d;margin-bottom:6px}.pet-onboarding h1,.pet-onboarding h2{font-size:clamp(27px,5vw,40px);margin:8px 0 22px}.pet-onboarding p{line-height:1.6}.pet-pair{background:#fffcf5;padding:36px;border-radius:30px;box-shadow:0 24px 90px #17433417;border:1px solid #d9e1d6;max-width:470px;margin:auto}.pair-symbol{display:block;font-size:56px;margin:8px}.pet-pair label{display:block;margin-bottom:12px}.pet-pair input{display:block;text-align:center;width:100%;box-sizing:border-box;font:700 30px Heebo,Arial;letter-spacing:.22em;border:2px solid #b1c7b6;background:white;border-radius:16px;padding:15px;color:#1b5142}.pet-primary{display:block;border:0;border-radius:17px;background:#205f4c;color:white;font:700 21px Heebo,Arial;padding:15px 26px;min-height:55px;cursor:pointer;margin:20px auto 0;width:min(100%,380px);box-shadow:0 5px 0 #123e31}.pet-primary:disabled{opacity:.45;cursor:default}.pet-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:540px;margin:auto}.pet-option{background:#fffdf6;border:3px solid transparent;border-radius:26px;padding:8px 14px 14px;box-shadow:0 6px 16px #35544412;cursor:pointer;color:#194d40;font:700 22px Heebo,Arial;transition:transform .2s,border-color .2s}.pet-option img{display:block;width:100%;height:clamp(95px,20vh,175px);object-fit:contain}.pet-option strong{display:block}.pet-option[aria-pressed=true]{border-color:#277b60;background:#eaf5e9;transform:translateY(-3px)}.pet-option:focus-visible,.pet-primary:focus-visible{outline:4px solid #cf9c3d;outline-offset:3px}.pet-status{min-height:25px;margin:14px 0 0;color:#744a19}.pet-hatch{position:relative;min-height:420px}.hatch-stage{height:min(58vh,470px);position:relative}.hatch-stage model-viewer{height:100%;width:100%;--poster-color:transparent;opacity:0;transition:opacity .5s;pointer-events:none}.hatching model-viewer{animation:pet-reveal .8s 1.35s both}@keyframes pet-reveal{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.magic-egg{position:absolute;left:50%;top:50%;width:190px;height:240px;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 16px 12px #69553428)}.magic-egg i{position:absolute;inset:0;border-radius:52% 52% 48% 48% / 65% 65% 35% 35%;background:radial-gradient(circle at 32% 25%,#fffefa,#f1e5bc 70%,#dac58b);border:2px solid #fff9db}.magic-egg i:first-child{clip-path:polygon(0 0,100% 0,100% 51%,85% 46%,72% 56%,59% 46%,45% 55%,30% 47%,15% 57%,0 50%)}.magic-egg i:last-child{clip-path:polygon(0 50%,15% 57%,30% 47%,45% 55%,59% 46%,72% 56%,85% 46%,100% 51%,100% 100%,0 100%)}.magic-egg:after{content:'✦';position:absolute;top:33%;left:43%;font-size:38px;color:#c5984d}.hatching:not(.native-hatch) .magic-egg{animation:egg-rumble 1.4s ease-in-out both}.hatching:not(.native-hatch) .magic-egg i:first-child{animation:shell-top 1.1s 1.35s forwards}.hatching:not(.native-hatch) .magic-egg i:last-child{animation:shell-bottom 1.1s 1.35s forwards}.hatching .magic-egg:after{animation:shell-bottom .5s 1.3s forwards}.native-hatch .magic-egg{display:none}.hatch-sparkles{position:absolute;inset:0;pointer-events:none;opacity:0;color:#dca23b;font-size:35px;display:flex;justify-content:space-around;align-items:center}.hatching .hatch-sparkles{animation:hatch-stars 3s 1.3s both}.pet-skip{border:0;background:transparent;text-decoration:underline;color:#4b6658;min-height:44px;padding:10px 20px;font:inherit;cursor:pointer}.pet-hatch h2{margin-top:0}.pet-hatch.loading model-viewer{opacity:0}.pet-hatch.loading .magic-egg{animation:egg-rumble 3s infinite}
@keyframes egg-rumble{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-6deg)}60%{transform:translate(-50%,-50%) rotate(7deg)}}@keyframes shell-top{to{transform:translate(-75px,-110px) rotate(-25deg);opacity:0}}@keyframes shell-bottom{to{transform:translate(50px,100px) rotate(18deg);opacity:0}}@keyframes hatch-stars{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}@media(max-height:650px){.pet-onboarding{padding:10px}.pet-onboarding h1,.pet-onboarding h2{font-size:25px;margin:5px 0 10px}.pet-option img{height:80px}.pet-option{border-radius:16px;padding:4px 10px}.pet-options{gap:8px}.pet-primary{margin-top:12px;padding:9px;min-height:46px}.hatch-stage{height:55vh}.pet-hatch{min-height:0}.pet-onboarding-mark{display:none}}@media(prefers-reduced-motion:reduce){.pet-onboarding *{animation:none!important;transition:none!important}.hatching .magic-egg{display:none}.hatching model-viewer{opacity:1}}

/* WebGL canvases use physical left coordinates, even in the Hebrew RTL UI. */
model-viewer{direction:ltr}