@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Baloo+2:wght@400;600;800&display=swap');

:root {
  --bg-a: #ffecd2;
  --bg-b: #fcb69f;
  --bg-c: #f6d365;
  --ink: #2d1b12;
  --panel: rgba(255, 255, 255, 0.8);
  --accent: #ff4f81;
  --success: #21bf73;
  --danger: #f94144;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Baloo 2', cursive;
  color: var(--ink);
  background: radial-gradient(circle at 20% 20%, var(--bg-a), var(--bg-b) 45%, var(--bg-c) 100%);
  overflow-x: hidden;
}

.party-bg::before,
.party-bg::after {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.45) 0 8%, transparent 10%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.35) 0 6%, transparent 8%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.4) 0 7%, transparent 9%);
  animation: drift 20s linear infinite alternate;
}

.party-bg::after {
  filter: blur(20px);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

@keyframes drift {
  from { transform: translate(-2%, -2%) rotate(0deg); }
  to { transform: translate(2%, 2%) rotate(3deg); }
}

.container {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
}

.title {
  text-align: center;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.05em;
  font-size: clamp(1.7rem, 5vw, 3.2rem);
  margin: 0.3rem 0 1rem;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.panel {
  background: var(--panel);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
}

.main-layout {
  display: block;
}

.main-layout.next-question .question-box {
  animation: nextQuestionIn 0.55s ease both;
}

.main-layout.next-question .puzzle-box {
  animation: nextQuestionIn 0.55s ease both;
  animation-delay: 0.16s;
}

@keyframes nextQuestionIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.005);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.question-box,
.puzzle-box {
  padding: 1.2rem;
}

.question-box h2,
.puzzle-box h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
}

.question-text {
  font-size: clamp(1.1rem, 2.3vw, 1.8rem);
  font-weight: 700;
}

.puzzle-grid {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.45rem;
  column-gap: 1.2rem;
  align-items: center;
}

.puzzle-word {
  display: flex;
  gap: 0.45rem;
  white-space: nowrap;
}

.puzzle-grid.miss-shake {
  animation: missShake 0.45s ease;
}

@keyframes missShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.letter {
  width: clamp(36px, 4vw, 56px);
  height: clamp(48px, 5vw, 68px);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 800;
  background: #ffffff;
  border: 2px solid #f7a88a;
  box-shadow: 0 6px 0 #f7a88a;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.letter.hidden {
  color: transparent;
  background: #ffe5d5;
}

.letter.flip-reveal {
  animation: letterFlip 0.7s ease forwards;
}

@keyframes letterFlip {
  0% {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
  45% {
    transform: rotateY(88deg);
    filter: brightness(0.78);
  }
  55% {
    transform: rotateY(-88deg);
    filter: brightness(1.18);
  }
  100% {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
}

.word-gap {
  width: 1rem;
}

.miss-feedback {
  min-height: 1.5rem;
  margin: 0.65rem 0 0;
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  font-weight: 800;
  color: #b00020;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.miss-feedback.show {
  opacity: 1;
  transform: translateY(0);
}

.result-banner {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(25, 20, 20, 0.35);
  z-index: 50;
}

.result-banner.show {
  display: flex;
}

.result-card {
  width: min(560px, 90vw);
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.35);
  text-align: center;
  position: relative;
  overflow: visible;
}

.result-text {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: 16px;
  font-family: 'Bungee', sans-serif;
  color: #fff;
  font-size: clamp(1.4rem, 4vw, 3rem);
  animation: bounce 0.85s ease infinite alternate;
}

.result-text.correct { background: var(--success); }
.result-text.wrong { background: var(--danger); }

.result-gif {
  position: absolute;
  right: -68px;
  top: -58px;
  width: min(290px, 46vw);
  height: auto;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  transform: rotate(8deg);
  z-index: 2;
}

.result-gif.result-media-enter {
  animation: mediaEnter 0.65s ease both;
}

@keyframes mediaEnter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.95) rotate(-1.5deg);
    filter: blur(3px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02) rotate(1deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

.result-answer {
  margin: 0.8rem 0 0.1rem;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  font-weight: 800;
  max-width: 66%;
  text-align: left;
  position: relative;
  z-index: 3;
}

.result-text {
  position: relative;
  z-index: 3;
}

@media (max-width: 760px) {
  .result-gif {
    right: -28px;
    top: -42px;
    width: min(205px, 48vw);
    transform: rotate(6deg);
  }

  .result-answer {
    max-width: 60%;
  }
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px) scale(1.03); }
}

.confetti {
  position: fixed;
  top: -2rem;
  width: 10px;
  height: 16px;
  opacity: 0.85;
  border-radius: 4px;
  animation: fall linear infinite;
}

