: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 0%, #0e8a4f 42%, #075431 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 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: rgba(4, 48, 28, .88);
  box-shadow: 0 30px 90px rgba(0, 28, 12, .48);
}

.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;
  inset: 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;
  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 18deg, #f8fafc 18deg 72deg, #111827 72deg 90deg, #f8fafc 90deg 162deg, #111827 162deg 180deg, #f8fafc 180deg 252deg, #111827 252deg 270deg, #f8fafc 270deg 342deg, #111827 342deg 360deg);
  border: 5px solid #f8fafc;
  box-shadow: 0 20px 42px rgba(0,0,0,.38);
  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 rgba(0,0,0,.32);
}

.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: rgba(255,255,255,.09);
  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 rgba(0,0,0,.32);
}

.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 0 #854d0e;
}

.primary-button:active, .option-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: rgba(255, 255, 255, .06);
  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 0 rgba(255,255,255,.08);
}

.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: rgba(255, 255, 255, .12);
}
.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, .14);
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.045)),
    rgba(3, 24, 13, .78);
  color: #f8fafc;
  text-align: left;
}
.option-button span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #fef08a, #f9a8d4);
  color: #111827;
  font-weight: 950;
}
.option-button em { font-style: normal; font-size: 15px; font-weight: 560; line-height: 1.46; }
.option-button:hover { border-color: rgba(250, 204, 21, .82); background: rgba(250, 204, 21, .11); }

.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)),
    rgba(255,255,255,.05);
  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 18deg, #fff 18deg 72deg, #111827 72deg 90deg, #fff 90deg 162deg, #111827 162deg 180deg, #fff 180deg 252deg, #111827 252deg 270deg, #fff 270deg 342deg, #111827 342deg 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: rgba(255,255,255,.075);
  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; }

.ghost-button, .download-link {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .075);
  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: rgba(249, 168, 212, .13);
  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: rgba(255, 255, 255, .075);
}
.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: rgba(255,255,255,.42);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.poster-preview {
  margin-top: 14px;
  padding: 12px;
  background: rgba(2, 6, 23, .78);
}
.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: rgba(255,255,255,.08);
  color: #d1fae5;
  border-color: rgba(255,255,255,.18);
}
.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: translateX(0) rotate(0deg) scale(.92); }
  52% { transform: translateX(220px) rotate(520deg) scale(1.06); }
  100% { transform: translateX(0) rotate(1040deg) scale(.92); }
}

@keyframes cardFlip {
  from { 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); }
  100% { opacity: .35; transform: translateY(-2px); }
}

@keyframes scorePulse {
  0%, 45% { color: #f8fafc; }
  46%, 100% { color: #fef08a; }
}

@keyframes resultReveal {
  from { 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 { grid-template-columns: 1fr; }
  .mini-stats { grid-template-columns: 1fr; }
}