:root{--arcade-coral:#F2766B;--arcade-mango:#F0BA55;--arcade-teal:#229A93;--arcade-blue:#326FBE;--arcade-navy:#183E52}

body{background:#fffaf1}
body:before{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;opacity:.48;background-image:radial-gradient(#e2be9b 1px,transparent 1.3px),radial-gradient(#a6d7da 1px,transparent 1.2px);background-size:26px 26px,43px 43px;background-position:0 0,11px 14px;mask-image:linear-gradient(to right,#000 0%,transparent 22%,transparent 78%,#000 100%)}
.app{isolation:isolate}

.hero-mark{animation:logoEntrance 1s cubic-bezier(.15,1.45,.45,1) both;transform-origin:10% 60%}
.start-pet:before{border:2px dashed #66babd;box-shadow:inset -18px -18px 34px #229a9314,11px 13px 0 #f0ba5540;animation:petHalo 7s ease-in-out infinite}
.start-pet:after{content:'♥';font-family:Arial,sans-serif;color:#f2766b;font-size:2rem;top:14%;bottom:auto;right:15%;filter:drop-shadow(3px 3px 0 #fff);animation:heartFloat 4.5s ease-in-out infinite}
.start-pet .pet-emoji{animation:float 5.5s ease-in-out infinite}
.landing-copy .eyebrow{animation:stickerIn .9s .2s both;transform-origin:left center}
.landing .primary.large{position:relative;overflow:hidden;transition:transform .24s cubic-bezier(.18,1.3,.35,1),box-shadow .24s}
.landing .primary.large:hover{transform:translate(-2px,-3px) rotate(-1deg)}
.primary:active,.secondary:active{transform:translate(2px,3px);box-shadow:1px 2px 0 #e1c89d}

.hatch-orb{position:relative;z-index:1;filter:drop-shadow(0 14px 13px #183e5221)}
.hatch:before{content:'';display:block;position:absolute;width:250px;height:250px;border:2px dashed #95ccca;border-radius:50%;top:45px;left:calc(50% - 125px);animation:orbitTurn 18s linear infinite;pointer-events:none}
.hatch:after{content:'♥';position:absolute;font-size:1.45rem;color:#e96c68;top:72px;right:20%;animation:heartFloat 4.7s ease-in-out infinite;pointer-events:none}
.hatched-name:not(:empty){animation:nameLand .85s cubic-bezier(.2,1.5,.34,1) both}

.hud{position:relative;overflow:hidden;box-shadow:5px 6px 0 #b7dadc,0 14px 26px #183e5211;transition:border-color .4s,box-shadow .4s}
.hud:before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--arcade-teal) 0 28%,var(--arcade-blue) 28% 58%,var(--arcade-mango) 58% 80%,var(--arcade-coral) 80%);pointer-events:none}
.hud-avatar{transition:transform .5s}.hud:hover .hud-avatar{transform:rotate(-8deg) scale(1.09)}
.xp-track{overflow:visible!important;position:relative}
.xp-track>div{position:relative;min-width:0;transition:width .85s cubic-bezier(.25,.8,.25,1)!important;box-shadow:0 0 0 1px #ffffff4d inset}
.xp-track>div:after{content:'';display:block;position:absolute;right:1px;top:2px;bottom:2px;width:12px;background:#ffffff55;border-radius:4px}
.round-pips{flex:1;display:flex;justify-content:center;align-items:center;gap:clamp(5px,1.6vw,12px);min-width:0}
.round-pips i{width:clamp(9px,1.9vw,14px);height:clamp(9px,1.9vw,14px);background:#d8e9e8;border:2px solid #87babc;transform:rotate(45deg);border-radius:3px;transition:background .45s,transform .45s,box-shadow .45s;flex:none}
.round-pips i.passed{background:#f0ba55;border-color:#a97c3a}
.round-pips i.current{background:#f2766b;border-color:#a94845;box-shadow:0 0 0 4px #ffe1d3;transform:rotate(45deg) scale(1.08);animation:stepPulse 2.8s ease-in-out infinite}
.progress-info{margin-bottom:14px!important;padding:0 2px}
.progress-info #round-status{white-space:nowrap}

.creature-strip{position:relative;isolation:isolate}
.creature-strip.pet-celebrate .creature-emoji{animation:petPop .75s cubic-bezier(.15,1.5,.4,1)}
.creature-speech{position:relative;transition:background-color .3s,transform .3s}
.pet-celebrate .creature-speech{background:#fff0d7;transform:translateY(-2px)}
.reaction-particle{position:absolute;left:37px;top:20px;color:var(--arcade-coral);font-size:20px;z-index:3;pointer-events:none;text-shadow:1px 2px #fff;animation:particleFlight 1.1s var(--delay,0ms) ease-out both}

.round-header h2{position:relative;padding-bottom:10px}
.round-header h2:after{height:5px;bottom:0;width:clamp(50px,28%,140px);border-radius:20px;background:var(--chapter)}
.round-chip{transform:rotate(1deg);transition:transform .25s}.round-chip:hover{transform:rotate(-2deg)}
.decision-head{display:flex;align-items:center;gap:11px}
.decision-head:after{content:'';flex:1;height:2px;background:repeating-linear-gradient(90deg,#77bdb9 0 8px,transparent 8px 15px);opacity:.75}
.choice{position:relative;overflow:hidden;transition:transform .24s cubic-bezier(.2,1.4,.3,1),box-shadow .24s,border-color .24s,background-color .24s}
.choice:not(:disabled):hover{transform:translate(-3px,-4px) rotate(-.45deg)!important}
.choice.chosen{animation:choiceConfirm .45s ease both}
.choice-mode{border-radius:8px;transition:transform .25s}
.choice:not(:disabled):hover .choice-mode{transform:rotate(-4deg) scale(1.04)}
.choice-arrow{transition:transform .25s}.choice:not(:disabled):hover .choice-arrow{transform:translate(3px,-3px)}
.choices .choice:nth-child(1){animation:optionArrive .57s .06s both}
.choices .choice:nth-child(2){animation:optionArrive .57s .16s both}
.choices .choice:nth-child(3){animation:optionArrive .57s .26s both}
.choices .choice:nth-child(4){animation:optionArrive .57s .36s both}
.choice:disabled{animation:none!important}
.next{animation:nextReveal .55s ease both;max-width:100%}

.post-card.new-post{animation:newPostIn .8s cubic-bezier(.15,1.08,.33,1) both;border-color:#229a93}
.my-comment{animation:commentIn .57s ease both}
.liked-comment .comment-heart{animation:likedBeat .6s ease both}

.result-card{position:relative;isolation:isolate;overflow:hidden}
.result-card:before{content:'';position:absolute;right:-28px;top:30px;width:190px;height:140px;opacity:.3;background:radial-gradient(#f0ba55 2px,transparent 2.8px) 0 0/17px 17px;transform:rotate(12deg);z-index:-1;pointer-events:none}
.ending-visual{animation:endingEnter .9s cubic-bezier(.18,1.35,.37,1) both}
.result-card h3{animation:stampLand .72s .15s both;transform-origin:50% 50%}
.result-stats span{transition:transform .25s}.result-stats span:hover{transform:translateY(-4px) rotate(-2deg)}
.trait-rail>div{transition:width 1.3s cubic-bezier(.16,1,.3,1)}
.food-box{transition:transform .3s}.food-box:hover{transform:translateY(-3px)}
.science-grid article{transition:transform .25s,box-shadow .25s}
.science-grid article:hover{transform:translateY(-3px);box-shadow:5px 7px 0 #bddbe0}
.share-card{position:relative;overflow:hidden}
.share-card:before{content:'';position:absolute;top:140px;left:-30px;width:145px;height:145px;border:3px dashed #6ebfba;border-radius:50%;opacity:.3;pointer-events:none}
.share-art{animation:float 6s ease-in-out infinite}

@keyframes logoEntrance{from{opacity:.2;transform:rotate(-5deg) scale(.92) translateY(18px)}to{opacity:1;transform:rotate(-2.2deg) scale(1)}}
@keyframes stickerIn{from{opacity:0;transform:rotate(4deg) translateY(13px)}to{opacity:1;transform:rotate(-1deg)}}
@keyframes petHalo{50%{transform:rotate(-2deg) scale(1.035)}}
@keyframes heartFloat{50%{transform:rotate(-11deg) translate(5px,-10px)}}
@keyframes orbitTurn{to{transform:rotate(360deg)}}
@keyframes nameLand{from{opacity:0;transform:scale(.86) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes stepPulse{50%{box-shadow:0 0 0 6px #ffe1d3;transform:rotate(45deg) scale(1.15)}}
@keyframes petPop{0%,100%{transform:rotate(-9deg) scale(1)}45%{transform:rotate(7deg) scale(1.24)}}
@keyframes particleFlight{0%{opacity:0;transform:translate(0,0) scale(.55)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.18) rotate(20deg)}}
@keyframes optionArrive{from{opacity:0;transform:translateY(19px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes choiceConfirm{0%{transform:scale(1)}50%{transform:scale(.985)}100%{transform:scale(1)}}
@keyframes nextReveal{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes newPostIn{from{opacity:0;transform:translateY(30px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes commentIn{from{opacity:0;transform:translateX(-11px)}to{opacity:1;transform:translateX(0)}}
@keyframes likedBeat{30%{transform:scale(1.45)}80%{transform:scale(.95)}}
@keyframes endingEnter{from{opacity:0;transform:scale(.8) rotate(-7deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes stampLand{from{opacity:.3;transform:rotate(-11deg) scale(1.22)}to{opacity:1;transform:rotate(-1.2deg) scale(1)}}
@media(max-width:650px){body:before{opacity:.2;mask-image:none}.hatch:before{width:195px;height:195px;left:calc(50% - 97.5px);top:38px}.hatch:after{right:13%;top:55px}.round-pips{gap:7px}.round-pips i{width:9px;height:9px;border-width:1.5px}.round-header h2{padding-bottom:8px}.round-chip{transform:none}.result-card:before{width:130px;height:90px}.choice:not(:disabled):hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reaction-particle{display:none}}