@keyframes fall {
  from {
    transform: translateY(-5vh) rotate(0deg);
  }
  to {
    transform: translateY(110vh) rotate(540deg);
  }
}

.fx-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

body.fx-correct-mode .result-card {
  animation: winnerPulse 0.45s ease infinite alternate;
}

@keyframes winnerPulse {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

body.fx-wrong-mode .result-card {
  box-shadow: 0 0 0 4px rgba(180, 0, 32, 0.35), 0 22px 36px rgba(0, 0, 0, 0.45);
}

body.fx-shake .container,
body.fx-shake .result-card {
  animation: stormShake 0.14s linear infinite;
}

@keyframes stormShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 1px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 2px); }
  100% { transform: translate(2px, -1px); }
}

.fx-confetti {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 4px;
  opacity: 0.95;
  animation-name: confettiBlast;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.2, 1);
  animation-fill-mode: forwards;
}

@keyframes confettiBlast {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift), 120vh, 0) rotate(var(--spin));
    opacity: 0;
  }
}

.fx-firework {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, var(--fw-color) 22% 100%);
  box-shadow:
    0 -48px 0 0 var(--fw-color),
    34px -34px 0 0 var(--fw-color),
    48px 0 0 0 var(--fw-color),
    34px 34px 0 0 var(--fw-color),
    0 48px 0 0 var(--fw-color),
    -34px 34px 0 0 var(--fw-color),
    -48px 0 0 0 var(--fw-color),
    -34px -34px 0 0 var(--fw-color);
  transform: scale(0.1);
  opacity: 0;
  animation: fireworkBoom 1.1s ease-out forwards;
}

@keyframes fireworkBoom {
  0% { transform: scale(0.08); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.fx-streamer {
  position: absolute;
  top: -8vh;
  width: 4px;
  height: 26vh;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 16%, rgba(255, 255, 255, 0));
  transform: rotate(var(--tilt));
  opacity: 0;
  animation: streamerDrop linear forwards;
}

@keyframes streamerDrop {
  0% { opacity: 0; transform: translateY(-16vh) rotate(var(--tilt)); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(112vh) rotate(var(--tilt)); }
}

.fx-storm-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 45%);
  animation: stormFlash 0.5s steps(1, end) forwards;
}

@keyframes stormFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  35% { opacity: 0.15; }
  55% { opacity: 0.8; }
  100% { opacity: 0; }
}

.fx-lightning {
  position: absolute;
  width: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(145, 223, 255, 0.25));
  clip-path: polygon(35% 0, 58% 0, 46% 26%, 70% 26%, 30% 60%, 50% 60%, 18% 100%, 34% 64%, 16% 64%);
  opacity: 0;
  filter: drop-shadow(0 0 16px rgba(180, 230, 255, 0.95));
  animation: lightningStrike 0.7s steps(1, end) forwards;
}

@keyframes lightningStrike {
  0% { opacity: 0; }
  12% { opacity: 1; }
  22% { opacity: 0.3; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-ember {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffeed8 0 35%, #ff4d4d 50% 100%);
  opacity: 0;
  animation: emberFlicker linear forwards;
}

@keyframes emberFlicker {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  30% { opacity: 0.9; transform: translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translateY(-48px) scale(0.2); }
}

.admin-layout {
  display: grid;
  gap: 0.9rem;
}

.admin-card {
  padding: 1rem;
}

.admin-card h2,
.admin-card h3 {
  margin: 0.2rem 0 0.5rem;
}

.answer-text {
  font-size: 1.1rem;
  font-weight: 800;
}

.row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button,
select,
input {
  font: inherit;
}

button {
  border: none;
  border-radius: 999px;
  padding: 0.6rem 0.95rem;
  font-weight: 800;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  border: 2px solid rgba(0, 0, 0, 0.15);
}

button.primary { background: var(--accent); color: #fff; border-color: transparent; }
button.success { background: var(--success); color: #fff; border-color: transparent; }
button.danger { background: var(--danger); color: #fff; border-color: transparent; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.letters-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.letters-grid button {
  border-radius: 10px;
  padding: 0.5rem 0;
}

.status-pill {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.6);
}

.status-pill.correct { background: rgba(33, 191, 115, 0.18); }
.status-pill.wrong { background: rgba(249, 65, 68, 0.18); }

input[type='url'] {
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
}

.wheel {
  width: 210px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0.4rem auto 1rem;
  border: 10px solid #fff;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  background: conic-gradient(
    #ff8fab 0deg 45deg,
    #ffd166 45deg 90deg,
    #06d6a0 90deg 135deg,
    #118ab2 135deg 180deg,
    #f3722c 180deg 225deg,
    #90be6d 225deg 270deg,
    #f9844a 270deg 315deg,
    #577590 315deg 360deg
  );
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}