/* ========================================
   ERIC'S BIRTHDAY TRIVIA - STYLES
   8-bit theme with Kahoot-inspired colors
======================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --red: #e21b3c;
  --blue: #1368ce;
  --yellow: #d89e00;
  --green: #26890c;
  --purple: #46178f;
  --dark-purple: #2d1054;
  --pink: #ff6b9d;
  --white: #ffffff;
  --black: #1a1a2e;
  --gold: #ffd700;
  --silver: #c0c0c0;
  --bronze: #cd7f32;
}

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

body {
  font-family: 'Press Start 2P', cursive;
  min-height: 100vh;
  color: var(--white);
  overflow-x: hidden;
  /* GSB Knight Management Center inspired background */
  background:
    /* Warm California sky */
    linear-gradient(180deg,
      #5B9BD5 0%,       /* Clear blue sky */
      #87CEEB 25%,      /* Light blue */
      #F4A460 45%,      /* Sandy sunset tint */
      #DEB887 55%,      /* Sandstone color */
      #D2B48C 58%,      /* Tan buildings */
      #228B22 62%,      /* GSB lawn */
      #1E7B1E 100%      /* Darker grass */
    );
  position: relative;
}

/* GSB Knight Management Center pixel art */
body::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background:
    /* Spanish terracotta rooftops */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 60px,
      #B8860B 60px,
      #CD853F 65px,
      #D2691E 70px,
      #CD853F 75px,
      #B8860B 80px,
      transparent 80px,
      transparent 200px
    ),
    /* Main sandstone building facade */
    linear-gradient(to bottom,
      transparent 0%,
      transparent 15%,
      #C4A77D 15%,      /* Roof line */
      #D2B48C 20%,      /* Upper facade */
      #DEB887 25%,      /* Sandstone */
      #E8DCC8 60%,      /* Light sandstone */
      #DEB887 65%,      /* Base */
      #228B22 68%,      /* Grass line */
      #228B22 100%
    );
  z-index: -1;
  image-rendering: pixelated;
}

/* GSB architectural details - arches, windows, palm trees */
body::after {
  content: '';
  position: fixed;
  bottom: 20%;
  left: 0;
  right: 0;
  height: 30%;
  background:
    /* Arcade arches pattern - GSB signature */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 25px,
      rgba(139, 69, 19, 0.4) 25px,
      rgba(139, 69, 19, 0.2) 40px,
      transparent 40px,
      transparent 50px,
      rgba(139, 69, 19, 0.4) 50px,
      rgba(139, 69, 19, 0.2) 65px,
      transparent 65px,
      transparent 100px
    ),
    /* Windows - blue glass */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 28px,
      rgba(70, 130, 180, 0.6) 28px,
      rgba(70, 130, 180, 0.6) 36px,
      transparent 36px,
      transparent 53px,
      rgba(70, 130, 180, 0.6) 53px,
      rgba(70, 130, 180, 0.6) 61px,
      transparent 61px,
      transparent 100px
    ),
    /* Horizontal shadow lines */
    repeating-linear-gradient(180deg,
      transparent 0px,
      transparent 20px,
      rgba(139, 69, 19, 0.1) 20px,
      rgba(139, 69, 19, 0.1) 22px,
      transparent 22px,
      transparent 50px
    );
  z-index: -1;
  opacity: 0.7;
}

/* ========================================
   PLAYER SCREENS
======================================== */

.game-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  /* Semi-transparent overlay for readability */
  background: rgba(70, 23, 143, 0.85);
  margin: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.screen {
  display: none;
  width: 100%;
  max-width: 500px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Title */
.title-container {
  margin-bottom: 20px;
}

.game-title {
  font-size: clamp(1.2rem, 5vw, 2rem);
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--pink);
  animation: titlePulse 2s ease-in-out infinite;
}

.game-subtitle {
  font-size: clamp(0.8rem, 3vw, 1.2rem);
  color: var(--pink);
  margin-top: 10px;
}

@keyframes titlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Eric Sprite - Shows Eric's photo */
.eric-sprite {
  width: 120px;
  height: 120px;
  background-color: var(--pink);
  border-radius: 50%;
  margin: 20px auto;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 4px solid var(--gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 107, 157, 0.3);
  background-image: url('assets/eric-photo.png');
  overflow: hidden;
}

