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

body {
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  color: #2b2d42;
  min-height: 100vh;
  background-color: #eef6ff;
  background-attachment: fixed;
}

/* Background themes (chosen at Setup, persisted in state) */
body[data-bg-theme="sky"] {
  background-color: #bfe3ff;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 18%, transparent 20%),
    radial-gradient(circle, rgba(255,255,255,0.7) 14%, transparent 16%),
    linear-gradient(180deg, #cfeaff 0%, #eaf6ff 100%);
  background-size: 220px 140px, 160px 100px, cover;
  background-position: 0 0, 90px 60px, 0 0;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed;
}

body[data-bg-theme="space"] {
  background-color: #241b4e;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 80% 20%, rgba(255,209,102,0.5) 30px, transparent 32px),
    linear-gradient(180deg, #1b1440 0%, #3a2a72 100%);
  background-size: 60px 60px, 40px 40px, cover, cover;
  background-position: 0 0, 20px 20px, 0 0, 0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

body[data-bg-theme="forest"] {
  background-color: #bfe8c9;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.35) 20%, transparent 22%),
    radial-gradient(circle, rgba(6,110,60,0.18) 16%, transparent 18%),
    linear-gradient(180deg, #d7f5df 0%, #bfe8c9 100%);
  background-size: 180px 120px, 140px 90px, cover;
  background-position: 0 0, 70px 45px, 0 0;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed;
}

body[data-bg-theme="gradient"] {
  background: linear-gradient(135deg, #ffd6e8 0%, #d6e4ff 50%, #d6fff0 100%);
  background-attachment: fixed;
}

#app { max-width: 1200px; margin: 0 auto; padding: 16px; }

h1, h2, h3 { font-weight: 800; }

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  border-radius: 14px;
}

/* Setup screen */
.setup-screen {
  display: flex; flex-direction: column; gap: 20px;
  background: rgba(255,255,255,0.85);
  color: #2b2d42;
  padding: 24px; border-radius: 24px;
  box-shadow: 0 8px 24px rgba(43,45,66,0.12);
  max-width: 560px; margin: 40px auto;
}
.setup-row { display: flex; flex-direction: column; gap: 8px; }
.setup-row label { font-weight: 700; }
.setup-row select, .setup-row input[type="text"] {
  padding: 10px 14px; border-radius: 12px; border: 2px solid #cfe0ff; font-size: 16px;
  font-family: inherit; background: #fff; color: #2b2d42;
}
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-picker img { width: 48px; height: 48px; border-radius: 50%; padding: 4px; border: 3px solid transparent; cursor: pointer; background: #fff; }
.avatar-picker img.selected { border-color: #06d6a0; }
.player-list { display: flex; flex-direction: column; gap: 8px; }
.player-list-item { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 12px; border-radius: 14px; box-shadow: 0 2px 8px rgba(43,45,66,0.08); }
.player-list-item img { width: 32px; height: 32px; border-radius: 50%; }
.player-list-item button { background: #ef476f; color: white; padding: 4px 10px; font-weight: 700; }
.btn-primary { background: #06d6a0; color: #0a3d2e; padding: 12px 24px; font-size: 18px; font-weight: 800; align-self: flex-start; box-shadow: 0 4px 12px rgba(6,214,160,0.4); }
.btn-secondary { background: #e0ecff; color: #2b2d42; padding: 8px 16px; font-weight: 700; }

.player-input-group { display: flex; gap: 8px; }
.player-input-group input { flex: 1; }
.player-actions { margin-left: auto; display: flex; gap: 6px; }

/* Player bar */
.player-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.player-card { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.92); padding: 8px 14px; border-radius: 16px; border: 3px solid transparent; box-shadow: 0 2px 8px rgba(43,45,66,0.08); }
.player-card img { width: 36px; height: 36px; border-radius: 50%; }
.player-card .score { font-weight: 800; color: #06a97a; }
.player-card.active-player { border-color: #ffd166; box-shadow: 0 0 0 4px rgba(255,209,102,0.35); animation: bounce 0.6s infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* Grid board */
.game-board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}
.grid-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: min(90vw, 80vh);
}
.tile {
  position: relative;
  width: calc((100% - ((var(--cols) - 1) * 16px)) / var(--cols));
  aspect-ratio: 1;
  background: #118ab2;
  color: white;
  font-size: 24px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 4px 0 #0c6683;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.tile:hover:not(:disabled) { background: #2fb8dd; }
.tile:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #0c6683; }
.tile:disabled { background: #cbd5e1; color: #64748b; box-shadow: none; opacity: 1; cursor: default; }

.tick-mark {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 16px;
  line-height: 1;
}

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(43,45,66,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-card { position: relative; background: #ffffff; padding: 24px; border-radius: 22px; max-width: 600px; width: 90%; text-align: center; color: #2b2d42; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.modal-card img { max-width: 100%; max-height: 240px; margin: 12px 0; border-radius: 12px; }
.modal-card iframe { width: 100%; height: 240px; margin: 12px 0; border-radius: 12px; border: none; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

.btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  color: #9aa7bd;
  font-size: 28px;
  font-weight: bold;
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-close:hover {
  background: #f1f5f9;
  color: #ef476f;
}

.btn-check-answer {
  background: #ffb703;
  color: #023047;
  padding: 14px 28px;
  font-size: 20px;
  font-weight: 800;
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(255, 183, 3, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-check-answer:hover { background: #ffc300; }
.btn-check-answer:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(255, 183, 3, 0.4); }

.btn-correct { background: #06d6a0; color: #0a3d2e; padding: 10px 20px; font-weight: 800; }
.btn-wrong { background: #ef476f; color: white; padding: 10px 20px; font-weight: 800; }
.target-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.target-picker button { background: #e0ecff; color: #2b2d42; padding: 10px; font-weight: 700; }

/* MC panel */
.mc-toggle { position: fixed; bottom: 16px; right: 16px; background: #ffd166; color: #2b2d42; padding: 10px 16px; font-weight: 800; z-index: 90; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.mc-panel { position: fixed; bottom: 70px; right: 16px; background: #ffffff; padding: 16px; border-radius: 16px; width: 280px; z-index: 90; display: flex; flex-direction: column; gap: 10px; color: #2b2d42; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.mc-panel h3 { margin-bottom: 4px; }
.mc-player-row { display: flex; align-items: center; gap: 6px; }
.mc-player-row span { flex: 1; }
.mc-player-row button { padding: 4px 10px; background: #e0ecff; color: #2b2d42; font-weight: 700; }

/* Podium */
.podium-screen { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.podium-list { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; }
.podium-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.92); padding: 12px 16px; border-radius: 16px; box-shadow: 0 3px 10px rgba(43,45,66,0.1); }
.podium-row .rank { font-size: 22px; font-weight: 800; width: 30px; }
.podium-row img { width: 36px; height: 36px; border-radius: 50%; }
.podium-row .score { margin-left: auto; font-weight: 800; color: #06a97a; }
.podium-row.rank-1 { border: 3px solid #ffd166; }
.podium-row.rank-2 { border: 3px solid #cbd5e1; }
.podium-row.rank-3 { border: 3px solid #d97706; }

/* Mascot */
.mascot {
  position: fixed; bottom: 12px; left: 12px;
  width: 84px; height: auto;
  z-index: 90; pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(43,45,66,0.25));
  animation: mascot-float 2.4s ease-in-out infinite;
}
@keyframes mascot-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }