/* Quizzy - player screen (play.html). Mobile first; loaded after style.css. */
body.play {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding-bottom: env(safe-area-inset-bottom);
}

.play-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
  background: rgba(0, 0, 0, 0.35);
  font-weight: 800;
  font-size: var(--fs-base);
}
.play-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-score { flex: none; font-variant-numeric: tabular-nums; }

.timebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}
.timebar-track { flex: 1; height: 0.6rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.timebar-fill { height: 100%; background: var(--color-accent); transform-origin: left center; transform: scaleX(1); will-change: transform; }
.timebar-num { min-width: 2.2ch; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.play-main { flex: 1; min-height: 0; display: flex; }
.screen { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--space-4); }
.screen-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* tall content scrolls from its top instead of being cut off */
  gap: var(--space-3);
  text-align: center;
}

.screen-title { font-size: var(--fs-xl); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.screen-note { font-size: var(--fs-lg); font-weight: 700; }
.screen-sub { font-size: var(--fs-base); opacity: 0.8; }
.big-note { font-size: var(--fs-lg); font-weight: 700; opacity: 0.85; }
.nick-big { font-size: var(--fs-xl); font-weight: 900; max-width: 100%; overflow-wrap: anywhere; }
.count-big { font-size: 7rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.badge {
  padding: var(--space-2) var(--space-4);
  border-radius: 2rem;
  font-weight: 800;
  background: var(--color-accent);
  color: #1a1038;
}
.badge--zero { background: rgba(255, 255, 255, 0.85); }
.badge--multi { background: #fff; color: #1a1038; }

/* Wrapper: answers + (multiple choice) submit button + error message share the space below the question */
.answers-wrap { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* Multiple choice: toggle buttons with a visible check mark (not only colour) and a submit button */
.multi-hint { flex: none; font-weight: 800; font-size: 0.95rem; padding: 0.1rem var(--space-3); border-radius: 2rem; background: #fff; color: #1a1038; }
.answer-btn .check {
  position: absolute; top: 0.35rem; right: 0.35rem; z-index: 1;
  display: none; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: #fff; color: #1a1038; font-size: 1.1rem; font-weight: 900; line-height: 1;
}
.answers.is-multi .answer-btn .check { display: grid; }
.answers.is-multi .answer-btn .check::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 0.15rem solid #1a1038; box-sizing: border-box; }
.answers.is-multi .answer-btn.is-selected .check::before { content: "\2713"; width: auto; height: auto; border: 0; border-radius: 0; }
.answers.is-multi .answer-btn.is-selected { box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.45rem #1a1038, var(--shadow-btn); }
.answers.is-multi .answer-btn:not(.is-selected) { opacity: 0.8; }
.submit-btn { flex: none; width: 100%; min-height: 3.4rem; font-size: 1.25rem; font-weight: 900; }
.submit-btn:disabled { opacity: 0.45; cursor: default; }
.screen-answer.is-multi .answers.has-text .answer-btn { min-height: 3.2rem; }
.screen-answer.is-multi .answers:not(.has-text) .answer-btn { font-size: min(22vw, 11dvh); }
#wait-list { flex-direction: column; align-items: center; }

/* Answer grid: fills the whole space below the time bar; scrolls only when the content is extreme */
.screen-answer { display: flex; flex-direction: column; gap: var(--space-2); overflow-x: hidden; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-3); }
.answers {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.answers.count-2 { grid-template-columns: minmax(0, 1fr); }
.answers.count-3 .answer-btn:nth-child(3) { grid-column: 1 / -1; }
.answers .answer-btn {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  font-size: min(30vw, 15dvh);
  border-radius: var(--radius-lg);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.answers.count-2 .answer-btn { font-size: min(34vw, 22dvh); }

/* Question content above the buttons */
.q-box { flex: 0 1 auto; max-height: 42dvh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.q-img { flex: none; max-width: 100%; max-height: 20dvh; object-fit: contain; border-radius: var(--radius-sm); }
.q-text { font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; white-space: pre-line; font-size: 1.35rem; }
.q-text[data-size="2"] { font-size: 1.15rem; }
.q-text[data-size="3"] { font-size: 1rem; }
.q-text[data-size="4"] { font-size: 0.9rem; line-height: 1.25; }
.q-text--intro { max-width: 36rem; }
.screen-center.has-q .count-big { font-size: 4.5rem; }

/* With texts the buttons stop being giant symbols: symbol on top, text below, sized by length */
.answers.has-text { flex: 1 0 auto; grid-template-rows: repeat(2, minmax(min-content, 1fr)); }
.answers.has-text .answer-btn {
  height: auto;
  min-height: 4.5rem;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  font-size: 1.1rem;
}
.answers.has-text .answer-btn .symbol { font-size: 1.8rem; }
.answers.has-text .answer-text { max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; font-weight: 800; text-align: center; }
.answers.has-text[data-size="2"] .answer-btn { font-size: 1rem; }
.answers.has-text[data-size="3"] .answer-btn { font-size: 0.9rem; }
.answers.has-text.count-2 .answer-btn { font-size: 1.25rem; }
.answers.has-text.count-2[data-size="2"] .answer-btn { font-size: 1.1rem; }
.answers.has-text.count-2[data-size="3"] .answer-btn { font-size: 0.95rem; }
.answers.has-text.count-2 .answer-btn { flex-direction: row; gap: var(--space-3); }
.answers:not(.has-text) .answer-text { display: none; }

.wait-choice { font-weight: 800; font-size: 1.1rem; overflow-wrap: anywhere; max-width: 100%; }
.answer-msg { flex: none; text-align: center; font-weight: 700; background: var(--color-error-bg); color: var(--color-error-text); border-radius: var(--radius-sm); padding: var(--space-2); }

.wait-chip { width: 7rem; height: 7rem; font-size: 4rem; border-radius: var(--radius-lg); cursor: default; }

/* Results */
.result-title { font-size: clamp(2.5rem, 12vw, 4rem); font-weight: 900; line-height: 1.05; }
.result-points { font-size: var(--fs-xl); font-weight: 800; }
.result-points:empty { display: none; }
.result-score { font-size: var(--fs-lg); font-weight: 800; }
.result-score:empty { display: none; }
.result-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; font-size: 1.6rem; margin-top: var(--space-2); max-width: 100%; }
.result-correct { max-width: 100%; }
.res-ans { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; text-align: left; }
.res-ans .sym-chip { flex: none; font-size: 1.4rem; }
.res-ans-text { min-width: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.result-chips:has(.res-ans) { flex-direction: column; align-items: center; }
.res-ok { background: var(--color-success); }
.res-bad { background: #b3122b; }
.res-miss { background: #4a4468; }

/* Final */
.place { font-size: 6rem; font-weight: 900; line-height: 1; }
.place--1 { color: #ffd23f; }
.place--2 { color: #dfe6ee; }
.place--3 { color: #e39a5b; }
.again-btn { margin-top: var(--space-4); text-decoration: none; }

/* Sound switch (off by default) */
.snd-btn {
  flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.6rem -0.5rem 0; padding: 0;
  color: #fff; background: transparent; border: 0; border-radius: 50%; cursor: pointer; opacity: 0.85;
}
.snd-btn.is-off { opacity: 0.55; }
.snd-svg { width: 1.5rem; height: 1.5rem; }

/* Countdown: warning colour + pulse in the last 5 seconds; 3-2-1 digits pop in */
.timebar.is-low .timebar-fill { background: #ff4d5e; }
.timebar.is-low .timebar-num { color: #ffb3bb; animation: num-pulse 1s ease-in-out infinite; }
.count-big.pop { animation: pop 0.5s ease-out; }
@keyframes pop { from { transform: scale(1.7); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes num-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .timebar.is-low .timebar-num, .count-big.pop { animation: none; }
}

/* Landscape phones: question on the left, answers on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .screen-answer { flex-direction: row; align-items: stretch; }
  .q-box { flex: 0 0 40%; max-height: none; justify-content: safe center; }
  .q-box[hidden] + .answers-wrap { flex-basis: 100%; }
  .q-img { max-height: 40dvh; }
  .answers-wrap { flex: 1 1 0; }
  .answers { flex: 1 1 0; min-width: 0; }
  .submit-btn { min-height: 2.6rem; }
  .answers.has-text { flex: 1 1 0; grid-template-rows: repeat(2, minmax(min-content, 1fr)); }
  .answers.has-text .answer-btn { min-height: 3.2rem; flex-direction: row; }
  .answers.has-text .answer-btn .symbol { font-size: 1.3rem; }
}

/* Short phones (iPhone SE 320x568): tighten */
@media (max-height: 620px) {
  .count-big { font-size: 5rem; }
  .place { font-size: 4.5rem; }
  .wait-chip { width: 5rem; height: 5rem; font-size: 3rem; }
  .screen { padding: var(--space-3); }
}