@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap";:root{--red-primary: #DC2626;--red-dark: #991B1B;--red-light: #FEE2E2;--gold-primary: #F59E0B;--gold-dark: #B45309;--gold-light: #FEF3C7;--bg-dark: #1C1917;--bg-warm: #292524;--text-light: #FAFAF9;--text-gold: #FCD34D;--success: #22C55E;--error: #EF4444}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg-dark);color:var(--text-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;justify-content:center;align-items:center}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #f59e0b4d}50%{box-shadow:0 0 40px #f59e0b99}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes firework{0%{transform:scale(0);opacity:1}50%{opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes gallop{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-8px) rotate(2deg)}}@keyframes run-across{0%{transform:translate(-100px)}to{transform:translate(calc(100vw + 100px))}}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes rapBeat{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes textGlow{0%,to{text-shadow:0 0 10px rgba(252,211,77,.5)}50%{text-shadow:0 0 20px rgba(252,211,77,.8),0 0 40px rgba(245,158,11,.4)}}.game-container{width:100%;max-width:480px;height:100vh;max-height:100dvh;position:relative;overflow:hidden;background:linear-gradient(180deg,#1c1917,#292524,#1c1917)}.sound-toggle{position:fixed;bottom:24px;left:16px;z-index:300;display:flex;align-items:center;gap:6px;background:#1c1917d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(245,158,11,.25);border-radius:50px;padding:8px 12px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 12px #0000004d}.sound-toggle:hover{border-color:var(--gold-primary);transform:scale(1.05)}.sound-toggle.on{border-color:#f59e0b66}.sound-toggle.animating{animation:bounceIn .3s ease}.sound-icon{font-size:20px;line-height:1}.sound-hint{font-size:11px;color:#fafaf980}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.particle{position:absolute;font-size:20px;animation:float 3s ease-in-out infinite;opacity:.6}.game-content{height:100%;overflow-y:auto;position:relative;z-index:1;padding:20px}.start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 24px;text-align:center;position:relative;z-index:1;background:radial-gradient(ellipse at center top,rgba(220,38,38,.15) 0%,transparent 60%),radial-gradient(ellipse at center bottom,rgba(245,158,11,.1) 0%,transparent 60%)}.hero-card{width:100%;border-radius:20px;position:relative;overflow:hidden;border:2px solid rgba(245,158,11,.4);margin-bottom:16px;box-shadow:0 8px 32px #dc26264d,0 0 0 1px #f59e0b1a}.hero-card-bg{display:block;width:100%;height:220px;object-fit:cover;object-position:center center;transition:opacity .25s ease}.hero-card-bg.fading{opacity:0}.hero-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#00000026,#0000001a 20%,#00000040 50%,#1c1917d9 85%,#1c1917f2)}.hero-card-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 20px 20px}.hero-lanterns{display:flex;gap:30px;margin-bottom:6px}.hero-lanterns .lantern{font-size:32px}.hero-title{font-family:"Noto Serif SC",serif;font-size:40px;font-weight:900;background:linear-gradient(135deg,var(--gold-primary),#FCD34D,var(--gold-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;margin-bottom:2px;text-shadow:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}.hero-subtitle{font-size:13px;color:#fafaf9b3;letter-spacing:1px}.photo-marquee-wrapper{width:calc(100% + 48px);margin:0 -24px 16px;overflow:hidden;position:relative;mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}.photo-marquee{display:flex;gap:10px;width:max-content;animation:marqueeScroll 40s linear infinite}.photo-marquee-wrapper:hover .photo-marquee{animation-play-state:paused}.marquee-photo{width:90px;height:65px;object-fit:cover;border-radius:8px;border:2px solid transparent;flex-shrink:0;opacity:.7;transition:all .25s ease;cursor:pointer}.marquee-photo:hover{opacity:1;transform:scale(1.08)}.marquee-photo.active{opacity:1;border-color:var(--gold-primary);box-shadow:0 0 12px #f59e0b66;transform:scale(1.05)}@keyframes marqueeScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.lanterns{display:flex;gap:40px;margin-bottom:12px}.lantern{font-size:48px;animation:float 2s ease-in-out infinite}.lantern:nth-child(2){animation-delay:.5s}.title{font-family:"Noto Serif SC",serif;font-size:42px;font-weight:900;background:linear-gradient(135deg,var(--gold-primary),#FCD34D,var(--gold-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;animation:textGlow 2s ease-in-out infinite;line-height:1.3}.subtitle{font-size:14px;color:var(--gold-light);opacity:.6;margin-bottom:16px}.mascot-row{display:flex;gap:12px;margin-bottom:16px}.mascot-bounce{font-size:40px;animation:gallop 1.5s ease-in-out infinite}.year-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--red-primary),var(--red-dark));padding:8px 20px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:16px;border:2px solid rgba(245,158,11,.3)}.start-features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}.feature{padding:4px 12px;background:#f59e0b1a;border-radius:6px;color:var(--text-gold);font-size:13px;font-weight:500}.top-score-badge{font-size:13px;color:var(--gold-primary);margin-bottom:20px;background:#f59e0b14;padding:6px 16px;border-radius:20px}.start-btn{padding:16px 52px;font-size:22px;font-weight:700;font-family:"Noto Serif SC",serif;border:none;border-radius:60px;cursor:pointer;background:linear-gradient(135deg,var(--red-primary),#B91C1C);color:var(--text-light);box-shadow:0 4px 20px #dc262666;transition:all .3s ease;animation:pulse-glow 2s ease-in-out infinite}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px #dc262699}.rap-recorder-page{display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,#0f0d0c,#1c1917 40%,#292524);margin:-20px;padding:0}.recorder-progress{width:100%;height:4px;background:#ffffff14;flex-shrink:0}.recorder-progress-fill{height:100%;background:linear-gradient(90deg,var(--red-primary),var(--gold-primary));transition:width .1s linear}.countdown-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:210;background:#0f0d0cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.countdown-number{font-family:"Noto Serif SC",serif;font-size:120px;font-weight:900;color:var(--text-gold);animation:bounceIn .5s ease;text-shadow:0 0 60px rgba(245,158,11,.5)}.countdown-label{font-size:18px;color:#fafaf999;margin-top:8px}.lyrics-panel{flex:1;overflow-y:auto;padding:24px 20px;scroll-behavior:smooth;mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%)}.timed-lyric{font-size:20px;line-height:1.6;padding:10px 16px;margin:4px 0;border-radius:12px;color:#fafaf94d;transition:all .3s ease;transform:scale(.95)}.timed-lyric.title{font-size:13px;font-weight:700;color:#f59e0b4d;letter-spacing:2px;margin-top:16px;padding:6px 16px}.timed-lyric.chorus{text-align:center;font-style:italic}.timed-lyric.active{color:var(--text-gold);font-weight:700;font-size:22px;background:#f59e0b14;border-left:4px solid var(--gold-primary);transform:scale(1);text-shadow:0 0 20px rgba(245,158,11,.3);animation:rapBeat .667s ease-in-out infinite}.timed-lyric.active.title{font-size:14px;color:var(--gold-primary)}.timed-lyric.past{color:#fafaf980;transform:scale(.95)}.live-score-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 20px;flex-shrink:0}.live-score-label{font-size:13px;color:#fafaf980;font-weight:600}.live-score-value{font-family:"Noto Serif SC",serif;font-size:28px;font-weight:900;color:var(--text-gold);min-width:40px;text-align:center;transition:all .3s ease}.line-rating-badge{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:800;z-index:100;padding:8px 24px;border-radius:50px;animation:ratingPopIn .8s ease forwards;pointer-events:none;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.5)}.line-rating-badge.rating-perfect{color:#fcd34d;background:#f59e0b33;border:2px solid rgba(245,158,11,.4)}.line-rating-badge.rating-great{color:#fb923c;background:#fb923c26;border:2px solid rgba(251,146,60,.3)}.line-rating-badge.rating-good{color:#60a5fa;background:#60a5fa26;border:2px solid rgba(96,165,250,.3)}.line-rating-badge.rating-miss{color:#fafaf966;background:#ffffff0d;border:2px solid rgba(255,255,255,.1)}@keyframes ratingPopIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}40%{transform:translate(-50%,-50%) scale(1)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}.audio-visualizer{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:48px;padding:0 24px 8px;flex-shrink:0}.viz-bar{width:100%;max-width:12px;min-height:4px;background:linear-gradient(180deg,var(--gold-primary),var(--red-primary));border-radius:2px 2px 0 0;transition:height .08s ease;opacity:.8}.recorder-controls{flex-shrink:0;padding:16px 24px 32px;background:linear-gradient(180deg,transparent,rgba(15,13,12,.95))}.controls-center{display:flex;flex-direction:column;align-items:center;gap:12px}.controls-row{display:flex;gap:12px}.mic-warning{font-size:13px;color:var(--gold-primary);background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);border-radius:10px;padding:10px 16px;text-align:center}.rec-btn{padding:14px 32px;font-size:17px;font-weight:700;border:none;border-radius:50px;cursor:pointer;font-family:Noto Sans SC,sans-serif;transition:all .3s ease;display:flex;align-items:center;gap:8px}.rec-btn.start{background:linear-gradient(135deg,var(--red-primary),#B91C1C);color:#fff;box-shadow:0 4px 20px #dc262666;padding:16px 40px;font-size:19px}.rec-btn.stop{background:#ef444433;border:2px solid var(--error);color:var(--error)}.rec-btn.play{background:linear-gradient(135deg,var(--gold-primary),var(--gold-dark));color:var(--bg-dark)}.rec-btn.rerecord{background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:var(--text-light)}.rec-btn.done{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;width:100%;justify-content:center;box-shadow:0 4px 20px #22c55e4d}.rec-btn:hover{transform:translateY(-2px)}.rec-hint{font-size:13px;color:#fafaf966;text-align:center}.recording-indicator{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--error);font-weight:600}.recording-indicator.playback{color:var(--gold-primary)}.rec-dot{width:10px;height:10px;background:var(--error);border-radius:50%;animation:recPulse 1s ease-in-out infinite}.rec-icon{display:inline-block;width:14px;height:14px;background:#fff;border-radius:50%}@keyframes recPulse{0%,to{opacity:1}50%{opacity:.3}}.result-screen{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:24px;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.score-card{width:100%;background:linear-gradient(135deg,var(--red-primary),#9F1239);border:2px solid var(--gold-primary);border-radius:20px;padding:20px 16px;text-align:center;position:relative;overflow:hidden;box-shadow:0 6px 24px #dc26264d}.score-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0}.score-card-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#00000059,#0003,#00000040 60%,#00000080)}.score-card:before{content:"RAP";position:absolute;font-size:120px;font-family:"Noto Serif SC",serif;font-weight:900;color:#ffffff0a;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-10deg);z-index:1}.score-emoji{font-size:36px;position:relative;z-index:1;animation:bounceIn .5s ease}.score-number{font-family:"Noto Serif SC",serif;font-size:72px;font-weight:900;color:var(--text-gold);position:relative;z-index:1;line-height:1;animation:textGlow 2s ease-in-out infinite}.score-unit{font-size:18px;color:#fff9;position:relative;z-index:1;margin-top:-4px}.score-rank{font-family:"Noto Serif SC",serif;font-size:22px;font-weight:700;color:#fcd34d;margin-top:8px;position:relative;z-index:1;animation:bounceIn .4s ease .2s both}.score-blessing{font-size:13px;color:#ffffffbf;margin-top:8px;position:relative;z-index:1;line-height:1.5;animation:bounceIn .4s ease .4s both}.save-section{display:flex;gap:8px;width:100%;max-width:100%;box-sizing:border-box}.name-input{flex:1;min-width:0;padding:10px 14px;border-radius:14px;border:2px solid rgba(245,158,11,.25);background:#292524cc;color:var(--text-light);font-size:16px;font-family:Noto Sans SC,sans-serif;outline:none;transition:border-color .3s;box-sizing:border-box}.name-input:focus{border-color:var(--gold-primary)}.name-input::placeholder{color:#fafaf94d}.save-btn{padding:10px 18px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--gold-primary),var(--gold-dark));color:var(--bg-dark);font-size:15px;font-weight:700;cursor:pointer;font-family:Noto Sans SC,sans-serif;transition:all .3s;white-space:nowrap;flex-shrink:0;box-sizing:border-box}.save-btn:disabled{opacity:.4;cursor:not-allowed}.save-btn:hover:not(:disabled){transform:translateY(-2px)}.saved-hint{font-size:14px;color:var(--success);font-weight:600}.save-error{font-size:13px;color:var(--error);margin-top:4px;width:100%;text-align:center}.leaderboard{width:100%;background:linear-gradient(135deg,#292524e6,#1c1917e6);border:1px solid rgba(245,158,11,.15);border-radius:16px;padding:14px;overflow:hidden}.lb-title{font-family:"Noto Serif SC",serif;font-size:15px;color:var(--text-gold);text-align:center;margin-bottom:8px}.lb-empty{text-align:center;font-size:13px;color:#fafaf966;padding:8px 0}.lb-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;transition:background .3s}.lb-row:nth-child(2n){background:#ffffff05}.lb-row.highlight{background:#f59e0b1a;border:1px solid rgba(245,158,11,.2)}.lb-rank{width:28px;text-align:center;font-size:16px;font-weight:700;color:var(--text-gold)}.lb-name{flex:1;font-size:14px;color:var(--text-light);font-weight:500}.lb-score{font-size:15px;font-weight:700;color:var(--text-gold);min-width:40px;text-align:right}.result-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;justify-content:center}.action-btn{padding:12px 24px;font-size:15px;font-weight:700;border:none;border-radius:50px;cursor:pointer;font-family:Noto Sans SC,sans-serif;transition:all .3s}.action-btn.primary{background:linear-gradient(135deg,var(--red-primary),#B91C1C);color:#fff;box-shadow:0 4px 15px #dc26264d}.action-btn.poster{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;box-shadow:0 4px 15px #7c3aed4d}.action-btn.poster:disabled{opacity:.5;cursor:not-allowed}.action-btn.share{background:linear-gradient(135deg,var(--gold-primary),var(--gold-dark));color:var(--bg-dark);box-shadow:0 4px 15px #f59e0b4d;width:100%}.action-btn:hover{transform:translateY(-2px)}.result-blessing{font-size:14px;color:#fafaf966;text-align:center;margin-top:8px}.poster-modal{position:fixed;inset:0;z-index:500;background:#000000d9;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}.poster-content{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:90vw;max-height:90vh;padding:16px}.poster-image{max-width:100%;max-height:65vh;border-radius:12px;box-shadow:0 8px 40px #00000080;object-fit:contain}.poster-tips{font-size:15px;color:var(--gold-primary);font-weight:600;text-align:center;background:#f59e0b1a;padding:10px 20px;border-radius:50px;border:1px solid rgba(245,158,11,.2);animation:pulse-glow 2s ease-in-out infinite}.poster-actions{display:flex;gap:12px}.poster-btn{padding:10px 24px;font-size:14px;font-weight:700;border:none;border-radius:50px;cursor:pointer;font-family:Noto Sans SC,sans-serif;transition:all .3s}.poster-btn.download{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.poster-btn.close{background:#ffffff1a;color:#ffffffb3;border:1px solid rgba(255,255,255,.2)}.poster-btn:hover{transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes textGlow{0%,to{text-shadow:0 0 8px rgba(252,211,77,.4)}50%{text-shadow:0 0 20px rgba(252,211,77,.8),0 0 40px rgba(252,211,77,.3)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.5) translateY(10px)}60%{opacity:1;transform:scale(1.05) translateY(-3px)}to{opacity:1;transform:scale(1) translateY(0)}}