.eric-sprite.large {
  width: 180px;
  height: 180px;
}

/* Animations for Eric */
.eric-sprite.idle {
  animation: idle 1s ease-in-out infinite;
}

.eric-sprite.bounce {
  animation: bounce 0.5s ease-in-out infinite;
}

.eric-sprite.thinking {
  animation: thinking 0.8s ease-in-out infinite;
}

.eric-sprite.victory {
  animation: victory 0.3s ease-in-out infinite;
}

.eric-sprite.celebrate {
  animation: celebrate 0.5s ease-in-out infinite;
}

.eric-sprite.wrong {
  animation: wrong 0.5s ease-in-out;
  background-color: var(--red);
}

.eric-sprite.correct {
  animation: correct 0.5s ease-in-out;
  background-color: var(--green);
}

@keyframes idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.1); }
}

@keyframes thinking {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes victory {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  25% { transform: translateY(-10px) rotate(5deg); }
  50% { transform: translateY(0) rotate(-5deg); }
  75% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes celebrate {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-20px) rotate(-15deg) scale(1.1); }
  50% { transform: translateY(0) rotate(0deg) scale(1); }
  75% { transform: translateY(-20px) rotate(15deg) scale(1.1); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes wrong {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

@keyframes correct {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Join Form */
.join-form {
  width: 100%;
  max-width: 300px;
}

#nickname-input {
  width: 100%;
  padding: 15px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  border: 4px solid var(--white);
  border-radius: 0;
  background: var(--dark-purple);
  color: var(--white);
  text-align: center;
  margin-bottom: 15px;
}

#nickname-input::placeholder {
  color: rgba(255,255,255,0.5);
}

#nickname-input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 20px var(--pink);
}

.btn-primary {
  width: 100%;
  padding: 15px 30px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  background: var(--green);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 0 #1a5c08;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #1a5c08;
}

.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #1a5c08;
}

