:root{color-scheme:light;--paper:#f5efe5;--surface:#fffdf9;--ink:#292832;--muted:#958d86;--line:#e9e1d7;--red:#e97763;--gold:#efc24a;--green:#72a98b;--lavender:#9a8bc1;--shadow:0 14px 34px rgba(65,47,34,.09)}*{box-sizing:border-box}html{min-height:100%;background:#ddd6cd}body{margin:0;min-height:100vh;color:var(--ink);font-family:'Noto Sans SC','DM Sans',sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit;color:inherit}button{cursor:pointer}.app-shell{width:min(100%,520px);min-height:100svh;margin:0 auto;background:var(--paper);padding-bottom:calc(16px + env(safe-area-inset-bottom));overflow:hidden}.topbar{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,249,.94);border-bottom:1px solid var(--line)}.wordmark{color:var(--ink);text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.02em;display:flex;align-items:center;gap:9px}.wordmark-dot{width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 0 0 5px #f8e4dc}.topbar-actions{display:flex;align-items:center;gap:8px}.quiet-button,.share-button{height:34px;border:1px solid var(--line);background:#fffdf9;border-radius:10px;padding:0 12px;font-size:11px}.share-button{width:36px;padding:0;font-size:17px;color:#6f6b67}.character-stage{height:min(61svh,570px);min-height:390px;position:relative;display:grid;place-items:center;margin:10px 13px 0;border-radius:10px;background:linear-gradient(155deg,#faf6ee,#eee5da);overflow:hidden}.character-shadow{position:absolute;bottom:13%;left:50%;width:150px;height:18px;transform:translateX(-50%);border-radius:50%;background:rgba(65,48,39,.11);filter:blur(8px)}.character{width:176px;height:344px;position:relative;z-index:2;cursor:pointer;transform-origin:50% 85%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.character-hair{position:absolute;z-index:1;left:24px;top:4px;width:128px;height:107px;background:#594956;border-radius:52% 52% 39% 39%;transform:rotate(-2deg)}.character-hair:before{content:'';position:absolute;left:-4px;top:42px;width:24px;height:57px;border-radius:70% 20% 70% 35%;background:#594956;transform:rotate(5deg)}.character-hair:after{content:'';position:absolute;right:-5px;top:38px;width:26px;height:67px;border-radius:20% 70% 35% 70%;background:#594956}.character-head{position:absolute;z-index:2;left:41px;top:22px;width:94px;height:101px;border-radius:47% 48% 45% 46%;background:#f3c6a6;border:3px solid #4c3d49;overflow:hidden}.eye{position:absolute;top:43px;width:8px;height:11px;border-radius:50%;background:#39313e}.eye-left{left:24px}.eye-right{right:24px}.cheek{position:absolute;top:62px;width:14px;height:7px;border-radius:50%;background:#e99894;opacity:.78}.cheek-left{left:9px}.cheek-right{right:9px}.character-mouth{position:absolute;left:39px;top:66px;width:13px;height:6px;border-bottom:2px solid #9e5960;border-radius:0 0 50% 50%}.character-neck{position:absolute;z-index:1;top:116px;left:78px;width:22px;height:27px;background:#edb995;border-left:3px solid #4c3d49;border-right:3px solid #4c3d49}.character-body{position:absolute;z-index:2;left:25px;top:137px;width:128px;height:118px;border:3px solid #4c3d49;border-radius:40px 40px 25px 25px;background:#758b9c}.shirt-collar{position:absolute;left:45px;top:-2px;width:34px;height:29px;background:#f6eee1;clip-path:polygon(0 0,100% 0,50% 100%)}.arm{position:absolute;top:21px;width:27px;height:78px;border:3px solid #4c3d49;border-radius:20px;background:#edbd9d}.arm-left{left:-23px;transform:rotate(9deg)}.arm-right{right:-23px;transform:rotate(-8deg)}.character-skirt{position:absolute;z-index:3;left:18px;top:242px;width:140px;height:63px;border:3px solid #4c3d49;border-radius:18px 18px 31px 31px;background:#e78170;transform:rotate(-1deg)}.character-leg{position:absolute;z-index:2;top:300px;width:24px;height:34px;background:#edbd9d;border-left:3px solid #4c3d49;border-right:3px solid #4c3d49}.leg-left{left:56px}.leg-right{right:56px}.character-shoe{position:absolute;z-index:3;top:328px;width:43px;height:17px;border-radius:15px 15px 6px 6px;background:#4c3d49}.shoe-left{left:39px}.shoe-right{right:39px}.character-overlay{position:absolute;z-index:4;width:92px;height:100px;top:calc(50% - 157px);left:50%;transform:translateX(-50%);background-size:cover;background-position:center;border-radius:48% 48% 45% 45%;pointer-events:none}.character-overlay[hidden]{display:none}.character-caption{position:absolute;bottom:13px;margin:0;color:#a79e94;font-size:12px;letter-spacing:.02em}.controls{padding:13px 13px 0}.interaction-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.interaction-button{min-height:67px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:#625c58;transition:transform .14s ease,background .14s ease}.interaction-button:active,.talent-button:active,.donate-button:active{transform:scale(.98)}.action-symbol{height:25px;color:#876f6b;font-family:'DM Sans',sans-serif;font-size:20px;line-height:24px}.interaction-button:nth-child(2) .action-symbol{color:#d77b82}.interaction-button:nth-child(3) .action-symbol{color:#74a28c}.interaction-button:nth-child(4) .action-symbol{color:#7c78a0}.talent-button{width:100%;margin-top:9px;min-height:59px;border:1px solid var(--line);border-radius:10px;background:#fffdf9;display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;padding:8px 12px;gap:10px}.talent-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f5e9ce;color:#aa812c;font-size:19px}.talent-button strong,.talent-button small{display:block}.talent-button strong{font-size:12px}.talent-button small{font-size:11px;color:var(--muted);margin-top:3px}.talent-button>b{font-size:20px;font-weight:400;color:#90877e}.donate-button{width:100%;height:50px;margin-top:8px;border:0;border-radius:10px;background:var(--gold);display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-weight:800;font-size:13px;box-shadow:0 3px 0 #d7a93b}.donate-button b{font-size:20px;font-weight:500}.page-footer{display:flex;justify-content:center;gap:9px;align-items:center;padding:16px 0 8px;color:#b2aaa1;font-size:12px}.page-footer button{border:0;background:transparent;color:#8d7770;padding:2px;font-size:12px}.toast{position:fixed;z-index:90;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:.2s ease;white-space:nowrap;max-width:calc(100vw - 28px);overflow:hidden;text-overflow:ellipsis;padding:10px 14px;border-radius:10px;background:#302d34;color:white;font-size:11px;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}.sheet-backdrop{position:fixed;z-index:50;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(36,31,28,.4);backdrop-filter:blur(5px)}.sheet-backdrop[hidden]{display:none}.sheet{width:min(100%,520px);max-height:92svh;overflow:auto;background:#fbf7f0;border-radius:16px 16px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -16px 45px rgba(42,31,23,.16)}.sheet-grab{width:34px;height:4px;border-radius:9px;background:#d9d0c6;margin:3px auto 15px}.sheet-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}.kicker{font:700 11px 'DM Sans',sans-serif;letter-spacing:.12em;color:#b17c5d;margin:0 0 4px}.sheet-header h2{font-size:20px;margin:0;letter-spacing:-.03em}.close-button{width:32px;height:32px;border:0;border-radius:50%;background:#eee6dc;font-size:21px;line-height:1;color:#665f59}.editor-preview{height:126px;border-radius:10px;background:#eee6dc;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}.mini-character{width:42px;height:82px;position:relative}.mini-character:before{content:'';position:absolute;left:8px;top:3px;width:27px;height:29px;border-radius:48%;background:#f3c6a6;border:2px solid #4c3d49;box-shadow:0 -5px 0 3px #594956}.mini-character:after{content:'';position:absolute;left:4px;top:34px;width:36px;height:33px;border-radius:12px 12px 6px 6px;background:#758b9c;border:2px solid #4c3d49}.mini-character span{position:absolute;left:11px;top:64px;width:28px;height:16px;background:#e78170;border-radius:4px 4px 9px 9px}.editor-preview img{width:88px;height:95px;object-fit:cover;border-radius:47% 47% 44% 44%;border:2px solid white;box-shadow:0 4px 14px rgba(0,0,0,.1)}.editor-preview p{font-size:12px;color:#766d66;margin:0}.editor-tabs{display:flex;gap:17px;border-bottom:1px solid var(--line);margin-bottom:12px}.editor-tab{border:0;background:none;padding:8px 1px 10px;color:#958b83;font-size:11px;position:relative}.editor-tab.active{color:#302d34;font-weight:800}.editor-tab.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--red)}.panel-hint{font-size:12px;color:#8d837b;line-height:1.5;margin:0 0 11px}.expression-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.expression-option{min-width:0;height:58px;border:1px solid var(--line);border-radius:10px;background:#fffdf9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.expression-option.active{border-color:#e48672;background:#fff8f1;box-shadow:0 0 0 1px #e48672}.expression-option span{height:25px;font:600 20px 'DM Sans',sans-serif;color:#88706e}.expression-option small{font-size:11px;color:#756c66}.primary-action,.secondary-action{min-height:42px;border:0;border-radius:10px;padding:0 14px;font-size:11px;font-weight:800}.primary-action{background:var(--gold);color:#302d34}.secondary-action{background:#eee7de;color:#58524d}.editor-panel>.primary-action{width:100%;margin-top:10px}.editor-panel>.primary-action span{font-size:16px;margin-right:7px}.capture-note{font-size:11px;color:#a39a92;text-align:center;line-height:1.55;margin:9px 0 0}.save-button{width:100%;height:43px;margin-top:13px;border:0;border-radius:10px;background:#35323a;color:white;font-weight:700;font-size:11px}.select-label{display:block;font-size:12px;font-weight:700;margin:12px 0 6px}.voice-select{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:#fffdf9;padding:0 10px;font-size:11px}.recorder{height:55px;margin-top:12px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fffdf9;display:flex;align-items:center;gap:9px;font-size:12px}.record-indicator{width:8px;height:8px;border-radius:50%;background:#c6bdb4}.record-indicator.recording{background:#d64f4f;box-shadow:0 0 0 5px #fae2dc;animation:pulse 1s infinite}.recorder time{margin-left:auto;font:600 12px 'DM Sans',sans-serif;color:#80776f}.record-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.record-actions button{width:100%}.camera-sheet{padding-bottom:calc(17px + env(safe-area-inset-bottom))}.camera-view{position:relative;height:min(48svh,380px);min-height:255px;border-radius:10px;background:#242329;overflow:hidden;display:grid;place-items:center}.camera-view video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-view canvas{display:none}.face-guide{position:absolute;width:min(61%,220px);height:76%;border:2px solid rgba(255,255,255,.84);border-radius:48% 48% 44% 44%;box-shadow:0 0 0 999px rgba(24,22,25,.24);pointer-events:none}.face-guide.detected{border-color:#78d6a4;box-shadow:0 0 0 999px rgba(24,22,25,.18),0 0 18px rgba(120,214,164,.5)}.camera-status{position:absolute;bottom:10px;left:10px;right:10px;padding:8px 9px;background:rgba(22,20,24,.65);border-radius:6px;color:white;text-align:center;font-size:12px}.camera-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.camera-actions button{width:100%}.camera-actions button[hidden]{display:none}.talent-options{display:grid;gap:7px}.talent-options button{min-height:59px;border:1px solid var(--line);border-radius:10px;background:#fffdf9;display:grid;grid-template-columns:36px 1fr auto;grid-template-rows:1fr 1fr;align-items:center;column-gap:9px;text-align:left;padding:8px 10px}.talent-options button>span{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:#f1e9d7;color:#a27c38;display:grid;place-items:center;font-size:16px}.talent-options button strong{align-self:end;font-size:11px}.talent-options button small{align-self:start;color:#9c9288;font-size:11px;margin-top:3px}.talent-options button>b{grid-column:3;grid-row:span 2;font-size:18px;font-weight:400;color:#9b9187}.donation-copy{font-size:11px;color:#8d837b;line-height:1.6;margin:0 0 13px}.payment-list{display:grid;gap:7px}.payment-list button{min-height:56px;border:1px solid var(--line);border-radius:10px;background:#fffdf9;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:8px 10px;text-align:left}.payment-icon{height:34px;width:34px;border-radius:10px;display:grid;place-items:center;font-weight:800}.payment-icon.wechat{background:#e2f0e4;color:#4c9062}.payment-icon.alipay{background:#e8e5f5;color:#665d9b}.payment-icon.other{background:#eee8de;color:#7b7169}.payment-list strong,.payment-list small{display:block}.payment-list strong{font-size:12px}.payment-list small{font-size:11px;color:#9a9088;margin-top:3px}.payment-list button>b{font-size:18px;font-weight:400;color:#857b72}.skip-donation{width:100%;height:39px;border:0;background:transparent;color:#8f867e;font-size:12px;margin-top:5px}.performance{animation:performance .6s ease-in-out infinite alternate}.action-poke{animation:shake .36s ease}.action-pat{animation:pat .55s ease}.action-feed{animation:feed .65s ease}.action-sleep{animation:sleep 1.2s ease forwards}.action-dance{animation:dance .65s ease-in-out infinite alternate}.action-song{animation:song .55s ease-in-out infinite alternate}.action-blessing{animation:blessing .5s ease-in-out infinite alternate}.face-overlay{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover;border-radius:inherit;z-index:4}.character-head.has-photo .eye,.character-head.has-photo .cheek,.character-head.has-photo .character-mouth{display:none}@keyframes shake{25%{transform:rotate(-8deg) translateX(-5px)}70%{transform:rotate(7deg) translateX(5px)}}@keyframes pat{35%{transform:translateY(8px) scaleY(.97)}70%{transform:translateY(-9px) rotate(3deg)}}@keyframes feed{35%{transform:scale(1.05) translateY(-5px)}70%{transform:scale(.98)}}@keyframes sleep{to{transform:translateY(10px) scale(.97);filter:brightness(.87)}}@keyframes dance{to{transform:rotate(8deg) translateY(-8px)}}@keyframes song{to{transform:scale(1.03) rotate(-3deg)}}@keyframes blessing{to{transform:translateY(-7px) rotate(4deg)}}@keyframes performance{to{filter:saturate(1.2)}}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(250,226,220,.55)}}@media(max-width:360px){.character-stage{min-height:350px;height:54svh}.character{transform:scale(.9);transform-origin:50% 55%}.expression-grid{gap:4px}.expression-option small{font-size:11px}}
.processing-avatar #uploadHeadBtn,.processing-avatar #openCameraBtn{opacity:.55;pointer-events:none}

/* UI-1: 字号、对比度、圆角与触控尺寸基础升级 */
:root{--muted:#7a7168;--line:#ded4c9}
.wordmark{font-size:16px;line-height:1.25}
.quiet-button,.share-button{height:40px;border-radius:10px;font-size:13px}
.share-button{width:40px}
.character-stage{min-height:320px;height:min(64svh,600px);border-radius:22px}
.character-caption{font-size:13px;line-height:1.55;color:#7a7168}
.interaction-button{min-height:72px;border-radius:14px;font-size:13px;line-height:1.25}
.talent-button{min-height:64px;border-radius:14px}
.talent-button strong{font-size:15px;line-height:1.25}.talent-button small{font-size:12px;line-height:1.55}
.donate-button{height:54px;border-radius:14px;font-size:15px;line-height:1.25}
.page-footer{font-size:12px;line-height:1.55}.page-footer button{font-size:12px}
.sheet{border-radius:24px 24px 0 0}
.sheet-header h2{font-size:22px;line-height:1.25}.kicker{font-size:11px;line-height:1.25}.close-button{width:40px;height:40px}
.editor-preview p{font-size:12px;line-height:1.55}.editor-tab{font-size:13px;line-height:1.25}
.panel-hint{font-size:12px;line-height:1.55}.expression-option{border-radius:10px}.expression-option small{font-size:11px;line-height:1.25}
.primary-action,.secondary-action{font-size:13px;line-height:1.25;border-radius:10px}.capture-note{font-size:11px;line-height:1.55}.save-button{height:46px;border-radius:14px;font-size:13px}
.select-label{font-size:12px;line-height:1.55}.voice-select{font-size:13px;border-radius:10px}.recorder{font-size:13px;border-radius:10px}.talent-options button{border-radius:14px}.talent-options button strong{font-size:13px}.talent-options button small{font-size:11px;line-height:1.55}
.donation-copy{font-size:13px;line-height:1.55}.payment-list button{border-radius:14px}.payment-list strong{font-size:12px}.payment-list small{font-size:11px;line-height:1.55}.skip-donation{font-size:12px}

/* UI-2: 统一可点击元素的硬阴影与清晰按压反馈 */
.quiet-button,.share-button,.interaction-button,.talent-button,.message-button,.donate-button,.primary-action,.secondary-action,.save-button,.expression-option,.talent-options button,.payment-list button{box-shadow:0 3px 0 #d7cdc2;transition:transform .08s ease-out,box-shadow .08s ease-out,background-color .08s ease-out}
.donate-button{box-shadow:0 4px 0 #d2a13a}
.quiet-button:active,.share-button:active,.interaction-button:active,.talent-button:active,.message-button:active,.donate-button:active,.primary-action:active,.secondary-action:active,.save-button:active,.expression-option:active,.talent-options button:active,.payment-list button:active{transform:scale(.985);box-shadow:0 0 0 transparent}
.donate-button:active{transform:scale(.985)}
.sheet{box-shadow:0 -20px 52px rgba(42,31,23,.18)}
.toast{box-shadow:0 14px 34px rgba(42,31,23,.2)}

/* UI-3: 主视觉尺寸随手机宽高变化，360px 到 480px 均保持舒展 */
.app-shell .character-stage{width:calc(100% - 26px);height:clamp(360px,62svh,620px);min-height:360px;aspect-ratio:auto;border-radius:22px}
.app-shell .character{width:clamp(148px,42vw,208px);height:auto;aspect-ratio:176 / 344}
.app-shell .character-caption{font-size:13px;line-height:1.55;color:#7a7168;border-radius:999px}

/* UI-4: 空闲时轻呼吸；互动类名出现时由对应动作接管 animation */
.app-shell .photo-scene:not(.photo-tap):not(.photo-action-poke):not(.photo-action-pat):not(.photo-action-feed):not(.photo-action-sleep){animation:ui-idle-breathe 3.6s ease-in-out infinite}
@keyframes ui-idle-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}

/* UI-5: 后加载的角色样式表不覆盖主舞台圆角与手机尺寸 */
@media(max-width:360px){.app-shell .character-stage{width:calc(100% - 26px);height:clamp(340px,58svh,520px);min-height:340px;aspect-ratio:auto}.app-shell .character{width:clamp(148px,42vw,176px)}}

/* UI-6: 手机首屏模式，保留全部入口并让投币按钮落在第一屏 */
@media (max-width:520px) and (max-height:900px){
  .app-shell .character-stage{height:clamp(360px,50svh,480px);min-height:0;margin-top:8px}
  .controls{padding:8px 13px 0}
  .interaction-row{gap:6px}
  .interaction-button{min-height:58px}
  .talent-button{min-height:54px;margin-top:7px;padding:6px 10px}
  .message-button{min-height:48px;margin-top:6px;padding:6px 10px}
  .donate-button{height:48px;margin-top:6px}
  .page-footer{padding:10px 0 4px}
}

/* UI-7: 按钮即时反馈，点击位置有轻波纹，连续操作不拖沓 */
button.pressable{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1),background-color .14s ease,filter .14s ease;
  -webkit-tap-highlight-color:transparent;
}
button.pressable::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.42),transparent 44%);
  transition:opacity .14s ease;
  z-index:-1;
}
button.pressable:active{
  transform:scale(.985);
  filter:saturate(1.06) brightness(.985);
}
button.pressable:active::after{opacity:1}
button.pressable:focus-visible{outline:3px solid rgba(228,134,114,.38);outline-offset:3px}
.button-ripple{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,255,255,.48);
  transform:scale(0);
  animation:button-ripple .42s cubic-bezier(.2,.8,.2,1) forwards;
}
button.pressable>*{position:relative;z-index:1}
.interaction-button:active .action-symbol,.talent-button:active .talent-mark,.message-button:active>span:first-child,.donate-button:active b{
  animation:button-icon-pop .24s cubic-bezier(.2,.9,.3,1) both;
}
.quiet-button:active,.share-button:active{transform:scale(.98)}
.close-button:active,.skip-donation:active{transform:scale(.97)}
@keyframes button-ripple{to{transform:scale(1);opacity:0}}
@keyframes button-icon-pop{0%{transform:scale(1)}45%{transform:scale(1.2) rotate(-4deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  button.pressable,.button-ripple{transition:none;animation:none!important}
  button.pressable:active{transform:none}
}