html {
  font-size: 14px;
}

/* The hidden attribute must win over Bootstrap display utilities like d-flex. */
[hidden] { display: none !important; }

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ---- Slide stage (shared by preview and the student screen) ---- */
.slide-stage {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  min-height: 50vh;
  box-shadow: 0 .25rem 1rem rgba(0,0,0,.05);
}
.slide-title { font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 600; margin-bottom: 1rem; }
.slide-kind { color: var(--bs-secondary-color); letter-spacing: .05em; margin-bottom: .25rem; }
.slide-image { display: block; max-width: 100%; max-height: 45vh; margin: 0 auto 1rem; border-radius: .5rem; }
.slide-body { font-size: clamp(1rem, 2.2vw, 1.3rem); }
.slide-body p { margin-bottom: .4rem; }
.slide-gap { height: .75rem; }
.slide-choices { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.slide-choice {
  display: flex; align-items: center; gap: .75rem;
  border: 2px solid var(--bs-border-color); border-radius: .6rem;
  padding: .75rem 1rem; font-size: 1.1rem; background: var(--bs-light);
}
.slide-choice-letter {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-secondary-bg); font-weight: 600;
}
.slide-choice.is-correct { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.slide-choices-tf { grid-template-columns: 1fr 1fr; }
.slide-choices-tf .slide-choice { justify-content: center; font-size: 1.4rem; font-weight: 600; padding: 1.25rem 1rem; }
.slide-choices-tf .slide-choice-letter { display: none; }
.slide-choices-tf .slide-choice { position: relative; }
.slide-choices-tf .slide-choice > .ms-auto { position: absolute; top: .35rem; right: .6rem; font-size: .75rem; }

/* ---- Formatted teacher text: keep line breaks and spacing exactly as typed ---- */
.formatted-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.formatted-input { font-family: inherit; }

/* ---- Question header: type, points, countdown ---- */
.slide-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.slide-header .slide-kind { margin-bottom: 0; }
.slide-points { font-weight: 600; }
.slide-timer {
  display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem;
  padding: .35rem .9rem; border-radius: 999px; border: 2px solid var(--bs-border-color);
  font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bs-light);
}
.slide-timer.is-running { border-color: var(--bs-primary); color: var(--bs-primary); }
.slide-timer.is-low { border-color: var(--bs-danger); color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.slide-timer.is-expired { border-color: var(--bs-danger); color: #fff; background: var(--bs-danger); font-size: 1rem; }

/* ---- Live sessions ---- */
.join-code {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: .25em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--bs-primary);
}
.join-code-inline { font-weight: 800; letter-spacing: .2em; color: var(--bs-primary); }
.join-code-input { letter-spacing: .2em; font-weight: 700; }
.team-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); flex: 0 0 auto; }
.team-dot.is-on { background: var(--bs-success); border-color: var(--bs-success); }

/* ---- Answering (team screen) ---- */
button.slide-choice { width: 100%; text-align: left; cursor: pointer; color: inherit; }
button.slide-choice:hover:not(:disabled) { border-color: var(--bs-primary); }
button.slide-choice:disabled { cursor: default; opacity: 1; }
.slide-choice.is-selected { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); box-shadow: 0 0 0 2px var(--bs-primary) inset; }
.slide-choice.is-wrong { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); box-shadow: none; }
.slide-choice.is-correct { box-shadow: none; }
.answer-status { border-radius: .6rem; padding: .9rem 1rem; text-align: center; font-weight: 600; font-size: 1.1rem; }
.answer-status.is-done { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.answer-status.is-good { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.answer-status.is-bad  { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.score-pill { font-size: .9rem; font-weight: 600; }

/* ---- Live results (host screen): one series, so one hue; correct row uses the status color + a text label ---- */
.result-bars { display: grid; gap: .5rem; }
.result-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) 3fr auto; align-items: center; gap: .75rem; }
.result-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-track { height: 1.1rem; background: var(--bs-secondary-bg); border-radius: 4px; overflow: hidden; }
.result-bar { height: 100%; background: var(--bs-primary); border-radius: 0 4px 4px 0; transition: width .3s ease; min-width: 2px; }
.result-row.is-correct .result-bar { background: var(--bs-success); }
.result-correct { color: var(--bs-success-text-emphasis); font-weight: 600; font-size: .85em; }
.result-value { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); min-width: 4.5rem; text-align: right; }
.open-answer { border-bottom: 1px solid var(--bs-border-color); padding: .75rem 0; }
.open-answer:last-child { border-bottom: 0; }
.open-answer-text { font-size: 1.05rem; }
.mark-input { width: 5rem; }
@media (max-width: 575.98px) { .result-row { grid-template-columns: 1fr auto; } .result-track { grid-column: 1 / -1; grid-row: 2; } }
.model-answer { border: 2px solid var(--bs-success); background: var(--bs-success-bg-subtle); border-radius: .6rem; padding: .75rem 1rem; font-size: 1.1rem; }
.model-answer .text-uppercase { color: var(--bs-success-text-emphasis); letter-spacing: .05em; }
.team-choice { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .15rem .6rem; background: var(--bs-body-bg); }
.team-choice.is-right { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.team-choice.is-wrong { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.live-status { font-weight: 600; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); background: var(--bs-light); }
.live-status[data-status="connected"] { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success); }
.live-status[data-status="connected"]::before { content: "\25CF  "; }
.live-status[data-status="offline"], .live-status[data-status="reconnecting"] { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning); }

