/* Layout shared by the quiz-style games (World Explorer and Science Lab). */

[hidden] { display: none !important; }

.play {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px 40px;
}

.play h1, .play h2, .play p { margin: 0; }

.play-head { display: flex; margin: 6px 0 16px; flex-wrap: wrap; align-items: center; gap: 12px; }
.play-head h1 { color: #173a7b; font-family: var(--ss-font-head); font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.play-head .lead { flex-basis: 100%; color: #5f78a3; font-size: 17px; font-weight: 800; line-height: 1.45; }

.card {
  padding: 18px;
  border: 3px solid #fff;
  border-radius: 26px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--ss-shadow);
}

/* Mode picker on the start screen */
.mode-picks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mode-pick {
  display: grid;
  min-height: 150px;
  padding: 20px;
  align-content: start;
  gap: 8px;
  cursor: pointer;
  border: 3px solid #fff;
  border-radius: 24px;
  color: #173a7b;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--ss-shadow);
  text-align: left;
  transition: transform .16s ease;
}
.mode-pick:hover { transform: translateY(-4px); }
.mode-pick .pick-emoji { font-size: 40px; line-height: 1; }
.mode-pick b { font-family: var(--ss-font-head); font-size: 22px; }
.mode-pick span:not(.pick-emoji) { color: #5f78a3; font-size: 15px; font-weight: 800; line-height: 1.4; }
.mode-pick small { color: #1b7a5f; font-size: 13px; font-weight: 900; }

/* Round progress */
.pips { display: flex; flex-wrap: wrap; gap: 6px; }
.pips span { width: 16px; height: 16px; border-radius: 50%; background: #dde5f3; }
.pips span.now { background: #fff; box-shadow: 0 0 0 3px var(--ss-star); }
.pips span.right { background: var(--ss-mint); }
.pips span.wrong { background: #ff9aa9; }

.round-bar { display: flex; margin-bottom: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.round-bar .back-btn, .back-btn {
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 14px;
  color: #4a6699;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 5px 12px rgba(42, 85, 150, .1);
  font-size: 15px;
  font-weight: 900;
}

/* Question */
.prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.prompt h2 { color: #173a7b; font-family: var(--ss-font-head); font-size: clamp(24px, 4vw, 36px); line-height: 1.15; }

.choices { display: grid; margin-top: 18px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.choice {
  display: flex;
  min-height: 72px;
  padding: 12px 16px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: 4px solid #fff;
  border-radius: 20px;
  color: #173a7b;
  background: #fff;
  box-shadow: 0 6px 0 #d3def0, 0 10px 18px rgba(42, 85, 150, .1);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  transition: transform .14s ease;
}
.choice:hover:not(:disabled) { transform: translateY(-3px); }
.choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #d3def0; }
.choice:disabled { cursor: default; }
.choice.right { border-color: var(--ss-mint); background: #e2f8f0; }
.choice.wrong { border-color: #ff8fa3; background: #ffe8ec; animation: ssShake .4s ease; }
.choice.dim { opacity: .5; }
.choice img { width: 100%; max-width: 180px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

.feedback {
  display: flex;
  margin-top: 16px;
  padding: 14px 16px;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  color: #2c4377;
  background: #f1ecff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}
.feedback.good { background: #e2f8f0; }
.feedback.oops { background: #fff1e3; }
.feedback .fb-mascot svg { width: 64px; height: 64px; }
.feedback .fb-body { display: grid; flex: 1; gap: 8px; }
.feedback .ss-btn { justify-self: start; }

.big-btn-row { display: flex; margin-top: 16px; flex-wrap: wrap; justify-content: center; gap: 10px; }

@keyframes ssShake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (max-width: 640px) {
  .play { padding: 4px 12px 30px; }
  .card { padding: 14px; border-radius: 22px; }
  .choices { gap: 9px; }
  .choice { min-height: 62px; font-size: 18px; }
  .feedback { align-items: flex-start; font-size: 16px; }
  .feedback .fb-mascot svg { width: 48px; height: 48px; }
}