.btn-secondary {
  padding: 10px 20px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  background: var(--blue);
  color: var(--white);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.player-count {
  margin-top: 20px;
  font-size: 0.6rem;
  opacity: 0.8;
}

/* Lobby */
.welcome-text {
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.waiting-text {
  font-size: 0.6rem;
  opacity: 0.8;
}

.dots-loading {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.dots-loading span {
  width: 15px;
  height: 15px;
  background: var(--pink);
  animation: dotPulse 1.4s infinite ease-in-out both;
}

.dots-loading span:nth-child(1) { animation-delay: -0.32s; }
.dots-loading span:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Question Screen */
.question-header {
  width: 100%;
  margin-bottom: 20px;
}

.question-number {
  font-size: 0.7rem;
  margin-bottom: 10px;
}

.timer-container {
  width: 100%;
  height: 30px;
  background: var(--dark-purple);
  border: 3px solid var(--white);
  position: relative;
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
  width: 100%;
  transition: width 0.1s linear;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  text-shadow: 2px 2px 0 var(--black);
}

.question-text {
  font-size: clamp(0.7rem, 3vw, 1rem);
  line-height: 1.8;
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(0,0,0,0.3);
  border-radius: 5px;
}

.answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.answer-btn {
  padding: 20px 15px;
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(0.5rem, 2vw, 0.7rem);
  color: var(--white);
  border: none;
  cursor: pointer;
  min-height: 80px;
  transition: all 0.2s;
  word-wrap: break-word;
  line-height: 1.4;
}

.answer-btn.red { background: var(--red); box-shadow: 0 6px 0 #a01429; }
.answer-btn.blue { background: var(--blue); box-shadow: 0 6px 0 #0d4a94; }
.answer-btn.yellow { background: var(--yellow); box-shadow: 0 6px 0 #9a7100; }
.answer-btn.green { background: var(--green); box-shadow: 0 6px 0 #1a5c08; }

.answer-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

.answer-btn:active {
  transform: translateY(4px);
  box-shadow: none !important;
}

.answer-btn.selected {
  transform: scale(0.95);
  opacity: 0.7;
}

.answer-btn.correct-answer {
  animation: correctPulse 0.5s ease-in-out infinite;
}

.answer-btn.wrong-answer {
  opacity: 0.3;
}

@keyframes correctPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.answered-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(70, 23, 143, 0.95);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.answered-overlay.show {
  display: flex;
}

/* Result Screen */
.result-content {
  padding: 20px;
}

.result-text {
  font-size: 1.2rem;
  margin: 20px 0;
}

.result-text.correct {
  color: var(--green);
  animation: correctBounce 0.5s ease;
}

.result-text.wrong {
  color: var(--red);
  animation: wrongShake 0.5s ease;
}

@keyframes correctBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.points-earned {
  font-size: 1.5rem;
  color: var(--gold);
  margin: 15px 0;
}

.score-display {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 0.7rem;
}

.waiting-next {
  margin-top: 30px;
  font-size: 0.6rem;
  opacity: 0.7;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Final Screen */
.final-title {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--pink);
  margin-bottom: 20px;
  animation: titlePulse 1s ease-in-out infinite;
}

.winner-announcement {
  margin: 20px 0;
}

.winner-announcement h2 {
  color: var(--gold);
  font-size: 1rem;
}

.winner-name {
  font-size: 1.5rem;
  color: var(--pink);
  margin-top: 10px;
}

.final-score-card {
  background: rgba(0,0,0,0.3);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
}

.final-score-card p {
  font-size: 0.6rem;
  margin-bottom: 10px;
}

.final-score-card h2 {
  font-size: 2rem;
  color: var(--gold);
}

/* Podium */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  margin-top: 30px;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podium-name {
  font-size: 0.5rem;
  margin-bottom: 10px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-block {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.podium-place.first .podium-block {
  height: 100px;
  background: var(--gold);
  color: var(--black);
}

.podium-place.second .podium-block {
  height: 70px;
  background: var(--silver);
  color: var(--black);
}

.podium-place.third .podium-block {
  height: 50px;
  background: var(--bronze);
  color: var(--black);
}

/* ========================================
   ADMIN STYLES
======================================== */

.admin-body {
  background: var(--black);
}

.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--purple);
}

.admin-header h1 {
  font-size: clamp(0.7rem, 3vw, 1rem);
  color: var(--gold);
}

.admin-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.player-count-badge {
  background: var(--purple);
  padding: 8px 15px;
  font-size: 0.6rem;
}

.admin-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 900px) {
  .admin-main {
    grid-template-columns: 1fr;
  }
}

.question-form-section,
.questions-list-section {
  background: rgba(70, 23, 143, 0.3);
  padding: 20px;
  border: 3px solid var(--purple);
}

.question-form-section h2,
.questions-list-section h2 {
  font-size: 0.8rem;
  color: var(--pink);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 0.6rem;
  margin-bottom: 8px;
  color: var(--white);
}

.form-group textarea,
.form-group input[type="text"] {
  width: 100%;
  padding: 12px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  background: var(--dark-purple);
  color: var(--white);
  border: 3px solid var(--purple);
}

.form-group textarea:focus,
.form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--pink);
}

.answers-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 600px) {
  .answers-form {
    grid-template-columns: 1fr;
  }
}

.answer-group {
  border-left: 5px solid;
  padding-left: 10px;
}

.answer-group.red-border { border-color: var(--red); }
.answer-group.blue-border { border-color: var(--blue); }
.answer-group.yellow-border { border-color: var(--yellow); }
.answer-group.green-border { border-color: var(--green); }

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.5rem;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.questions-list {
  max-height: 500px;
  overflow-y: auto;
}

.question-item {
  background: rgba(0,0,0,0.3);
  padding: 15px;
  margin-bottom: 10px;
  border-left: 5px solid var(--pink);
}

.question-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.question-order-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-move {
  padding: 3px 8px;
  font-size: 0.6rem;
  background: var(--purple);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-move:hover:not(:disabled) {
  background: var(--pink);
}

.btn-move:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.question-item-text {
  font-size: 0.6rem;
  line-height: 1.6;
  flex: 1;
}

.question-item-actions {
  display: flex;
  gap: 5px;
}

.question-item-actions button {
  padding: 5px 10px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.4rem;
  border: none;
  cursor: pointer;
}

.btn-edit {
  background: var(--blue);
  color: var(--white);
}

.btn-delete {
  background: var(--red);
  color: var(--white);
}

.question-options {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.question-option {
  font-size: 0.5rem;
  padding: 5px;
  opacity: 0.7;
}

.question-option.correct {
  opacity: 1;
  color: var(--green);
}

.admin-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 3px solid var(--purple);
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn-start {
  padding: 20px 40px;
  font-family: 'Press Start 2P', cursive;
  font-size: 1rem;
  background: var(--green);
  color: var(--white);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 0 #1a5c08;
  transition: all 0.2s;
}

.btn-start:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 0 #1a5c08;
}

.btn-start:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #1a5c08;
}

.btn-start.large {
  font-size: 1.2rem;
  padding: 25px 50px;
}

.btn-danger {
  padding: 15px 25px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  background: var(--red);
  color: var(--white);
  border: none;
  cursor: pointer;
}

/* ========================================
   HOST STYLES
======================================== */

.host-body {
  /* Stanford Cardinal red gradient with GSB theme */
  background:
    linear-gradient(180deg,
      rgba(140, 21, 21, 0.9) 0%,
      rgba(70, 23, 143, 0.95) 50%,
      rgba(45, 16, 84, 1) 100%
    ),
    /* Subtle GSB pattern */
    linear-gradient(180deg,
      #87CEEB 0%,
      #228B22 70%,
      #228B22 100%
    );
}

.host-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.3);
}

.host-screen {
  display: none;
  width: 100%;
  max-width: 1000px;
  text-align: center;
}

.host-screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.host-title h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  color: var(--gold);
  text-shadow: 6px 6px 0 var(--pink);
  animation: titlePulse 2s ease-in-out infinite;
}

