:root{color:#f8fafc;background:#0a3d23;--display-font: "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", ui-rounded, system-ui, sans-serif;--body-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", ui-sans-serif, system-ui, sans-serif;font-family:var(--body-font);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 14% 10%,rgba(254,240,138,.28),transparent 26%),radial-gradient(circle at 88% 22%,rgba(244,114,182,.22),transparent 25%),radial-gradient(circle at 18% 86%,rgba(186,230,253,.18),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.035) 0 10%,transparent 10% 20%,rgba(255,255,255,.035) 20% 30%,transparent 30% 40%,rgba(255,255,255,.035) 40% 50%,transparent 50% 60%,rgba(255,255,255,.035) 60% 70%,transparent 70% 80%,rgba(255,255,255,.035) 80% 90%,transparent 90%),linear-gradient(135deg,#0b6b3c,#0e8a4f 42%,#075431)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 0 95px,rgba(255,255,255,.18) 96px 99px,transparent 100px),linear-gradient(90deg,transparent calc(50% - 2px),rgba(255,255,255,.18) calc(50% - 2px),rgba(255,255,255,.18) calc(50% + 2px),transparent calc(50% + 2px)),linear-gradient(rgba(255,255,255,.08) 2px,transparent 2px) 0 0 / 100% 25vh;opacity:.85}button,a{font:inherit}button{border:0;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.shell{position:relative;z-index:1;width:min(100%,540px);min-height:100svh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom))}.home-shell,.quiz-shell,.loading-shell{display:grid;align-items:center}.result-shell{padding-bottom:32px}.hero-panel,.quiz-card,.loading-card,.poster,.poster-preview{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:#04301ce0;box-shadow:0 30px 90px #001c0c7a}.hero-panel,.quiz-card,.loading-card{min-height:calc(100svh - 48px)}.hero-panel{display:flex;flex-direction:column;justify-content:center;padding:34px 22px;background:radial-gradient(circle at 84% 18%,rgba(254,240,138,.34),transparent 30%),radial-gradient(circle at 12% 88%,rgba(244,114,182,.18),transparent 30%),radial-gradient(circle at 72% 78%,rgba(186,230,253,.14),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.045) 0 12%,transparent 12% 24%,rgba(255,255,255,.045) 24% 36%,transparent 36% 48%,rgba(255,255,255,.045) 48% 60%,transparent 60% 72%,rgba(255,255,255,.045) 72% 84%,transparent 84%),#074d2e}.hero-panel:before,.quiz-card:before,.loading-card:before,.poster:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(0deg,transparent 0 9%,rgba(255,255,255,.12) 9% 9.4%,transparent 9.4% 90.6%,rgba(255,255,255,.12) 90.6% 91%,transparent 91%),linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.12) 8% 8.5%,transparent 8.5% 91.5%,rgba(255,255,255,.12) 91.5% 92%,transparent 92%),linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.11) calc(50% - 1px),rgba(255,255,255,.11) calc(50% + 1px),transparent calc(50% + 1px)),radial-gradient(circle at 50% 52%,transparent 0 112px,rgba(255,255,255,.08) 113px 115px,transparent 116px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0 / 28px 28px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%)}.football-deco{position:absolute;z-index:0;pointer-events:none}.ball-one,.quiz-ball{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#111827 0 15%,transparent 16%),conic-gradient(from 18deg,#111827 0,#111827 18deg,#f8fafc 18deg,#f8fafc 72deg,#111827 72deg,#111827 90deg,#f8fafc 90deg,#f8fafc 162deg,#111827 162deg,#111827 180deg,#f8fafc 180deg,#f8fafc 252deg,#111827 252deg,#111827 270deg,#f8fafc 270deg,#f8fafc 342deg,#111827 342deg,#111827 360deg);border:5px solid #f8fafc;box-shadow:0 20px 42px #00000061;opacity:.92}.ball-one{right:-18px;bottom:96px;transform:rotate(-17deg)}.quiz-ball{right:-34px;top:128px;width:86px;height:86px;opacity:.28}.card-red,.card-yellow{width:42px;height:64px;border-radius:8px;box-shadow:0 16px 28px #00000052}.card-red{right:38px;top:70px;background:#ef4444;transform:rotate(11deg)}.card-yellow{right:82px;top:82px;background:#facc15;transform:rotate(-8deg)}.pitch-label{position:absolute;z-index:0;left:22px;bottom:88px;color:#ffffff17;font-family:var(--display-font);font-size:clamp(54px,18vw,92px);font-weight:950;line-height:.85;transform:rotate(-7deg)}.score-bug{position:relative;z-index:1;width:fit-content;display:flex;align-items:stretch;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#020617;box-shadow:0 14px 30px #00000052}.score-bug span,.score-bug b{display:block;padding:9px 13px;font-family:var(--display-font);font-size:13px;letter-spacing:0}.score-bug span{color:#020617;background:#fef08a;font-weight:950}.score-bug b{color:#f8fafc}.kicker,.quiz-topline,.poster-top{position:relative;z-index:1;color:#bef264;font-family:var(--display-font);font-size:12px;font-weight:900;letter-spacing:0;text-transform:uppercase}.kicker{margin-top:28px}.hero-panel h1{position:relative;z-index:1;max-width:6em;margin:12px 0 8px;color:#fff;font-family:var(--display-font);font-size:clamp(58px,17vw,92px);font-weight:900;line-height:.94;letter-spacing:0}.hero-subtitle{position:relative;z-index:1;margin:0 0 14px;color:#fde68a;font-family:var(--display-font);font-size:clamp(24px,7vw,38px);font-weight:850;line-height:1.12}.lead{position:relative;z-index:1;max-width:22em;margin:0 0 30px;color:#d1fae5;font-size:18px;font-weight:500;line-height:1.55}.primary-button,.ghost-button,.option-button,.download-link{position:relative;z-index:1;min-height:48px;border-radius:8px;font-family:var(--display-font);font-weight:850;text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}.primary-button{width:100%;min-height:58px;padding:16px 18px;background:linear-gradient(135deg,#fef08a,#f9a8d4);color:#111827;font-size:18px;box-shadow:0 12px #854d0e}.primary-button:active{transform:translateY(2px)}.mini-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:28px}.mini-stats span{min-height:54px;display:grid;place-items:center;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff0f;color:#fef08a;font-size:12px;font-weight:900;text-align:center}.quiz-card{padding:22px 16px}.quiz-topline,.poster-top{display:flex;justify-content:space-between;gap:12px}.quiz-scoreboard{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:14px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#03180d;color:#f8fafc;font-family:var(--display-font);box-shadow:inset 0 -2px #ffffff14}.quiz-scoreboard b,.quiz-scoreboard i{padding:4px 7px;border-radius:6px;font-size:11px;font-style:normal;font-weight:950}.quiz-scoreboard b{background:#ef4444}.quiz-scoreboard span{color:#bef264;font-size:12px;font-weight:950;text-align:center}.quiz-scoreboard i{background:#facc15;color:#111827}.progress{position:relative;z-index:1;height:8px;margin:16px 0 18px;overflow:hidden;border-radius:999px;background:#ffffff1f}.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#facc15,#ef4444)}.live-chip{position:relative;z-index:1;width:fit-content;margin-bottom:14px;padding:7px 10px;border-radius:8px;background:#ef4444;color:#fff;font-size:12px;font-weight:950}.quiz-card h2{position:relative;z-index:1;min-height:4.6em;margin:0 0 22px;color:#fff;font-family:var(--display-font);font-size:clamp(25px,7vw,35px);font-weight:850;line-height:1.18;letter-spacing:0}.options{position:relative;z-index:1;display:grid;gap:12px}.option-button{min-height:76px;display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg,#ffffff0e,#ffffff09),#03180dc7;color:#f8fafc;text-align:left;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}.option-button span{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(255,255,255,.24);background:#ffffff14;color:#fef08a;font-weight:950}.option-button em{font-style:normal;font-size:15px;font-weight:560;line-height:1.46}.option-button:focus{outline:none}.option-button:disabled{color:#f8fafc;opacity:1}.option-button:focus-visible{border-color:#facc15b8;box-shadow:0 0 0 2px #facc152e}@media(hover:hover)and (pointer:fine){.option-button:hover{border-color:#facc15d1;background:#facc151c}.option-button:active{transform:translateY(2px)}}.option-button.is-selected{border-color:#fef08a;background:linear-gradient(90deg,#fef08a3d,#f9a8d429),#03180de6;box-shadow:0 0 0 2px #fef08a33,0 16px 32px #00000047;transform:translateY(-1px) scale(1.01)}.option-button.is-selected span{border-color:transparent;background:linear-gradient(135deg,#fef08a,#f9a8d4);color:#111827}.options.is-answering .option-button:not(.is-selected){opacity:.48;filter:saturate(.75)}.quiz-footer,.result-actions{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.result-actions{margin-top:14px}.loading-card{display:grid;align-content:center;gap:18px;padding:28px 20px;background:radial-gradient(circle at 72% 18%,rgba(249,168,212,.2),transparent 30%),radial-gradient(circle at 18% 78%,rgba(254,240,138,.22),transparent 32%),linear-gradient(90deg,rgba(255,255,255,.045) 0 12%,transparent 12% 24%,rgba(255,255,255,.045) 24% 36%,transparent 36% 48%,rgba(255,255,255,.045) 48% 60%,transparent 60% 72%,rgba(255,255,255,.045) 72% 84%,transparent 84%),#075431}.loading-score{position:relative;z-index:1;justify-self:start;display:flex;overflow:hidden;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#03180d;font-family:var(--display-font);font-weight:900}.loading-score span,.loading-score b{padding:9px 13px}.loading-score span{background:#fef08a;color:#111827}.loading-score b{color:#f8fafc;animation:scorePulse 1.1s steps(2,end) infinite}.loading-pitch{position:relative;z-index:1;height:168px;border:2px solid rgba(255,255,255,.22);border-radius:8px;background:radial-gradient(circle at 50% 50%,transparent 0 38px,rgba(255,255,255,.2) 39px 41px,transparent 42px),linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.18) calc(50% - 1px),rgba(255,255,255,.18) calc(50% + 1px),transparent calc(50% + 1px)),#ffffff0d;overflow:hidden}.loading-ball{position:absolute;left:24px;top:76px;width:40px;height:40px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 50% 50%,#111827 0 16%,transparent 17%),conic-gradient(from 18deg,#111827 0,#111827 18deg,#fff 18deg,#fff 72deg,#111827 72deg,#111827 90deg,#fff 90deg,#fff 162deg,#111827 162deg,#111827 180deg,#fff 180deg,#fff 252deg,#111827 252deg,#111827 270deg,#fff 270deg,#fff 342deg,#111827 342deg,#111827 360deg);animation:ballScan 2.2s cubic-bezier(.55,.05,.2,1) infinite}.loading-card-yellow,.loading-card-red{position:absolute;width:24px;height:36px;border-radius:5px;right:38px;top:40px;transform-origin:50% 100%;animation:cardFlip 1.1s ease-in-out infinite alternate}.loading-card-yellow{background:#fef08a;right:68px}.loading-card-red{background:#f43f5e;animation-delay:.2s}.loading-kicker,.loading-card h2,.loading-lines{position:relative;z-index:1}.loading-kicker{margin:0;color:#bef264;font-family:var(--display-font);font-size:13px;font-weight:900}.loading-card h2{margin:0;color:#fff;font-family:var(--display-font);font-size:clamp(38px,12vw,58px);line-height:1}.loading-lines{display:grid;gap:9px}.loading-lines span{display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:#ffffff13;color:#f8fafc;font-size:14px;font-weight:650;opacity:0;transform:translateY(8px);animation:lineReveal 2.2s ease-in-out infinite}.loading-lines span:nth-child(2){animation-delay:.22s}.loading-lines span:nth-child(3){animation-delay:.44s}.loading-lines span:nth-child(4){animation-delay:.66s}.result-loading-card .loading-ball{animation-duration:2.5s}.result-loading-lines span{animation:resultLineReveal 5s ease-in-out infinite}.result-loading-lines span:nth-child(2){animation-delay:.55s}.result-loading-lines span:nth-child(3){animation-delay:1.1s}.result-loading-lines span:nth-child(4){animation-delay:1.65s}.result-loading-lines span:nth-child(5){animation-delay:2.2s}.prequiz-card{background:radial-gradient(circle at 50% 16%,rgba(254,240,138,.28),transparent 26%),radial-gradient(circle at 80% 78%,rgba(239,68,68,.18),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.055) 0 12%,transparent 12% 24%,rgba(255,255,255,.055) 24% 36%,transparent 36% 48%,rgba(255,255,255,.055) 48% 60%,transparent 60% 72%,rgba(255,255,255,.055) 72% 84%,transparent 84%),#063d24}.stadium-tunnel{position:relative;z-index:1;height:206px;overflow:hidden;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.18) calc(50% - 1px),rgba(255,255,255,.18) calc(50% + 1px),transparent calc(50% + 1px)),radial-gradient(circle at 50% 58%,transparent 0 44px,rgba(255,255,255,.18) 45px 47px,transparent 48px),linear-gradient(180deg,#03180d,#075431 70%,#0b6b3c)}.stadium-tunnel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(112deg,transparent 0 22%,rgba(254,240,138,.16) 22% 38%,transparent 38%),linear-gradient(68deg,transparent 0 58%,rgba(186,230,253,.13) 58% 74%,transparent 74%),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 54px);animation:tunnelLights 3.6s ease-in-out infinite}.tunnel-light{position:absolute;top:-40px;width:150px;height:290px;background:linear-gradient(180deg,rgba(254,240,138,.34),transparent);filter:blur(2px);transform-origin:top center}.tunnel-light.left{left:80px;transform:rotate(-18deg)}.tunnel-light.right{right:74px;transform:rotate(18deg)}.tunnel-ball{position:absolute;left:28px;bottom:24px;width:42px;height:42px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 50% 50%,#111827 0 16%,transparent 17%),conic-gradient(from 18deg,#111827 0,#111827 18deg,#fff 18deg,#fff 72deg,#111827 72deg,#111827 90deg,#fff 90deg,#fff 162deg,#111827 162deg,#111827 180deg,#fff 180deg,#fff 252deg,#111827 252deg,#111827 270deg,#fff 270deg,#fff 342deg,#111827 342deg,#111827 360deg);box-shadow:0 12px 22px #00000061;animation:tunnelBall 3.6s cubic-bezier(.2,.8,.2,1) infinite}.tunnel-player{position:absolute;bottom:34px;width:52px;height:82px;border-radius:22px 22px 12px 12px;background:linear-gradient(90deg,#ef4444 0,#ef4444 48%,#f8fafc 48%,#f8fafc 55%,#2563eb 55%);box-shadow:0 18px 28px #0000005c;animation:playerMarch 3.6s ease-in-out infinite}.tunnel-player:before{content:"";position:absolute;left:13px;top:-31px;width:27px;height:27px;border-radius:50%;background:#d59b75;box-shadow:0 -9px #111827}.player-one{left:42%}.player-two{left:56%;animation-delay:.24s;background:linear-gradient(90deg,#facc15 0,#facc15 48%,#f8fafc 48%,#f8fafc 55%,#16a34a 55%);transform:scale(.88)}.tunnel-grass{position:absolute;left:0;right:0;bottom:0;height:34px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 22px,transparent 22px 44px),#22c55e47}.ghost-button,.download-link{display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:#ffffff13;color:#e5e7eb;font-size:14px}.poster{width:100%;min-height:calc(100svh - 118px);padding:16px 16px 18px;background:radial-gradient(circle at 50% 22%,rgba(254,240,138,.25),transparent 34%),radial-gradient(circle at 86% 12%,rgba(244,114,182,.16),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.04) 0 11%,transparent 11% 22%,rgba(255,255,255,.04) 22% 33%,transparent 33% 44%,rgba(255,255,255,.04) 44% 55%,transparent 55% 66%,rgba(255,255,255,.04) 66% 77%,transparent 77% 88%,rgba(255,255,255,.04) 88%),#075431;animation:resultReveal .42s ease-out both}.avatar-wrap{position:relative;z-index:1;width:min(78vw,340px);margin:6px auto -8px}.avatar-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 42px rgba(0,0,0,.44))}.result-subtitle{position:relative;z-index:1;margin:0;color:#fde68a;font-family:var(--display-font);font-size:14px;font-weight:950;text-align:center}.poster h1{position:relative;z-index:1;margin:5px 0 10px;color:#fff;font-family:var(--display-font);font-size:clamp(40px,12vw,64px);font-weight:900;line-height:1.02;letter-spacing:0;text-align:center;overflow-wrap:anywhere}.roast{position:relative;z-index:1;margin:0 auto 14px;max-width:28em;color:#e5e7eb;font-size:15px;font-weight:520;line-height:1.5;text-align:center}.tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}.tags span{padding:7px 10px;border:1px solid rgba(253,230,138,.62);border-radius:999px;background:#f9a8d421;color:#fef9c3;font-size:12px;font-weight:950}.detail-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid div{min-height:96px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff13}.detail-grid b{display:block;margin-bottom:7px;color:#facc15;font-size:12px}.detail-grid p,.share-line{margin:0;color:#f8fafc;font-size:13px;line-height:1.42}.share-line{position:relative;z-index:1;margin-top:12px;padding:12px;border-radius:8px;background:linear-gradient(135deg,#fef08a,#f9a8d4);color:#111827;font-weight:950;text-align:center}.producer-mark{position:relative;z-index:1;margin:10px 0 0;color:#ffffff6b;font-size:11px;font-weight:800;text-align:right}.poster-preview{margin-top:14px;padding:12px;background:#020617c7}.poster-preview img{display:block;width:100%;height:auto;border-radius:8px;background:#111827}.poster-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.poster-preview .download-link{width:100%;min-height:54px;background:#22c55e;color:#04130a;border-color:transparent}.poster-preview .download-link.secondary{background:#ffffff14;color:#d1fae5;border-color:#ffffff2e}.poster-preview p,.poster-error{margin:10px 0 0;color:#d1d5db;font-size:13px;line-height:1.45;text-align:center}.poster-error{color:#fecaca}@keyframes ballScan{0%{transform:translate(0) rotate(0) scale(.92)}52%{transform:translate(220px) rotate(520deg) scale(1.06)}to{transform:translate(0) rotate(1040deg) scale(.92)}}@keyframes cardFlip{0%{transform:rotate(-10deg) translateY(0)}to{transform:rotate(12deg) translateY(8px)}}@keyframes lineReveal{0%,12%{opacity:0;transform:translateY(8px)}28%,74%{opacity:1;transform:translateY(0)}to{opacity:.35;transform:translateY(-2px)}}@keyframes resultLineReveal{0%,8%{opacity:0;transform:translateY(8px)}20%,78%{opacity:1;transform:translateY(0)}to{opacity:.58;transform:translateY(-1px)}}@keyframes scorePulse{0%,45%{color:#f8fafc}46%,to{color:#fef08a}}@keyframes tunnelBall{0%{transform:translate(0) translateY(0) rotate(0) scale(.86);opacity:.72}58%{transform:translate(258px) translateY(-52px) rotate(520deg) scale(1.12);opacity:1}to{transform:translate(410px) translateY(-8px) rotate(760deg) scale(.82);opacity:.35}}@keyframes playerMarch{0%{transform:translateY(14px) scale(.86);opacity:.68}48%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(10px) scale(.92);opacity:.78}}@keyframes tunnelLights{0%,to{opacity:.72;transform:translate(0)}50%{opacity:1;transform:translate(18px)}}@keyframes resultReveal{0%{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:370px){.shell{padding-left:10px;padding-right:10px}.hero-panel h1{font-size:50px}.hero-subtitle{font-size:24px}.quiz-card h2{font-size:22px}.option-button{min-height:68px;font-size:14px}.poster{padding-left:12px;padding-right:12px}.detail-grid,.mini-stats{grid-template-columns:1fr}}