* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #24243a;
  --shadow: 0 10px 0 rgba(0,0,0,.12);
}

html, body { height: 100%; }

body {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(130deg, #ff7ab8 0%, #ffd166 28%, #7be0ff 55%, #a58cff 78%, #7dffb2 100%);
  background-size: 300% 300%;
  animation: bgShift 22s ease-in-out infinite;
}

@keyframes bgShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- floating decorations ---------- */
.deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.deco span {
  position: absolute;
  left: var(--x);
  bottom: -60px;
  font-size: calc(42px * var(--s));
  opacity: .35;
  animation: floatUp var(--d) linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-120vh) rotate(360deg); }
}

/* ---------- header ---------- */
.top { position: relative; z-index: 2; text-align: center; padding: 18px 12px 4px; }
.title {
  font-size: clamp(32px, 6.4vw, 68px);
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 4px 0 #ff3b5c, 0 8px 18px rgba(0,0,0,.28);
}
.subtitle {
  margin-top: 6px;
  font-size: clamp(15px, 2.4vw, 24px);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* ---------- wheel ---------- */
.stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 10px 12px 34px; }

.wheel-wrap {
  position: relative;
  width: min(82vmin, 640px);
  aspect-ratio: 1 / 1;
  margin-top: 6px;
}
.wheel-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  box-shadow: 0 22px 45px rgba(35, 20, 80, .38), 0 0 0 8px rgba(255,255,255,.55);
  cursor: pointer;
}

.pointer {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-top: 46px solid #ff2e4d;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.35));
  z-index: 4;
}
.pointer::after {
  content: "";
  position: absolute;
  top: -46px; left: -30px;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 52px solid #fff;
  z-index: -1;
}

.spin-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 7px solid #fff;
  background: radial-gradient(circle at 32% 28%, #ff8f5e 0%, #ff3b5c 55%, #d81234 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(20px, 4.4vmin, 40px);
  line-height: 1.05;
  letter-spacing: .02em;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 10px 22px rgba(180, 0, 40, .45), inset 0 -8px 0 rgba(0,0,0,.18);
  animation: btnPulse 1.5s ease-in-out infinite;
  transition: transform .12s ease;
}
.spin-btn:hover { transform: translate(-50%, -50%) scale(1.05); }
.spin-btn:active { transform: translate(-50%, -46%) scale(.96); }
.spin-btn:disabled { filter: grayscale(.35) brightness(.85); animation: none; cursor: wait; }

@keyframes btnPulse {
  0%,100% { box-shadow: 0 10px 22px rgba(180,0,40,.45), 0 0 0 0 rgba(255,255,255,.7), inset 0 -8px 0 rgba(0,0,0,.18); }
  50%     { box-shadow: 0 10px 22px rgba(180,0,40,.45), 0 0 0 16px rgba(255,255,255,0), inset 0 -8px 0 rgba(0,0,0,.18); }
}

