*{box-sizing:border-box}html{min-height:100%;background:#fff8ee}body{margin:0;color:#514637;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;padding: max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}header,main{max-width:1000px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{font-size:40px;color:#e58b57}h1{font-size:21px;margin:0;letter-spacing:1px}.brand p{font-size:12px;color:#958878;margin:5px 0 0}button{font:inherit;cursor:pointer;border:0}#sound{border:1px solid #e7ddcd;background:#fffdf8;color:#71614c;padding:12px 16px;border-radius:24px;font-size:14px;white-space:nowrap}.intro{text-align:center;margin:30px 0 24px}.eyebrow{font-size:10px;letter-spacing:3px;color:#a58f72}h2{font-size:clamp(24px,4vw,36px);margin:9px 0;color:#62513f}h2 span{color:#e9ac51}.intro p{font-size:13px;color:#9a8976;margin:0}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tile{position:relative;overflow:hidden;min-height:210px;border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#675345;box-shadow:inset 0 -6px 0 #00000006;border:2px solid #ffffff80;touch-action:none}.friend{font-size:78px;line-height:1.2;filter:drop-shadow(0 5px 2px #00000009);pointer-events:none}.name{font-size:20px;font-weight:600;margin-top:12px;pointer-events:none}.caption{font-size:12px;opacity:.62;margin-top:6px;pointer-events:none}.decoration{position:absolute;right:20px;top:15px;font-size:35px;opacity:.18;pointer-events:none}.peach{background:#ffe0c7}.mint{background:#d8ecce}.yellow{background:#ffeab0}.lavender{background:#e5dcf4}.blue{background:#d3e9f4}.pink{background:#f6dbe1}.tile.bounce .friend{animation:bounce .48s ease}.tile.bounce{animation:press .38s ease}button:focus-visible{outline:3px solid #a57441;outline-offset:3px}footer{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#a4927b;padding:24px 5px}#effects{position:fixed;inset:0;pointer-events:none;overflow:hidden}.spark{position:absolute;font-size:26px;animation:float .8s ease-out forwards}.bubble{position:absolute;width:55px;height:55px;border-radius:50%;border:3px solid #ffffffaa;box-shadow:inset 0 0 15px #ffffff55;animation:bubble .8s ease-out forwards}@keyframes bounce{40%{transform:translateY(-16px) rotate(-8deg) scale(1.12)}75%{transform:rotate(6deg)}}@keyframes press{40%{transform:scale(.97)}}@keyframes float{to{transform:translate(var(--dx),var(--dy)) rotate(35deg);opacity:0}}@keyframes bubble{to{transform:translateY(-65px) scale(1.5);opacity:0}}@media(max-width:600px){body{padding:16px 16px max(12px,env(safe-area-inset-bottom))}.brand-icon{font-size:32px}h1{font-size:18px}.brand p{font-size:10px}#sound{padding:10px 12px;font-size:12px}.intro{margin:24px 0 18px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{min-height:110px;height:calc((100vh - 285px)/3);max-height:155px;border-radius:26px}.friend{font-size:62px}.name{font-size:17px;margin-top:7px}footer{font-size:10px;padding:18px 0}}@media(orientation:landscape) and (max-height:600px){.intro{margin:12px 0}.intro h2{font-size:23px}.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tile{min-height:130px}.friend{font-size:47px}.name{font-size:15px;margin-top:3px}.caption{display:none}footer{padding:12px 0}}@media(prefers-reduced-motion:reduce){.tile.bounce,.tile.bounce .friend{animation:none}.spark,.bubble{animation:none;transition:none}}