/* Shared visual finish only; game and growth geometry/logic are unchanged. */ #scr-game{background:linear-gradient(160deg,#d8f2fb,#eaf8fc 58%,#d8f0f4)!important;color:#285a70} /* Like home, the garden page reveals the shared body sky. */ #scr-garden{background:transparent!important;color:#285a70} #gameTop .hgrp{background:linear-gradient(#fff,#f4fbfe)!important;box-shadow:0 3px 10px #377f9b12!important} #gameTop button{background:linear-gradient(#fff,#eef9ff)!important;box-shadow:0 3px 8px #377f9b13!important;color:#4b87a4!important} #gameTop .quit{background:#fff0ec!important;color:#bf7568!important} #hudLv{color:#368daf!important}#hudDots .lvbar{background:#d9eaf1!important}#hudDots .lvbar i{background:linear-gradient(90deg,#58bfd6,#2b93bc)!important} #sky[data-vweather="clear"]:not(.designBoss){background:linear-gradient(#90cfdf,#d7eff5 60%,#edf9f9)!important;box-shadow:inset 0 0 0 1px #ffffffa0,0 7px 22px #377e9615!important} #typeLabel{background:#ffffffdb!important;color:#386a82!important;box-shadow:0 3px 12px #53839b13!important;backdrop-filter:blur(8px)} #sky .wordcard:not(.gold):not(.rocket):not(.umb):not(.ice):not(.quiz):not(.bonus):not(.ansOn):not(.k1):not(.k2):not(.k3):not(.k4):not(.k5){background:linear-gradient(145deg,#fff,#eef9ff)!important;color:#286782!important;border-color:#abd8ea!important;box-shadow:0 5px 0 #acd6e349,0 9px 18px #367e9b1c,inset 0 1px 0 white!important} #scr-game .choice:not(.right):not(.wrongPick):not(.bad){background:linear-gradient(#fff,#f8fdff)!important;color:#2c6580!important;border-color:#d2e6ee!important;box-shadow:0 3px 0 #c4e0eb5c,0 6px 14px #3c7d9710!important} #faller:not(.k1):not(.k2):not(.k3):not(.k4):not(.k5){background:linear-gradient(150deg,#fff,#f4faff)!important;border-color:#c5deed!important;box-shadow:0 5px 0 #aac9d743,0 10px 25px #2847671d!important;color:#2d617d!important} #sky.designBoss{background:radial-gradient(ellipse at 50% 18%,#ddedf5b0,transparent 38%),linear-gradient(#8495bf,#c0c9df 45%,#e8edf7 82%)!important} #sky.designBoss #typeLabel{color:#5f648c!important;background:#f7f9ffe8!important} #bossMon .hpb{background:#eaf2ffd9!important;box-shadow:0 3px 8px #4d619227!important} #bossMon .hpb i{background:#cbd6e6!important;border-color:#ffffff90!important} #bossMon .hpb i.on{background:linear-gradient(#f5b7b9,#df8498)!important;box-shadow:0 0 6px #e899b537!important} #bossMon .bossSvg{filter:drop-shadow(0 10px 9px #58679735)!important} #faller .main{color:#335273!important;text-shadow:none!important} #faller.zap{border-color:#bccce3!important;box-shadow:0 5px 0 #a1b2ce42,0 10px 24px #4d5d8829!important} #gardenHero{background:linear-gradient(160deg,#acdbe7,#c9e9ef 58%,#e0f2f1)!important;box-shadow:inset 0 0 0 1px #ffffffa6,0 8px 24px #4e8e9c17!important} #gardenHero .hillB,#gardenHero .hillF{opacity:0!important}#gardenHero::after{opacity:0!important} #gardenHero .dn{box-shadow:0 4px 0 #8c6d4620,0 8px 16px #7d6b4815!important;background:linear-gradient(#d3ab76,#bd8c59)!important;color:#fffdf7!important} #gardenHero .danbi,#gardenHero .drop{filter:drop-shadow(0 9px 5px #528d9d18)} #gardenTotal{background:#ffffff70!important;box-shadow:inset 0 0 0 1px #ffffffb3!important} #gardenTotal .shopBtn{background:#ffffffed!important;box-shadow:0 2px 5px #4d8b9d10!important;color:#50839b!important;border-color:#d7e9ed!important} #gardenTotal .gdPill{background:linear-gradient(#f6fcff,#e2f0f5)!important;box-shadow:0 2px 0 #8cb5c329!important;color:#527b8c!important;border-color:#d0e4ec!important} #gardenPots .pot{background:linear-gradient(150deg,#fff,#f6fcf8)!important;box-shadow:inset 0 0 0 1px #ffffffa6,0 4px 12px #517d7115!important;border-color:#d8e9e1!important} #gardenPots .tierChip{box-shadow:none!important;filter:saturate(.7)} #gardenPots .gauge{background:#e1eeea!important;box-shadow:inset 0 1px 2px #55766a12!important} #gardenPots .gauge i{background:linear-gradient(90deg,#92cfac,#62af9f)!important} #gardenPots .pc{color:#72a48c!important}#gardenPots .ps{color:#7a9c9c!important} .visualLandscape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .gHero>svg.visualLandscape{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important} /* Visual-only surfaces: every dimension, timer and gameplay animation stays original. */ #sky:not([data-vweather="clear"])>.visualLandscape .visualDay{opacity:.2} .gHero>svg.visualLandscape{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important;pointer-events:none} .visualLandscape[data-sky="night"] .visualDay,.visualLandscape[data-sky="aurora"] .visualDay{display:none} .visualLandscape[data-sky="night"] .visualTerrain,.visualLandscape[data-sky="aurora"] .visualTerrain{filter:brightness(.62) saturate(.68)} .visualLandscape[data-sky="sunset"] .visualTerrain{filter:sepia(.12) saturate(.8)} .gHero:has(>.visualLandscape)>.hillB,.gHero:has(>.visualLandscape)>.hillF{opacity:0} .gHero:has(>.visualLandscape)::after{opacity:0} .gHero .deco>svg,.gHero .deco>span>svg{filter:drop-shadow(0 1.5px 1px #4475751a)} .fwCab{transform-box:fill-box;transform-origin:center;animation:visualCabin 9s linear infinite} @keyframes visualCabin{from{transform:rotate(0)}to{transform:rotate(-360deg)}} #scr-game .choice.right{background:linear-gradient(#effaf3,#dcf0e5)!important;border-color:#70b795!important;color:#2a7154!important;box-shadow:0 3px 0 #a5d2b84a!important} #scr-game .choice.wrongPick{background:linear-gradient(#fff4f2,#f6e0dd)!important;border-color:#daa096!important;color:#a45852!important;box-shadow:0 3px 0 #e4bcb246!important} #sky .wordcard.ansOn{border-color:#72b79a!important;background:linear-gradient(#f5fcf8,#e7f5ee)!important;box-shadow:0 5px 14px #4c9c7c28!important} #sky .ansFace{color:#378366!important} #scr-game #arrangeBuilt,#scr-game #arrangeBtns button:not(:disabled),#scr-game .kbK:not(.bad):not(.on){background:linear-gradient(#fff,#f2faff);border-color:#cee3ec;color:#356c85;box-shadow:0 2px 0 #bcd9e64d} #scr-game .kbK.on{background:#d8edf6;color:#236886} #bossMon .bsay{background:#f6f5ff;color:#77759e;border-color:#c7c5df;box-shadow:0 3px 9px #55678d20} #bossMon .bsay::after{border-bottom-color:#c7c5df} #bossMon.hit .bm{filter:drop-shadow(0 0 9px #a2cbbfa6)} #bossMon.atk .bm{filter:drop-shadow(0 0 10px #e7ba79a6)} #bossIn,#bossIntro,#bossChest{--visual-accent:#d6be83} #bossChest .chSvg,.crownFall svg{filter:drop-shadow(0 4px 4px #72738b24)} #comboGlow{box-shadow:inset 0 0 0 3px #dfba7880} #comboGlow.g4{box-shadow:inset 0 0 0 4px #a99bc987} #comboGlow.g5{box-shadow:inset 0 0 0 5px #e4c378a6} #scr-game .hbTxt,#scr-game .groundText{background:#fffffff2;color:#4f7f8e;box-shadow:0 3px 10px #447f981c} #scr-game .groundText{color:#b56c63} #gardenHero .rfCan{filter:drop-shadow(0 2px 2px #548e9d20)} #gardenHero .rfDrop{filter:drop-shadow(0 1px 2px #73bedb3d)} #gardenPots .pourDrop{font-size:0!important} #gardenPots .pourDrop::before{content:'';display:block;width:12px;height:16px;background:radial-gradient(circle at 35% 30%,#e6faff 0 12%,#8fd7e8 28%,#53a5c4 90%);border-radius:70% 35% 65% 50%;transform:rotate(30deg)} #gardenPots .pot.bounce{box-shadow:inset 0 0 0 1px #a9d5bd,0 0 16px #a0d4b957!important} #gardenHero .homeBub{background:#fffdf4;color:#648b75;border-color:#e1e5cc;box-shadow:0 3px 12px #5b856d24} .crownFall svg stop:first-child{stop-color:#fff0b8}.crownFall svg stop:last-child{stop-color:#e9bb63} #scr-game .kbK.bad{background:#f7e1dd;color:#ad655b;border-color:#dca69c} @media(prefers-reduced-motion:reduce){.fwCab{animation:none}} /* Today study: surfaces only; preserve layout, night background and marking states. */ #scr-study .sdGoalCard,#scr-study .sdConstCard{background:rgba(246,250,255,.11);border-color:rgba(221,235,255,.32);box-shadow:0 7px 18px #20284318} #scr-study .sdOpt:not(.sdOk):not(.sdNo):not(.sdDim){background:#f7fcff;color:#286789;box-shadow:0 3px 0 #b7cddd55;border-color:#d4e9f3} #scr-study .sdNextB:not(.sdOkB){background:linear-gradient(110deg,#49b1d8,#2899c0);color:white;border-color:#8cd1e8;box-shadow:0 3px 0 #21577944} #scr-study .sdStudyPrimary{box-shadow:0 4px 10px #193c6328} /* Reserve the established footer geometry; sharing remains on completion. */ #scr-study.sdOverview .sdOverviewFoot .bragStudyBtn{visibility:hidden} /* Stars and constellation completion occupy the existing study illustration only. */ #sdConstellationFinish{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#41446ff2,#79658bf5);border-radius:20px;pointer-events:none;overflow:hidden} .sdFinishArt{width:88%;max-width:320px;height:72%;max-height:300px;display:flex;align-items:center;justify-content:center;animation:sdFinishShine 3.8s both} .sdFinishArt svg{height:100%;overflow:visible}.sdFinishArt .sdStarPoint{opacity:0;animation:sdFinishStar .45s var(--starDelay) forwards} .sdFinishArt line{opacity:0;stroke-dasharray:80;stroke-dashoffset:80;animation:sdFinishLine 1s 1s forwards} .sdFinishName{color:#fff0b8;font-size:20px;font-weight:800;text-align:center;animation:sdFinishLabel 3.8s both} @keyframes sdFinishStar{to{opacity:1;filter:drop-shadow(0 0 1px #fff2bb)}} @keyframes sdFinishLine{to{opacity:1;stroke-dashoffset:0}} @keyframes sdFinishShine{0%,45%,100%{filter:none}65%{filter:drop-shadow(0 0 8px #fff0b9)}80%{filter:drop-shadow(0 0 2px #fff0b9)}} @keyframes sdFinishLabel{0%,52%{opacity:0;transform:translateY(5px)}65%,90%{opacity:1;transform:none}100%{opacity:0}} @media(prefers-reduced-motion:reduce){#sdConstellationFinish *{animation:none!important;opacity:1;stroke-dasharray:none}} /* Soft stellar light and dotted links, inside the original constellation geometry. */ .sdFinishArt .sdLinkDot{opacity:0;animation:sdFinishDots .35s var(--linkDelay) forwards} .sdFinishArt .sdStarPoint{animation-name:sdFinishSoftStar} .sdFinishArt{animation-name:sdFinishSoftShine} @keyframes sdFinishDots{to{opacity:var(--dotOpacity)}} @keyframes sdFinishSoftStar{to{opacity:var(--starOpacity,1)}} @keyframes sdFinishSoftShine{0%,45%,100%{filter:none}65%{filter:drop-shadow(0 0 3px #fff0b966)}80%{filter:drop-shadow(0 0 1px #fff0b933)}} @media(prefers-reduced-motion:reduce){#sdConstellationFinish .sdLinkDot{opacity:var(--dotOpacity)}} /* Completion floats directly on the existing night sky. */ #sdConstellationFinish{background:transparent;border-radius:0} #sdList.sdFinishing>:not(#sdConstellationFinish){visibility:hidden} /* One focal star; remaining stars stay faint through the completion animation. */ #scr-study .sdQuietStar{opacity:.26} @media(prefers-reduced-motion:reduce){#sdConstellationFinish .sdStarPoint{opacity:var(--starOpacity,1)}} /* Match garden safe-area gutters to its sky; keep the night study theme intact. */ #gardenHero .visualDay>ellipse{opacity:.15} /* Match game gutters to the game surface without changing weather or boss art. */ html:has(#scr-game.on),body:has(#scr-game.on){background:#d8f2fb!important} #sky .visualDay>ellipse{opacity:.15} /* Result surfaces share one visual language; geometry and behavior stay unchanged. */ #scr-result .rsTag,#scr-result .rbCur,#scr-result .rsChip{background:linear-gradient(#fff,#edf7fc)!important;border-color:#d0e5ef!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #407c9514!important;color:#497d97!important;text-shadow:none!important} #scr-result .rbNew{background:linear-gradient(#fff8e7,#f8edcc)!important;border-color:#eadab2!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #407c9514!important;color:#947436!important;text-shadow:none!important} #scr-result .rsChip .n,#scr-result .rsChip .s{color:#648b9f!important} #scr-result .rsChip .v,#scr-result .rsChip.w .v{color:#2c86ac!important} #scr-result .runBest{color:#608398!important} #scr-result .btn,#scr-result .nextGo{border-radius:14px!important;text-shadow:none!important;box-shadow:inset 0 1px 0 #ffffffb3,0 3px 8px #407c9517!important} #scr-result #btnAgain{background:linear-gradient(#4bb4d8,#2b93bc)!important;color:#fff!important;border-color:#349fc5!important} #scr-result #btnBrag,#scr-result #btnWater,#scr-result #resNext{background:linear-gradient(#f6fcff,#e3f3fa)!important;color:#347c9c!important;border-color:#cee5ef!important} #scr-result #btnChg,#scr-result #btnResHome{background:linear-gradient(#fff,#f5fbfe)!important;color:#567e93!important;border-color:#d4e7ef!important} #scr-result .adBtn{background:linear-gradient(#edf8fd,#d9eef8)!important;color:#397d9b!important;border-color:#cce3ed!important} #scr-result .wordlist{background:#fff!important;box-shadow:0 3px 8px #407c9514!important} /* Result accents follow the daily shower palette: cream, mint, soft blue. */ #scr-result #adWaterBtn{background:linear-gradient(#fff8e7,#fff0cf)!important;color:#92702d!important;border-color:#efdca7!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #7b9dad1a!important} #scr-result #btnWater{background:linear-gradient(#edf9f1,#dcf2e5)!important;color:#398260!important;border-color:#bcdfcd!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #7b9dad1a!important} #scr-result #btnBrag{background:linear-gradient(#edf8ff,#d9edf9)!important;color:#397c9f!important;border-color:#b9d9eb!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #7b9dad1a!important} /* Equal columns for the three result metrics. */ #scr-result .rsChips.n3 .rsChip{flex:1 1 0;min-width:0} /* Improve readability of the result footer without changing its layout. */ #scr-result #btnWater{color:#205c40!important;font-weight:700!important;border-color:#a9d3bd!important} #scr-result #btnBrag{color:#245d7c!important;font-weight:700!important;border-color:#9fc7df!important} #scr-result #btnChg,#scr-result #btnResHome{color:#315f77!important;font-weight:700!important;border-color:#bcd8e7!important} /* Inline optional reward, beside the existing study result sentence. */ #sdFoot .sdEndS:has(.sdStudyReward){display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap} #sdFoot .sdRewardText{min-width:0;overflow-wrap:anywhere} #sdFoot .sdStudyReward{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:27px;padding:5px 10px;border:1px solid #78c8e955;border-radius:18px;background:linear-gradient(#46b4dc,#2d93be);box-shadow:0 3px 8px #282b5730,inset 0 1px 0 #ffffff40;color:#fff;font-family:inherit;font-size:10.5px;font-weight:700;white-space:nowrap;cursor:pointer} #sdFoot .sdStudyReward:disabled{cursor:default;opacity:.75} #sdFoot .sdStudyReward.received{background:#ffffff1f;border-color:#d9eadd55;color:#e7ffed;box-shadow:none;opacity:1} /* Daily shower: one calm summary, one week row, aligned utility buttons. */ #rainSheet .rgTop{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px} #rainSheet .rgTop .rgChip{flex:1;min-width:0;padding:6px 8px;background:#eaf4fb;border:0;border-radius:999px;box-shadow:none;color:#2b6f96;font-size:12px;font-weight:700;text-align:center} #rainSheet .rgTop .rgChip.fire{background:#fff1d6;border:0;padding-inline-start:8px;color:#a87922;border-radius:999px} #rainSheet .umbBtn,#rainSheet .umbChip{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:96px;min-width:96px;height:32px;min-height:32px;padding:4px 7px!important;box-sizing:border-box;font-size:11px;line-height:1.2;text-align:center;border-radius:13px!important;margin:0;flex:none} #rainSheet .rainGiftSummary{font-size:11px;line-height:1.5;white-space:nowrap} @media(max-width:359px){#rainSheet .rainGiftSummary{font-size:10px}} #rainSheet .rainGiftHead{padding-inline:10px} #rainSheet .rainFooterActions{display:grid;gap:8px;margin-top:12px} #rainSheet .rainFooterActions>.btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:44px;min-height:44px;margin:0!important;padding:6px 10px!important;line-height:1.35} @media(max-width:359px){#rainSheet .rgGot{font-size:10.5px;padding-inline:6px}} #rainSheet .wkrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center;gap:0;width:100%} #rainSheet .wkrow .wk{width:clamp(24px,7vw,30px);height:clamp(24px,7vw,30px)} #rainSheet .umbRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:5px 8px} #rainSheet .umbRow>div{display:contents} #rainSheet .umbRow .umbTt{grid-column:1;grid-row:1;min-width:0;overflow-wrap:anywhere} #rainSheet .umbRow .umbBtn{grid-column:2;grid-row:1;min-width:0;width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;line-height:1.5;text-align:center} #rainSheet .umbRow .rgS{grid-column:1 / -1;grid-row:2;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:10.5px;line-height:1.5} @media(max-width:359px){#rainSheet .umbRow .rgS{font-size:10px}} #rainSheet:not([data-locale="ko"]) .umbRow .rgS{white-space:normal} /* Give the daily shower dialog breathing room and larger weekday targets. */ #rainSheet .lsCard{box-sizing:border-box;display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 32px);padding:26px 16px 20px} #rainSheet .lsCard>*{flex-shrink:0} #rainSheet .rgTop{margin:12px 0 10px} #rainSheet .wkrow{margin:4px 0 8px} #rainSheet .wkrow .wk{width:calc(100% - 4px);max-width:40px;height:auto;aspect-ratio:1;box-sizing:border-box;font-size:11.5px} #rainSheet .wkrow .wk svg{width:22px;height:22px} #rainSheet .umbRow{margin-top:8px;padding:10px} #rainSheet .rainGiftHead{margin-top:16px!important;margin-bottom:8px} #rainSheet .rgLad{margin-top:6px;margin-bottom:4px} #rainSheet .rainFooterActions{margin-top:auto;padding-top:16px} @media(max-height:700px){#rainSheet .lsCard{padding:16px;min-height:0}#rainSheet .rgTop{margin:9px 0 8px}#rainSheet .rainGiftHead{margin-top:12px!important}#rainSheet .rainFooterActions{padding-top:10px}} /* Keep attendance sharing close to the gifts and visible on the white dialog. */ #rainSheet .rainFooterActions{margin-top:8px;padding-top:0} #rainSheet .rainFooterActions .bragVisitBtn{background:linear-gradient(#e3f3fd,#cce8f8)!important;color:#285f80!important;border-color:#a8cfe6!important;box-shadow:inset 0 1px 0 #ffffffc2,0 3px 8px #467d991a!important;font-weight:700!important} /* Attendance sharing uses the same pearl-blue surface as Danbi dress-up. */ #rainSheet .rainFooterActions .bragVisitBtn{background:linear-gradient(#fff,#e4f0fa)!important;color:#2b6f96!important;border-color:#ffffffef!important;box-shadow:1.5px 1.5px 0 #96bed780,3px 4px 8px #1e5a8233!important;font-weight:700!important} /* Review cards: calm, legible surfaces; marking and spaced review rules are unchanged. */ #rcSheet .rcBack{background:#203f556b;backdrop-filter:blur(3px)} #rcSheet .rcCard{background:#fff;border:1px solid #dcebf3;border-radius:24px;box-shadow:0 16px 42px #1f53602e;max-height:calc(100dvh - 28px);overflow-y:auto} #rcSheet .rcTop b{color:#286b8d;font-weight:800} #rcSheet .rcTop>span{color:#6e8da1;font-variant-numeric:tabular-nums} #rcSheet .rcBar{background:#e6f1f7} #rcSheet .rcBar i{background:linear-gradient(90deg,#8cdbec,#39a7ce)} #rcSheet .rcFace{background:linear-gradient(145deg,#edf8ff,#f6fbfe);border:1px solid #e0eff7;border-radius:18px} #rcSheet .rcAsk{color:#67899d;font-size:14px;font-weight:700} #rcSheet .rcAns{color:#216b91;text-shadow:none} #rcSheet .rcTip{background:#fff7e4;border-color:#efdfae;color:#7a6940;box-shadow:none;border-radius:12px} #rcSheet .rcSpk{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#fff;color:#3c83a4;border:1px solid #cce7f2;box-shadow:0 2px 5px #437d9610;min-height:32px} #rcSheet .rcBtns button{border-radius:14px;text-shadow:none;font-family:inherit;box-shadow:inset 0 1px 0 #ffffffab,0 3px 8px #437d9617} #rcSheet .rcNo{background:linear-gradient(#fff0f0,#fbe2e4);color:#a95163;border-color:#eecbd1} #rcSheet .rcOk{background:linear-gradient(#e6f7ed,#d2eede);color:#317a58;border-color:#b7ddc9} #rcSheet .rcFlip,#rcSheet .rcGo{background:linear-gradient(#4db7da,#2b96c0);color:#fff;border-radius:14px;text-shadow:none;box-shadow:0 3px 8px #437d9624} #rcSheet .rcGo.rcPale{background:linear-gradient(#fff,#f2f9fd);color:#497c96;border-color:#d3e7f2} /* Word-song and mistake-song listening share the review card finish. */ #chantSheet .lsCard{background:linear-gradient(#fff,#f4faff);border:1px solid #dcebf3;box-shadow:0 16px 42px #1f53602e;border-radius:24px} #chantSheet .chantTop{color:#357b9b} #chantSheet .chantGen{background:#e8f5fc;color:#4d87a2;border-color:#cce4ef} #chantSheet .chantWord{color:#216b91;text-shadow:none} #chantSheet .chantSub,#chantSheet .chantCnt{color:#6c8da1} #chantSheet .chantStopB{background:linear-gradient(#e7f5fd,#d4edf9)!important;color:#2c6e8e!important;border-color:#b9dceb!important;border-radius:14px!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #437d9617!important;text-shadow:none!important;font-weight:700} /* Listening players follow the existing review card surface and hierarchy. */ #chantSheet .chantCard{padding:18px 16px 16px;box-sizing:border-box;max-height:calc(100dvh - 32px);overflow-y:auto;background:#fff;border:1px solid #dcebf3;border-radius:24px;box-shadow:0 16px 42px #1f53602e} #chantSheet .chantTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font-family:inherit} #chantSheet .chantName{font-size:13px;font-weight:800;line-height:1.35;text-align:start;color:#286b8d} #chantSheet .chantCnt{flex:none;margin:0;font-size:12px;font-weight:700;color:#6e8da1;font-variant-numeric:tabular-nums} #chantSheet .chantProgressTrack{height:6px;border-radius:4px;overflow:hidden;background:#e6f1f7;margin:8px 0 14px} #chantSheet .chantProgressTrack i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8cdbec,#39a7ce);transition:width .25s ease} #chantSheet .chantFace{min-height:160px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:linear-gradient(145deg,#edf8ff,#f6fbfe);border:1px solid #e0eff7;border-radius:18px} #chantSheet .chantGen{font-family:inherit;font-size:10.5px;font-weight:700;line-height:1.35;padding:4px 9px;background:#fff;border:1px solid #d9eaf3;color:#6c8a9d;max-width:100%;overflow-wrap:anywhere} #chantSheet .chantWord{width:100%;font-family:inherit;font-size:27px;font-weight:500;line-height:1.3;min-height:0;color:#216b91;overflow-wrap:anywhere;text-shadow:none} #chantSheet .chantSub{margin:0;font-size:14px;font-weight:500;line-height:1.5;min-height:0;color:#67899d;overflow-wrap:anywhere} #chantSheet .chantSub:empty{display:none} #chantSheet .chantStopB{gap:7px;margin-top:12px!important;background:linear-gradient(#e7f5fd,#d4edf9)!important;color:#2c6e8e!important;border-color:#b9dceb!important;border-radius:14px!important;box-shadow:inset 0 1px 0 #fff,0 3px 8px #437d9617!important;text-shadow:none!important;font-weight:700} #chantSheet .chantStopB::before{content:'';display:block;width:8px;height:8px;border-radius:2px;background:currentColor;flex:none} #chantSheet .chantStopB:active{transform:translateY(1px);box-shadow:inset 0 1px 0 #fff,0 1px 4px #437d9617!important} @media(max-width:359px){#chantSheet .chantWord{font-size:24px}} /* Home daily learning: one mascot beside a consistently aligned content column. */ #dailyCard .dailyMain{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;margin-top:8px} #dailyCard .dailyDanbi{display:flex;align-items:center;justify-content:center;align-self:stretch} #dailyCard .dailyDanbi>svg{width:76px;height:auto;max-width:100%;overflow:visible} #dailyCard .dailyContent{min-width:0} #dailyCard .drow{margin:0 0 8px} #dailyCard .dsp{padding:8px 10px;font-size:12px;line-height:1.5} #dailyCard .wkrow{justify-content:space-between;gap:4px;margin:0 0 9px} #dailyCard .wk{flex:none;width:25px;height:25px} #dailyCard .bar{height:9px} #dailyCard .st{margin-top:6px;font-size:10.5px;line-height:1.5;overflow-wrap:anywhere} @media(max-width:360px){#dailyCard .dailyMain{grid-template-columns:64px minmax(0,1fr);gap:9px}#dailyCard .dailyDanbi>svg{width:64px}#dailyCard .wk{width:22px;height:22px}#dailyCard .dsp{padding:7px 8px;font-size:11.5px}} #dailyCard .dailyContent .st{white-space:nowrap;font-size:clamp(9px,2.6vw,10.5px);overflow-wrap:normal} /* Subtle daily card readability polish. */ #dailyCard .dsp{position:relative} #dailyCard .dsp::before{content:"";position:absolute;left:-6px;top:13px;width:11px;height:11px;background:#eaf7ff;transform:rotate(45deg);border-radius:2px} #dailyCard .dailyContent .st{font-size:clamp(9.5px,2.75vw,11px);color:#6c8da2} #dailyCard .st strong{font-weight:800;color:#286d92} #dailyCard .wk:not(.on):not(.today),#rainSheet .wk:not(.on):not(.today){color:#7299b1;background:#eaf4fb} #dailyCard .wk.miss,#rainSheet .wk.miss{opacity:.8} /* Clearly identify today without changing completed attendance marks. */ #dailyCard .wk.today,#rainSheet .wk.today{background:#268fc6;color:#fff;border:2px solid #268fc6;box-shadow:0 0 0 3px #dceffb;font-weight:800} /* Attendance dialog: natural content height and balanced section spacing. */ #rainSheet .rgTop{margin:14px 0 12px} #rainSheet .wkrow{margin:2px 0 12px} #rainSheet .rainGiftHead{margin-top:18px!important;margin-bottom:10px} #rainSheet .rainFooterActions{margin-top:12px;padding-top:0} .bdgRequirement{font-size:13px;line-height:1.65;color:#557e96;margin:12px 0 16px;word-break:keep-all} /* Study overview: extend the constellation to the shared bottom action. */ #scr-study.sdOverview #sdList{display:flex;flex-direction:column;padding-bottom:0} #scr-study.sdOverview .sdGoalCard{flex:none} #scr-study.sdOverview .sdConstCard{display:flex;flex-direction:column;flex:1 0 240px;min-height:240px;margin-top:16px} #scr-study.sdOverview .sdConstShape{flex:1;min-height:100px;height:auto} #scr-study.sdOverview .sdConstShape svg{width:min(80%,250px);height:100%;max-height:240px;min-height:100px} #scr-study.sdOverview .sdOverviewMascot{display:none} #scr-study .sdOverviewFoot{padding-top:16px} #scr-study .sdOverviewFoot>.sdResumeHint,#scr-study .sdOverviewFoot>.bragStudyBtn,#scr-study .sdOverviewFoot>.sdCollectionBack{display:none} /* Fit the expanded collection into five rows; shorter displays can still scroll. */ #scr-study.sdCollection #sdList{display:flex;flex-direction:column;padding-bottom:0} #scr-study.sdCollection .sdCollectionSummary{flex:none} #scr-study.sdCollection .sdGrid{flex:1;grid-template-rows:repeat(5,minmax(78px,1fr));gap:8px} #scr-study.sdCollection .sdCell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;aspect-ratio:auto;padding:5px 3px} #scr-study.sdCollection .sdCell svg{height:clamp(30px,5.5vh,48px);flex-shrink:1} /* Share the available collection height across all five rows. */ #scr-study.sdCollection #sdList{overflow:hidden} #scr-study.sdCollection .sdGrid{min-height:0;grid-template-rows:repeat(5,minmax(0,1fr));gap:6px} #scr-study.sdCollection .sdCell{overflow:hidden;padding:3px 2px;min-height:0} #scr-study.sdCollection .sdCell svg{height:0;min-height:0;flex:1 1 0;width:100%;max-height:none} #scr-study.sdCollection .sdCell .sdCn{flex:none;font-size:9px;line-height:1.2} #scr-study.sdCollection .sdCellState{flex:none;font-size:7px;line-height:1.2;margin-top:2px} #scr-study.sdCollection .sdCollectionSummary{padding:10px 14px;margin-bottom:10px} #scr-study .sdTip>span:first-child{flex:none} #scr-study .sdTip>span:last-child{flex:1;min-width:0} @media(max-height:700px){#scr-study.sdCollection .tagline{margin-bottom:10px}#scr-study.sdCollection .sdGrid{gap:4px}} /* Soft points of light, with no insect silhouette. */ #sdSky .sdFly{width:5px;height:5px;border-radius:50%;background:#fff6bd;pointer-events:none;box-shadow:0 0 4px #fff6c9,0 0 10px #ffe7a18c;animation:sdLightDrift 9s ease-in-out infinite} #sdSky .sdFly::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,#fff5b24d,transparent 72%);animation:sdLightPulse 4.5s ease-in-out infinite;animation-delay:var(--fly-glow-delay,0s)} #sdSky .sdFly::after{content:"";position:absolute;inset:1px;border-radius:50%;background:#fffce8;animation:sdLightPulse 4.5s ease-in-out infinite;animation-delay:var(--fly-glow-delay,0s)} @keyframes sdLightDrift{0%,100%{transform:translate(0,0);opacity:.6}35%{transform:translate(12px,-13px);opacity:1}70%{transform:translate(-7px,-6px);opacity:.75}} @keyframes sdLightPulse{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:.85;transform:scale(1.15)}} @media(prefers-reduced-motion:reduce){#sdSky .sdFly,#sdSky .sdFly::before,#sdSky .sdFly::after{animation:none}} /* Garden refinement: clear blue daytime, gentle depth and clean plant cards. */ #gardenHero{border-radius:22px;box-shadow:inset 0 0 0 1px #ffffffa6,0 8px 22px #477c9317!important} #gardenHero:has(>.visualLandscape[data-sky="day"]),#gardenHero:has(>.visualLandscape[data-sky="default"]){background:linear-gradient(165deg,#9bd8f4 0%,#c5eafa 55%,#e6f6fc 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="morning"]){background:linear-gradient(#b4dcf7,#e2f0f9 58%,#ffe8cf)!important} #gardenHero:has(>.visualLandscape[data-sky="sunset"]){background:linear-gradient(#e7c2d3,#ffdec2 58%,#f6ebdb)!important} #gardenHero:has(>.visualLandscape[data-sky="night"]){background:linear-gradient(#303d70,#6b6d9d 60%,#aaa1bc)!important} #gardenHero:has(>.visualLandscape[data-sky="aurora"]){background:linear-gradient(#152d4d,#245c70 60%,#6cb6ad)!important} #gardenHero .visualDay{opacity:.65} #gardenHero .deco>svg,#gardenHero .deco>span>svg{filter:drop-shadow(0 2px 1.5px #416b6126)} #gardenHero .dn{border:1px solid #fff1d68c;border-radius:13px;padding:6px 14px;box-shadow:inset 0 1px 0 #ffffff69,0 3px 0 #a9784333,0 6px 12px #6b78571c!important} #gardenTotal{border-radius:18px;padding:10px!important;border:1px solid #ffffffb3;background:#f7fcffbf!important;box-shadow:0 4px 14px #538da00c!important} #gardenTotal .shopBtn{border-radius:12px;box-shadow:0 2px 4px #3d819916!important;background:linear-gradient(#fff,#f5fbff)!important} #gardenPots{gap:10px} #gardenPots .pot{border-radius:18px;background:linear-gradient(155deg,#fff 45%,#f0faf4)!important;border:1px solid #d8ebe3!important;box-shadow:inset 0 1px 0 #fff,0 4px 10px #467a6412!important} #gardenPots .tierChip{filter:none;color:#507c66} #gardenPots .gauge{height:6px;border-radius:999px;background:#e5f1ec!important} #gardenPots .gauge i{background:linear-gradient(90deg,#91d5b5,#52ab91)!important;border-radius:999px} #gardenPots .pc{color:#428d78!important} #gardenPots .ps{color:#638f9b!important} /* Garden shop: consistent surfaces and readable owned/locked states. */ #shopSheet .lsBack{background:#173c5366;backdrop-filter:blur(3px)} #shopSheet .lsCard{width:min(370px,calc(100vw - 24px));height:min(86dvh,720px);max-height:calc(100dvh - 24px);padding:18px 16px 14px;background:linear-gradient(#fff,#f2faff);border:1px solid #ffffffd9;box-shadow:0 18px 48px #173c5340;box-sizing:border-box} #shopSheet .shopAwning{height:10px;min-height:10px;margin:-18px -16px 0;background:repeating-linear-gradient(90deg,#f5d78b 0 22px,#fff5dc 22px 44px)} #shopSheet .shopScallop{height:7px;min-height:7px;margin:0 -16px 14px;background:radial-gradient(circle at 11px 0,#f5d78b 7px,transparent 8px);background-size:22px 7px} #shopSheet .shopHead{font-size:21px;gap:7px;flex:none} #shopSheet .shopSeeds{padding:5px 10px;background:#fff1d2;color:#986117;font-size:12px} #shopSheet .shopTabs{gap:6px;margin:18px 0 12px;flex:none} #shopSheet .shopTab{min-height:38px;border:1px solid #d6e9f3;background:#f4faff;color:#4d7c98;font-size:12px;box-shadow:none} #shopSheet .shopTab.on{background:linear-gradient(135deg,#43b1d9,#268fc1);border-color:#2a9aca;color:white;box-shadow:0 3px 8px #2785ae22} #shopSheet .shopBody{scrollbar-width:thin;scrollbar-color:#bad9e8 transparent;padding:2px 5px 8px;margin:0 -5px} #shopSheet .shopGrid,#shopSheet .shopMus{gap:9px;align-content:start} #shopSheet .shopItem{padding:10px 5px 8px;border:1px solid #dcebf2;border-radius:16px;background:#fff;box-shadow:0 3px 8px #477e9510;gap:5px} #shopSheet .shopItem.owned{background:linear-gradient(#f5fcf7,#edf9f2);border-color:#cfe9d9} #shopSheet .shopItem .se{width:40px;height:40px;background:#edf7fb;border-radius:13px;filter:drop-shadow(0 2px 1px #59816d12)} #shopSheet .shopItem .nm{font-size:11.5px;text-align:center;line-height:1.4} #shopSheet .shopItem .cost{font-size:10px;background:#fff3d9;color:#96651e} #shopSheet .buyB,#shopSheet .ownB{min-height:27px;border-radius:10px;font-size:11px;width:100%} #shopSheet .buyB{background:#e5f3fc;color:#287ba5} #shopSheet .ownB{background:#ddf3e8;color:#338160} #shopSheet .shopSubs{gap:5px;margin:0 0 10px;background:#eaf3f8;border-radius:12px;padding:3px} #shopSheet .shopSub{min-height:30px;background:transparent;color:#64879b;border-radius:9px} #shopSheet .shopSub.on{background:#fff;color:#287da6;box-shadow:0 2px 5px #4a7e9614} #shopSheet .wrPreview{height:146px;box-sizing:border-box;border-radius:17px;border:1px solid #d5eaf2;box-shadow:inset 0 1px 0 #ffffff8c;margin:0 0 12px} #shopSheet .wrRow{gap:7px;padding:10px 0;border-top:1px solid #e0eef4} #shopSheet .wrSlot{width:30px;padding-top:8px;font-size:11px;color:#3c7798} #shopSheet .wrChips{flex:1;min-width:0;gap:7px 5px} #shopSheet .wrChip{height:auto;min-height:33px;padding:5px 8px;border:1px solid #d7e9f3;background:#fff;color:#47758e;font-size:11px;box-shadow:0 2px 4px #4a7e9609} #shopSheet .wrChip.lock{opacity:1;background:#f3f7fa;color:#718998;border-color:#e0e9ee} #shopSheet .wrChip.lock .ic{opacity:.65} #shopSheet .wrChip.on{background:linear-gradient(135deg,#46afd5,#288ec0);border-color:#2f9bc6;color:#fff;box-shadow:0 2px 6px #2a8bb526} #shopSheet .wrChip .c{background:#fff0d4;color:#9b681f} #shopSheet .wrChip .d{color:#718899;background:#e5edf3} #shopSheet .wrChip.on .d{background:#ffffff30;color:white} #shopSheet .wrDot{width:24px;height:24px;margin:3px} #shopSheet .musItem{min-height:82px;padding:8px 4px;border:1px solid #deebf2;background:#fff;box-shadow:0 3px 8px #477e9510;gap:5px} #shopSheet .musItem .mn{white-space:normal;text-align:center;line-height:1.35;font-size:11px} #shopSheet .musItem .ms{width:25px;height:25px;border-radius:9px} #shopSheet .musItem.cur{background:#eaf7ff;border:1px solid #65b8df;box-shadow:inset 0 0 0 1px #65b8df} #shopSheet .shopItem.sky{min-height:100px;justify-content:flex-end;border-color:#ffffffb3;box-shadow:inset 0 1px 0 #ffffff80,0 3px 8px #477e9517} #shopSheet .skyNm{font-size:11px;min-height:29px} #shopSheet .lsCard>.btn:last-child{margin-top:12px!important;min-height:42px;border:1px solid #dcecf4;background:#fff;color:#397b9c;border-radius:14px;box-shadow:0 3px 8px #4b809413} #shopSheet button:focus-visible{outline:3px solid #e7bb68;outline-offset:2px} @media(max-width:350px){#shopSheet .lsCard{padding-inline:12px}#shopSheet .shopGrid,#shopSheet .shopMus{gap:6px}#shopSheet .wrPreview{height:126px}#shopSheet .wrSlot{width:26px}#shopSheet .wrChip{font-size:10px;padding:5px 6px}} #shopSheet .wrSlot{width:40px;line-height:1.5;word-break:keep-all} #shopSheet .wrChip .way{white-space:normal;line-height:1.35} @media(max-width:350px){#shopSheet .wrSlot{width:38px;font-size:10px}} #shopSheet .shopBody{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto} /* Keep nighttime garden hills luminous rather than muddy. */ #gardenHero .visualLandscape[data-sky="night"] .visualTerrain{filter:brightness(.98) saturate(.95)} #gardenHero .visualLandscape[data-sky="aurora"] .visualTerrain{filter:brightness(1.08) saturate(1.12)} #gardenHero .visualLandscape[data-sky="night"] .visualTerrain>path:nth-child(1){fill:#91bfc1} #gardenHero .visualLandscape[data-sky="night"] .visualTerrain>path:nth-child(2){fill:#639eaa} #gardenHero .visualLandscape[data-sky="night"] .visualTerrain>path:nth-child(3){stroke:#c7e4e5;stroke-opacity:.55} #gardenHero .visualLandscape[data-sky="aurora"] .visualTerrain>path:nth-child(1){fill:#a2d8c3} #gardenHero .visualLandscape[data-sky="aurora"] .visualTerrain>path:nth-child(2){fill:#72bba7} #gardenHero .visualLandscape[data-sky="aurora"] .visualTerrain>path:nth-child(3){stroke:#d6f6dc;stroke-opacity:.65} .pplWrap .ppl{filter:drop-shadow(0 1.2px 1px #365f4930)} /* Background clouds drift gently while foreground decorations stay in place. */ #gardenHero .visualLandscape .visualDay>g>path{animation:gardenCloudDrift 42s ease-in-out infinite alternate;will-change:transform} #gardenHero .visualLandscape .visualDay>g>path:nth-child(2){animation-duration:57s;animation-delay:-19s;animation-direction:alternate-reverse} @keyframes gardenCloudDrift{from{transform:translateX(-26px)}to{transform:translateX(30px)}} @media(prefers-reduced-motion:reduce){#gardenHero .visualLandscape .visualDay>g>path{animation:none}} /* Shop inspection and previews share the existing purchase records. */ #shopSheet .shopWearSticky{position:sticky;top:-2px;z-index:5;background:linear-gradient(#f9fdff,#f4faff);padding:2px 0 5px;border-bottom:1px solid #e0edf5} #shopSheet .shopWearSticky .wrPreview{height:128px;margin-bottom:8px} #shopSheet .wrChip .d{white-space:normal;line-height:1.4} #shopSheet .wrChips .wrChip:has(.d){flex-wrap:wrap;border-radius:13px} #shopSheet .shopItem.sky{position:relative;overflow:hidden;padding-top:70px} #shopSheet .shopSkyArt{position:absolute;left:0;top:0;width:100%;height:80px} #shopSheet .shopItem.sky .cost,#shopSheet .skyNm{position:relative;z-index:1} #shopSheet .skyNm.on{background:#2b95c5;color:white} #shopSheet .shopItem.sky.owned::after{background:#2b95c5} #shopSheet .shopMusicCard{display:flex;flex-direction:column;min-width:0;border:1px solid #dcebf2;border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 3px 8px #477e9510} #shopSheet .shopMusicCard .musItem{border:0;box-shadow:none;border-radius:13px 13px 0 0;width:100%;flex:1} #shopSheet .shopMusicCard:has(.cur){border-color:#65b8df;background:#edf8ff} #shopSheet .shopPreviewListen{border:0;border-top:1px solid #e2eff6;background:#f5fbff;color:#327da2;font:700 10px inherit;font-family:inherit;font-size:10px;padding:7px 2px;cursor:pointer} #shopSheet .shopPreviewListen.playing{background:#dff2fc;color:#237499} #shopSheet .shopMusicCard .ms{font-size:16px;background:none;width:26px;height:26px} #shopInspect{z-index:100} .shopInspectCard{text-align:center;max-width:330px} .shopInspectArt{display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(#b5e4f5,#e8f8ff);border-radius:18px;margin:14px 0} .shopInspectCard p{font-size:13px;color:#66879b} @media(max-height:650px){#shopSheet .shopWearSticky .wrPreview{height:96px}} /* Clouds traverse the whole garden, rather than hovering in one area. */ #gardenHero .visualLandscape .visualDay>g>path{animation:gardenCloudPass 48s linear infinite;animation-delay:-16s} #gardenHero .visualLandscape .visualDay>g>path:nth-child(2){animation:gardenCloudPass 63s linear infinite;animation-delay:-43s} @keyframes gardenCloudPass{from{transform:translateX(-360px)}to{transform:translateX(360px)}} @media(prefers-reduced-motion:reduce){#gardenHero .visualLandscape .visualDay>g>path{animation:none}} /* Night garden: layered indigo sky, subtle moonlight and sparse stars. */ #gardenHero:has(>.visualLandscape[data-sky="night"]){background:radial-gradient(ellipse at 88% 10%,#a7bce83b,transparent 32%),linear-gradient(175deg,#293764 0%,#4d578c 46%,#8489b0 78%,#b0bdcf 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="night"]) .skyFx.night{background:none!important} #gardenHero .gardenNightAtmosphere{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit} #gardenHero .gardenMoonHalo{position:absolute;right:-7%;top:-16%;width:40%;aspect-ratio:1;background:radial-gradient(circle,#e5ebff24,transparent 68%);border-radius:50%} #gardenHero .gardenFineStar{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#eff5ff;box-shadow:0 0 4px #e6edff80;animation:gardenNightTwinkle 5s ease-in-out infinite} #gardenHero:has(>.visualLandscape[data-sky="night"]) .visualTerrain>path:nth-child(1){fill:#9fbfc9} #gardenHero:has(>.visualLandscape[data-sky="night"]) .visualTerrain>path:nth-child(2){fill:#72a4b4} @keyframes gardenNightTwinkle{0%,100%{opacity:.3}50%{opacity:.8}} @media(prefers-reduced-motion:reduce){#gardenHero .gardenFineStar{animation:none;opacity:.6}} /* Match the actual sky overlay to its refined background, avoiding old color bands. */ #gardenHero:has(>.visualLandscape[data-sky="night"])>.gAurora,#gardenHero:has(>.visualLandscape[data-sky="morning"])>.gAurora,#gardenHero:has(>.visualLandscape[data-sky="sunset"])>.gAurora{background:inherit!important} #gardenHero:has(>.visualLandscape[data-sky="morning"]){background:radial-gradient(ellipse at 92% 9%,#fff5c66b,transparent 38%),linear-gradient(175deg,#a4d8f3 0%,#c9e9f8 54%,#edf2ed 79%,#ffe8d2 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="sunset"]){background:radial-gradient(ellipse at 91% 10%,#ffe6a69c,transparent 36%),linear-gradient(175deg,#eea094 0%,#ffc19e 35%,#f6cfbc 60%,#d6c9d9 83%,#b8cfdf 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="sunset"]) .visualDay{opacity:.4} #gardenHero:has(>.visualLandscape[data-sky="sunset"]) .visualTerrain>path:nth-child(1){fill:#b5cfb9} #gardenHero:has(>.visualLandscape[data-sky="sunset"]) .visualTerrain>path:nth-child(2){fill:#81b39e} /* Rainbow stays clearly visible, with a slow, restrained shimmer. */ .gHero .rbw path{animation:gardenRainbowGlow 14s ease-in-out infinite;stroke-opacity:1} .gHero .rbw path:nth-child(1){stroke:#f27b87;animation-delay:0s} .gHero .rbw path:nth-child(2){stroke:#f7ae55;animation-delay:-1.2s} .gHero .rbw path:nth-child(3){stroke:#f7d65b;animation-delay:-2.4s} .gHero .rbw path:nth-child(4){stroke:#75c98e;animation-delay:-3.6s} .gHero .rbw path:nth-child(5){stroke:#559fe6;animation-delay:-4.8s} @keyframes gardenRainbowGlow{0%,100%{opacity:.8}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.gHero .rbw path{animation:none;opacity:1}} /* Clouds stay behind the whole mascot, including its accessories. */ .gHero .dbIdle{position:relative;z-index:4} .gHero .gcl{z-index:1} #gardenHero .visualLandscape .visualDay>g>path{animation-duration:96s;animation-delay:-32s} #gardenHero .visualLandscape .visualDay>g>path:nth-child(2){animation-duration:126s;animation-delay:-86s} /* Preserve the original aurora sky; add only the requested twinkling stars. */ #gardenHero:has(>.visualLandscape[data-sky="aurora"]) .gardenMoonHalo{display:none} /* Aurora uses the exact same star renderer and animation as the night sky. */ #gardenHero:has(>.visualLandscape[data-sky="aurora"])>.skyFx.night{z-index:1;pointer-events:none} #gardenHero:has(>.visualLandscape[data-sky="aurora"])>.gAurora{background:radial-gradient(ellipse 70% 32% at 45% 46%,rgba(170,255,225,.55),transparent 70%),radial-gradient(ellipse 60% 26% at 70% 34%,rgba(255,190,230,.45),transparent 70%),linear-gradient(170deg,#4a60c4 0%,#6d6bd0 32%,#5bb6bd 58%,#8fd6ea 82%,#c9edff 100%)} /* A clearer violet night with soft moonlight, preserving the night-star effect. */ #gardenHero:has(>.visualLandscape[data-sky="night"]){background:radial-gradient(ellipse at 91% 9%,#fff3cc38 0%,#d8d9ff20 18%,transparent 42%),linear-gradient(170deg,#3e437e 0%,#6265a2 44%,#9691c0 76%,#bbc3dc 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="night"]) .visualTerrain>path:nth-child(1){fill:#adcbd2} #gardenHero:has(>.visualLandscape[data-sky="night"]) .visualTerrain>path:nth-child(2){fill:#7fb2bd} /* Morning: cool daylight and light mist, with restrained yellow rays. */ #gardenHero:has(>.visualLandscape[data-sky="morning"]){background:radial-gradient(ellipse at 92% 9%,#fff9e629,transparent 32%),linear-gradient(175deg,#a4daf3 0%,#c6eaf6 52%,#e6f4f4 79%,#f2f3e9 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .skyFx .ray{background:linear-gradient(to bottom,#fff8dc36,#fffdf00a 70%,transparent);filter:blur(9px)} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .visualDay>ellipse{opacity:.22} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .skyFx .mist{top:68%;height:12%;opacity:.6} /* Sunset: a warm focal glow and a rose horizon, rather than a uniform orange wash. */ #gardenHero:has(>.visualLandscape[data-sky="sunset"]){background:radial-gradient(ellipse at 92% 13%,#ffe0a8a6,transparent 35%),linear-gradient(173deg,#ed8c97 0%,#f8b293 32%,#f8c3aa 53%,#dda8bc 77%,#b7b1d2 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="sunset"]) .skyFx .glow{background:radial-gradient(ellipse at 91% 14%,#ffd8a34d,transparent 39%),linear-gradient(transparent 48%,#e2a3bd24 77%,transparent);animation-duration:14s} #gardenHero:has(>.visualLandscape[data-sky="sunset"]) .visualDay{opacity:.25} /* Word game finish: crisp foreground and quiet scenery, with no gameplay changes. */ #sky[data-vweather="clear"]:not(.designBoss){background:linear-gradient(#a5d8ec,#d1edf6 55%,#f0fafb)!important;box-shadow:inset 0 0 0 1px #ffffffb3,0 5px 16px #3e859916!important;border-radius:22px} #sky .visualDay>g{opacity:.62} #sky .cl{opacity:.55} #sky .visualTerrain{filter:saturate(.95)} #gameTop .hgrp{border:1px solid #e2f1f7;box-shadow:0 2px 8px #3b809610!important;color:#2b7699} #gameTop button{border:1px solid #d8edf5} #hudDots .lvbar{box-shadow:inset 0 1px 2px #31718915} #hudDots .lvbar i{background:linear-gradient(90deg,#58c0dc,#2a96bd)!important} #typeLabel{background:#fffffff0!important;border:1px solid #d3e9f2;color:#396d88!important;box-shadow:0 2px 7px #3f789413!important} #sky .wordcard:not(.gold):not(.rocket):not(.ice):not(.umb):not(.quiz):not(.bonus):not(.ansOn):not(.k1):not(.k2):not(.k3):not(.k4):not(.k5){background:linear-gradient(145deg,#fff,#f0faff)!important;border:1.5px solid #a8d6e9!important;color:#216587!important;box-shadow:0 3px 0 #8dc3d63b,0 6px 12px #3b80951c!important} #sky .wordcard{border-radius:15px} #sky .wordcard .main{font-weight:800;text-shadow:none;line-height:1.35} #sky .wordcard.gold{background:linear-gradient(140deg,#fffbea,#ffeab7);border-color:#d6ad4f;color:#7e6020;box-shadow:0 3px 0 #d8b97455,0 6px 14px #c5a45b2b} #sky .wordcard.rocket{background:linear-gradient(140deg,#fff7f0,#ffe2d5);border-color:#e49b7c;color:#a25239;box-shadow:0 3px 0 #d59b8055,0 6px 14px #bd74592b} #sky .wordcard.ice{background:linear-gradient(140deg,#f5feff,#def3ff);border-color:#71bedc;color:#26799b;box-shadow:0 3px 0 #86b8d055,0 6px 14px #4d9db72b} #sky .wordcard.umb{background:linear-gradient(140deg,#f4fff8,#dff5e9);border-color:#73b99b;color:#287d59;box-shadow:0 3px 0 #88baa055,0 6px 14px #4e96712b} #sky .wordcard.quiz{background:linear-gradient(140deg,#fcf7ff,#eee1fb);border-color:#b095d3;color:#725092;box-shadow:0 3px 0 #b49ac655,0 6px 14px #8b6aa62b} #sky .wordcard .deco{filter:drop-shadow(0 2px 2px #39647e22);opacity:1} #scr-game .choice:not(.right):not(.wrongPick):not(.bad){background:linear-gradient(#fff,#f4fbff)!important;border:1.5px solid #c2dfed!important;color:#2b6682!important;box-shadow:0 3px 0 #9fc4d336,0 5px 10px #3f7f9410!important} #scr-game .choice{border-radius:16px;line-height:1.4;font-weight:700} #scr-game .choice:focus-visible{outline:3px solid #e1b868;outline-offset:2px} #scr-game .choice.right{background:linear-gradient(#effbf3,#d9f3e4)!important;border-color:#63b58e!important;color:#287953!important} #scr-game .choice.wrongPick{background:linear-gradient(#fff4f2,#f8e0de)!important;border-color:#d9918b!important;color:#aa534c!important} #scr-game #typeIn{background:#fffffff2;border:1.5px solid #bbddea;border-radius:15px;box-shadow:inset 0 1px 3px #4e859412} #scr-game #arrangeBuilt{background:#f8fdff;border:1.5px solid #c9e2ee;border-radius:14px;min-height:42px} #scr-game #arrangeBtns button{border:1px solid #c5e1ed;border-radius:11px;color:#347492} #sky.designBoss{background:radial-gradient(ellipse at 50% 16%,#d9d8f873,transparent 48%),linear-gradient(#818fbc,#b6c1df 52%,#e3eaf6)!important} #bossMon .bossSvg{filter:drop-shadow(0 8px 5px #485d8b2b)!important} #bossMon .hpb{background:#f8faffeb!important;border:1px solid #d6e1f2;box-shadow:0 3px 8px #4c649320!important} #bossMon .hpb i.on{background:linear-gradient(#ffc1cc,#e88ea6)!important;border-color:#f7d8e2!important} #bossMon .bsay{background:#fff;color:#68739b;border:1px solid #c9d4ed;box-shadow:0 3px 8px #5261871f} #bossIn .btx{color:#fff4d5;text-shadow:0 2px 5px #37446b66} #sky .bub{background:#fffffff5;color:#386b86;border:1px solid #d5e9f3;box-shadow:0 2px 6px #46768a1f;max-width:min(200px,calc(100vw - 52px));white-space:normal;line-height:1.45;overflow-wrap:anywhere} #scene .bub.onWalker{top:auto;bottom:calc(100% + 7px);font-size:11px;min-width:64px;width:max-content} .pvCard{background:linear-gradient(#fff,#f2faff);border:1px solid #dbeef6;box-shadow:0 15px 35px #315d7730;border-radius:23px} #scr-result .resRow{border-color:#e1eef5} @media(prefers-reduced-motion:reduce){#sky .wordcard .deco,#bossMon .bossSvg,#sky .dglow{animation:none!important}} /* Match guests' gait to their action-specific travel speed. */ #scene .guest .gwalking .gl1,#scene .guest .gwalking .gl2,#scene .guest .gwalking .ga1,#scene .guest .gwalking .ga2{animation-duration:var(--guest-step,.65s)} #scene .guest[data-guest="kitefam"] .gKite{bottom:16px} #sky[data-vweather="cloud"]:not(.designBoss){background:linear-gradient(#94afcb,#cadbe9 55%,#e7f2f6)!important} #sky[data-vweather="rain"]:not(.designBoss){background:linear-gradient(#8daec7,#c3dce9 58%,#e2f1f6)!important} #sky .cl svg{filter:drop-shadow(0 2px 2px #557c9614)} #bossIn .bDark{background:radial-gradient(ellipse at 50% 25%,#aebbe62b,transparent 58%),linear-gradient(#2e426f8c,#6f85b64d 58%,#cbdaf00d)} #bossIn .bcs svg{filter:drop-shadow(0 6px 5px #26385d42)} #bossIn .bFlash{background:radial-gradient(ellipse at 50% 22%,#fff8d296,transparent 66%)} #bossIn .cz{filter:drop-shadow(0 0 5px #fff4b78c)} #bossIn .btx{background:#ffffffed;color:#465d8b!important;padding:10px 18px;border:1px solid #d6dff6;border-radius:16px;text-shadow:none!important;box-shadow:0 5px 18px #30446b26} #bossMon::before{content:"";position:absolute;inset:0 -12%;border-radius:50%;background:radial-gradient(ellipse,#eff3ff4d,transparent 68%);z-index:-1;pointer-events:none} #bossMon.hit .bossSvg{filter:drop-shadow(0 0 9px #b6ead3)!important} #bossMon.atk .bossSvg{filter:drop-shadow(0 0 9px #f2c99a)!important} @media(prefers-reduced-motion:reduce){#bossIn .bFlash{display:none}#sky.shake{animation:none!important}} #scene .pushing .ga2{display:none}#scene .pushing .ga1{animation-duration:1s} /* Distinct weather identities: bright overcast versus cool rainy blue. */ #sky[data-vweather="cloud"]:not(.designBoss){background:linear-gradient(#abb5ce,#d6dce9 50%,#edf1f7)!important} #sky[data-vweather="cloud"] #skyDim{background:linear-gradient(#8e9ab82b,#e5e8f113 65%,transparent)} #sky[data-vweather="cloud"] .cl{opacity:.82} #sky[data-vweather="cloud"] .visualDay{opacity:.16} #sky[data-vweather="rain"]:not(.designBoss){background:linear-gradient(#749bb8,#a7c7d9 55%,#d6e9f0)!important} #sky[data-vweather="rain"] #skyDim{background:linear-gradient(#1d52774d,#3e789529)} #sky[data-vweather="rain"] .cl{opacity:.5} #sky[data-vweather="rain"] .visualDay{opacity:.08} #sky[data-vweather="rain"] #rainFall{filter:drop-shadow(0 0 .5px #e9fbff)} /* 묶음 반투명 .85 는 빗줄기마다 곱해 넣었다(index.html buildRain) — 묶음에 걸면 폰이 한 번 더 합쳐 비 날씨가 끊겼다 (2026-10-23) */ /* Clouds use their own aspect ratio so a tall game field cannot stretch them. */ #sky .visualLandscape .visualDay>g{display:none} #sky .gameBackdropCloud{position:absolute;left:0;line-height:0;pointer-events:none;z-index:0;opacity:.3;animation:gameBackdropDrift linear infinite;will-change:transform} #sky .gameBackdropCloud svg{display:block;overflow:visible} #sky[data-vweather="cloud"] .gameBackdropCloud{opacity:.42} #sky[data-vweather="rain"] .gameBackdropCloud{opacity:.25} @keyframes gameBackdropDrift{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}} @media(prefers-reduced-motion:reduce){#sky .gameBackdropCloud{animation:none}} /* Keep level-clear captions and inline reward icons together and centered. */ #lvCard .lcBox{text-align:center;background:linear-gradient(#fff,#f3fbff);border:1px solid #d7eaf3;box-shadow:0 12px 30px #2b5c7733;border-radius:24px} #lvCard .lcBub{justify-content:center;gap:5px;flex-wrap:wrap;text-align:center;line-height:1.5;color:#328bb5} #lvCard .lcBub svg{margin:0!important;display:inline-block;vertical-align:middle} #lvCard .lcS,#lvCard .lcN,#lvCard .lcTap{text-align:center;line-height:1.5} #lvCard .lcS svg,#lvCard .lcN svg{display:inline-block;margin:0 2px!important;vertical-align:middle} #lvCard .lcBub .gico,#lvCard .lcBub .ico{margin:0!important;flex:none} /* Breezy weather: sparse air currents behind readable word cards. */ #sky[data-vweather="wind"]{background:linear-gradient(165deg,#87cbe6 0%,#c4eaf1 58%,#e7f5f1 100%)} #sky .gameWindTrails{display:none;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} #sky[data-vweather="wind"] .gameWindTrails{display:block} #sky .gameWindTrails svg{position:absolute;left:0;width:125px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;opacity:0;animation:gameGust 7s linear var(--gust-delay) infinite} @keyframes gameGust{0%{transform:translateX(-140px);opacity:0}15%,65%{opacity:.55}90%,100%{transform:translateX(calc(100vw + 50px));opacity:0}} #sky[data-vweather="wind"] .gameBackdropCloud{opacity:.4} #sky[data-vweather="wind"] .cl{animation-duration:18s!important} #sky[data-vweather="wind"] #skyOrb{filter:drop-shadow(0 2px 3px #4883a24a)} #sky .orbWind{width:39px;height:35px} #sky .orbWind path{stroke-linecap:round} #sky:has(.wordcard) .gameWindTrails{animation-play-state:inherit} @media(prefers-reduced-motion:reduce){#sky .gameWindTrails svg{animation:none}} #lvCard .lcBub{display:block;text-align:center} #lvCard .lcPraise{display:inline;line-height:1.6} #lvCard .lcPraise svg{display:inline-block!important;vertical-align:-2px;margin:0 0 0 4px!important;width:16px;height:16px} /* Layered storm arrival, clear silhouette during the encounter. */ #bossIn .bcs{filter:drop-shadow(0 8px 10px #26395a55);opacity:.94} #bossIn .bcs.s1{animation:stormGatherLeft 1.6s cubic-bezier(.2,.65,.3,1) both} #bossIn .bcs.s2{animation:stormGatherRight 1.6s cubic-bezier(.2,.65,.3,1) both} #bossIn .bcs.s3{animation:stormGatherCenter 1.6s cubic-bezier(.2,.65,.3,1) both} @keyframes stormGatherLeft{0%{transform:translate(-110%,-50px);opacity:0}35%,65%{transform:translate(0,12px);opacity:.95}100%{transform:translate(-70%,-30px);opacity:0}} @keyframes stormGatherRight{0%{transform:translate(100%,-70px);opacity:0}40%,65%{transform:translate(0,5px);opacity:.9}100%{transform:translate(80%,-40px);opacity:0}} @keyframes stormGatherCenter{0%{transform:translateY(-130px) scale(.85);opacity:0}45%,65%{transform:translateY(12px) scale(1.06);opacity:.95}100%{transform:translateY(-90px) scale(1.15);opacity:0}} #sky.designBoss .bossSvg{filter:drop-shadow(0 8px 7px #314c7e40)} #sky.designBoss #skyDim{opacity:.3!important} #scene .levelFlower,#scene .levelTree{filter:drop-shadow(0 2px 1px #2d695920)} #scene .bub svg{display:inline-block;vertical-align:-2px;margin-left:3px;width:13px;height:13px} #scene .grew{animation:levelGardenGrow .9s cubic-bezier(.2,.8,.3,1) both;transform-origin:50% 100%} @keyframes levelGardenGrow{0%{opacity:0;transform:translateY(7px) scale(.45)}65%{opacity:1;transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#scene .grew{animation:none}} /* Visitor motion stays on SVG parts; travel and direction belong to .guest. */ #scene .vgArt{position:relative;filter:drop-shadow(0 2px 1px #426b6720)} #scene .vgArt>svg{display:block;overflow:visible} #scene .vgLeg{transform-box:fill-box;transform-origin:50% 0;animation:vgStride var(--guest-step,.75s) ease-in-out infinite alternate} #scene .vgLeg.b{animation-direction:alternate-reverse} #scene .vgArm:not(.push):not(.hold):not(.photo){transform-box:fill-box;transform-origin:50% 0;animation:vgStride var(--guest-step,.75s) ease-in-out infinite alternate-reverse} #scene .vgArm.back{animation-direction:alternate} #scene .gwave .vgLeg,#scene .gwave .vgArm{animation:none} #scene .gwave .vgArm.front{transform:rotate(-105deg);animation:vgWave .6s ease-in-out infinite alternate} #scene .vgTail{transform-box:fill-box;transform-origin:90% 90%;animation:vgTail .7s ease-in-out infinite alternate} #scene .vgPaw{transform-box:fill-box;transform-origin:50% 0;animation:vgStride .5s ease-in-out infinite alternate} #scene .vgPaw.b{animation-direction:alternate-reverse} #scene .vg-dogrun .vgLeg,#scene .vg-dogrun .vgPaw{animation-duration:.35s} #scene .vgWheel{animation:vgWheel 1.1s linear infinite;transform-box:view-box} #scene .vg-kite .vgArm.front,#scene .vg-kitefam .vgArm.front{animation:none} #scene .vgKite{transform-box:fill-box;transform-origin:50% 100%;animation:vgKite 4.5s ease-in-out infinite alternate} #scene .vgFloat{animation:vgFloat 5s ease-in-out infinite alternate} #scene .vgGlide{animation:vgFloat 3s ease-in-out infinite alternate} #scene .vgBird{transform-box:fill-box;transform-origin:50% 60%;animation:vgBird .65s ease-in-out infinite alternate} #scene .vgButterfly{transform-box:fill-box;transform-origin:center;animation:vgFlutter .45s ease-in-out infinite alternate} #scene .vgBall{animation:vgBall .9s ease-in-out infinite alternate} #scene .vg-jump>svg{animation:vgHop 1.3s ease-in-out infinite} #scene .vgBubble{animation:vgBubble 3s ease-in-out infinite} #scene .vg-stroller .vgLeg{animation-duration:.9s} #scene .bub{max-width:min(210px,calc(100vw - 54px));white-space:normal;text-align:center;line-height:1.4;overflow-wrap:anywhere} @keyframes vgStride{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}} @keyframes vgWave{from{transform:rotate(-105deg)}to{transform:rotate(-130deg)}} @keyframes vgTail{from{transform:rotate(-10deg)}to{transform:rotate(13deg)}} @keyframes vgWheel{to{transform:rotate(360deg)}} @keyframes vgKite{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}} @keyframes vgFloat{from{transform:translateY(-2px)}to{transform:translateY(3px)}} @keyframes vgBird{from{transform:scaleY(.65)}to{transform:scaleY(1)}} @keyframes vgFlutter{from{transform:scaleX(.5)}to{transform:scaleX(1)}} @keyframes vgBall{from{transform:translateY(-6px)}to{transform:translateY(0)}} @keyframes vgHop{0%,65%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} @keyframes vgBubble{0%{transform:translate(0,2px);opacity:.3}65%{opacity:.9}100%{transform:translate(5px,-7px);opacity:.2}} @media(prefers-reduced-motion:reduce){#scene .vgArt *{animation:none!important}} /* Speech matches the game's rounded white answer cards. */ #scene .bub{padding:5px 9px;border:1px solid #c7e5ef;border-radius:11px;background:#fffffff7;color:#326781;font-size:11px;font-weight:700;letter-spacing:0;box-shadow:0 3px 8px #426b7d20;isolation:isolate} #scene .bub::after{content:'';position:absolute;left:50%;bottom:-4px;width:6px;height:6px;background:#fff;border-right:1px solid #c7e5ef;border-bottom:1px solid #c7e5ef;transform:translateX(-50%) rotate(45deg);z-index:-1} #scene .bub{background:#fff;color:#245675;opacity:1;filter:none;backdrop-filter:none;animation:guestSpeechAppear .16s ease-out both} @keyframes guestSpeechAppear{from{transform:translateX(-50%) translateY(3px)}to{transform:translateX(-50%) translateY(0)}} /* Blue-grey overcast sky with a luminous lower horizon. */ #sky.designBoss{background:radial-gradient(ellipse at 70% 43%,#e8f3f66b,transparent 48%),linear-gradient(#6c8ba5 0%,#a7bdcc 40%,#d5e3e9 75%,#e8f1ed 100%)!important} #sky.designBoss #skyDim{background:linear-gradient(#39576d40,transparent 62%);opacity:.35!important} #sky.designBoss .visualDay{opacity:.12} #sky.designBoss .cl{opacity:.58;filter:drop-shadow(0 3px 2px #58799118)} #sky.designBoss .gameBackdropCloud{opacity:.28} #sky.designBoss #typeLabel{background:#f5fafced!important;color:#42657c!important} #sky.stormSky{background:linear-gradient(#58758f,#8eaabb 50%,#d2e3e8)!important} #bossIn{animation:none;background:transparent} #bossIn .stormFront{position:absolute;top:0;left:0;width:100%;height:42%;min-height:200px;overflow:visible;z-index:2;filter:drop-shadow(0 10px 14px #34526b30);animation:stormFrontArrival 1.6s cubic-bezier(.2,.65,.3,1) both} #bossIn .bDark{background:linear-gradient(#334f6c6b,transparent 65%)} #bossIn .btx{font-size:18px;padding:9px 17px;color:#3a5d76!important;border-color:#c3d7e3} #bossIn .stormThread{animation:stormThreadGlow 1.6s ease both} @keyframes stormFrontArrival{0%{transform:translateY(-100%);opacity:0}32%{transform:translateY(-3%);opacity:1}64%{transform:translateY(0);opacity:1}100%{transform:translateY(-30%);opacity:0}} @keyframes stormThreadGlow{0%,35%{opacity:0}43%{opacity:.85}58%,100%{opacity:0}} #skyOrb{width:38px;height:34px;display:flex;align-items:center;justify-content:center} #skyOrb .orbWind{width:38px;height:34px} #bossReward{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#375b7652;backdrop-filter:blur(2px);padding:20px} #bossReward .bossRewardCard{width:min(280px,100%);padding:25px 20px 20px;background:linear-gradient(#fffdf4,#f4fbff);border:1px solid #fff;border-radius:24px;text-align:center;box-shadow:0 12px 32px #263f6440;animation:rewardCardIn .35s ease-out both} #bossReward .bossRewardCard>svg{display:block;margin:0 auto;width:108px;height:96px;overflow:visible} #bossReward p{font-size:17px;line-height:1.6;font-weight:800;color:#35647c;margin:16px 0 20px;overflow-wrap:anywhere} #bossReward p svg{display:inline-block;vertical-align:middle} #bossReward button{width:100%;padding:12px;border:1px solid #78b8d3;border-radius:13px;background:linear-gradient(#9edbed,#70bfdc);color:#164d69;font:700 15px inherit;cursor:pointer} #bossReward button:disabled{opacity:.6;cursor:default} @keyframes rewardCardIn{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}} #sky[data-vweather="wind"] #faller:not(.pop):not(.crash):not(.zap){animation:sentenceWind 3.4s ease-in-out infinite alternate} @keyframes sentenceWind{from{translate:calc(var(--wind-shift,8px) * -1) 0}to{translate:var(--wind-shift,8px) 0}} @media(prefers-reduced-motion:reduce){#bossIn .stormFront,#bossIn .stormThread,#sky[data-vweather="wind"] #faller{animation:none!important}} #bossMon .hpb{position:relative;align-items:center;gap:4px;padding:5px 7px;background:#3d5973!important;border:1px solid #d9e8ee;box-shadow:0 2px 4px #28415830!important;filter:none!important;opacity:1!important} #bossMon .hpb i{width:18px;height:8px;background:#8295a5!important;border:1px solid #a7bac7;box-shadow:none!important} #bossMon .hpb i.on{background:linear-gradient(#f5959e,#db5e7c)!important;border-color:#ffd1d5;box-shadow:none!important} #bossMon .hpb .hpCount{font:700 11px/1.1 sans-serif;color:#fff;margin-left:3px;min-width:23px} #bossMon.behind{opacity:1} #bossMon.behind .bm{opacity:.42} #scene .pondFish{left:12px;bottom:7px;opacity:0;transform-origin:center;animation:pondFishLeap 6.5s linear infinite;filter:drop-shadow(0 1px 1px #5b879a30)} #scene .pondSplash{position:absolute;left:37px;bottom:8px;opacity:0;animation:pondLandingSplash 6.5s ease-out infinite} #scene .pondRip{left:34px;bottom:7px;width:16px;height:5px;border:1.5px solid #eafcfa;animation:pondLandingRipple 6.5s ease-out infinite} @keyframes pondFishLeap{0%,40%{opacity:0;transform:translate(0,3px) rotate(-30deg)}44%{opacity:1;transform:translate(2px,-6px) rotate(-28deg)}50%{opacity:1;transform:translate(9px,-23px) rotate(-8deg)}55%{opacity:1;transform:translate(17px,-26px) rotate(10deg)}61%{opacity:1;transform:translate(25px,-12px) rotate(32deg)}66%{opacity:0;transform:translate(30px,4px) rotate(40deg)}100%{opacity:0;transform:translate(30px,4px)}} @keyframes pondLandingSplash{0%,63%{opacity:0;transform:translateY(3px) scale(.4)}67%{opacity:1;transform:translateY(-4px) scale(1)}74%,100%{opacity:0;transform:translateY(2px) scale(1.2)}} @keyframes pondLandingRipple{0%,64%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(.8)}82%,100%{opacity:0;transform:scale(2.1)}} @media(prefers-reduced-motion:reduce){#scene .pondFish,#scene .pondSplash,#scene .pondRip{animation:none;opacity:0}} #sky.victorySky{background:radial-gradient(ellipse at 50% 26%,#fff8d8aa,transparent 60%),linear-gradient(#a3d4e8,#d9f0ef 65%,#edf7e8)!important} #sky.victorySky #skyClouds,#sky.victorySky #skyDim,#sky.victorySky #rainFall{display:none!important} .victoryScene{position:absolute;inset:0;z-index:9;display:grid;place-items:center;overflow:hidden;padding:22px 20px 70px} .victoryCard{position:relative;width:min(300px,100%);box-sizing:border-box;padding:22px 18px 18px;border:1px solid #fff;border-radius:26px;background:linear-gradient(#fffdf4ed,#f7fcfff5);box-shadow:0 10px 30px #56858d2b;text-align:center;animation:victoryCardIn .75s cubic-bezier(.2,.8,.3,1) both} .victoryCard h2{font-size:20px;line-height:1.5;color:#957038;margin:5px 0 12px;overflow-wrap:anywhere} .victoryCrown{height:44px;filter:drop-shadow(0 3px 2px #bf9a4733)} .victoryCrown svg{margin:auto;display:block} .victoryMascot{display:flex;justify-content:center;filter:drop-shadow(0 5px 5px #799b8626)} .victoryPraise{font-size:15px;font-weight:700;line-height:1.6;color:#37718b;margin:12px 0 8px} .victoryPraise svg,.victoryCard h2 svg,.victoryCard p svg{display:inline-block;vertical-align:middle;margin:0 3px;width:17px;height:17px} .victoryCard p{font-size:13px;color:#648999;margin:6px 0 16px;line-height:1.5} .victoryCard button{width:100%;padding:11px;border:1px solid #a2cdd8;border-radius:13px;background:linear-gradient(#cce9ed,#a6d5df);color:#32667f;font-size:14px;font-weight:700;cursor:pointer} .victoryCard button:disabled{opacity:.65} .victoryRainbow{position:absolute;left:50%;top:9%;transform:translateX(-50%);opacity:.4;animation:rbIn 1.5s ease both;pointer-events:none} .victoryHalo{position:absolute;width:320px;height:320px;top:16%;border-radius:50%;background:radial-gradient(#fff8d7aa,transparent 70%);pointer-events:none} .victoryConfetti{position:absolute;top:-12px;width:5px;height:9px;border-radius:1px;pointer-events:none;animation:victoryConfetti 4.2s ease-in var(--delay) 2 both} #scene .victoryVisitor{position:absolute;transform:translateX(-50%) scale(.82);transform-origin:50% 100%} @keyframes victoryCardIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}} @keyframes victoryConfetti{0%{opacity:0;transform:translate(0,-15px) rotate(0)}10%{opacity:.85}85%{opacity:.8}100%{opacity:0;transform:translate(20px,75vh) rotate(var(--turn))}} @media(max-height:690px){.victoryScene{padding:12px 18px 45px}.victoryCard{padding:12px}.victoryMascot>svg{width:75px;height:105px}.victoryCard h2{font-size:17px;margin:2px 0}.victoryCrown{height:34px}.victoryCrown svg{height:34px}.victoryPraise{margin:4px 0}.victoryCard p{margin:4px 0 9px}} @media(prefers-reduced-motion:reduce){.victoryConfetti{display:none}.victoryCard,.victoryRainbow{animation:none}} #scr-result #btnBrag{background:linear-gradient(#4bb4d8,#2b93bc)!important;color:#fff!important;border-color:#349fc5!important;box-shadow:0 4px 10px #329cc52b!important} .victoryActions{display:flex;gap:8px;align-items:stretch}.victoryActions button{flex:1;min-width:0;width:auto;line-height:1.4;overflow-wrap:anywhere;font-size:13px}.victoryActions .victoryShare{background:linear-gradient(#4bb4d8,#2b93bc);color:#fff;border-color:#349fc5}.victoryActions .victoryContinue{background:#edf7fa;color:#32667f} #scene .bub{white-space:nowrap!important;overflow-wrap:normal;word-break:normal;width:max-content;min-width:0} /* Match the app's white/sky-blue cards and inherited UI typography. */ #bossReward .bossRewardCard{background:linear-gradient(#fff,#f0f9ff);border:1px solid #c9e7f3;border-radius:22px;box-shadow:0 9px 24px #3b73932b;font-family:inherit} #bossReward p{font-family:inherit;font-size:16px;color:#28789f;font-weight:800} #bossReward button{font-family:inherit;font-size:15px;font-weight:700;background:linear-gradient(#4bb4d8,#2b93bc);border-color:#349fc5;color:#fff} .rewardCountdown{font-family:inherit;font-size:12px;font-weight:700;color:#6d94a9;min-height:22px;margin:0 0 10px;font-variant-numeric:tabular-nums} .bossArrivalShade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 31%,#d2eaf445,transparent 56%);animation:arrivalShade 1.6s ease both} .bossArrivalSeal{position:absolute;left:50%;top:28%;width:120px;height:120px;transform:translate(-50%,-50%);display:grid;place-items:center} .bossArrivalSeal i,.bossArrivalSeal b{position:absolute;inset:0;border:2px solid #e6f3f6a3;border-radius:50%;animation:arrivalRing 1.6s ease-out both} .bossArrivalSeal b{inset:15px;border-color:#e7d9b7;animation-delay:.12s} .bossArrivalSeal svg{position:relative;filter:drop-shadow(0 4px 5px #355d7930);animation:arrivalCrown 1.6s ease both} @keyframes arrivalShade{0%,100%{opacity:0}30%,70%{opacity:1}} @keyframes arrivalRing{0%{opacity:0;transform:scale(.45)}30%{opacity:.8}80%{opacity:.2}100%{opacity:0;transform:scale(1.55)}} @keyframes arrivalCrown{0%{opacity:0;transform:translateY(7px) scale(.7)}30%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px) scale(1.05)}} #scene .pondRain{display:none;position:absolute;inset:0;pointer-events:none} #sky[data-vweather="rain"] #scene .pondRain{display:block} .pondRain i{position:absolute;width:9px;height:3px;border:1px solid #e6fcff;border-radius:50%;animation:pondRainRing 1.8s ease-out var(--rain-delay) infinite} .pondRain b{position:absolute;left:50%;bottom:2px;width:2px;height:7px;background:linear-gradient(transparent,#e1faff);animation:pondRainDrop 1.8s linear var(--rain-delay) infinite} @keyframes pondRainRing{0%,35%{opacity:0;transform:scale(.15)}45%{opacity:.9;transform:scale(.5)}85%,100%{opacity:0;transform:scale(1.8)}} @keyframes pondRainDrop{0%{opacity:0;transform:translateY(-12px)}30%{opacity:.8}42%,100%{opacity:0;transform:translateY(1px)}} #heartBurst{justify-content:flex-start;padding-top:18%;box-sizing:border-box} #heartBurst .hbHeart,#heartBurst .hbHeart.art svg{width:52px;height:48px;font-size:45px;filter:drop-shadow(0 2px 4px #46839a25)} #heartBurst .hbTxt{font-family:inherit;font-size:15px;font-weight:800;line-height:1.5;white-space:normal;text-align:center;max-width:calc(100% - 42px);box-sizing:border-box;background:#fff;border:1px solid #c8e5f2;color:#2d7c9f;box-shadow:0 4px 10px #46839a26;padding:7px 11px} #heartBurst i{width:6px;height:6px;top:25%} #heartBurst.ice .hbTxt{color:#377caa}#heartBurst.umb .hbTxt{color:#388d77}#heartBurst.rocket .hbTxt{color:#b57940} @media(prefers-reduced-motion:reduce){.bossArrivalSeal *,.pondRain *{animation:none!important}} #heartBurst .hbTxt,#heartBurst .hbHeart{animation:rewardFeedbackIn .2s ease-out both} @keyframes rewardFeedbackIn{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}} .victoryScene{grid-template-rows:minmax(0,1fr)}.victoryCard{max-height:100%;min-height:0;overflow-y:auto} #heartBurst .hbHeart svg{display:block;width:52px;height:48px} #scene .vg-bfly{animation:butterflyRoam 7s ease-in-out infinite;transform-origin:center}#scene .vg-bfly .vgFloat{animation:none}#scene .vg-bfly .vgButterfly{animation:vgFlutter .38s ease-in-out infinite alternate} @keyframes butterflyRoam{0%,100%{translate:0 -4px;rotate:-5deg}25%{translate:10px -17px;rotate:5deg}55%{translate:-8px 4px;rotate:-3deg}78%{translate:8px -8px;rotate:7deg}} @media(prefers-reduced-motion:reduce){#scene .vg-bfly{animation:none}} .bossArrivalFigure{position:absolute;left:50%;top:6%;width:200px;transform:translateX(-50%);animation:bossRevealFigure 1.6s ease both;filter:drop-shadow(0 6px 8px #476d8633)}.bossArrivalBreeze{position:absolute;inset:8% 0 auto;width:100%;height:150px;fill:none;stroke:#e4f2f3;stroke-width:1.6;opacity:.45;animation:bossRevealBreeze 1.6s ease-out both}@keyframes bossRevealFigure{0%{opacity:0;filter:blur(5px) saturate(.5);translate:0 12px}55%,90%{opacity:.9;filter:blur(0) saturate(.9);translate:0 0}100%{opacity:1;filter:none;translate:0 0}}@keyframes bossRevealBreeze{from{opacity:0;translate:-35px 0}40%{opacity:.5}to{opacity:0;translate:35px 0}} #sky.designBoss{background:radial-gradient(ellipse at 68% 35%,#f8fcff8c,transparent 56%),linear-gradient(#9ebfd4 0%,#c4dce8 44%,#e2eff3 78%,#eef6ed 100%)!important} #sky.designBoss #skyDim{background:linear-gradient(#7793ad20,transparent 55%);opacity:.2!important} #sky.designBoss .visualDay{opacity:.3} #sky[data-vweather="cloud"]:not(.designBoss){background:linear-gradient(#aecbdf,#d4e5ee 50%,#f0f7f8)!important} #sky.stormSky{background:linear-gradient(#95b6cd,#bbd3e1 52%,#e3eff3)!important} #slowEffectBadge{position:absolute;left:12px;top:49px;z-index:5;display:flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #c8e4f2;border-radius:999px;background:#f6fcff;color:#3983a6;font-size:12px;line-height:1.2;pointer-events:none;font-variant-numeric:tabular-nums} #slowEffectBadge svg{width:17px;height:17px;display:block} /* Wind moves the complete card consistently for both words and sentences. */ #sky[data-vweather="wind"] .wordcard .wtext{animation:none!important;transform:none!important} #sky[data-vweather="wind"] .wordcard:not(.pop):not(.crash),#sky[data-vweather="wind"] #faller:not(.pop):not(.crash):not(.zap){animation:windCardSway 2.4s ease-in-out infinite alternate} @keyframes windCardSway{from{translate:calc(var(--wind-shift,8px) * -1) 0}to{translate:var(--wind-shift,8px) 0}} @media(prefers-reduced-motion:reduce){#sky[data-vweather="wind"] .wordcard,#sky[data-vweather="wind"] #faller{animation:none!important}} #bossIn .bossArrivalShade{background:radial-gradient(ellipse at 50% 23%,#fff4c8a3,transparent 48%),radial-gradient(ellipse at 20% 30%,#eddafa66,transparent 60%);animation:arrivalShade 1.6s ease both} #bossIn .bossArrivalFigure{animation:bossPlayfulEntry 1.6s cubic-bezier(.2,.7,.3,1) both;filter:drop-shadow(0 6px 7px #6794b230)} .bossPlayfulSpark{position:absolute;display:block;line-height:0;animation:bossPlayfulSpark 1.3s ease-out var(--spark-delay) both} #bossIn .btx{background:#f8fcfff2;color:#397c9e!important;border:1px solid #c3e3f0;box-shadow:0 4px 10px #5e93ac26;font-family:inherit;font-weight:800;font-size:18px} #sky.stormSky{background:radial-gradient(ellipse at 50% 22%,#fbf5df99,transparent 50%),linear-gradient(#a9cfe5,#d1e7f1 55%,#edf6f4)!important} #sky.stormSky.shake{animation:none!important} @keyframes bossPlayfulEntry{0%{opacity:0;scale:.65;rotate:-9deg;translate:0 -18px}32%{opacity:1;scale:1.06;rotate:5deg;translate:0 8px}53%{scale:.97;rotate:-3deg;translate:0 -4px}75%,100%{opacity:1;scale:1;rotate:0deg;translate:0 0}} @keyframes bossPlayfulSpark{0%{opacity:0;scale:.2;translate:0 5px}35%{opacity:1;scale:1.15}75%{opacity:.8}100%{opacity:0;scale:.8;translate:0 -9px}} @media(prefers-reduced-motion:reduce){#bossIn .bossArrivalFigure,.bossPlayfulSpark{animation:none!important}.bossPlayfulSpark{display:none}} /* Keep post-boss celebration bright even over an overcast sky. */ #bossReward{background:#d5edf57a;backdrop-filter:blur(1px)} #lvCard{background:#d8edf778;backdrop-filter:none} #sky[data-vweather="cloud"] #skyDim{background:linear-gradient(#a6cadd33,transparent 65%);opacity:.2!important} #sky[data-vweather="cloud"]:not(.designBoss){background:radial-gradient(ellipse at 65% 30%,#ffffff73,transparent 52%),linear-gradient(#b2d3e5,#d9eaf1 55%,#f1f8f7)!important} #sky[data-vweather="wind"] #faller,#sky[data-vweather="wind"] .wordcard{max-width:calc(100% - 44px)} #scene .vg-dog .vgAnimal,#scene .vg-dogrun .vgAnimal{animation:happyDogHop .85s ease-in-out infinite} #scene .vg-dogrun .vgAnimal{animation-duration:.65s} #scene .vg-dog .vgTail,#scene .vg-dogrun .vgTail{animation-duration:.27s} @keyframes happyDogHop{0%,70%,100%{translate:0 0;rotate:0deg}32%{translate:0 -5px;rotate:-3deg}52%{translate:0 -2px;rotate:2deg}} #scene .vgKite{animation:kiteWindSway 3.2s ease-in-out infinite alternate;transform-origin:50% 60%} #scene .vgKite>path:nth-of-type(5){animation:kiteTailFlutter 1.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0} @keyframes kiteWindSway{from{rotate:-7deg;translate:-1px -2px}to{rotate:8deg;translate:2px 1px}} @keyframes kiteTailFlutter{from{transform:skewX(-9deg)}to{transform:skewX(10deg)}} #scene .vg-photo .vgCamera,#scene .vg-photo .vgArm.front.photo{transition:transform .35s ease} #scene .vg-taking-photo .vgCamera{transform:translate(-8px,-9px) rotate(-3deg)} #scene .vg-taking-photo .vgArm.front.photo{transform:rotate(-18deg);transform-box:fill-box;transform-origin:0 0} #scene .vg-taking-photo .vgCameraFlash{animation:cameraSmallFlash 2.8s ease both} @keyframes cameraSmallFlash{0%,25%,37%,100%{opacity:0}30%{opacity:.85}} #scene .pondRain i{width:12px;height:4px;border:1.4px solid #f4ffff;box-shadow:0 0 0 .6px #56a4b7;animation-duration:1.3s} #scene .pondRain i::after{content:'';position:absolute;inset:-3px -4px;border:1px solid #ccf6ff;border-radius:50%;opacity:.7} #scene .pondRain b{width:2px;height:11px;background:linear-gradient(#d4f7ff66,#f0ffff);box-shadow:.5px 0 0 #69b5c8;animation-duration:1.3s} #scene .pondRain b::after{content:'';position:absolute;left:-3px;bottom:0;width:7px;height:4px;border-left:1.3px solid #eafcff;border-right:1.3px solid #eafcff;transform:rotate(15deg)} @keyframes pondRainRing{0%,25%{opacity:0;transform:scale(.2)}36%{opacity:1;transform:scale(.6)}82%,100%{opacity:0;transform:scale(1.8)}} @keyframes pondRainDrop{0%{opacity:0;transform:translateY(-18px)}20%{opacity:1}36%{opacity:1;transform:translateY(0)}49%,100%{opacity:0;transform:translateY(1px)}} /* Badge paint only: preserve existing sizes, offsets, rings and spacing. */ .pin::after{background:radial-gradient(ellipse 65% 42% at 30% 18%,#ffffff30,transparent 70%),radial-gradient(ellipse 90% 65% at 50% 112%,#49768b16,transparent 62%)} .pin.off{background:linear-gradient(#d4e0e7,#b7c9d5)!important;box-shadow:0 0 0 4px #bdcfd9,0 0 0 5.3px #7093a32e,inset 0 0 0 1.5px #f5fbffb3,0 3px 6px #537c8e24} .pin.off>svg{filter:grayscale(1) contrast(1.08) brightness(.98);opacity:.86} .pin:not(.off):not(.plain){box-shadow:0 0 0 4px #cfaa65,0 0 0 5.3px #816c4e40,inset 0 0 0 1.5px #fff9e9ba,0 4px 9px #41788d2e} #scene .vg-taking-photo .vgLeg,#scene .vg-taking-photo .vgArm.back{animation:none} /* Purchase actions share dimensions even when translated labels wrap. */ .shopInspectActions{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:8px} .shopInspectActions>.learnButton{box-sizing:border-box;width:100%;min-width:0;margin:0;overflow-wrap:anywhere} #learnConfirm .learnActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} #learnConfirm .learnActions>button{min-width:0;overflow-wrap:anywhere} #dailyCard .dsp{min-width:0;overflow-wrap:anywhere} [dir="rtl"] #dailyCard .dsp::before{left:auto;right:-6px} /* Keep the complete rider and seat rotating around the suspension point. */ .deco[data-id="swing"] .mswing{transform-box:view-box;transform-origin:11.8px 7px} @media(prefers-reduced-motion:reduce){.deco[data-id="swing"] .mswing,.deco[data-id="swing"] .mdad,.deco[data-id="swing"] .mdarm{animation:none}} /* Three-second celebration, confined to the constellation illustration. */ #sdConstellationFinish{isolation:isolate} #sdConstellationFinish .sdFinishArt{position:relative;z-index:1;animation:none} #sdConstellationFinish .sdStarPoint{opacity:1;animation:none} #sdConstellationFinish .sdStarPoint .sdNw{animation:sdConstellationTwinkle .7s calc(.55s + var(--starDelay) - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdLastBorn .sdNwC{animation:sdConstellationBirth .6s calc(0s - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdLastBorn .sdNwH{animation:sdConstellationBirthHalo .7s calc(0s - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishTrails path{fill:none;stroke:#ffe29a;stroke-width:.48;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 1px #ffd778);animation:sdConstellationTrail .65s calc(var(--trailDelay) - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishAura{position:absolute;inset:4% 0 8%;z-index:0;pointer-events:none;background:radial-gradient(ellipse,#ffdfa03d 0%,#eacffa16 42%,transparent 70%);animation:sdConstellationAura 3s calc(0s - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishParticles{position:absolute;inset:0;z-index:2;pointer-events:none} #sdConstellationFinish .sdFinishSpark{position:absolute;left:50%;top:45%;font-style:normal;color:#fff0b5;font-size:13px;text-shadow:0 0 6px #ffd276;opacity:0;animation:sdConstellationSpark 1.2s calc(var(--sparkDelay) - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishName{position:relative;z-index:3;max-width:94%;overflow-wrap:anywhere;line-height:1.5;font-size:clamp(16px,4.7vw,21px);text-shadow:0 0 12px #ffdb8c66;animation:sdConstellationLabel .6s calc(1.65s - var(--celebrationElapsed,0s)) both} #scr-study.sdCelebrating .sdDnb>i{animation:sdConstellationCheer 1.2s .4s both} @keyframes sdConstellationBirth{0%{scale:.4;filter:brightness(1)}45%{scale:3;filter:brightness(1.5) drop-shadow(0 0 4px #fff2b8)}100%{scale:1;filter:none}} @keyframes sdConstellationBirthHalo{0%{scale:.4;opacity:.15}50%{scale:2.1;opacity:1}100%{scale:1;opacity:.8}} @keyframes sdConstellationTwinkle{0%,100%{scale:1;filter:none}45%{scale:1.65;filter:brightness(1.3) drop-shadow(0 0 2px #ffe6a0)}} @keyframes sdConstellationTrail{from{stroke-dashoffset:1;opacity:0}20%{opacity:1}to{stroke-dashoffset:0;opacity:.85}} @keyframes sdConstellationAura{0%,100%{opacity:0;scale:.8}45%{opacity:.35}68%{opacity:1;scale:1.08}88%{opacity:.6;scale:1.15}} @keyframes sdConstellationSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sparkX)),calc(-50% + var(--sparkY))) scale(.25)}} @keyframes sdConstellationLabel{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}} @keyframes sdConstellationCheer{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -7px;rotate:-4deg}50%{translate:0 0;rotate:3deg}75%{translate:0 -4px;rotate:0deg}} @media(prefers-reduced-motion:reduce){#sdConstellationFinish *,#scr-study.sdCelebrating .sdDnb>i{animation:none!important;transition:none!important}#sdConstellationFinish .sdStarPoint,#sdConstellationFinish .sdFinishName{opacity:1}#sdConstellationFinish .sdFinishAura{opacity:.2}#sdConstellationFinish .sdFinishSpark{display:none}#sdConstellationFinish .sdFinishTrails path{stroke-dashoffset:0;opacity:.8}} /* Landscape SVG is scenery, not a mascot: compact-height mascot limits must not crop it. */ .gHero>svg.visualLandscape{max-height:none!important;max-width:none!important} /* Morning has a peach-lit horizon and dew haze; daytime retains its clear blue sky. */ #gardenHero:has(>.visualLandscape[data-sky="morning"]){background:radial-gradient(ellipse at 92% 12%,#fff1bd9c,transparent 45%),linear-gradient(175deg,#b9d7ed 0%,#e4e3ed 38%,#ffe2c6 70%,#fff1d9 100%)!important} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .visualDay>ellipse{opacity:.65} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .skyFx .ray{background:linear-gradient(to bottom,#ffe9b66b,#fff4dc18 70%,transparent);filter:blur(7px)} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .skyFx .mist{top:76%;height:18%;opacity:.75} #gardenHero:has(>.visualLandscape[data-sky="morning"]) .visualTerrain{filter:saturate(.78) brightness(1.08)} /* Resource tags follow the existing action buttons above. */ #gardenTotal .gdPill{box-sizing:border-box;padding:6px 10px;font-size:12px;line-height:normal;border:1px solid #d7e9ed!important;border-radius:12px;background:linear-gradient(#fff,#f5fbff)!important;box-shadow:0 2px 4px #3d819916!important;min-width:0} #gardenTotal .gdPill b{font-size:12px;line-height:normal} @media(max-width:340px){#gardenTotal .gdPill{padding:6px 8px;font-size:11px}#gardenTotal .gdPill b{font-size:11px}} /* Garden panels stay distinct against the pale sky without changing layout. */ #gardenTotal{background:#e2f1f8!important;border:1px solid #a7cadb;box-shadow:0 3px 10px #3e78951c!important} #gardenTotal .shopBtn,#gardenTotal .gdPill{background:linear-gradient(#fff,#f4faff)!important;border-color:#aacddd!important;box-shadow:0 2px 4px #3d819925!important} #gardenPots .pot{background:linear-gradient(155deg,#fff 55%,#eef8f2)!important;border-color:#a8cdbb!important;box-shadow:0 4px 10px #467a6424!important} /* Equal inner breathing room above actions and below resources. */ #gardenTotal{padding-block:10px!important} #gardenTotal .gdBar{margin-bottom:0} /* Remove the outer surface while retaining its border space and all layout. */ #gardenTotal{background:transparent!important;border-color:transparent!important;box-shadow:none!important} /* Align the three control columns with the three plant-card columns below. */ #gardenTotal{padding-inline:0!important;border-inline-width:0} #gardenTotal .gdBtns,#gardenTotal .gdBar{column-gap:10px} /* Food and seated diners exist only during the table visit. */ .gardenDiningSvg .diningGuests,.gardenDiningSvg .diningFood{opacity:0;transition:opacity .3s} .ppDining .gardenDiningSvg .diningGuests,.ppDining .gardenDiningSvg .diningFood{opacity:1} .ppDining .diningBite{transform-box:fill-box;transform-origin:center;animation:diningNibble 1.3s ease-in-out infinite} .ppDining .diningBite.dad{animation-delay:.5s} .ppDining .diningSteam{animation:diningSteam 1.8s ease-in-out infinite} .diningBub{left:50%;bottom:100%;margin-bottom:4px} @keyframes diningNibble{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1px;rotate:-8deg}} @keyframes diningSteam{0%,100%{opacity:.2;translate:0 0}50%{opacity:.8;translate:0 -1px}} @media(prefers-reduced-motion:reduce){.ppDining .diningBite,.ppDining .diningSteam{animation:none}} .gardenWatering{position:absolute;width:64px;height:72px;transform:translate(-50%,-100%);z-index:9;pointer-events:none;animation:wateringPresence 2.4s linear both;animation-delay:calc(0s - var(--waterElapsed))} .gardenWatering .wateringCan{position:absolute;left:31px;top:0;transform:rotate(-25deg);filter:drop-shadow(0 1px 1px #477b9633)} .gardenWatering .wateringShower{position:absolute;inset:0;width:64px;height:72px;max-height:none!important;overflow:visible} .wateringStreams{stroke-dasharray:2 4;animation:wateringFlow .6s linear infinite;animation-delay:calc(0s - var(--waterElapsed));opacity:.75} .wateringBead{animation:wateringBead .75s ease-in infinite;animation-delay:calc(var(--dropDelay) - var(--waterElapsed));opacity:0} .wateringRipple{transform-origin:25px 61px;animation:wateringRipple .9s ease-out infinite;animation-delay:calc(0s - var(--waterElapsed))} .wateringGlints{animation:wateringGlints 1.2s ease-in-out infinite;animation-delay:calc(0s - var(--waterElapsed))} @keyframes wateringPresence{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}} @keyframes wateringFlow{to{stroke-dashoffset:-12}} @keyframes wateringBead{0%{transform:translate(var(--dropX),23px) scale(.65);opacity:0}20%{opacity:1}85%{opacity:.9}100%{transform:translate(var(--dropX),57px) scale(.9);opacity:0}} @keyframes wateringRipple{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.35);opacity:0}} @keyframes wateringGlints{0%,100%{opacity:.15}50%{opacity:.9}} @media(prefers-reduced-motion:reduce){.gardenWatering,.gardenWatering *{animation:none!important}.gardenWatering{opacity:1}.wateringBead{display:none}.wateringStreams{opacity:.7}.wateringRipple{opacity:.5}} .gardenWatering.isRight{transform:translate(-50%,-100%) scaleX(-1)} .gHero .gardenWatering>svg.wateringShower{position:absolute!important} /* Balloon boarding is synchronized with the existing visitor route. */ .gHero .deco.gdBal{animation:none;transform:translate(-50%,-100%);transition:left 4.2s cubic-bezier(.4,0,.2,1),top 4.2s cubic-bezier(.4,0,.2,1)} .gHero .gdBal>.gardenBalloonSvg{display:block;max-height:none!important;filter:drop-shadow(0 2px 2px #527c9133)} .gardenBalloonSvg .balloonPassengers,.gardenBalloonSvg .balloonBurner{opacity:0} .gHero .balloonRiding .balloonPassengers{animation:balloonBoarding 14s linear both} .gHero .balloonRiding .balloonBurner{animation:balloonBurner 14s linear both} .gHero .deco.gdBal.balloonRiding{z-index:8;animation:balloonFamilyFlight 14s ease-in-out both} .gHero .balloonRideBub{top:calc(100% + 5px);bottom:auto;max-width:min(180px,72vw);width:max-content;white-space:normal;overflow-wrap:anywhere;line-height:1.4;font-size:11px;direction:inherit;pointer-events:none} .gHero .balloonRideBub::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff} @keyframes balloonFamilyFlight{0%,12%,92%,100%{transform:translate(-50%,-100%)}38%{transform:translate(calc(-50% + 3px),calc(-100% - var(--balloonLift)))}56%{transform:translate(calc(-50% - 2px),calc(-100% - var(--balloonLift) - 3px))}66%{transform:translate(-50%,calc(-100% - var(--balloonLift)))} } @keyframes balloonBoarding{0%{opacity:0}10%,90%{opacity:1}98%,100%{opacity:0}} @keyframes balloonBurner{0%,10%,78%,100%{opacity:0}18%,60%{opacity:1}} @media(prefers-reduced-motion:reduce){.gHero .deco.gdBal{transition:none}.gHero .deco.gdBal.balloonRiding{animation:none;transform:translate(-50%,calc(-100% - var(--balloonLift)))}.gHero .balloonRiding .balloonPassengers{animation:none;opacity:1}.gHero .balloonRiding .balloonBurner{animation:none}} /* A clear, slow rainbow appearance cycle; placement always stays visible. */ .gHero .rbw{animation:gardenRainbowAppear 14s ease-in-out infinite} @keyframes gardenRainbowAppear{0%,12%,100%{opacity:0;filter:blur(1.2px)}28%{opacity:.7;filter:blur(.3px)}38%,68%{opacity:1;filter:drop-shadow(0 0 3px #fff5ce80)}84%{opacity:.25;filter:blur(.6px)}94%{opacity:0;filter:blur(1.2px)}} .gHero.gdEditing .rbw{animation:none!important;opacity:1;filter:none} @media(prefers-reduced-motion:reduce){.gHero .rbw{animation:none;opacity:1;filter:none}} .gHero .balloonRideBub{animation:none} /* Garden dialogue wraps long translations without changing the message. */ .gHero .pplBub{width:max-content;max-width:min(180px,calc(100vw - 48px));white-space:normal;overflow-wrap:anywhere;animation:gardenBubbleIn .25s ease-out} @keyframes gardenBubbleIn{from{opacity:0}to{opacity:1}} .gHero .balloonRideBub{animation:none} /* The family enters, rests briefly, then emerges and stretches. */ .gHero .tentDoorCurtain,.gHero .tentRest{opacity:0;pointer-events:none;transition:opacity .3s} .gHero .tentSleeping .tentDoorCurtain,.gHero .tentSleeping .tentRest{opacity:1} .gHero .tentRest{position:absolute;left:50%;bottom:100%;margin-left:-12px;line-height:0} .gHero .tentSleeping .tentRest{animation:tentRestBreath 1.8s ease-in-out infinite} .gHero .tentEntering>.ppl{animation:tentEntry .65s ease-in forwards;transform-origin:50% 100%} .gHero .tentEmerging>.ppl{animation:tentEmerge .5s ease-out both} .gHero .tentStretching .tentStretchArms{transform-box:fill-box;transform-origin:50% 100%;animation:tentStretch 1.4s ease-in-out 2} .gHero .tentStretching .ppKid .tentStretchArms{animation-delay:.15s} .gHero .tentWakeBub{animation:gardenBubbleIn .25s ease-out} @keyframes tentEntry{from{opacity:1;scale:1;translate:0 0}to{opacity:0;scale:.55;translate:0 3px}} @keyframes tentEmerge{from{opacity:0;translate:0 4px;scale:.85}to{opacity:1;translate:0 0;scale:1}} @keyframes tentRestBreath{0%,100%{translate:0 0;opacity:.65}50%{translate:0 -2px;opacity:1}} @keyframes tentStretch{0%,100%{scale:1;rotate:0deg}50%{scale:1.08 1.14;rotate:-3deg}} @media(prefers-reduced-motion:reduce){.gHero .tentEntering>.ppl,.gHero .tentEmerging>.ppl,.gHero .tentStretchArms,.gHero .tentRest{animation:none!important}.gHero .tentDoorCurtain,.gHero .tentRest{transition:none}} /* Gondolas stay upright while the occupied wheel completes one full turn. */ .gardenWheelSvg .wheelRotor{transform-box:view-box;transform-origin:21px 20px} .gardenWheelSvg .wheelCounter{transform-box:view-box;transform-origin:0 0} .gardenWheelSvg .wheelPassengers{opacity:0} .gHero .wheelRiding{z-index:8!important} .gHero .wheelRiding .wheelRotor{animation:wheelFamilyTurn 8s linear both} .gHero .wheelRiding .wheelCounter{animation:wheelFamilyCounter 8s linear both} .gHero .wheelRiding .wheelPassengers{animation:wheelFamilyBoarding 8s linear both} .gHero .wheelRideBub{bottom:auto;max-width:min(180px,72vw);white-space:normal;overflow-wrap:anywhere;line-height:1.4;animation:none;pointer-events:none} @keyframes wheelFamilyTurn{0%,10%{transform:rotate(0)}90%,100%{transform:rotate(360deg)}} @keyframes wheelFamilyCounter{0%,10%{transform:rotate(0)}90%,100%{transform:rotate(-360deg)}} @keyframes wheelFamilyBoarding{0%{opacity:0}5%,94%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.gHero .wheelRiding .wheelRotor,.gHero .wheelRiding .wheelCounter{animation:none}.gHero .wheelRiding .wheelPassengers{animation:none;opacity:1}} @media(prefers-reduced-motion:reduce){.gHero .wheelRiding .wheelRotor{transform:rotate(180deg)}.gHero .wheelRiding .wheelCounter{transform:rotate(-180deg)}} /* Feet stay planted while both pairs of hands move gently towards the warmth. */ .pplWrap .ppl.warm.warmingPeople .ppDad,.pplWrap .ppl.warm.warmingPeople .ppKid{animation:none} .warmingPeople .warmingArms{transform-box:fill-box;transform-origin:50% 50%;animation:campfireWarmHands 1.8s ease-in-out infinite} .warmingPeople .warmingArms.dad{animation-name:campfireWarmHandsDad;animation-delay:.2s} .warmingPeople .warmingLight{animation:campfireWarmLight 2.1s ease-in-out infinite} @keyframes campfireWarmHands{0%,100%{translate:0 0;rotate:0deg}50%{translate:.35px -.25px;rotate:-2deg}} @keyframes campfireWarmHandsDad{0%,100%{translate:0 0;rotate:0deg}50%{translate:-.35px -.25px;rotate:2deg}} @keyframes campfireWarmLight{0%,100%{opacity:.35}50%{opacity:.7}} @media(prefers-reduced-motion:reduce){.warmingPeople .warmingArms,.warmingPeople .warmingLight{animation:none!important}} .gHero.gdEditing .deco.gdBal{transition:none!important} /* Small alternating waves and head tilts stay inside the upright gondola. */ .gHero .wheelRiding .wheelWave{transform-box:fill-box;transform-origin:50% 100%} .gHero .wheelRiding .wheelWave.kid{animation:wheelKidWave 2.8s ease-in-out infinite} .gHero .wheelRiding .wheelWave.dad{animation:wheelDadWave 2.8s ease-in-out infinite} .gHero .wheelRiding .wheelNod{transform-box:fill-box;transform-origin:50% 100%;animation:wheelHappyNod 2s ease-in-out infinite} .gHero .wheelRiding .wheelNod.kid{animation-delay:.5s} @keyframes wheelKidWave{0%,50%,100%{rotate:0deg}8%,24%,40%{rotate:-12deg}16%,32%{rotate:8deg}} @keyframes wheelDadWave{0%,45%,100%{rotate:0deg}52%,68%,84%{rotate:12deg}60%,76%{rotate:-8deg}92%{rotate:0deg}} @keyframes wheelHappyNod{0%,100%{rotate:-3deg}50%{rotate:4deg}} @media(prefers-reduced-motion:reduce){.gHero .wheelRiding .wheelWave,.gHero .wheelRiding .wheelNod{animation:none!important}} /* Each visitor reaches with the hand closest to the water. */ .fountainPeople .fountainReach{transform-box:fill-box;transform-origin:50% 50%;animation:fountainKidReach 1.8s ease-in-out infinite} .fountainPeople .fountainReach.dad{animation-name:fountainDadReach;animation-delay:.3s} .fountainPeople .fountainTouchDrop{animation:fountainTouchDrop 1.2s ease-out infinite;opacity:0} @keyframes fountainKidReach{0%,100%{translate:0 0;rotate:0deg}40%,65%{translate:.8px -.15px;rotate:-3deg}} @keyframes fountainDadReach{0%,100%{translate:0 0;rotate:0deg}40%,65%{translate:-.7px -.15px;rotate:3deg}} @keyframes fountainTouchDrop{0%{translate:0 -.5px;opacity:0}25%{opacity:.85}100%{translate:0 1.4px;opacity:0}} @media(prefers-reduced-motion:reduce){.fountainPeople .fountainReach,.fountainPeople .fountainTouchDrop{animation:none!important}.fountainPeople .fountainTouchDrop{opacity:.5}} /* Heads and pointing fingers follow the turning sails while feet stay still. */ .millPeople .millGaze{transform-box:fill-box;transform-origin:50% 80%;animation:millLookUp 2.4s ease-in-out infinite} .millPeople .millGaze.kid{animation-delay:.35s} .millPeople .millPointing{transform-box:fill-box;transform-origin:100% 100%;animation:millPointSails 2.1s ease-in-out infinite} .millPeople .millPointing.dad{animation-delay:.3s} @keyframes millLookUp{0%,100%{rotate:-9deg}50%{rotate:-6deg}} @keyframes millPointSails{0%,100%{rotate:-2deg}50%{rotate:2deg}} @media(prefers-reduced-motion:reduce){.millPeople .millGaze,.millPeople .millPointing{animation:none!important}.millPeople .millGaze{rotate:-8deg}} /* ===== 게임 화면 그림자 필터 걷기 (2026-10-23 사장) ===== 2.16~2.17.2 꾸미기에서 게임 하늘·땅의 움직이는 그림(구름·손님·물고기·낱말 장식·바닥 풍경·빗줄기·보스)에 filter 를 씌워, 폰이 매 프레임 그림자를 새로 그리느라 끊김이 3~4배가 되었다(S22 측정: 끄면 20~37% → 4.5~7.5%). 그림자가 1~3px 라 걷어도 거의 같아 보인다. 정원 화면(.gHero)은 그대로 둔다. */ #sky .visualTerrain,#sky .wordcard .deco,#sky .cl svg,#sky.designBoss .cl, #sky[data-vweather="rain"] #rainFall,#sky[data-vweather="wind"] #skyOrb, #scene .vgArt,#scene .levelFlower,#scene .levelTree,#scene .pondFish,#scr-game .pplWrap .ppl, #heartBurst .hbHeart,#heartBurst .hbHeart.art svg, #bossMon .bossSvg,#sky.designBoss .bossSvg{filter:none!important} /* 맑음·바람 하늘색은 2.15.1 의 진한 파랑으로 (2026-10-23 사장 「맑은 날이 뿌옇다, 예전처럼 화창하게」). 위(493줄) 옅은 하늘색 #a5d8ec → 예전 index.html #sky 기본색. 바람은 맑은 날과 같은 하늘에 바람 효과만 */ #sky[data-vweather="clear"]:not(.designBoss),#sky[data-vweather="wind"]:not(.designBoss){background:linear-gradient(#7cc6ea 0%,#a5dcf2 38%,#d9f2fd 72%,#f3fbff 100%)!important} /* 보스 판 구름은 2.15.1 처럼 낱말 앞을 지나가며 가린다 — 꾸미기에서 뒤로 보내고(z-index:1) 27% 로 옅게 했던 두 줄을 뺐다 (2026-10-23 사장 「구름이 단어를 더 가렸으면」) */ /* ===== 정원 그림자 필터 걷기 (2026-10-23 사장 「정원도 끊긴다」) ===== 꾸미기에서 정원 장식·걷는 사람·풍선·물뿌리개에 drop-shadow 를 씌워, 무엇이 움직일 때마다 큰 정원 그림을 다시 그렸다 (S22: 정원 31~39%, 필터를 끄면 15~17% — 2.15.1 은 14~21%). 그림자 1~2px 라 걷어도 거의 같아 보인다. 정원 구름·걷는 사람은 left/top 으로 움직이므로 제 칸(GPU)에 둔다 */ .gHero .deco>svg,.gHero .deco>span>svg,.pplWrap .ppl,.gHero .gdBal>.gardenBalloonSvg,.gardenWatering .wateringCan{filter:none!important} .gHero .gcl{will-change:transform} /* 정원 끊김 (2026-10-23 사장) — ① 풍경 그림(SVG) 안쪽 구름 두 개가 흘러가면 큰 그림을 통째로 매 프레임 다시 그렸다 → 세운다 (정원에는 따로 흘러가는 구름 .gcl 이 있다). ② 정원 구름은 left 대신 transform 으로 흘린다 — left 는 매 프레임 배치를 다시 계산한다. PC 기록(3초): 다시 그리기 140~470ms → 32ms, 배치 계산 270ms → 110ms */ #gardenHero .visualLandscape .visualDay>g>path{animation:none!important} .gHero .gcl{left:0;animation-name:gdDrift} @keyframes gdDrift{from{transform:translateX(-70px)}to{transform:translateX(105vw)}} /* 정원 걷는 사람은 그림 안쪽(다리)이 움직여 정원 전체를 매 프레임 다시 그렸다 → 제 칸에 가둔다 (PC 기록 3초: 다시 그리기 148ms → 15ms, 배치 55ms → 4ms, 2026-10-23 사장). ★장식(.deco)에는 걸지 말 것 — 방명록 팻말·구름 장식이 칸 밖으로 나온 부분이 잘렸고, 오히려 다시 그리기가 늘었다 */ .pplWrap{will-change:transform;contain:layout} /* 결과 화면 「물 2배」(보상형 광고) 버튼을 크고 눈에 띄게 — 꾸미기가 옅은 하늘색으로 바꿔 두어 잘 안 눌렸다 (2026-10-24 사장 「수익」) */ #scr-result #adWaterBtn,#scr-result #adReviveBtn{background:linear-gradient(135deg,#ffd76b,#f0a326)!important;color:#5b3c05!important;border:none!important;font-size:17px;font-weight:800;min-height:56px;box-shadow:0 5px 14px rgba(240,163,38,.42)!important;animation:adPulse 1.6s ease-in-out infinite} @keyframes adPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} /* 별자리 완성 — 다 그려지면 번쩍 빛나고, 별자리가 하늘로 올라가며 빛 조각이 따라 오른다 (2026-10-28 사장). 움직이는 것은 transform·opacity 만 쓴다(폰 끊김 방지). 전체 5.2초. */ #sdConstellationFinish .sdFinishArt{animation:sdConsRise 5.2s calc(0s - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishAura{animation-duration:4.6s} #sdConstellationFinish .sdFinishName{font-size:clamp(20px,6vw,26px);animation:sdConstellationLabel .6s calc(1.65s - var(--celebrationElapsed,0s)) both,sdConsNameOut .5s calc(4.7s - var(--celebrationElapsed,0s)) forwards} #sdConstellationFinish .sdFinishFlash{position:absolute;left:50%;top:45%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:radial-gradient(circle,#fffbe8 0%,#ffe08ad0 24%,#ffd27a30 46%,transparent 66%);opacity:0;z-index:2;pointer-events:none;animation:sdConsFlash 1.1s calc(2.1s - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishRiseSpark{position:absolute;left:calc(50% + var(--rx));top:58%;color:#fff3c4;font-style:normal;font-size:var(--rs);line-height:1;opacity:0;z-index:2;pointer-events:none;animation:sdConsRiseSpark 1.5s calc(var(--rd) - var(--celebrationElapsed,0s)) both} @keyframes sdConsRise{0%,64%{transform:none;opacity:1}72%{transform:scale(1.12);opacity:1}100%{transform:translateY(-140px) scale(.45);opacity:0}} @keyframes sdConsFlash{0%{opacity:0;transform:scale(.3)}30%{opacity:.95}100%{opacity:0;transform:scale(1.5)}} @keyframes sdConsRiseSpark{0%{opacity:0;transform:translateY(24px)}20%{opacity:1}100%{opacity:0;transform:translateY(-220px)}} @keyframes sdConsNameOut{to{opacity:0}} /* 순서 다시 (2026-10-28 사장 「순서가 이상해」): 별 하나씩(0~1.8초) → 선 잇기(2~3초) → 번쩍 + 이름(3.1초) → 하늘 위로 올라가 그대로 반짝임(4~5초) → 끝에 부드럽게 걷혀 평소 별자리 화면으로 (5.4~6초). */ #sdConstellationFinish .sdLastBorn .sdNwC{animation:sdConstellationBirth .6s calc(var(--starDelay) - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdLastBorn .sdNwH{animation:sdConstellationBirthHalo .7s calc(var(--starDelay) - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdFinishAura{animation-duration:5s} #sdConstellationFinish .sdFinishFlash{animation-delay:calc(3.0s - var(--celebrationElapsed,0s))} #sdConstellationFinish .sdFinishName{animation:sdConstellationLabel .6s calc(3.2s - var(--celebrationElapsed,0s)) both} #sdConstellationFinish{animation:sdConsOut .6s calc(5.4s - var(--celebrationElapsed,0s)) forwards} #sdConstellationFinish .sdFinishArt{animation:sdConsRise 6s calc(0s - var(--celebrationElapsed,0s)) both} @keyframes sdConsRise{0%,52%{transform:none}58%{transform:scale(1.12)}66%{transform:scale(1.05)}82%,100%{transform:translateY(-70px) scale(.9)}} @keyframes sdConsOut{to{opacity:0}} /* 별이 처음부터 다 보이던 것 → 하나씩 켜지게. 별 탄생·반짝임에서 filter 를 빼 네모 자국을 없앤다(크기·투명도만). */ #sdConstellationFinish .sdStarPoint{opacity:0;animation:sdConsStarOn .35s calc(var(--starDelay) - var(--celebrationElapsed,0s)) both} #sdConstellationFinish .sdLastBorn .sdNwC{animation-name:sdConsBirth} #sdConstellationFinish .sdStarPoint .sdNw{animation-name:sdConsTwinkle} @keyframes sdConsStarOn{from{opacity:0}to{opacity:var(--starOpacity,1)}} @keyframes sdConsBirth{0%{scale:.4}45%{scale:2.6}100%{scale:1}} @keyframes sdConsTwinkle{0%,100%{scale:1}45%{scale:1.7}} /* 마지막 별의 빛 번짐이 별 그림 틀(foreignObject) 밖으로 커지면 네모로 잘렸다 — 틀 안에서만 커지게 */ #sdConstellationFinish .sdLastBorn .sdNwH{animation-name:sdConsBirthHalo} @keyframes sdConsBirthHalo{0%{scale:.5;opacity:.2}50%{scale:1.15;opacity:1}100%{scale:1;opacity:.8}} /* 별 그림 틀 안에서 크기를 키우면 네모 자국이 남는다 — 별 자체 키우기는 끄고, 켜짐(투명도)만 차례로 */ #sdConstellationFinish .sdStarPoint .sdNw,#sdConstellationFinish .sdLastBorn .sdNwC,#sdConstellationFinish .sdLastBorn .sdNwH{animation:none} /* (2026-10-28 사장) ① 번쩍일 때 별마다 빛이 터진다 ② 끝나면 사라지지 않고, 작아지며 하늘 위로 떠올라 별자리로 남는다. 축하 층은 화면을 나갈 때까지 둔다(시간이 지나도 걷지 않음). */ #sdConstellationFinish{animation:none} #sdConstellationFinish .sdStarBurst{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:radial-gradient(circle,#fffbe8 0%,#ffe9a8d9 22%,#ffd27a40 48%,transparent 70%);opacity:0;z-index:2;pointer-events:none;animation:sdConsStarBurst 1.2s calc(var(--bd) - var(--celebrationElapsed,0s)) both} @keyframes sdConsStarBurst{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(.7)}} #sdConstellationFinish .sdFinishFlash{opacity:0;animation-name:sdConsFlashSoft} @keyframes sdConsFlashSoft{0%{opacity:0;transform:scale(.4)}30%{opacity:.55}100%{opacity:0;transform:scale(1.6)}} #sdConstellationFinish .sdFinishArt{animation:sdConsRise 6.4s calc(0s - var(--celebrationElapsed,0s)) both} @keyframes sdConsRise{0%,50%{transform:none}55%{transform:scale(1.1)}62%{transform:none}92%,100%{transform:translateY(-105px) scale(.42)}} #sdConstellationFinish .sdFinishAura{animation:sdConsAuraStay 6.4s calc(0s - var(--celebrationElapsed,0s)) both} @keyframes sdConsAuraStay{0%{opacity:0;transform:scale(.8)}45%{opacity:.4}60%{opacity:1;transform:scale(1.08)}92%,100%{opacity:.35;transform:translateY(-105px) scale(.45)}} /* 별마다 터진 빛은 꺼지지 않고 은은하게 남아, 별자리와 함께 올라가고 그 뒤에도 천천히 반짝인다 (2026-10-28 사장 「앞뒤가 안 맞아」) */ #sdConstellationFinish .sdBurstLayer{position:absolute;pointer-events:none;z-index:2} #sdConstellationFinish .sdStarBurst{animation:sdConsStarBurst 1.2s calc(var(--bd) - var(--celebrationElapsed,0s)) both,sdConsStarGlow 2.6s calc(var(--bd) + 1.2s - var(--celebrationElapsed,0s)) infinite alternate} @keyframes sdConsStarBurst{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.25)}100%{opacity:.55;transform:scale(.62)}} @keyframes sdConsStarGlow{from{opacity:.55;transform:scale(.62)}to{opacity:.28;transform:scale(.5)}} @media(prefers-reduced-motion:reduce){#sdConstellationFinish .sdStarBurst{opacity:.45;transform:scale(.6)}} /* 먼 하늘 위에 작게 — 더 작게, 더 높이, 조금 옅게 (2026-10-28 사장) */ @keyframes sdConsRise{0%,50%{transform:none;opacity:1}55%{transform:scale(1.1);opacity:1}62%{transform:none;opacity:1}94%,100%{transform:translateY(-130px) scale(.24);opacity:.9}} @keyframes sdConsAuraStay{0%{opacity:0;transform:scale(.8)}45%{opacity:.4}60%{opacity:1;transform:scale(1.08)}94%,100%{opacity:.25;transform:translateY(-130px) scale(.28)}} /* 하늘의 열기구가 무지개(3) 뒤로 가려졌다 — 무지개 앞, 단비(4) 뒤로 (2026-10-28 사장) */ .gHero .deco[data-id="balloon"]{z-index:3}