/* ---- Final scores ---- */
.scoreboard .score-row { display: grid; grid-template-columns: 2.5rem minmax(6rem, 1.5fr) 3fr auto; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--bs-border-color); font-size: 1.15rem; }
.scoreboard .score-row:last-child { border-bottom: 0; }
.scoreboard .score-rank { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-secondary-bg); font-weight: 700; }
.scoreboard .is-first .score-rank { background: var(--bs-warning); color: #000; }
.scoreboard .score-name { font-weight: 600; }
.scoreboard .score-track { height: .9rem; background: var(--bs-secondary-bg); border-radius: 4px; overflow: hidden; }
.scoreboard .score-bar { display: block; height: 100%; background: var(--bs-primary); border-radius: 0 4px 4px 0; min-width: 2px; }
.scoreboard .score-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; min-width: 4.5rem; }
.scoreboard .is-mine { background: var(--bs-primary-bg-subtle); border-radius: .5rem; }
@media (max-width: 575.98px) { .scoreboard .score-row { grid-template-columns: 2.5rem 1fr auto; } .scoreboard .score-track { display: none; } }

/* ---- Report ---- */
.report-table th[scope=row] { font-weight: 600; }
.report-table td, .report-table th { vertical-align: top; }
.answer-history li { margin-bottom: .15rem; }
.report-question .mark-input { width: 4.5rem; }
@media print {
  .report-question { break-inside: avoid; }
  details { display: block; } details > summary { list-style: none; }
  details:not([open]) > ol { display: block !important; }
  .mark-form button, .mark-form input, .mark-form .text-muted:not(:last-child) { display: none !important; }
  footer, header { display: none !important; }
}