.host-subtitle {
  font-size: 1rem;
  margin-top: 20px;
}

.join-url {
  color: var(--pink);
  font-size: 1.2rem;
}

.waiting-info {
  margin: 30px 0;
}

.player-count-large {
  font-size: 5rem;
  color: var(--gold);
  animation: pulse 2s infinite;
}

/* Countdown */
.big-countdown {
  font-size: 15rem;
  color: var(--gold);
  text-shadow: 10px 10px 0 var(--pink);
  animation: countdownPulse 1s ease-in-out;
}

@keyframes countdownPulse {
  0% { transform: scale(1.5); opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

/* Host Question */
.host-question-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.question-progress {
  font-size: 1rem;
}

.host-timer {
  flex: 1;
  max-width: 400px;
  height: 40px;
  background: var(--dark-purple);
  border: 4px solid var(--white);
  position: relative;
}

.host-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
  width: 100%;
  transition: width 0.1s linear;
}

.host-timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
}

.answers-received {
  font-size: 0.8rem;
}

.host-question-text {
  font-size: clamp(1rem, 4vw, 2rem);
  line-height: 1.6;
  margin-bottom: 40px;
  padding: 30px;
  background: rgba(0,0,0,0.4);
  border-radius: 10px;
}

.host-answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.host-answer {
  padding: 30px;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 100px;
}

.host-answer.red { background: var(--red); }
.host-answer.blue { background: var(--blue); }
.host-answer.yellow { background: var(--yellow); }
.host-answer.green { background: var(--green); }

.answer-icon {
  font-size: 2rem;
}

/* Host Results */
#host-results h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.correct-answer-display {
  margin-bottom: 30px;
}

.correct-answer-display p {
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.correct-answer {
  font-size: 1.5rem;
  padding: 20px;
  background: var(--green);
  display: inline-block;
}

.answer-distribution {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
  height: 150px;
  align-items: flex-end;
}

.dist-bar {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dist-fill {
  width: 100%;
  min-height: 10px;
  transition: height 0.5s ease;
}

.dist-bar.red .dist-fill { background: var(--red); }
.dist-bar.blue .dist-fill { background: var(--blue); }
.dist-bar.yellow .dist-fill { background: var(--yellow); }
.dist-bar.green .dist-fill { background: var(--green); }

.dist-count {
  margin-top: 10px;
  font-size: 1rem;
}

.host-leaderboard {
  margin: 30px 0;
}

.host-leaderboard h3 {
  font-size: 1rem;
  margin-bottom: 15px;
  color: var(--gold);
}

.host-leaderboard ol,
.full-leaderboard ol {
  list-style: none;
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
}

.host-leaderboard li,
.full-leaderboard li {
  font-size: 0.8rem;
  padding: 10px;
  margin-bottom: 5px;
  background: rgba(0,0,0,0.3);
  display: flex;
  justify-content: space-between;
}

.host-leaderboard li:first-child {
  background: var(--gold);
  color: var(--black);
}

#next-question-btn {
  margin-top: 30px;
}

/* Host Final */
.winner-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  color: var(--gold);
  text-shadow: 6px 6px 0 var(--pink);
  margin-bottom: 30px;
  animation: titlePulse 0.5s ease-in-out infinite;
}