.hint {
  margin-top: 16px;
  font-size: clamp(15px, 2.2vw, 22px);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.hint b { color: #ffe45c; }

/* ---------- fullscreen fx canvas ---------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- task card ---------- */
.task-card {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(60,20,110,.55), rgba(15,10,45,.82));
  backdrop-filter: blur(4px);
  opacity: 1;
  transition: opacity .28s ease;
}
.task-card.hidden { opacity: 0; pointer-events: none; }
.task-card.hidden .card { transform: scale(.82) translateY(30px); }

.card {
  position: relative;
  width: min(94vw, 700px);
  background: #fff;
  border: 8px solid #fff;
  border-radius: 42px;
  padding: 18px 20px 24px;
  text-align: center;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  transform: scale(1);
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1);
  animation: cardPop .4s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes cardPop {
  0% { transform: scale(.7) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

.char-stage {
  position: relative;
  height: clamp(180px, 34vmin, 270px);
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--soft, #ffe27a), var(--accent, #ffb020));
}
.char {
  font-size: clamp(96px, 22vmin, 170px);
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.25));
  transform-origin: 50% 90%;
}
.char-shadow {
  position: absolute;
  bottom: 14%;
  width: 34%;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  filter: blur(3px);
  animation: shadowBreathe 1.4s ease-in-out infinite;
}
@keyframes shadowBreathe { 0%,100% { transform: scaleX(1); opacity:.35 } 50% { transform: scaleX(.7); opacity:.2 } }

.sparkle {
  position: absolute;
  font-size: clamp(24px, 5vmin, 44px);
  animation: sparkleSpin 2.6s linear infinite;
}
.sparkle.s1 { top: 12%; left: 10%; }
.sparkle.s2 { bottom: 12%; right: 10%; animation-delay: 1.1s; }
@keyframes sparkleSpin {
  0%,100% { transform: scale(.7) rotate(0deg); opacity: .55; }
  50% { transform: scale(1.25) rotate(180deg); opacity: 1; }
}

.card-title {
  margin-top: 14px;
  font-size: clamp(34px, 7vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent, #ff3b5c);
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.card-task {
  margin-top: 6px;
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
}

.timer {
  position: absolute;
  top: -26px;
  right: -14px;
  width: clamp(84px, 16vmin, 116px);
  height: clamp(84px, 16vmin, 116px);
  border-radius: 50%;
  background: #fff;
  border: 7px solid #ffd43b;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  place-content: center;
  z-index: 6;
  animation: timerBeat 1s ease-in-out infinite;
}
.timer.on { display: grid; }
.timer.done { border-color: #2ed573; animation: timerDone .5s ease 3; }
.timer-num { font-size: clamp(30px, 6vmin, 46px); font-weight: 700; line-height: 1; color: var(--ink); }
.timer-unit { font-size: clamp(12px, 2.2vmin, 17px); font-weight: 600; color: #7b7b93; }
@keyframes timerBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes timerDone { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

.again-btn {
  margin-top: 18px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ed573, #1d9be0);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(26px, 5vw, 44px);
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease;
}
.again-btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
.again-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }

/* ---------- character animations ---------- */
.char--hop { animation: cHop .8s ease-in-out infinite; }
@keyframes cHop {
  0%,100% { transform: translateY(0) scale(1.08,.9); }
  18% { transform: translateY(0) scale(1,.06); }
  45% { transform: translateY(-52px) scale(.94,1.12); }
  72% { transform: translateY(0) scale(1.12,.86); }
}

.char--robot { animation: cRobot .9s linear infinite; }
@keyframes cRobot {
  0%   { transform: translate(0,0) rotate(0); }
  25%  { transform: translate(-26px,-8px) rotate(-9deg); }
  50%  { transform: translate(0,6px) rotate(0); }
  75%  { transform: translate(26px,-8px) rotate(9deg); }
  100% { transform: translate(0,0) rotate(0); }
}

.char--waddle { animation: cWaddle .72s ease-in-out infinite; }
@keyframes cWaddle {
  0%,100% { transform: rotate(-12deg) translateX(-16px); }
  50%     { transform: rotate(12deg) translateX(16px); }
}

.char--roar { animation: cRoar 1.2s ease-in-out infinite; }
@keyframes cRoar {
  0%,100% { transform: scale(1) rotate(0); }
  25%     { transform: scale(1.28) rotate(-7deg); }
  55%     { transform: scale(1.14) rotate(7deg); }
  75%     { transform: scale(1.06) rotate(0); }
}

.char--funny { animation: cFunny .78s infinite; }
@keyframes cFunny {
  0%,100% { transform: rotate(0) scale(1); }
  25%     { transform: rotate(-16deg) scale(1.16,.86); }
  50%     { transform: rotate(16deg) scale(.86,1.18); }
  75%     { transform: rotate(-8deg) scale(1.1); }
}

.char--wind { animation: cWind 1.1s ease-in-out infinite; }
@keyframes cWind {
  0%,100% { transform: rotate(-20deg) skewX(-10deg) translateX(-14px); }
  50%     { transform: rotate(20deg) skewX(10deg) translateX(14px); }
}

.char--slow { animation: cSlow 7s linear infinite; }
@keyframes cSlow {
  0%,100% { transform: translateX(-54px) rotate(-6deg); }
  50%     { transform: translateX(54px) rotate(6deg); }
}

.char--hero { animation: cHero 2.6s ease-in-out infinite; }
@keyframes cHero {
  0%,72%,100% { transform: scale(1) rotate(0); }
  78% { transform: scale(1.22) rotate(-5deg); }
  86% { transform: scale(1.22) rotate(5deg); }
  93% { transform: scale(1.14) rotate(0); }
}

.char--flap { animation: cFlap .48s ease-in-out infinite; }
@keyframes cFlap {
  0%,100% { transform: scaleX(1) translateY(0); }
  25%     { transform: scaleX(1.3) scaleY(.88) translateY(-16px); }
  50%     { transform: scaleX(1) translateY(0); }
  75%     { transform: scaleX(.74) scaleY(1.14) translateY(-16px); }
}

.char--dance { animation: cDance .58s infinite; }
@keyframes cDance {
  0%,100% { transform: translateY(0) rotate(-14deg); }
  25%     { transform: translateY(-24px) rotate(0) scale(1.06); }
  50%     { transform: translateY(0) rotate(14deg); }
  75%     { transform: translateY(-24px) rotate(0) scale(.94); }
}

.char--freeze { animation: cFreeze 3.8s linear infinite; }
@keyframes cFreeze {
  0%   { transform: rotate(0); }
  9%   { transform: rotate(-18deg) translateX(-22px); }
  20%  { transform: rotate(18deg) translateX(22px); }
  31%  { transform: rotate(-18deg) translateX(-22px); }
  42%  { transform: rotate(14deg) translateY(-16px); }
  50%  { transform: scale(1.3) rotate(0); }
  56%,100% { transform: scale(1.18) rotate(0); }
}

.char--face { animation: cFace .9s ease-in-out infinite; }
@keyframes cFace {
  0%,100% { transform: scale(1,1); }
  30%     { transform: scale(1.34,.72) rotate(-4deg); }
  60%     { transform: scale(.78,1.32) rotate(4deg); }
}es hop {
  0%,100% { transform: translateY(0) scale(1,1); }
  20% { transform: translateY(0) scale(1.16,.84); }
  45% { transform: translateY(-48px) scale(.94,1.12); }
  70% { transform: translateY(0) scale(1.14,.86); }
}
.char--hop { animation: hop .8s ease-in-out infinite; }

@keyframes robot {
  0%   { transform: translate(0,0) rotate(0); }
  25%  { transform: translate(-16px,-8px) rotate(-9deg); }
  50%  { transform: translate(0,6px) rotate(0); }
  75%  { transform: translate(16px,-8px) rotate(9deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.char--robot { animation: robot .9s steps(1) infinite; }

@keyframes waddle {
  0%,100% { transform: rotate(-11deg) translateX(-10px); }
  50%     { transform: rotate(11deg) translateX(10px); }
}
.char--waddle { animation: waddle .7s ease-in-out infinite; }

@keyframes roar {
  0%,100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.28) rotate(-7deg); }
  60% { transform: scale(1.12) rotate(7deg); }
}
.char--roar { animation: roar 1.1s ease-in-out infinite; }

@keyframes funny {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-15deg) scale(1.14,.88); }
  50% { transform: rotate(15deg) scale(.88,1.16); }
  75% { transform: rotate(-8deg) scale(1.1); }
}
.char--funny { animation: funny .8s ease-in-out infinite; }

@keyframes wind {
  0%,100% { transform: rotate(-20deg) skewX(-10deg) translateX(-8px); }
  50%     { transform: rotate(20deg) skewX(10deg) translateX(8px); }
}
.char--wind { animation: wind 1s ease-in-out infinite; }

@keyframes slow {
  0%,100% { transform: translateX(-34px) rotate(-4deg); }
  50%     { transform: translateX(34px) rotate(4deg); }
}
.char--slow { animation: slow 6s linear infinite; }

@keyframes hero {
  0%,78%,100% { transform: scale(1) rotate(0); }
  84% { transform: scale(1.2) rotate(-5deg); }
  92% { transform: scale(1.2) rotate(5deg); }
}
.char--hero { animation: hero 2.6s ease-in-out infinite; }

@keyframes flap {
  0%,100% { transform: scaleX(1) translateY(0); }
  25% { transform: scaleX(1.28) scaleY(.88) translateY(-14px); }
  50% { transform: scaleX(1) translateY(0); }
  75% { transform: scaleX(.76) scaleY(1.14) translateY(-14px); }
}
.char--flap { animation: flap .5s ease-in-out infinite; }

@keyframes dance {
  0%,100% { transform: translateY(0) rotate(-12deg); }
  25% { transform: translateY(-22px) rotate(0deg); }
  50% { transform: translateY(0) rotate(12deg); }
  75% { transform: translateY(-22px) rotate(0deg); }
}
.char--dance { animation: dance .6s ease-in-out infinite; }

@keyframes freezeMove {
  0%  { transform: rotate(0) scale(1); }
  10% { transform: rotate(-20deg) translateX(-16px); }
  22% { transform: rotate(20deg) translateX(16px); }
  34% { transform: rotate(-20deg) translateX(-16px); }
  46% { transform: scale(1.3) rotate(0); }
  55%,100% { transform: scale(1.22) rotate(0); }
}
.char--freeze { animation: freezeMove 3.8s linear infinite; }

@keyframes face {
  0%,100% { transform: scale(1,1) rotate(0); }
  30% { transform: scale(1.34,.72) rotate(-6deg); }
  60% { transform: scale(.78,1.32) rotate(6deg); }
}
.char--face { animation: face .9s ease-in-out infinite; }

@media (max-width: 520px) {
  .timer { top: -18px; right: -6px; }
  .card { padding: 14px 12px 18px; border-radius: 32px; }
}