.join-code-input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* Spreadsheet import preview */
.import-preview { max-height: 32rem; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.import-preview .formatted-text { white-space: pre-wrap; }

/* =====================================================================
   Theme colours. Change these to restyle the projector screen and the
   coloured answer letters everywhere.
   ===================================================================== */
:root {
  --ll-indigo-950: #1e1b4b;
  --ll-indigo-900: #312e81;
  --ll-indigo-700: #4338ca;
  --ll-indigo-600: #4f46e5;
  --ll-indigo-200: #c7d2fe;
  --ll-indigo-100: #e0e7ff;
  --ll-indigo-50:  #eef2ff;
  --ll-ink:        #0f172a;
  --ll-muted:      #475569;
  --ll-surface:    #f8fafc;
  --ll-correct:    #15803d;
  --ll-correct-bg: #dcfce7;
  --ll-low:        #dc2626;
  --ll-gold:       #f59e0b;
  --ll-silver:     #94a3b8;
  --ll-bronze:     #c2773a;
  /* Answer letters A–F (same on the projector and the team phones). */
  --ll-a: #4f46e5;
  --ll-b: #c2410c;
  --ll-c: #0369a1;
  --ll-d: #be185d;
  --ll-e: #6d28d9;
  --ll-f: #475569;
}

/* Coloured answer letters on every slide view (preview, teacher, team phones). */
.slide-choices > :nth-child(1) .slide-choice-letter { background: var(--ll-a); color: #fff; }
.slide-choices > :nth-child(2) .slide-choice-letter { background: var(--ll-b); color: #fff; }
.slide-choices > :nth-child(3) .slide-choice-letter { background: var(--ll-c); color: #fff; }
.slide-choices > :nth-child(4) .slide-choice-letter { background: var(--ll-d); color: #fff; }
.slide-choices > :nth-child(5) .slide-choice-letter { background: var(--ll-e); color: #fff; }
.slide-choices > :nth-child(6) .slide-choice-letter { background: var(--ll-f); color: #fff; }

/* =====================================================================
   Projector screen (/Live/Present). Sized from the window so it fills
   any projector, and readable from the back of the room.
   ===================================================================== */
body.present {
  margin: 0; height: 100vh; overflow: hidden; color: var(--ll-ink);
  background: var(--ll-surface);
  font-size: clamp(14px, 1.6vmin + 0.5vw, 30px);
}
body.present.is-idle { cursor: none; }
#pz-root, .pz-stage { height: 100vh; }
.pz-stage { display: flex; flex-direction: column; }
.pz-stage.pz-is-lobby, .pz-stage.pz-is-scores, .pz-stage.pz-is-ended {
  color: #fff; background: radial-gradient(ellipse at top, var(--ll-indigo-700), var(--ll-indigo-950) 70%);
}
.pz-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .9em; opacity: .8; }
.pz-eyebrow-es { font-weight: 500; }

/* Lobby */
.pz-lobby { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4vh 4vw; }
.pz-lobby-title { font-size: 1.4em; font-weight: 600; opacity: .85; margin-bottom: 5vh; }
.pz-url { font-size: clamp(2rem, 6vw, 6rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; overflow-wrap: anywhere; }
.pz-code { display: flex; gap: 1.2vw; margin-top: 1vh; }
.pz-code span {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(3rem, 9vw, 9rem); height: clamp(3.6rem, 11vw, 11rem);
  font-size: clamp(2.4rem, 7vw, 7.5rem); font-weight: 800; color: var(--ll-indigo-950);
  background: #fff; border-radius: .18em; box-shadow: 0 .4rem 0 var(--ll-indigo-200);
}
.pz-joined { margin-top: 5vh; font-size: 1.3em; }
.pz-joined-count { font-weight: 800; font-size: 1.6em; margin-right: .2em; }
.pz-chips { list-style: none; padding: 0; margin: 2vh 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; max-width: 85vw; max-height: 22vh; overflow: hidden; }
.pz-chips li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .25em .9em; font-weight: 600; animation: pz-pop .35s ease-out; }
@keyframes pz-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Top bar on slides */
.pz-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2vw; padding: 1.4vh 2.5vw;
  background: var(--ll-indigo-950); color: #fff; font-size: .85em;
}
.pz-top-title { font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 0; }
.pz-top-pos { font-weight: 800; font-size: 1.15em; white-space: nowrap; }
.pz-top-join { flex: 1 1 0; text-align: right; opacity: .85; white-space: nowrap; }
.pz-top-code { letter-spacing: .15em; color: #fff; }

/* Content slides */
.pz-content { flex: 1; overflow: hidden; padding: 5vh 6vw; display: flex; flex-direction: column; justify-content: center; }
.pz-content-title { font-size: clamp(2rem, 5vw, 5rem); font-weight: 800; line-height: 1.1; margin-bottom: 3vh; }
.pz-content-body { font-size: 1.6em; line-height: 1.4; }
.pz-content-body p { margin-bottom: .3em; }
.pz-gap { height: .6em; }
.pz-image { display: block; max-width: 100%; max-height: 38vh; margin: 0 auto 2vh; border-radius: .5rem; object-fit: contain; }

/* Questions */
.pz-question-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr clamp(12rem, 22vw, 26rem); }
.pz-main { min-width: 0; overflow: hidden; padding: 4vh 3vw 6vh 4vw; display: flex; flex-direction: column; justify-content: center; }
.pz-meta { display: flex; align-items: center; gap: .8em; margin-bottom: 1.5vh; }
.pz-kind { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ll-indigo-700); }
.pz-points { font-weight: 700; padding: .1em .7em; border-radius: 999px; background: var(--ll-indigo-100); color: var(--ll-indigo-900); }
.pz-question { font-size: clamp(1.8rem, 2.6vw + 1.4vh, 4.2rem); font-weight: 750; line-height: 1.18; margin-bottom: 3vh; }
.pz-main .pz-image { margin: 0 0 3vh; max-height: 30vh; }
.pz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1.4vw; margin-top: 2vh; }
.pz-choices.is-many { grid-template-columns: 1fr 1fr 1fr; }
.pz-choice {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: .8em;
  min-height: 11vh; padding: 1.2vh 1.2vw; border-radius: .6em; background: #fff;
  border: 3px solid #e2e8f0; font-size: 1.45em; font-weight: 600; line-height: 1.2;
  transition: opacity .3s, border-color .3s;
}
/* After a reveal, a light bar behind each choice shows how many teams picked it. */
.pz-choice::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pz-fill, 0%); background: var(--ll-indigo-100); transition: width .6s ease-out; z-index: 0; }
.pz-choice > * { position: relative; z-index: 1; }
.pz-letter {
  flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: .35em; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; background: var(--ll-a);
}
.pz-letter-1 { background: var(--ll-b); } .pz-letter-2 { background: var(--ll-c); } .pz-letter-3 { background: var(--ll-d); }
.pz-letter-4 { background: var(--ll-e); } .pz-letter-5 { background: var(--ll-f); }
.pz-choice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pz-choice-count { font-size: .7em; font-weight: 700; color: var(--ll-muted); white-space: nowrap; }
.pz-choice.is-correct { border-color: var(--ll-correct); box-shadow: 0 0 0 4px var(--ll-correct-bg); }
.pz-choice.is-correct::before { background: var(--ll-correct-bg); }
.pz-choice.is-dim { opacity: .45; }
.pz-correct-tag { font-size: .7em; font-weight: 800; color: #fff; background: var(--ll-correct); border-radius: 999px; padding: .15em .7em; white-space: nowrap; }
.pz-choices.is-tf .pz-choice { justify-content: center; min-height: 18vh; font-size: 2em; }
.pz-choices.is-tf .pz-letter { display: none; }
.pz-choices.is-tf .pz-choice-text { flex: 0 1 auto; text-align: center; }
.pz-model-answer { margin-top: 2vh; border: 3px solid var(--ll-correct); background: var(--ll-correct-bg); border-radius: .6em; padding: 2vh 1.6vw; font-size: 1.5em; font-weight: 600; }
.pz-model-answer-label { font-size: .6em; text-transform: uppercase; letter-spacing: .1em; color: var(--ll-correct); font-weight: 800; margin-bottom: .3em; }
.pz-typing { margin-top: 2vh; font-size: 1.4em; color: var(--ll-muted); font-style: italic; }

/* Side panel: countdown and answered count */
.pz-side { background: #fff; border-left: 1px solid #e2e8f0; padding: 4vh 2vw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; }
.pz-timer { position: relative; width: min(100%, 30vh); aspect-ratio: 1; }
.pz-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pz-timer circle { fill: none; stroke-width: 9; }
.pz-timer-track { stroke: var(--ll-indigo-100); }
.pz-timer-ring { stroke: var(--ll-indigo-600); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .2s linear, stroke .3s; }
.pz-timer-value {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(1.6rem, 4.6vh + 1vw, 5.5rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ll-indigo-950); line-height: 1;
}
.pz-timer.is-low .pz-timer-ring { stroke: var(--ll-low); }
.pz-timer.is-low .pz-timer-value { color: var(--ll-low); animation: pz-pulse 1s ease-in-out infinite; }
.pz-timer.is-expired .pz-timer-track { stroke: var(--ll-low); }
.pz-timer.is-expired .pz-timer-value { color: var(--ll-low); font-size: clamp(1rem, 2.6vh + .6vw, 2.6rem); }
@keyframes pz-pulse { 50% { transform: scale(1.08); } }
.pz-answered { width: 100%; text-align: center; }
.pz-answered-num { font-size: clamp(2.2rem, 6vh + 1vw, 6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ll-indigo-950); }
.pz-answered-of { font-size: .5em; color: var(--ll-muted); font-weight: 700; }
.pz-answered-label { color: var(--ll-muted); font-weight: 600; margin: .4em 0 .8em; }
.pz-answered-track { height: 1.2vh; min-height: 8px; background: var(--ll-indigo-100); border-radius: 999px; overflow: hidden; }
.pz-answered-bar { height: 100%; background: var(--ll-indigo-600); border-radius: 999px; transition: width .4s ease-out; }
.pz-revealed { white-space: nowrap; font-size: .85em; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ll-correct); background: var(--ll-correct-bg); border-radius: 999px; padding: .3em 1em; }

/* Final scores: podium for the top three, then everyone else */
.pz-scores { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 4vh 4vw 3vh; text-align: center; }
.pz-scores-title { font-size: clamp(2.2rem, 6vh + 1vw, 5.5rem); font-weight: 800; margin: .2em 0 4vh; }
.pz-empty { font-size: 1.4em; opacity: .8; }
.pz-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 22em)); gap: 1.5vw; align-items: end; width: 100%; justify-content: center; flex: 1; min-height: 0; }
.pz-step { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; height: 100%; animation: pz-rise .7s ease-out both; }
@keyframes pz-rise { from { transform: translateY(8vh); opacity: 0; } to { transform: none; opacity: 1; } }
.pz-step-teams { list-style: none; padding: 0; margin: 0 0 1.2vh; display: flex; flex-direction: column; gap: .5vh; overflow: hidden; min-height: 0; }
.pz-step-teams li { display: flex; flex-direction: column; align-items: center; }
.pz-step-name { font-size: 1.35em; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-place-1 .pz-step-name { font-size: 1.6em; }
.pz-step-teams.is-many { display: grid; grid-template-columns: 1fr 1fr; gap: .4vh .8vw; }
.pz-step-teams.is-many .pz-step-name { font-size: 1em; }
.pz-step-score { font-size: 1em; font-weight: 700; opacity: .95; }
.pz-step-score span { opacity: .7; font-size: .85em; margin-left: .3em; }
.pz-step-block { flex: 0 0 auto; width: 100%; border-radius: .5em .5em 0 0; display: flex; flex-direction: column; align-items: center; padding: 1.2vh 0 1vh; color: var(--ll-indigo-950); }
.pz-step-rank { font-size: 2.6em; font-weight: 900; line-height: 1; }
.pz-step-label { font-size: .8em; font-weight: 700; margin-top: .3em; }
.pz-place-1 .pz-step-block { min-height: 16vh; background: var(--ll-gold); }
.pz-place-2 .pz-step-block { min-height: 11vh; background: var(--ll-silver); }
.pz-place-3 .pz-step-block { min-height: 8vh; background: var(--ll-bronze); }
.pz-step.is-empty .pz-step-block { opacity: .35; }
.pz-place-note { margin-top: 2vh; font-size: .85em; opacity: .75; }
.pz-scores-title .pz-es { display: block; font-size: .4em; color: var(--ll-indigo-200); }

/* Controls (fade out when the mouse is still) */
.pz-controls {
  position: fixed; left: 50%; bottom: 2vh; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: .4rem; padding: .4rem; border-radius: .8rem;
  background: rgba(15, 23, 42, .85); box-shadow: 0 .5rem 2rem rgba(0,0,0,.25); font-size: 15px;
  transition: opacity .4s;
}
body.is-idle .pz-controls { opacity: 0; pointer-events: none; }
.pz-controls-gap { width: .6rem; }
.pz-btn { border: 0; border-radius: .5rem; padding: .45rem .9rem; background: rgba(255,255,255,.12); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pz-btn:hover:not(:disabled) { background: rgba(255,255,255,.25); color: #fff; }
.pz-btn:disabled { opacity: .35; }
.pz-btn-primary { background: var(--ll-indigo-600); }
.pz-btn-primary:hover:not(:disabled) { background: var(--ll-indigo-700); }
.pz-offline { position: fixed; top: 1vh; right: 1vw; z-index: 11; background: #fef3c7; color: #92400e; font-weight: 700; padding: .3em .9em; border-radius: 999px; }

/* Narrow windows (e.g. testing on a laptop half-screen): stack the side panel under the question. */
@media (max-aspect-ratio: 1/1) {
  .pz-question-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .pz-side { flex-direction: row; justify-content: center; border-left: 0; border-top: 1px solid #e2e8f0; padding: 2vh 4vw; }
  .pz-timer { width: 18vh; }
  .pz-choices, .pz-choices.is-many { grid-template-columns: 1fr; }
  .pz-top-join { display: none; }
}

/* Spanish fields in the slide editor */
.es-block { border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 0 .5rem .5rem 0; padding: .75rem 1rem; }
.es-label { font-weight: 700; color: #92400e; margin-bottom: .4rem; }
.es-label span { font-weight: 400; color: #78716c; }
.es-input { background: #fffbeb; }
.es-text { color: var(--bs-secondary-color); font-style: italic; }
.badge-es-missing { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }

/* Spanish lines on the projector: same size family, lighter, so both languages read from the back. */
.pz-es { display: block; color: var(--ll-muted); font-weight: 500; font-style: italic; }
.pz-question-es { font-size: clamp(1.3rem, 1.8vw + 1vh, 3rem); line-height: 1.2; margin: -1.5vh 0 3vh; }
.pz-content-title-es { font-size: clamp(1.4rem, 3vw, 3rem); margin: -1.5vh 0 3vh; }
.pz-content-body-es { font-size: 1.3em; margin-top: 2vh; }
.pz-choice-es { font-size: .72em; margin-top: .15em; }
.pz-choices.is-tf .pz-choice-es { font-size: .6em; }
.pz-sound-hint { position: fixed; top: 1.2vh; left: 50%; transform: translateX(-50%); z-index: 12; border: 0; border-radius: 999px; padding: .4em 1.1em; background: #fef3c7; color: #92400e; font-weight: 700; font-size: 15px; box-shadow: 0 .3rem 1rem rgba(0,0,0,.15); }

/* Percentages and PBE places on scoreboards */
.scoreboard .score-row { grid-template-columns: 2.5rem minmax(8rem, 1.5fr) 2fr auto; }
.scoreboard .score-value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.score-pct { font-size: .8em; font-weight: 700; color: var(--bs-body-color); }
.score-oftop { font-size: .7em; font-weight: 500; color: var(--bs-secondary-color); white-space: nowrap; }
.place-badge { display: inline-block; font-size: .7em; font-weight: 700; border-radius: 999px; padding: .1em .6em; margin-left: .3em; vertical-align: middle; white-space: nowrap; }
.place-badge.place-1 { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.place-badge.place-2 { background: #f1f5f9; color: #334155; border: 1px solid #94a3b8; }
.place-badge.place-3 { background: #fdf0e6; color: #7c3d12; border: 1px solid #c2773a; }
@media (max-width: 575.98px) { .scoreboard .score-row { grid-template-columns: 2.5rem 1fr auto; } }

/* Grader page: question tabs and both language versions */
.grade-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.grade-tab { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; font-weight: 600; }
.grade-tab:hover { border-color: var(--bs-primary); }
.grade-tab.is-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.grade-tab.has-work:not(.is-active) { border-color: #f59e0b; background: #fffbeb; }
.grade-tab.is-done:not(.is-active) { color: var(--bs-success-text-emphasis); }
.grade-tab-count { background: #f59e0b; color: #000; border-radius: 999px; padding: 0 .45rem; font-size: .8em; }
.grade-tab.is-active .grade-tab-count { background: #fff; }
.grade-tab-live { color: #dc2626; font-size: .7em; }
.grade-tab.is-active .grade-tab-live { color: #fff; }
.grade-version { padding: .5rem .75rem; border-radius: .5rem; margin-bottom: .5rem; }
.grade-version.is-primary { background: var(--bs-light); }
.grade-version.is-secondary { border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); }
.grade-version-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .15rem; }

/* Scratched questions in the report */
.report-question.is-scratched .card-body { opacity: .6; }
.report-question.is-scratched .card-header { background: #fef2f2; }
.place-badge.place-4 { background: #eef2ff; color: #3730a3; border: 1px solid #a5b4fc; }
.place-badge.place-5 { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }

/* 4th place and Participation under the podium */
.pz-lower-places { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vw; width: min(100%, 66em); margin-top: 1.5vh; animation: pz-rise .7s ease-out both; }
.pz-lower { background: rgba(255,255,255,.1); border-radius: .5em; padding: .6em 1em; text-align: left; min-height: 0; overflow: hidden; animation: pz-rise .7s ease-out both; }
.pz-lower-label { font-weight: 800; margin-bottom: .3em; }
.pz-lower-label span { font-weight: 500; opacity: .75; }
.pz-lower ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2em 1.2em; max-height: 14vh; overflow: hidden; }
.pz-lower li { display: flex; justify-content: space-between; gap: .6em; font-size: .95em; }
.pz-lower-none { opacity: .5; }
.pz-lower.is-empty { opacity: .55; }
.pz-review-es { color: var(--ll-indigo-200); font-size: clamp(1.4rem, 3vw, 3rem); margin-top: 1vh; }
.pz-stage.pz-is-review { color: #fff; background: radial-gradient(ellipse at top, var(--ll-indigo-700), var(--ll-indigo-950) 70%); }