.final-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}

.podium-place.large .podium-block {
  width: 150px;
  font-size: 3rem;
}

.podium-place.large.first .podium-block { height: 180px; }
.podium-place.large.second .podium-block { height: 130px; }
.podium-place.large.third .podium-block { height: 90px; }

.podium-avatar {
  font-size: 0.8rem;
  margin-bottom: 5px;
}

.podium-info {
  margin-bottom: 10px;
}

.podium-info .podium-name {
  display: block;
  font-size: 0.8rem;
}

.podium-info .podium-score {
  font-size: 0.6rem;
  color: var(--gold);
}

.full-leaderboard {
  margin: 30px 0;
  max-height: 300px;
  overflow-y: auto;
}

.full-leaderboard h3 {
  font-size: 1rem;
  margin-bottom: 15px;
}

/* Confetti effect placeholder */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

/* ========================================
   FRIED CHICKEN CELEBRATION ANIMATIONS
======================================== */

.chicken-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.chicken-item {
  position: absolute;
  font-size: 2rem;
  animation: chickenFall linear forwards;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes chickenFall {
  0% {
    transform: translateY(-50px) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(0) rotate(20deg) scale(1);
  }
  50% {
    transform: translateY(50vh) rotate(-20deg) scale(1.2);
  }
  100% {
    transform: translateY(110vh) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

/* Different chicken animations */
.chicken-item.spin {
  animation: chickenSpin 2s linear forwards;
}

@keyframes chickenSpin {
  0% {
    transform: translateY(-50px) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    transform: translateY(110vh) rotate(720deg) scale(1);
    opacity: 0;
  }
}

.chicken-item.bounce {
  animation: chickenBounce 3s ease-in-out forwards;
}

@keyframes chickenBounce {
  0% {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(20vh) scale(1.2);
  }
  30% {
    transform: translateY(15vh) scale(1);
  }
  50% {
    transform: translateY(50vh) scale(1.3);
  }
  70% {
    transform: translateY(40vh) scale(1);
  }
  100% {
    transform: translateY(110vh) scale(0.8);
    opacity: 0;
  }
}

.chicken-item.zigzag {
  animation: chickenZigzag 2.5s ease-in-out forwards;
}

@keyframes chickenZigzag {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translateY(25vh) translateX(50px) rotate(45deg);
  }
  50% {
    transform: translateY(50vh) translateX(-50px) rotate(-45deg);
  }
  75% {
    transform: translateY(75vh) translateX(50px) rotate(45deg);
  }
  100% {
    transform: translateY(110vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
}

/* Chicken splash effect for correct answers */
.chicken-splash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  animation: chickenSplash 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 1001;
}

@keyframes chickenSplash {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-30deg);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.5) rotate(15deg);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.2) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) rotate(0deg);
    opacity: 0;
  }
}

/* Golden chicken for winner */
.golden-chicken {
  filter: drop-shadow(0 0 20px gold) drop-shadow(0 0 40px orange);
  animation: goldenGlow 1s ease-in-out infinite alternate;
}

@keyframes goldenGlow {
  0% {
    filter: drop-shadow(0 0 20px gold) drop-shadow(0 0 40px orange);
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 40px gold) drop-shadow(0 0 60px orange);
    transform: scale(1.1);
  }
}

/* Hat animations for fun */
.party-hat {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: hatWobble 0.5s ease-in-out infinite;
}

@keyframes hatWobble {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
  50% { transform: translateX(-50%) rotate(5deg); }
}

/* Food rain container */
.food-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

/* ========================================
   UTILITY CLASSES
======================================== */

.hidden {
  display: none !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .host-answers-grid {
    grid-template-columns: 1fr;
  }

  .answer-distribution {
    gap: 10px;
  }

  .dist-bar {
    width: 60px;
  }

  .final-podium {
    gap: 10px;
  }

  .podium-place.large .podium-block {
    width: 100px;
    font-size: 2rem;
  }
}