@import url('../playful_shared/style.css?v=20261002play1');
body{--accent:#4b806a;--ink:#375b49;--soft:#e5f0dc;background:#dce6d3;color:#375b49}.backdrop{background-position:center 62%;background-color:#e7ead7}.app{max-width:1020px;grid-template-rows:74px 62px 34px minmax(0,1fr) auto;gap:0}.topbar{padding-left:5px;padding-right:5px}.heading{background:#fffaf0ed;border-radius:20px;padding:7px 21px;box-shadow:0 3px 0 #725b3e12}.heading h1{font-size:26px;margin:3px 0 0}.heading small{font-size:9px;letter-spacing:1.6px}.speech-row{z-index:3}.speech{background:#fffdf4;line-height:1.3;font-size:20px;max-width:640px;min-height:50px;box-shadow:0 4px 0 #876f4919}#friend-info{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;z-index:2;line-height:1.25}#friend-info span{padding:5px 11px;background:#fffcf0e8;border-radius:20px}.friend-name{font-weight:750}.problem-name{color:#6f7150}.play-area{min-height:0}.scene{max-width:720px}.scene image{pointer-events:none}footer{padding:2px 0 0;position:relative;z-index:4}#step-strip{display:flex;justify-content:center;align-items:center;margin:0 auto 6px;height:27px}.care-step{width:26px;height:26px;border:2px solid #fff9ed;background:#f6ecd7;color:#a5a08e;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:13px;font-weight:750}.care-step.current{background:#f1c863;color:#675123;box-shadow:0 0 0 2px #fffbed}.care-step.done{background:#669c7b;color:white}.step-join{height:3px;width:20px;background:#fff9e5}.tools{min-height:91px;gap:17px}.tool{width:102px;height:92px;border-radius:23px;padding:5px 8px;background:#fffaf0;border:3px solid #fdf8e9;box-shadow:0 6px 0 #96744429}.tool img,.tool>svg{height:62px;width:72px}.tool small{font-size:12px;font-weight:650;white-space:nowrap}.tool[aria-pressed=true]{border-color:#5a9771;background:#f2f7e9;box-shadow:0 6px 0 #49684530}.tool.guided-tool{outline:4px solid #f9d376;outline-offset:3px;animation:tool-invite 1.15s ease-in-out infinite}.tool:disabled{opacity:.65}.bottom-row{max-width:360px;min-height:44px;margin-top:5px}.mini-button{background:#fffaf0ed;min-width:44px;min-height:44px}#progress{font-size:12px;color:#476247;background:#fffaf0e8;padding:6px 13px;border-radius:18px}.care-target{cursor:pointer}.care-target:focus-visible{filter:drop-shadow(0 0 6px #ffda79)}.target-done{pointer-events:none;opacity:0;transition:opacity .24s,transform .24s}.guide-ring{animation:ring-breathe 1.7s ease-in-out infinite}.guide-arrow{animation:arrow-invite 1.25s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.care-touch{animation:soft-tap .43s ease-out;transform-box:fill-box;transform-origin:center}.gentle-roll{animation:gentle-roll .38s ease-in-out;transform-box:fill-box;transform-origin:50% 65%}#care-result{position:absolute;left:50%;top:5%;transform:translateX(-50%);max-width:95%;background:#fff6df;color:#46704f;padding:12px 20px;border:3px solid #fffdf4;border-radius:24px;text-align:center;font-size:clamp(20px,3.2vw,28px);font-weight:800;line-height:1.2;box-shadow:0 6px 0 #6c6e4020;pointer-events:none;white-space:nowrap}#loading-friend{position:absolute;left:10%;right:10%;top:38%;background:#fff9e9;padding:22px;border-radius:24px;text-align:center;font-size:18px;box-shadow:0 5px 0 #75684a12}.sound-note{background:#fff6d9;z-index:20;max-width:calc(100vw - 24px);line-height:1.25}.art-note{top:140px}.cooling>circle:first-child{opacity:.08;fill:#8ed4ea}.care-complete #guest{filter:drop-shadow(0 7px 7px #6d76402a)}
@keyframes tool-invite{50%{outline-color:#fff4b2;box-shadow:0 6px 0 #96744429,0 0 0 8px #fff1ba65}}@keyframes ring-breathe{50%{opacity:.5;stroke-width:8}}@keyframes arrow-invite{50%{translate:0 10px}}@keyframes soft-tap{50%{scale:.88}}@keyframes gentle-roll{50%{rotate:22deg}}
@media(max-width:520px){.app{grid-template-rows:69px 62px 32px minmax(0,1fr) auto;padding-left:7px;padding-right:7px}.heading{padding:6px 12px;border-radius:17px}.heading h1{font-size:20px}.heading small{font-size:8px;letter-spacing:.9px}.speech{font-size:17px;padding:9px 13px;min-height:50px}.tool{height:84px;width:98px}.tool img,.tool>svg{height:54px;width:65px}.tools{min-height:85px}.bottom-row{margin-top:3px}.scene{max-width:570px}#care-result{font-size:20px;padding:10px 14px;white-space:normal;min-width:235px}.sound-note{top:69px}.art-note{top:140px}}
@media(max-height:650px) and (orientation:portrait){.app{grid-template-rows:59px 56px 27px minmax(0,1fr) auto}.heading h1{font-size:18px}.heading small{display:none}.speech{font-size:15px;padding:7px 11px;min-height:46px}#friend-info{font-size:11px}.tools{min-height:74px}.tool{height:72px;width:91px;padding:4px}.tool img,.tool>svg{height:45px;width:56px}.tool small{font-size:10px}#step-strip{height:22px;margin-bottom:4px}.care-step{height:22px;width:22px;font-size:11px}.bottom-row{margin-top:2px;min-height:44px}#care-result{font-size:17px;top:0;padding:7px 13px}}
@media(orientation:landscape) and (max-height:560px){.app{grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:57px 53px 25px minmax(0,1fr);max-width:1060px;padding-top:0}.topbar,.speech-row,#friend-info{grid-column:1/3}.topbar{grid-row:1;align-items:center}.speech-row{grid-row:2}.heading{padding:5px 17px}.heading small{display:none}.heading h1{font-size:19px}.speech{font-size:16px;max-width:630px;min-height:44px}.round-button{min-height:48px;min-width:48px}#friend-info{grid-row:3;font-size:11px}#friend-info span{padding:3px 10px}.play-area{grid-column:1;grid-row:4;min-height:0}footer{grid-column:2;grid-row:4;align-self:center;padding-right:8px;display:block}.tools{min-height:67px;gap:8px;flex-wrap:nowrap}.tool{width:79px;min-width:70px;height:76px;border-radius:19px}.tool img,.tool>svg{width:52px;height:48px}.tool small{font-size:10px}.bottom-row{display:grid;grid-template-columns:44px 1fr 44px;gap:3px;width:100%;margin-top:7px}#progress{font-size:9px;padding:5px 2px;white-space:normal;text-align:center}.mini-button{width:44px;height:44px}.scene{max-width:570px}#care-result{top:0;font-size:17px;padding:7px 12px;white-space:nowrap}#step-strip{margin-bottom:5px}.sound-note{top:59px}.art-note{top:112px}}
@media(prefers-reduced-motion:reduce){.guided-tool,.guide-ring,.guide-arrow,.care-touch,.gentle-roll{animation:none!important}.target-done{transition:none}.scene{scroll-behavior:auto}}