:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #28315f;
  --gold: #ffd73a;
  --gold-deep: #ff9d00;
  --paper: rgba(255, 255, 255, 0.92);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.85) 0 3%, transparent 3.2%),
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.8) 0 4%, transparent 4.2%),
    linear-gradient(145deg, #79e5ff 0%, #a7f1ff 35%, #fff2ac 70%, #ffc9e1 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image: radial-gradient(#6c55df 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.sky-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; color: rgba(255,255,255,.85); font-size: clamp(5rem, 10vw, 9rem); filter: drop-shadow(0 9px 0 rgba(72,151,209,.12)); animation: drift 10s ease-in-out infinite alternate; }
.cloud-one { top: 12%; left: -2rem; }
.cloud-two { right: -2rem; bottom: 10%; animation-delay: -4s; }
.floaty { position: absolute; color: rgba(255,255,255,.7); font-size: 2rem; animation: bob 4s ease-in-out infinite; }
.floaty-one { left: 5%; bottom: 14%; }
.floaty-two { right: 8%; top: 12%; color: rgba(255,102,161,.35); animation-delay: -.8s; }
.floaty-three { left: 45%; top: 3%; color: rgba(104,80,229,.25); animation-delay: -1.8s; }

.board { position: relative; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 32px; z-index: 1; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
  padding: 22px 28px;
  border: 4px solid #fff;
  border-radius: 34px;
  background: linear-gradient(110deg, #7358e9, #a64cf2 52%, #ff58a8);
  color: #fff;
  box-shadow: 0 14px 0 rgba(88,54,166,.2), 0 22px 45px rgba(72,55,157,.22);
  overflow: hidden;
}

.hero::after { content: ""; position: absolute; width: 240px; height: 240px; border: 30px solid rgba(255,255,255,.12); border-radius: 50%; right: 8%; top: -130px; }
.hero-badge { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 27px; background: linear-gradient(145deg,#fff7a5,#ffd12a); border: 4px solid #fff; box-shadow: 0 8px 0 #e98b14; font-size: 2.8rem; transform: rotate(-6deg); animation: trophy 2.4s ease-in-out infinite; }
.eyebrow { margin: 0 0 3px; color: #fff6a8; font-size: .9rem; font-weight: 900; letter-spacing: .18em; }
h1 { margin: 0; font-family: "STKaiti", "KaiTi", "PingFang SC", sans-serif; font-size: clamp(2.1rem, 5vw, 3.65rem); font-weight: 900; letter-spacing: .06em; line-height: 1.05; text-shadow: 0 4px 0 rgba(65,34,144,.55); }
.subtitle { margin: 8px 0 0; font-weight: 700; opacity: .92; }
.hero-sparkles { display: flex; align-items: center; gap: 9px; font-size: 1.5rem; color: #fff282; z-index: 1; }
.hero-sparkles span { animation: twinkle 1.1s ease-in-out infinite alternate; }
.hero-sparkles span:nth-child(2) { font-size: 2.8rem; animation-delay: -.4s; }
.hero-sparkles span:nth-child(3) { animation-delay: -.8s; }

.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.group-card {
  --theme: #ff6b68;
  --theme-dark: #e94354;
  --theme-soft: #fff0eb;
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 240px;
  padding: 22px;
  border: 4px solid #fff;
  border-radius: 34px;
  background: var(--paper);
  box-shadow: 0 12px 0 color-mix(in srgb, var(--theme) 40%, transparent), 0 18px 35px rgba(46,45,91,.14);
  transition: transform .24s ease, box-shadow .24s ease;
  overflow: visible;
}
.group-card:hover { transform: translateY(-4px) rotate(-.25deg); box-shadow: 0 16px 0 color-mix(in srgb, var(--theme) 40%, transparent), 0 23px 38px rgba(46,45,91,.17); }
.group-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 9px; border-radius: 0 9px 9px 0; background: var(--theme); }
.group-card.pink { --theme:#ff61a8; --theme-dark:#dd3383; --theme-soft:#fff0f7; }
.group-card.cyan { --theme:#22c9d9; --theme-dark:#0792ae; --theme-soft:#e8fcff; }
.group-card.violet { --theme:#8a65ed; --theme-dark:#5b3dca; --theme-soft:#f3efff; }

.mascot-wrap { position: relative; display: grid; place-items: center; width: 108px; height: 136px; border-radius: 54px 54px 36px 36px; background: linear-gradient(145deg, #fff, var(--theme-soft)); border: 3px dashed var(--theme); }
.mascot { font-size: 4.2rem; filter: drop-shadow(0 7px 0 rgba(31,34,73,.12)); transform-origin: center bottom; }
.mascot-art { display: grid; place-items: center; width: 94%; height: 94%; }
.mascot-art svg { width: 100%; height: 100%; overflow: visible; }
.cheer-ray { fill: none; stroke: #ff9b27; stroke-width: 7; stroke-linecap: round; }
.megaphone-bell { fill: #ff5b62; stroke: #ce314a; stroke-width: 4; stroke-linejoin: round; }
.megaphone-mouth { fill: #ffe064; stroke: #ce314a; stroke-width: 4; }
.megaphone-handle { fill: #39bccc; stroke: #167f9b; stroke-width: 4; stroke-linejoin: round; }
.mascot-art text { fill: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 20px; font-weight: 900; paint-order: stroke; stroke: #ce314a; stroke-width: 2px; }
.cheer-dot { fill: #ffd33d; }
.tone-bars rect { stroke: rgba(67,47,131,.42); stroke-width: 2; }
.mallets path { fill: none; stroke: #6e4d32; stroke-width: 6; stroke-linecap: round; }
.mallets circle { stroke: #fff; stroke-width: 3; }
.stage-backdrop { fill: #343166; stroke: #e94354; stroke-width: 4; }
.stage-spotlight { fill: #fff2a9; opacity: .78; }
.stage-curtain { fill: #f04556; stroke: #bd2741; stroke-width: 3; stroke-linejoin: round; }
.stage-valance { fill: #ff5a67; stroke: #bd2741; stroke-width: 3; stroke-linejoin: round; }
.stage-floor { fill: #f4ad42; stroke: #c06e24; stroke-width: 3; stroke-linejoin: round; }
.stage-light-pool { fill: #fff1a2; opacity: .78; }
.stage-floor-lines { fill: none; stroke: #d17e2d; stroke-width: 1.5; opacity: .75; }
.stage-lights circle { fill: #fff3a0; stroke: #ff9f2c; stroke-width: 1.5; filter: drop-shadow(0 0 3px #ffd33d); }
.group-card:hover .mascot { animation: mascot-dance .7s ease-in-out; }
.mini-icon { position: absolute; display: grid; place-items: center; width: 43px; height: 43px; right: -8px; top: -10px; border-radius: 50%; background: var(--theme); border: 3px solid #fff; font-size: 1.25rem; box-shadow: 0 5px 0 var(--theme-dark); animation: bob 2.2s ease-in-out infinite; }
.card-content { min-width: 0; }
.name-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.group-tag { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--theme-soft); color: var(--theme-dark); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
h2 { margin: 3px 0 0; color: var(--theme-dark); font-family: "STKaiti", "KaiTi", "PingFang SC", sans-serif; font-size: 2.15rem; font-weight: 900; letter-spacing: .06em; }
.score-bubble { flex: none; display: grid; place-items: center; width: 63px; height: 63px; padding-top: 5px; border: 3px solid var(--theme); border-radius: 50%; background: #fff; color: var(--theme-dark); box-shadow: 0 4px 0 color-mix(in srgb, var(--theme) 50%, white); line-height: 1; }
.score-bubble strong { font-size: 1.5rem; }
.score-bubble span { font-size: .64rem; font-weight: 900; }
.score-bubble.bump { animation: bubble-bump .48s cubic-bezier(.2,1.7,.4,1); }

.stars { display: flex; align-items: center; gap: clamp(3px, .8vw, 8px); margin: 15px 0 9px; }
.star-button { position: relative; width: clamp(43px, 5.2vw, 58px); height: clamp(43px, 5.2vw, 58px); padding: 2px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s ease; }
.star-button:hover { transform: translateY(-4px) scale(1.08); }
.star-button:focus-visible { outline: 4px solid var(--theme-dark); outline-offset: 2px; }
.star-button svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 0 rgba(54,58,88,.18)); }
.star-button path { fill: #d9dce8; stroke: #a9aec4; stroke-width: 1.8; transition: fill .22s ease, stroke .22s ease, filter .22s ease; }
.star-button.active path { fill: var(--gold); stroke: var(--gold-deep); filter: drop-shadow(0 0 8px rgba(255,190,0,.8)); }
.star-button.just-lit { animation: star-pop .58s cubic-bezier(.14,1.7,.35,1); z-index: 3; }
.star-button.just-lit::before, .star-button.just-lit::after { content: "✦"; position: absolute; color: #ffb300; font-size: 1rem; animation: spark-out .6s ease-out forwards; pointer-events: none; }
.star-button.just-lit::before { top: -13px; left: 4px; }
.star-button.just-lit::after { right: -6px; bottom: -5px; animation-delay: .06s; }
.star-button.star-wave { animation: star-wave .7s cubic-bezier(.15,1.75,.35,1) var(--wave-delay) both; z-index: 4; }
.cheer { margin: 0; color: #697094; font-size: .88rem; font-weight: 800; }

.group-card.effect-tier-1 { animation: card-tap .42s ease; }
.group-card.effect-tier-2 { animation: card-nod .65s cubic-bezier(.2,1.5,.4,1); }
.group-card.effect-tier-3 { animation: card-energy .9s ease; }
.group-card.effect-tier-4 { animation: card-rainbow 1.25s ease; }
.group-card.effect-tier-5 { animation: card-legendary 1.8s cubic-bezier(.2,1.2,.35,1); z-index: 8; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 15px 20px; border: 3px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,255,255,.65); box-shadow: 0 8px 24px rgba(56,80,141,.12); backdrop-filter: blur(12px); }
.tip { display: flex; align-items: center; gap: 10px; color: #545f89; font-size: .92rem; }
.tip span { font-size: 1.6rem; animation: point 1.5s ease-in-out infinite; }
.reset-button { border: 0; border-radius: 15px; padding: 11px 17px; background: #fff; color: #7160bf; box-shadow: 0 5px 0 #dcd3ff; font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.reset-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #dcd3ff; }
.reset-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #dcd3ff; }

.screen-flash { position: fixed; inset: 0; z-index: 18; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.98), rgba(255,222,62,.72) 28%, rgba(255,82,174,.2) 64%, transparent 78%); mix-blend-mode: screen; }
.screen-flash.show { animation: screen-flash 1.15s ease-out both; }
.celebration { position: fixed; left: 50%; top: 48%; z-index: 24; display: flex; align-items: center; gap: 15px; width: max-content; max-width: calc(100% - 26px); padding: 22px 34px; border: 6px solid #fff; border-radius: 999px; background: linear-gradient(115deg, #ff4f9b, #ff923f 30%, #ffd72f 50%, #5edbdf 70%, #7d59ef); background-size: 220% 220%; color: #fff; font-size: clamp(1.2rem, 4vw, 2rem); text-shadow: 0 3px 0 rgba(69,31,133,.45); box-shadow: 0 11px 0 #593aae, 0 0 0 10px rgba(255,255,255,.25), 0 28px 80px rgba(76,41,152,.5); opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-9deg); pointer-events: none; }
.celebration.show { animation: celebration 2.35s cubic-bezier(.18,1.2,.3,1) both, celebration-gradient .8s linear infinite; }
.celebration span { font-size: 1.35em; animation: spin-star .55s ease-in-out infinite alternate; }
.confetti-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 19; }
.confetti { position: absolute; width: 12px; height: 18px; border-radius: 4px; animation: confetti-fall var(--duration) cubic-bezier(.17,.67,.46,1) forwards; }
.burst-particle { position: fixed; left: var(--left); top: var(--top); z-index: 21; color: var(--particle-color); font-size: var(--size); font-style: normal; font-weight: 900; line-height: 1; text-shadow: 0 0 8px currentColor, 0 2px 0 rgba(72,41,114,.2); transform: translate(-50%,-50%); animation: particle-burst var(--duration) cubic-bezier(.1,.75,.25,1) var(--delay) forwards; }
.energy-ring { position: fixed; left: var(--left); top: var(--top); z-index: 20; width: 20px; height: 20px; border: var(--ring-width) solid var(--ring-color); border-radius: 50%; opacity: .9; transform: translate(-50%,-50%) scale(.15); box-shadow: 0 0 18px var(--ring-color), inset 0 0 18px var(--ring-color); animation: energy-ring var(--ring-duration) ease-out var(--delay) forwards; }
.shooting-star { position: fixed; z-index: 20; width: 9px; height: 9px; border-radius: 50%; background: #fff8a5; box-shadow: 0 0 8px #fff, 0 0 18px #ffd32c, -18px 0 14px #ff62b2; transform: rotate(var(--angle)); animation: shooting-star var(--duration) ease-in var(--delay) forwards; }
.shooting-star::after { content: ""; position: absolute; width: 70px; height: 4px; right: 4px; top: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, #ff72ba, #fff7a5); }
.firework { position: fixed; left: var(--left); top: var(--top); z-index: 23; width: 8px; height: 8px; transform: translate(-50%,-50%); }
.firework-spark { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--fire-color); box-shadow: 0 0 10px var(--fire-color), 0 0 20px var(--fire-color); animation: firework-spark 1.05s cubic-bezier(.08,.65,.25,1) var(--delay) forwards; }
.star-rain { position: fixed; z-index: 22; top: -12vh; color: var(--rain-color); font-size: var(--size); text-shadow: 0 0 10px currentColor, 0 2px 0 rgba(62,42,108,.2); animation: star-rain var(--duration) linear var(--delay) forwards; }
.mega-party .hero { animation: hero-party 1.7s ease both; }

@keyframes drift { to { transform: translate(34px, 12px); } }
@keyframes bob { 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes trophy { 50% { transform: rotate(6deg) translateY(-4px); } }
@keyframes twinkle { to { transform: scale(1.35) rotate(20deg); opacity: .6; } }
@keyframes mascot-dance { 25% { transform: rotate(-8deg) scale(1.08); } 55% { transform: rotate(8deg) scale(1.1); } 80% { transform: rotate(-3deg); } }
@keyframes bubble-bump { 45% { transform: scale(1.22) rotate(8deg); } }
@keyframes star-pop { 0% { transform: scale(.25) rotate(-35deg); } 58% { transform: scale(1.45) rotate(14deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes star-wave { 0% { transform: scale(1) rotate(0); } 40% { transform: translateY(-16px) scale(1.48) rotate(24deg); filter: brightness(1.2); } 70% { transform: translateY(3px) scale(.9) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes spark-out { to { transform: translateY(-22px) scale(1.7) rotate(90deg); opacity: 0; } }
@keyframes point { 50% { transform: translateY(-5px) rotate(-10deg); } }
@keyframes card-tap { 45% { transform: translateY(-4px) scale(1.012); } }
@keyframes card-nod { 32% { transform: translateY(-8px) rotate(-1deg) scale(1.015); } 68% { transform: translateY(2px) rotate(.7deg); } }
@keyframes card-energy { 0%,100% { box-shadow: 0 12px 0 color-mix(in srgb, var(--theme) 40%, transparent), 0 18px 35px rgba(46,45,91,.14); } 38% { transform: scale(1.025); box-shadow: 0 13px 0 color-mix(in srgb, var(--theme) 55%, transparent), 0 0 0 9px color-mix(in srgb, var(--theme) 18%, transparent), 0 0 45px var(--theme); } }
@keyframes card-rainbow { 0%,100% { filter: hue-rotate(0); } 20% { transform: translateY(-7px) scale(1.025) rotate(-.5deg); box-shadow: 0 0 0 7px #ffd83d, 0 0 38px #ff5da8; } 48% { transform: translateY(-3px) scale(1.035) rotate(.5deg); box-shadow: 0 0 0 8px #5de0eb, 0 0 55px #7d5bef; filter: hue-rotate(65deg); } 75% { box-shadow: 0 0 0 7px #ff6f5f, 0 0 45px #ffd83d; } }
@keyframes card-legendary { 0%,100% { transform: scale(1); } 15% { transform: scale(1.04) rotate(-1deg); box-shadow: 0 0 0 8px #fff, 0 0 35px #ffd62e, 0 0 85px #ff53aa; } 32% { transform: scale(1.025) rotate(1deg); box-shadow: 0 0 0 9px #fff9a8, 0 0 45px #5ce0ef, 0 0 95px #7358e9; } 52% { transform: scale(1.05) rotate(-.5deg); box-shadow: 0 0 0 10px #fff, 0 0 50px #ff68b0, 0 0 110px #ffd62e; } 75% { transform: scale(1.025); box-shadow: 0 0 0 8px #fff7a4, 0 0 45px #7d5bea; } }
@keyframes particle-burst { 0% { transform: translate(-50%,-50%) scale(.15) rotate(0); opacity: 0; } 15% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.45) rotate(var(--rotation)); opacity: 0; } }
@keyframes energy-ring { 0% { opacity: .95; transform: translate(-50%,-50%) scale(.15); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(var(--ring-scale)); } }
@keyframes shooting-star { 0% { transform: translate(0,0) rotate(var(--angle)) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--shoot-x), var(--shoot-y)) rotate(var(--angle)) scale(1.15); opacity: 0; } }
@keyframes firework-spark { 0% { transform: translate(0,0) scale(.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--spark-x), var(--spark-y)) scale(.1); opacity: 0; } }
@keyframes star-rain { 0% { transform: translateY(-8vh) translateX(0) rotate(0) scale(.4); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(120vh) translateX(var(--drift)) rotate(var(--spin)) scale(1.1); opacity: .15; } }
@keyframes screen-flash { 0% { opacity: 0; } 12% { opacity: .95; } 28% { opacity: .12; } 40% { opacity: .65; } 100% { opacity: 0; } }
@keyframes celebration { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-9deg); } 10% { opacity: 1; transform: translate(-50%,-50%) scale(1.18) rotate(4deg); } 20% { transform: translate(-50%,-50%) scale(.96) rotate(-2deg); } 28%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } 80% { transform: translate(-50%,-55%) scale(1.08) rotate(2deg); } 100% { opacity: 0; transform: translate(-50%,-80%) scale(.65) rotate(-5deg); } }
@keyframes celebration-gradient { to { background-position: 200% 50%; } }
@keyframes spin-star { to { transform: rotate(180deg) scale(1.25); } }
@keyframes confetti-fall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 105vh) rotate(var(--spin)); opacity: .15; } }
@keyframes hero-party { 0%,100% { filter: brightness(1); } 20% { filter: brightness(1.25) saturate(1.35); transform: rotate(-.35deg); } 45% { filter: brightness(1.1) saturate(1.5); transform: rotate(.35deg); } 70% { filter: brightness(1.28) saturate(1.25); } }

@media (max-width: 840px) {
  .groups { grid-template-columns: 1fr; }
  .group-card { min-height: 220px; }
  .hero-sparkles { display: none; }
  .hero { grid-template-columns: auto 1fr; }
}

@media (max-width: 540px) {
  .board { width: min(100% - 20px, 1180px); padding-top: 14px; }
  .hero { gap: 13px; padding: 17px; border-radius: 26px; }
  .hero-badge { width: 61px; height: 61px; border-radius: 20px; font-size: 2rem; box-shadow: 0 6px 0 #e98b14; }
  .eyebrow, .subtitle { font-size: .72rem; }
  .subtitle { line-height: 1.45; }
  .group-card { grid-template-columns: 72px 1fr; gap: 10px; min-height: 194px; padding: 17px 13px; border-radius: 27px; }
  .mascot-wrap { width: 70px; height: 105px; border-radius: 36px 36px 25px 25px; }
  .mascot { font-size: 2.75rem; }
  .mini-icon { width: 33px; height: 33px; right: -5px; font-size: .95rem; }
  h2 { font-size: 1.7rem; }
  .score-bubble { width: 50px; height: 50px; }
  .score-bubble strong { font-size: 1.15rem; }
  .stars { gap: 1px; margin-top: 11px; }
  .star-button { width: min(13vw, 47px); height: min(13vw, 47px); }
  .cheer { font-size: .72rem; }
  .toolbar { align-items: stretch; flex-direction: column; text-align: center; }
  .tip { justify-content: center; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .group-card, .star-button, .reset-button { transition: none; }
}