/* Quizpio frontend styles. Scoped to .quizpio-mount and descendants. */
/* Visually hidden but available to assistive tech (screen readers). */
.quizpio-mount .qp-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
}
/* Visible focus ring for keyboard navigation. */
.quizpio-mount button:focus-visible,
.quizpio-mount a:focus-visible,
.quizpio-mount input:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 2px;
}
.quizpio-mount {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #1f2937;
max-width: 960px;
margin: 24px auto;
}
/* Quiz-title eyebrow shown above the lobby header and the Final Results
trophy hero. Only rendered when the mount config carries `quizTitle` —
which is only set for embed contexts in render_mount(). On the CPT
permalink view the theme handles the title via the normal post-title
chrome, so the mount stays clean. Muted, uppercase, letter-spaced — same
visual family as the existing .qp-pin-label so the bookends rhyme. */
.quizpio-mount .qp-quiz-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #6b7280;
font-weight: 500;
margin-bottom: 4px;
}
.quizpio-mount .qp-final-hero .qp-quiz-eyebrow {
margin-bottom: 12px;
}
/* Force every descendant inside .quizpio-mount to inherit our system-font
stack rather than letting form elements (which UA stylesheets don't make
inherit by default) or theme overrides on headings leak through. The
`.quizpio-mount *` selector beats the bare `h2` or `button` rules typical
themes use. Single source of truth for the plugin's frontend font. */
.quizpio-mount * {
font-family: inherit;
}
/* When a sidebar is showing on the host view, allow more horizontal room. */
.quizpio-mount:has( .qp-host.has-sidebar ) {
max-width: 1400px;
}
.quizpio-mount .qp-loading {
text-align: center;
padding: 40px;
color: #6b7280;
}
.quizpio-mount .qp-error {
background: #fef2f2;
color: #b91c1c;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 12px;
border: 1px solid #fecaca;
}
/* Player avatars: pastel background + punched-up letter on top. Color is
hashed deterministically from the nickname in JS. aria-hidden is set on
the element so screen readers don't double-read the initial — the full
player name sits next to the avatar in every spot it appears. */
.quizpio-mount .qp-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
font-weight: 700;
font-size: 0.85rem;
line-height: 1;
user-select: none;
}
.quizpio-mount .qp-avatar-sm {
width: 1.75rem;
height: 1.75rem;
font-size: 0.75rem;
}
/* Used wherever an avatar sits next to a player's name inside a flex row
whose other end is the score. Groups the two so they stay together as
the row stretches. */
.quizpio-mount .qp-lb-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Buttons */
.quizpio-mount .qp-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border: 0;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
transition: transform 0.05s ease, opacity 0.15s ease;
}
.quizpio-mount .qp-btn:active { transform: scale( 0.97 ); }
.quizpio-mount .qp-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.quizpio-mount .qp-btn-primary { background: #4f46e5; color: #fff; }
.quizpio-mount .qp-btn-primary:hover { background: #4338ca; }
.quizpio-mount .qp-btn-secondary { background: #ffffff; color: #1f2937; border: 1px solid #d1d5db; }
.quizpio-mount .qp-btn-secondary:hover { background: #f3f4f6; }
.quizpio-mount .qp-btn-danger { background: #ef4444; color: #fff; }
.quizpio-mount .qp-btn-danger:hover { background: #dc2626; }
.quizpio-mount .qp-link {
background: none; border: 0; color: #4f46e5;
cursor: pointer; padding: 4px; text-decoration: underline;
}
/* Bottom-right placement for the subtle Leave-quiz link on the player's
question + reveal screens. Out of the way of the gameplay focus; the
confirm dialog handles the consequence. */
.quizpio-mount .qp-leave-quiz {
text-align: right;
margin-top: 24px;
}
/* Join form */
.quizpio-mount .qp-join {
max-width: 380px;
margin: 0 auto;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.04 );
}
.quizpio-mount .qp-join h3 { margin: 0 0 16px; font-size: 22px; }
.quizpio-mount .qp-join input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
font-size: 16px;
margin-bottom: 12px;
}
.quizpio-mount .qp-join input:focus {
outline: 0;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba( 79, 70, 229, 0.15 );
}
.quizpio-mount .qp-join .qp-btn { width: 100%; justify-content: center; }
/* Host launch screen */
.quizpio-mount .qp-host-launch {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 24px;
text-align: center;
}
.quizpio-mount .qp-host-launch h3 { margin: 0 0 8px; }
/* Host bar */
.quizpio-mount .qp-host { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; }
.quizpio-mount .qp-host-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #1f2937;
color: #fff;
flex-wrap: wrap;
}
.quizpio-mount .qp-host-bar .qp-pin b { font-size: 18px; letter-spacing: 1px; }
.quizpio-mount .qp-host-bar .qp-host-trophy {
display: block;
height: 28px;
width: auto;
flex-shrink: 0;
}
.quizpio-mount .qp-host-actions { margin-left: auto; display: flex; gap: 8px; }
/* Host stage: main content + optional sidebar leaderboard */
.quizpio-mount .qp-host-stage {
display: block;
}
.quizpio-mount .qp-host-stage.has-sidebar {
/* On wide viewports show the sidebar to the right of the main column. */
display: grid;
grid-template-columns: 1fr;
}
@media ( min-width: 1024px ) {
.quizpio-mount .qp-host-stage.has-sidebar {
grid-template-columns: minmax( 0, 1fr ) 320px;
}
}
.quizpio-mount .qp-host-main {
min-width: 0; /* let grid track shrink */
}
.quizpio-mount .qp-host-sidebar {
/* Visible at all widths. On narrow screens the stage grid is a single
column, so the leaderboard stacks below the question/reveal with a top
divider; on desktop it sits in the right column (see media query). */
display: block;
border-top: 1px solid #e5e7eb;
padding: 20px;
background: #fafbfc;
min-width: 0;
}
@media ( min-width: 1024px ) {
.quizpio-mount .qp-host-stage.has-sidebar .qp-host-sidebar {
border-top: 0;
border-left: 1px solid #e5e7eb;
padding: 24px 20px;
}
}
.quizpio-mount .qp-sidebar-toggle {
/* only meaningful on wider screens; hide on narrow */
display: none;
}
@media ( min-width: 1024px ) {
.quizpio-mount .qp-sidebar-toggle { display: inline-flex; }
}
.quizpio-mount .qp-sidebar-title {
margin: 0 0 12px;
font-size: 13px;
color: #4b5563;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 700;
}
.quizpio-mount .qp-sidebar-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.quizpio-mount .qp-sidebar-row {
display: grid;
grid-template-columns: 24px 1.75rem 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 8px;
transition: transform 0.3s ease, background 0.3s ease;
}
.quizpio-mount .qp-sidebar-rank {
font-weight: 700;
color: #6b7280;
font-size: 13px;
text-align: center;
}
.quizpio-mount .qp-sidebar-name {
font-weight: 600;
color: #111827;
min-width: 0;
overflow-wrap: break-word;
}
.quizpio-mount .qp-sidebar-score {
font-weight: 700;
color: #4f46e5;
}
.quizpio-mount .qp-sidebar-row.qp-lb-1 { background: #fffbeb; border-color: #fcd34d; }
.quizpio-mount .qp-sidebar-row.qp-lb-1 .qp-sidebar-rank { color: #d97706; }
.quizpio-mount .qp-sidebar-row.qp-lb-2 { background: #f8fafc; border-color: #cbd5e1; }
.quizpio-mount .qp-sidebar-row.qp-lb-2 .qp-sidebar-rank { color: #475569; }
.quizpio-mount .qp-sidebar-row.qp-lb-3 { background: #fff7ed; border-color: #fdba74; }
.quizpio-mount .qp-sidebar-row.qp-lb-3 .qp-sidebar-rank { color: #b45309; }
/* Lobby */
.quizpio-mount .qp-lobby { padding: 32px; text-align: center; }
.quizpio-mount .qp-pin-display {
display: inline-block;
margin: 16px auto 24px;
padding: 24px 48px;
background: #f3f4f6;
border-radius: 16px;
}
.quizpio-mount .qp-pin-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; }
.quizpio-mount .qp-pin-num { font-size: 48px; font-weight: 700; letter-spacing: 4px; color: #1f2937; }
.quizpio-mount .qp-players { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quizpio-mount .qp-player-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: #1f2937;
padding: 4px 14px 4px 4px;
border: 1px solid #e5e7eb;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
}
/* Overflow indicator. No avatar inside, so the left padding can be symmetric.
Muted styling so it reads as a counter, not as another player. */
.quizpio-mount .qp-player-chip-more {
padding: 6px 14px;
background: #f9fafb;
color: #6b7280;
font-style: italic;
}
/* Question (host + player share) */
.quizpio-mount .qp-q-text { margin: 0 0 16px; font-size: 26px; line-height: 1.3; }
/* The h3 carries tabIndex=-1 so it can be programmatically focused for a11y.
Suppress the browser's default outline on tap (iOS Safari draws a black
box otherwise), but keep a branded :focus-visible ring for any future
keyboard-driven programmatic focus. */
.quizpio-mount .qp-q-text:focus { outline: none; }
.quizpio-mount .qp-q-text:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 2px;
border-radius: 4px;
}
/* Small "Q 1/2" indicator above the player timer. */
.quizpio-mount .qp-q-index {
color: #6b7280;
font-size: 14px;
font-weight: 500;
text-align: center;
margin: 0 0 8px;
}
.quizpio-mount .qp-timer-wrap {
display: flex;
justify-content: center;
margin: 0 0 20px;
}
.quizpio-mount .qp-timer-large {
font-size: 22px;
padding: 6px 20px;
border-radius: 999px;
background: #1f2937;
color: #fff;
min-width: 84px;
text-align: center;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: background-color 200ms ease, transform 200ms ease;
}
/* Amber warning: half the time is gone but no emergency yet. */
.quizpio-mount .qp-timer-large.is-warning {
background: #d97706;
}
/* Red urgency: final fifth of the question's time. */
.quizpio-mount .qp-timer-large.is-urgent {
background: #dc2626;
animation: qp-timer-pulse 1s ease-in-out infinite;
}
@keyframes qp-timer-pulse {
0%, 100% { transform: scale( 1 ); }
50% { transform: scale( 1.06 ); }
}
/* Manual-advance "waiting for host" state. Keeps the default black background
(this isn't an urgency signal — the host is just pacing the room) but
adds a calm breathing animation so the timer reads as alive rather than
stuck. Visible on both PlayerQuestion (post-time-up) and PlayerReveal
(post-reveal-pause) when session.manual_advance is true. */
.quizpio-mount .qp-timer-large.qp-timer-waiting {
background: #1f2937;
animation: qp-timer-breathe 2s ease-in-out infinite;
}
@keyframes qp-timer-breathe {
0%, 100% { transform: scale( 1 ); opacity: 1; }
50% { transform: scale( 1.04 ); opacity: 0.85; }
}
@media ( prefers-reduced-motion: reduce ) {
.quizpio-mount .qp-timer-large.is-urgent { animation: none; }
.quizpio-mount .qp-timer-large.qp-timer-waiting { animation: none; }
}
/* Subtle hint that tucks just under the timer when waiting for the host. */
.quizpio-mount .qp-waiting-host {
text-align: center;
margin: -12px 0 16px;
font-size: 13px;
color: #6b7280;
}
/* Question text on the live host + player screens — large enough to lead, but
leaves the timer as supporting info rather than competing. */
.quizpio-mount .qp-host-question .qp-q-text,
.quizpio-mount .qp-host-reveal .qp-q-text,
.quizpio-mount .qp-playing .qp-q-text {
font-size: 28px;
line-height: 1.3;
margin: 0 0 20px;
text-align: center;
}
/* Scale the timer down on phone-sized screens so it doesn't dominate. */
@media ( max-width: 480px ) {
.quizpio-mount .qp-timer-large {
font-size: 18px;
padding: 4px 14px;
min-width: 68px;
}
.quizpio-mount .qp-host-question .qp-q-text,
.quizpio-mount .qp-host-reveal .qp-q-text,
.quizpio-mount .qp-playing .qp-q-text {
font-size: 22px;
}
}
.quizpio-mount .qp-paused-badge {
background: #fef3c7;
color: #92400e;
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
font-size: 12px;
}
.quizpio-mount .qp-paused-banner {
background: #fef3c7;
color: #92400e;
padding: 10px 14px;
border-radius: 8px;
margin-bottom: 12px;
text-align: center;
font-weight: 600;
}
.quizpio-mount .qp-host.is-paused .qp-host-question,
.quizpio-mount .qp-host.is-paused .qp-host-reveal {
opacity: 0.85;
}
.quizpio-mount .qp-lobby-help { margin-top: 12px; color: #6b7280; font-size: 13px; }
.quizpio-mount .qp-empty { color: #6b7280; font-size: 13px; padding: 8px 0; }
.quizpio-mount .qp-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.quizpio-mount .qp-option {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px;
border-radius: 12px;
background: #ffffff;
border: 2px solid #e5e7eb;
color: #111827;
font-size: 17px;
font-weight: 600;
min-height: 84px;
text-align: left;
transition: transform 0.15s ease, opacity 0.2s ease, border-color 0.15s ease, background 0.15s ease;
}
.quizpio-mount .qp-player-options .qp-option { cursor: pointer; }
.quizpio-mount .qp-player-options .qp-option:hover:not([disabled]) {
transform: translateY( -2px );
border-color: #4f46e5;
}
.quizpio-mount .qp-option.is-picked {
background: #eef2ff;
border-color: #4f46e5;
color: #3730a3;
}
.quizpio-mount .qp-option.is-picked .qp-shape {
background: #4f46e5;
color: #fff;
}
.quizpio-mount .qp-option.is-faded { opacity: 0.5; }
.quizpio-mount .qp-shape {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: #4f46e5;
color: #fff;
font-size: 16px;
font-weight: 800;
flex-shrink: 0;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
transition: background 0.15s ease, color 0.15s ease;
}
.quizpio-mount .qp-opt-text { flex: 1; word-break: break-word; }
/* Host question / reveal */
.quizpio-mount .qp-host-question, .quizpio-mount .qp-host-reveal, .quizpio-mount .qp-host-final { padding: 32px; }
/* === Final Results === */
.quizpio-mount .qp-final-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 24px;
font-size: 36px;
font-weight: 700;
color: #111827;
letter-spacing: -0.5px;
}
.quizpio-mount .qp-final-title .qp-final-trophy {
display: block;
height: 1.4em;
width: auto;
flex-shrink: 0;
}
/* Byline under the "Final Results" heading: small muted line giving the
session's date, start/end times in the viewer's local timezone, and
duration. Pulled up under the heading on the host (which has 24px h2
bottom margin) and tucked under the heading on the player (where the
heading lives inside .qp-final-hero with no bottom margin). */
.quizpio-mount .qp-final-meta {
color: #6b7280;
font-size: 14px;
line-height: 1.5;
}
.quizpio-mount .qp-host-final .qp-final-meta {
margin: -18px 0 24px;
}
.quizpio-mount .qp-final-hero .qp-final-meta {
margin: 6px 0 0;
}
/* Wrapper for action buttons shown beneath the final-results content
(currently the player-side "Play another quiz" exit affordance). */
.quizpio-mount .qp-final-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 20px;
}
/* Summary strip */
.quizpio-mount .qp-final-summary {
display: grid;
grid-template-columns: repeat( 4, 1fr );
gap: 12px;
margin-bottom: 32px;
}
.quizpio-mount .qp-summary-tile {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 16px;
text-align: center;
}
.quizpio-mount .qp-summary-value {
font-size: 28px;
font-weight: 700;
color: #111827;
line-height: 1;
}
.quizpio-mount .qp-summary-label {
margin-top: 6px;
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
}
/* Podium */
.quizpio-mount .qp-podium {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
align-items: end;
margin-bottom: 32px;
}
.quizpio-mount .qp-podium-block {
border-radius: 12px;
padding: 20px 12px 16px;
text-align: center;
color: #fff;
}
.quizpio-mount .qp-podium-empty { background: transparent; min-height: 80px; }
.quizpio-mount .qp-podium-1 {
/* Flat amber-600. Brings the podium into the same flat-color design
language as the rest of the plugin (leaderboard rows, summary tiles,
standings). White text on #d97706 is 3.32:1 — passes AA Large, and
the text-shadow below adds perceptual cushion at the bold name. */
background: #d97706;
min-height: 160px;
box-shadow: 0 4px 16px rgba( 217, 119, 6, 0.35 );
}
.quizpio-mount .qp-podium-2 {
/* Flat slate-500. White on #64748b is 4.45:1 — AA Normal. */
background: #64748b;
min-height: 130px;
}
.quizpio-mount .qp-podium-3 {
/* Flat orange-600. White on #ea580c is 3.59:1 — AA Large. The orange
leaning keeps bronze distinct from #1's amber gold without going so
deep it loses energy. */
background: #ea580c;
min-height: 110px;
}
.quizpio-mount .qp-podium-medal {
font-size: 36px;
margin-bottom: 6px;
line-height: 1;
/* The medal emoji's natural color (gold/silver/bronze) matches the
podium block bg below it, so the two visually merge. A dark drop-shadow
gives the medal a halo that separates it from the block. The shadow
follows the glyph's actual shape since emojis render as glyphs. */
filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.35 ) );
}
.quizpio-mount .qp-podium-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 4px;
word-break: break-word;
/* Perceptual readability lift on top of the AA-passing color math —
helps especially at the top of #1's gradient where contrast is
tightest (3.32:1, AA Large only). */
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.35 );
}
.quizpio-mount .qp-podium-score {
font-size: 14px;
opacity: 0.9;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 );
}
/* Standings (4th+) */
.quizpio-mount .qp-standings {
background: #f9fafb;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 24px;
}
.quizpio-mount .qp-standings h3 {
margin: 0 0 8px;
font-size: 14px;
color: #4b5563;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.quizpio-mount .qp-standings ol { margin: 0; padding-left: 0; }
.quizpio-mount .qp-standings li {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 0;
font-weight: 500;
}
/* Question recap */
.quizpio-mount .qp-recap {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
}
.quizpio-mount .qp-recap > h3 {
margin: 0 0 16px;
font-size: 14px;
color: #4b5563;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.quizpio-mount .qp-recap-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.quizpio-mount .qp-recap-row {
padding: 12px 14px;
border: 1px solid #f3f4f6;
border-radius: 10px;
background: #fafbfc;
}
.quizpio-mount .qp-recap-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.quizpio-mount .qp-recap-num {
background: #4f46e5;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
flex-shrink: 0;
}
.quizpio-mount .qp-recap-q {
flex: 1;
font-weight: 600;
color: #111827;
min-width: 0;
word-break: break-word;
}
.quizpio-mount .qp-recap-pct {
font-weight: 700;
color: #16a34a;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.quizpio-mount .qp-recap-answer {
font-size: 14px;
color: #065f46;
margin-bottom: 6px;
}
.quizpio-mount .qp-recap-bar {
height: 6px;
background: #f3f4f6;
border-radius: 3px;
overflow: hidden;
margin-bottom: 4px;
}
.quizpio-mount .qp-recap-bar-fill {
height: 100%;
background: linear-gradient( 90deg, #16a34a 0%, #22c55e 100% );
border-radius: 3px;
transition: width 0.4s ease;
}
.quizpio-mount .qp-recap-meta {
font-size: 12px;
color: #6b7280;
}
/* --- Recap pagination (Load remaining N / Showing all N) --- */
.quizpio-mount .qp-recap-more {
margin-top: 24px;
text-align: center;
padding-top: 22px;
position: relative;
}
.quizpio-mount .qp-recap-more::before {
content: '';
position: absolute;
left: 12%;
right: 12%;
top: 0;
height: 1px;
background: linear-gradient( 90deg, transparent 0%, #e5e7eb 30%, #e5e7eb 70%, transparent 100% );
}
.quizpio-mount .qp-recap-more-btn {
background: #fff;
border: 1.5px solid #c7d2fe;
color: #4f46e5;
border-radius: 8px;
padding: 10px 22px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba( 79, 70, 229, 0.06 );
font-family: inherit;
line-height: 1.2;
}
.quizpio-mount .qp-recap-more-btn:hover,
.quizpio-mount .qp-recap-more-btn:focus-visible {
background: linear-gradient( 180deg, #eef2ff 0%, #ffffff 100% );
border-color: #4f46e5;
color: #4338ca;
transform: translateY( -1px );
box-shadow: 0 6px 16px rgba( 79, 70, 229, 0.18 );
outline: none;
}
.quizpio-mount .qp-recap-more-arrow {
display: inline-block;
font-size: 15px;
line-height: 1;
transition: transform 0.2s ease;
transform: translateY( 1px );
}
.quizpio-mount .qp-recap-more-btn:hover .qp-recap-more-arrow,
.quizpio-mount .qp-recap-more-btn:focus-visible .qp-recap-more-arrow {
transform: translateY( 3px );
}
.quizpio-mount .qp-recap-all {
display: inline-flex;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 13px;
font-weight: 500;
}
.quizpio-mount .qp-recap-all-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: #d1fae5;
color: #047857;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.quizpio-mount .qp-recap-all-text {
font-style: italic;
}
@media ( max-width: 600px ) {
.quizpio-mount .qp-final-summary { grid-template-columns: repeat( 2, 1fr ); }
.quizpio-mount .qp-podium { grid-template-columns: 1fr; }
.quizpio-mount .qp-podium-1, .quizpio-mount .qp-podium-2, .quizpio-mount .qp-podium-3 { min-height: auto; }
/* The podium renders in DOM order 2nd, 1st, 3rd for the centered desktop
row. Stacked in one column that reads 2-1-3, so reorder to 1-2-3 and hide
the empty placeholders (no meaning in a vertical list). */
.quizpio-mount .qp-podium-1 { order: 1; }
.quizpio-mount .qp-podium-2 { order: 2; }
.quizpio-mount .qp-podium-3 { order: 3; }
.quizpio-mount .qp-podium-empty { display: none; }
/* Final Results action stack (0.3.62)
On the host's Final Results screen, the three action buttons
(Start a new quiz / Download CSV / Close) compete for one row
on narrow viewports — text wraps vertically inside each button,
producing 4-line stacks per tile. Stack them full-width instead
so each reads on one line and the primary action is clearly
first in the visual hierarchy. Scoped to `.qp-host.is-ended` so
the live-quiz controls (Skip / Pause / End Quiz) keep their
inline row layout. */
.quizpio-mount .qp-host.is-ended .qp-host-actions {
width: 100%;
margin-top: 8px;
margin-left: 0;
flex-direction: column;
gap: 6px;
}
.quizpio-mount .qp-host.is-ended .qp-host-actions .qp-btn {
width: 100%;
justify-content: center;
}
}
.quizpio-mount .qp-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.quizpio-mount .qp-bar-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"label count"
"track count";
column-gap: 16px;
row-gap: 8px;
align-items: center;
padding: 14px 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
}
.quizpio-mount .qp-bar-row.is-correct { border-color: #22c55e; }
.quizpio-mount .qp-bar-row.is-correct .qp-bar-label { color: #16a34a; font-weight: 700; }
.quizpio-mount .qp-bar-label {
grid-area: label;
display: flex;
align-items: center;
min-width: 0;
}
.quizpio-mount .qp-bar-track {
grid-area: track;
height: 28px;
background: #f3f4f6;
border-radius: 6px;
overflow: hidden;
}
.quizpio-mount .qp-bar-fill {
height: 100%;
border-radius: 6px;
background: #cbd5e1;
transition: width 0.4s ease;
}
.quizpio-mount .qp-bar-row.is-correct .qp-bar-fill {
background: linear-gradient( 90deg, #16a34a 0%, #22c55e 100% );
}
.quizpio-mount .qp-bar-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
background: #4f46e5;
color: #fff;
font-size: 11px;
font-weight: 700;
margin-right: 8px;
flex-shrink: 0;
}
.quizpio-mount .qp-bar-row.is-correct .qp-bar-letter { background: #16a34a; }
.quizpio-mount .qp-bar-count {
grid-area: count;
align-self: center;
text-align: right;
font-weight: 700;
min-width: 32px;
}
/* Total-votes footer below the bars — right-aligned so the sum sits
beneath the per-option count column. Dashed top-border separates it
from the bars visually without competing with their card borders. */
.quizpio-mount .qp-total-votes {
color: #6b7280;
font-size: 13px;
margin-top: -8px;
margin-bottom: 16px;
padding-top: 12px;
border-top: 1px dashed #e5e7eb;
text-align: right;
}
.quizpio-mount .qp-total-votes strong { color: #374151; font-weight: 700; }
/* Personal-feedback banner on player reveal — green when correct,
muted gray when wrong. The text alone carries the personal feedback;
no indigo "you picked" bar treatment needed. */
.quizpio-mount .qp-feedback-banner {
padding: 12px 14px;
border-radius: 10px;
font-weight: 600;
margin-bottom: 16px;
text-align: center;
font-size: 15px;
}
.quizpio-mount .qp-feedback-banner.is-correct {
background: #dcfce7;
color: #15803d;
border: 1px solid #86efac;
}
.quizpio-mount .qp-feedback-banner.is-wrong {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
/* Leaderboard */
.quizpio-mount .qp-leaderboard {
background: #f9fafb;
border-radius: 12px;
padding: 16px 20px;
}
.quizpio-mount .qp-leaderboard h3 { margin: 0 0 12px; font-size: 16px; color: #4b5563; }
/* Rank is rendered explicitly in JSX so top-3 can swap in medal emojis;
the default counter is reset out, and rows lay out as a 3-cell grid:
rank | name-group | score. */
.quizpio-mount .qp-lb-list {
list-style: none;
margin: 0;
padding: 0;
}
.quizpio-mount .qp-lb-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin-bottom: 4px;
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 8px;
font-weight: 500;
}
.quizpio-mount .qp-lb-row:last-child { margin-bottom: 0; }
.quizpio-mount .qp-lb-rank {
font-weight: 700;
color: #6b7280;
font-size: 14px;
text-align: center;
line-height: 1;
}
.quizpio-mount .qp-lb-name {
min-width: 0;
overflow-wrap: break-word;
}
.quizpio-mount .qp-lb-score {
font-weight: 700;
color: #4f46e5;
font-variant-numeric: tabular-nums;
}
/* Top 3 — same warm cream / cool slate / soft peach as the host sidebar,
so the rank language is consistent across host and player screens. The
slightly larger rank font gives the medal emoji room. */
.quizpio-mount .qp-lb-row.qp-lb-1 { background: #fffbeb; border-color: #fcd34d; }
.quizpio-mount .qp-lb-row.qp-lb-2 { background: #f8fafc; border-color: #cbd5e1; }
.quizpio-mount .qp-lb-row.qp-lb-3 { background: #fff7ed; border-color: #fdba74; }
.quizpio-mount .qp-lb-row.qp-lb-1 .qp-lb-rank,
.quizpio-mount .qp-lb-row.qp-lb-2 .qp-lb-rank,
.quizpio-mount .qp-lb-row.qp-lb-3 .qp-lb-rank {
font-size: 18px;
/* Lighter shadow than the podium — the pastel row bgs are pale enough that
contrast is already OK, but a touch of shadow makes the medals "sit"
on the row instead of floating flat. */
filter: drop-shadow( 0 1px 1.5px rgba( 0, 0, 0, 0.18 ) );
}
/* "You" overlay: indigo stripe on the inside-left of the row so the player
can spot themselves at a glance. For non-top-3 rows the bg also softens
to indigo; top-3 rows keep their medal bg so the rank reward stays loud. */
.quizpio-mount .qp-lb-row.is-me {
box-shadow: inset 3px 0 0 #4f46e5;
}
.quizpio-mount .qp-lb-row.is-me:not(.qp-lb-1):not(.qp-lb-2):not(.qp-lb-3) {
background: #eef2ff;
border-color: #c7d2fe;
}
/* "YOU" pill — small indigo badge that sits next to the player's name on
any row that's theirs (whether in the top-N or appended below). Both
reinforcements catch the eye; together they remove all doubt about
which row is the player's. */
.quizpio-mount .qp-you-badge {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
background: #4f46e5;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 2px 7px;
border-radius: 999px;
line-height: 1.4;
}
/* Centered "…" gap rendered between the top-N list and the player's own
row when they're outside the top N. Signals "there are people in between,
here's where you actually are." */
.quizpio-mount .qp-lb-gap {
list-style: none;
text-align: center;
color: #9ca3af;
font-weight: 700;
padding: 6px 0;
letter-spacing: 6px;
line-height: 1;
}
/* Player views */
.quizpio-mount .qp-player {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 24px;
}
/* Player reveal: on desktop, place the result (answer bars) and the
leaderboard side by side. Below 1024px it stays single-column — the
result first, then the leaderboard underneath (unchanged behaviour). */
.quizpio-mount .qp-reveal-split { display: block; }
@media ( min-width: 1024px ) {
.quizpio-mount .qp-reveal-split {
display: grid;
grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr );
gap: 24px;
align-items: start;
}
}
/* Centered hero block on the player's final-results screen: trophy stacked
above the "Final Results" heading. Larger trophy than the host's inline
version since this slot is a hero, not a decoration next to text. */
.quizpio-mount .qp-final-hero {
text-align: center;
margin-bottom: 16px;
}
.quizpio-mount .qp-final-hero-trophy {
display: block;
height: 80px;
width: auto;
margin: 0 auto 8px;
}
.quizpio-mount .qp-final-hero h2 {
margin: 0;
}
.quizpio-mount .qp-waiting { text-align: center; }
.quizpio-mount .qp-nickname-display {
display: inline-block;
margin: 12px 0;
padding: 8px 20px;
background: #4f46e5;
color: #fff;
border-radius: 999px;
font-weight: 600;
}
.quizpio-mount .qp-result-pill {
margin-top: 16px;
padding: 10px 16px;
border-radius: 999px;
background: #f3f4f6;
color: #374151;
text-align: center;
font-weight: 600;
}
.quizpio-mount .qp-result-pill.is-correct { background: #d1fae5; color: #065f46; }
.quizpio-mount .qp-result-pill.is-incorrect { background: #fee2e2; color: #991b1b; }
.quizpio-mount .qp-correct-answer {
background: #d1fae5;
color: #065f46;
padding: 16px 20px;
border-radius: 12px;
font-size: 22px;
font-weight: 700;
text-align: center;
margin: 12px 0 16px;
}
.quizpio-mount .qp-my-score, .quizpio-mount .qp-my-rank {
text-align: center;
margin: 12px 0;
font-size: 16px;
}
@media ( max-width: 820px ) {
/* Below ~laptop width, the 2x2 answer grid cramps natural-language
options. Stack to one column so each card gets full row width. */
.quizpio-mount .qp-options { grid-template-columns: 1fr; }
}
@media ( max-width: 600px ) {
.quizpio-mount .qp-q-text { font-size: 20px; }
.quizpio-mount .qp-pin-num { font-size: 36px; }
}
/* ---------- Past Plays modal ---------- */
/* Subdued "My past plays" link/button below primary actions on join + final
results screens. Visual weight intentionally lower than qp-btn-primary
and qp-btn-secondary so it doesn't compete. Muted gray default; reveals
indigo + underline on hover so the affordance is still discoverable. */
.quizpio-mount .qp-btn-link {
background: none;
border: 0;
color: #6b7280;
cursor: pointer;
font-size: 14px;
padding: 6px 10px;
text-decoration: none;
}
.quizpio-mount .qp-btn-link:hover,
.quizpio-mount .qp-btn-link:focus-visible {
color: #4f46e5;
text-decoration: underline;
}
/* Inside the join form, the link sits below the full-width Join button as
its own row. The form parent isn't a flex column (it's a plain block-flow