:root{--page-bg:#f5ede2;--page-bg-deep:#efe0cf;--text-main:#2f241d;--muted-text:#6f5a49;--accent-strong:#9d4d26;--font-body:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-heading:"STZhongsong", "Songti SC", "Noto Serif SC", serif;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{background:radial-gradient(circle at top left, #ffaa683d 0%, #ffaa6800 34%), radial-gradient(circle at right 15% top 20%, #458d8024 0%, #458d8000 28%), linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-deep) 100%)}body{min-width:320px;color:var(--text-main);font-family:var(--font-body);background:0 0;margin:0}body:before{content:"";pointer-events:none;opacity:.5;background-image:linear-gradient(#755d4808 1px,#0000 1px),linear-gradient(90deg,#755d4808 1px,#0000 1px);background-size:26px 26px;position:fixed;inset:0}button,input{font:inherit}#root{width:min(1180px,100% - 32px);margin:0 auto;padding:28px 0 40px;position:relative}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-heading);color:var(--text-main)}h1{letter-spacing:-.04em;margin-top:14px;font-size:clamp(2.5rem,4vw,4.4rem);line-height:1.05}h2{font-size:clamp(1.45rem,2vw,2rem);line-height:1.15}p{line-height:1.7}@media (width<=640px){#root{width:min(100% - 20px,1180px);padding-top:16px}}.page{flex-direction:column;gap:28px;display:flex;position:relative}.page-glow{filter:blur(12px);opacity:.32;pointer-events:none;z-index:0;border-radius:50%;width:360px;height:360px;position:fixed}.page-glow-left{background:radial-gradient(circle,#ff904d8c 0%,#ff904d00 70%);top:60px;left:-120px}.page-glow-right{background:radial-gradient(circle,#59a49466 0%,#59a49400 70%);top:240px;right:-120px}.hero-card,.card,.feed-section{z-index:1;position:relative}.hero-card{background:linear-gradient(135deg,#fffbf6f5 0%,#fef3e7e0 100%);border:1px solid #6a503e1f;border-radius:28px;grid-template-columns:minmax(0,1.8fr) minmax(260px,.9fr);gap:24px;padding:32px;display:grid;box-shadow:0 24px 48px #5f4c3e1a}.eyebrow,.section-tag{width:fit-content;color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;background:#7a5c461a;border-radius:999px;align-items:center;padding:6px 10px;font-size:.78rem;display:inline-flex}.hero-copy{max-width:640px;color:var(--muted-text);font-size:1.03rem}.hero-actions{align-content:start;gap:18px;display:grid}.hero-stats{gap:14px;display:grid}.hero-stats div{background:#ffffff94;border:1px solid #7e664f1f;border-radius:20px;gap:4px;padding:18px 18px 16px;display:grid}.hero-stats strong{color:var(--text-main);font-size:2rem;line-height:1}.hero-stats span{color:var(--muted-text);font-size:.95rem}.content-grid{z-index:1;grid-template-columns:1fr;gap:24px;display:grid;position:relative}.card,.feed-section{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffdf9e6;border:1px solid #6a503e1a;border-radius:26px;padding:28px;box-shadow:0 18px 36px #5f4c3e14}.section-heading,.feed-header{justify-content:space-between;align-items:start;gap:16px;display:flex}.section-heading p{color:var(--muted-text);margin:0}.composer-form{gap:20px;margin-top:22px;display:grid}.field{gap:10px;display:grid}.field span{color:var(--text-main);font-weight:600}.field input{width:100%;color:var(--text-main);background:#fffc;border:1px solid #795f492e;border-radius:18px;padding:16px 18px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.field input:focus{border-color:#c7683399;outline:none;box-shadow:0 0 0 4px #c768331f}.recorder-panel{background:linear-gradient(135deg,#f8f0e6f2 0%,#f6faf7e6 100%);border:1px solid #755e4814;border-radius:22px;gap:12px;padding:18px;display:grid}.recorder-actions{flex-wrap:wrap;gap:12px;display:flex}.primary-button,.secondary-button,.submit-button,.refresh-button,.danger-button,.text-button{cursor:pointer;border:none;transition:transform .18s,box-shadow .18s,opacity .18s}.primary-button,.secondary-button,.submit-button,.refresh-button,.danger-button{border-radius:16px;justify-content:center;align-items:center;min-height:48px;padding:0 18px;font-size:.98rem;font-weight:600;display:inline-flex}.primary-button{color:#fffdf9;background:linear-gradient(135deg,#d66b36 0%,#bf4e29 100%);box-shadow:0 14px 26px #bf4e293d}.primary-button.recording{background:linear-gradient(135deg,#c94949 0%,#9e2a2b 100%)}.secondary-button,.refresh-button{color:var(--text-main);background:#ffffffc7;border:1px solid #795f4929}.danger-button{color:#fff6ee;background:linear-gradient(135deg,#861515 0%,#d4421f 56%,#f59f2c 100%);width:100%;box-shadow:0 18px 34px #a32a1747}.submit-button{color:#f8fffc;background:linear-gradient(135deg,#2f7f75 0%,#235f5a 100%);width:100%;box-shadow:0 14px 28px #235f5a33}.submit-button:disabled{opacity:.72;cursor:not-allowed;box-shadow:none}.primary-button:hover,.secondary-button:hover,.submit-button:hover,.refresh-button:hover,.danger-button:hover,.text-button:hover{transform:translateY(-1px)}.secondary-button input{display:none}.recorder-meta{color:var(--muted-text);flex-wrap:wrap;gap:10px 18px;font-size:.92rem;display:flex}.preview-card{background:#fffc;border:1px dashed #795f4938;border-radius:22px;gap:14px;padding:18px;display:grid}.preview-header{justify-content:space-between;gap:16px;display:flex}.preview-header div{gap:4px;display:grid}.preview-header strong{color:var(--text-main)}.preview-header span{color:var(--muted-text)}.text-button{color:var(--accent-strong);background:0 0;padding:0;font-weight:600}.feedback{border-radius:16px;margin:0;padding:14px 16px;font-size:.95rem}.feedback-error{color:#8e2d2d;background:#c949491a}.feedback-success{color:#1f6058;background:#2f7f751f}.feed-section{z-index:1;gap:22px;display:grid;position:relative}.message-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;display:grid}.message-card{background:linear-gradient(#ffffffe0 0%,#f8f1eae0 100%);border:1px solid #795f491a;border-radius:22px;gap:14px;padding:18px;display:grid}.message-head{gap:6px;display:grid}.message-head h3{color:var(--text-main);margin:0;font-size:1.15rem}.message-head span,.message-meta{color:var(--muted-text);font-size:.92rem}.empty-state{min-height:180px;color:var(--muted-text);background:#f8f0e6a6;border:1px dashed #795f492e;border-radius:22px;place-items:center;display:grid}audio{width:100%}.battle-page{gap:24px}.battle-header,.battle-card{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #6a503e1f;border-radius:28px;padding:28px;position:relative;box-shadow:0 22px 42px #5f4c3e1f}.battle-header{background:radial-gradient(circle at 0 0,#fcb93f38 0%,#fcb93f00 32%),linear-gradient(145deg,#fff8eff5 0%,#fbe8d6e0 100%);grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr);gap:24px;display:grid}.battle-copy{max-width:620px;color:var(--muted-text);margin-top:14px}.battle-stats{align-content:start;gap:16px;display:grid}.battle-stat-card{background:#ffffffb3;border:1px solid #805d441f;border-radius:22px;gap:4px;padding:18px;display:grid}.battle-stat-card strong{font-size:2.2rem;line-height:1}.battle-stat-card span{color:var(--muted-text)}.battle-back-button{width:100%}.battle-card{background:radial-gradient(circle at top,#df4a2f1f 0%,#df4a2f00 28%),#fffcf8eb;gap:18px;display:grid}.battle-stage{cursor:crosshair;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at top,#ffba7838 0%,#ffba7800 28%),linear-gradient(#fff5ebfa 0%,#f5e0d0f5 100%);border:1px solid #795f4924;border-radius:26px;min-height:min(70vh,760px);position:relative;overflow:hidden}.battle-stage:focus-visible{outline-offset:4px;outline:3px solid #d4421f4d}.battle-stage.is-shaking{animation:.32s photo-shake}.battle-photo{object-fit:contain;width:100%;height:min(70vh,760px);display:block}.battle-overlay{pointer-events:none;position:absolute;inset:0}.hit-effect{--hit-rotation:0deg;width:130px;height:130px;transform:translate(-50%, -50%) rotate(var(--hit-rotation));animation:.65s ease-out forwards hit-pop;position:absolute}.hit-burst{background:radial-gradient(circle,#fff6d4fa 0 24%,#ffa449eb 25% 44%,#c8261738 45% 100%);border-radius:50%;position:absolute;inset:20px;box-shadow:0 0 0 12px #ffa94b24,0 0 38px #ce441f4d}.hit-burst:before,.hit-burst:after{content:"";border:4px dashed #921c0e47;border-radius:50%;position:absolute;inset:-10px}.hit-burst:after{opacity:.55;border-style:solid;border-width:2px;inset:10px}.hit-label{color:#7f160d;font-family:var(--font-heading);text-shadow:0 2px #fff4e2e6;font-size:1.45rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.battle-toolbar{gap:14px;display:grid}.battle-toolbar p{color:var(--muted-text)}.battle-thumbs{flex-wrap:wrap;gap:14px;display:flex}.thumb-button{width:140px;color:var(--text-main);cursor:pointer;background:#ffffffd6;border:1px solid #795f4929;border-radius:18px;gap:8px;padding:10px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid}.thumb-button:hover{transform:translateY(-2px)}.thumb-button.active{border-color:#d4421f80;box-shadow:0 12px 24px #d4421f24}.thumb-button img{aspect-ratio:1;object-fit:cover;border-radius:14px;width:100%}.thumb-button span{font-size:.92rem;font-weight:600}@keyframes photo-shake{0%,to{transform:translate(0)scale(1)}20%{transform:translate(-8px)rotate(-.8deg)scale(1.01)}40%{transform:translate(10px)rotate(1deg)scale(1.02)}60%{transform:translate(-7px)rotate(-.6deg)scale(1.01)}80%{transform:translate(8px)rotate(.6deg)scale(1.01)}}@keyframes hit-pop{0%{opacity:0;transform:translate(-50%, -50%) scale(.35) rotate(var(--hit-rotation))}18%{opacity:1;transform:translate(-50%, -50%) scale(1.05) rotate(var(--hit-rotation))}to{opacity:0;transform:translate(-50%, -50%) scale(1.35) rotate(calc(var(--hit-rotation) + 4deg))}}@media (width<=960px){.hero-card,.content-grid,.battle-header{grid-template-columns:1fr}.feed-header,.section-heading{flex-direction:column}}@media (width<=640px){.hero-card,.card,.feed-section,.battle-header,.battle-card{border-radius:22px;padding:20px}.recorder-actions,.recorder-meta,.preview-header,.battle-thumbs{flex-direction:column}.hero-stats strong{font-size:1.6rem}.thumb-button{width:100%}.battle-stage,.battle-photo{height:56vh;min-height:56vh}}