/*
 * Trivia module styles. Composes the shared design tokens from app.css only; no literal
 * colors, sizes or spacings. Option colors pair each dark brand shade with inverse text
 * (WCAG AA) and always come with a letter and a shape, so color is never the only cue.
 */

.trivia-block { margin-top: var(--sp-5); }
.trivia-narrow { width: min(560px, 100%); margin-inline: auto; }
.trivia-center { text-align: center; }
.trivia-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trivia-code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: var(--fs-xs); }

.trivia-hero { position: relative; text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.trivia-hero h1 { font-size: var(--fs-hero); margin: var(--sp-2) 0; }
.trivia-hero__lead { font-size: var(--fs-lg); margin: 0 auto; max-width: 52ch; color: var(--text-muted); }

/* PIN */
.trivia-pin-label { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.2em; font-weight: var(--fw-bold); color: var(--text-muted); }
.trivia-pin { margin: 0; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: 0.12em; line-height: 1.1; }
.trivia-pin--xl { font-size: var(--fs-hero); background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trivia-pin-sm { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.trivia-pin-input { text-align: center; font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: 0.3em; min-height: 64px; }

/* Answer shapes (decorative; letters carry the meaning). */
.trivia-shape { display: inline-block; flex: none; width: 1.4em; height: 1.4em; background: currentColor; }
.trivia-shape--0 { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.trivia-shape--1 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.trivia-shape--2 { border-radius: 50%; }
.trivia-shape--3 { border-radius: var(--radius-sm); transform: scale(0.85); }
.trivia-shape--4 { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.trivia-shape--5 { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tq-opt--0 { --opt: var(--c-red-700); }
.tq-opt--1 { --opt: var(--c-blue-700); }
.tq-opt--2 { --opt: var(--c-amber-800); }
.tq-opt--3 { --opt: var(--c-green-700); }
.tq-opt--4 { --opt: var(--c-violet-600); }
.tq-opt--5 { --opt: var(--c-pink-700); }

/* ---------- Panel: question list ---------- */
.trivia-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.trivia-qitem { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); scroll-margin-top: var(--sp-8); }
.trivia-qitem:target { box-shadow: var(--shadow-glow); }
.trivia-qitem__num { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: var(--radius-pill); background: var(--grad-brand); color: var(--text-inverse); font-family: var(--font-display); font-weight: var(--fw-bold); }
.trivia-qitem__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-2); }
.trivia-qitem__prompt { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.trivia-qitem__meta { gap: var(--sp-2); }
.trivia-qitem__options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.trivia-qitem__options li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.trivia-qitem__options li.is-correct { color: var(--ok-fg); font-weight: var(--fw-semibold); }
.trivia-qitem__actions { flex-wrap: wrap; }
.trivia-move--up .icon { transform: rotate(180deg); }
@media (max-width: 640px) {
  .trivia-qitem { flex-wrap: wrap; }
  .trivia-qitem__actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Panel: question editor ---------- */
.trivia-types { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.trivia-type { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.trivia-type input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.trivia-type__text { display: grid; }
.trivia-type:has(input:checked), .trivia-type.is-selected { border-color: var(--brand); box-shadow: var(--shadow); }
.trivia-type:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.trivia-option-edit { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.trivia-option-edit__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; }
.trivia-option-edit__row .trivia-shape { color: var(--opt); }
.trivia-option-edit__row:nth-child(1) { --opt: var(--c-red-700); }
.trivia-option-edit__row:nth-child(2) { --opt: var(--c-blue-700); }
.trivia-option-edit__row:nth-child(3) { --opt: var(--c-amber-800); }
.trivia-option-edit__row:nth-child(4) { --opt: var(--c-green-700); }
.trivia-option-edit__row:nth-child(5) { --opt: var(--c-violet-600); }
.trivia-option-edit__row:nth-child(6) { --opt: var(--c-pink-700); }
.trivia-option-edit__correct { white-space: nowrap; }
.trivia-tf { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: var(--fw-semibold); }
.trivia-tf input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.trivia-tf:nth-child(1) .trivia-shape { color: var(--c-red-700); }
.trivia-tf:nth-child(2) .trivia-shape { color: var(--c-blue-700); }
.trivia-tf:has(input:checked) { border-color: var(--brand); box-shadow: var(--shadow); }
.trivia-media-preview { display: grid; gap: var(--sp-2); justify-items: start; margin-bottom: var(--sp-2); }
.trivia-media-preview img, .trivia-media-preview video { max-height: 16rem; max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface-2); }

/* ---------- Panel: game detail ---------- */
.trivia-rank { display: inline-grid; place-items: center; min-width: 2em; height: 2em; border-radius: var(--radius-pill); background: var(--surface-2); font-weight: var(--fw-bold); }
tr:nth-child(1) .trivia-rank { background: var(--grad-sunset); color: var(--text-inverse); }
.trivia-wa { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ok-fg); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; }
.trivia-wa:hover { text-decoration: underline; }
.trivia-rate { display: flex; align-items: center; gap: var(--sp-2); min-width: 10rem; }
.trivia-rate .progress { flex: 1; }

/* ---------- Public: join form ---------- */
/* The WhatsApp group reads like any other field (same width as the nickname, no box of its own). */
.trivia-phone { border: none; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sp-1); }
.trivia-phone legend { display: flex; align-items: center; gap: var(--sp-2); padding: 0; margin-bottom: var(--sp-1); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.trivia-phone__row { display: flex; align-items: flex-end; gap: var(--sp-2); flex-wrap: nowrap; }
.trivia-phone__row .field { margin: 0; }
.trivia-phone__fixed { display: inline-grid; place-items: center; min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-display); font-weight: var(--fw-bold); white-space: nowrap; }
.trivia-phone__area { flex: 0 0 6.5rem; }
.trivia-phone__number { flex: 1; min-width: 0; }
.trivia-phone__area .input, .trivia-phone__number .input { font-family: var(--font-display); letter-spacing: 0.08em; }
.trivia-phone__preview { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ok-fg); }
.trivia-phone__preview:empty { display: none; }
/* Phones: the whole number (+54 9 · area · 15 · number) must fit on one line, so the form
   gives the row every pixel: slimmer card padding, no inner box around the group, compact
   fixed chips and inputs, and the area field sized for 4 digits. */
@media (max-width: 560px) {
  .trivia-narrow .card { padding: var(--sp-4); }
  .trivia-phone__row { gap: var(--sp-1); }
  .trivia-phone__row .field > label { font-size: var(--fs-xs); white-space: nowrap; }
  .trivia-phone__fixed { padding: 0 var(--sp-2); font-size: var(--fs-sm); }
  /* Sized for 4 digits; its label may run over the "15" chip, which has no label of its own. */
  .trivia-phone__area { flex-basis: 4.2rem; overflow: visible; }
  .trivia-phone__area .input, .trivia-phone__number .input { padding-inline: var(--sp-2); letter-spacing: 0.02em; }
}

/* ---------- Stage layout (host screen and player phone) ---------- */
.trivia-body { min-height: 100vh; display: flex; flex-direction: column; }
.trivia-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--surface-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.trivia-bar__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); min-width: 0; }
.trivia-bar__brand .brand__mark { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.trivia-main { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-4); display: flex; flex-direction: column; }
.trivia-eyebrow { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.trivia-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); background: var(--surface-glass); border: 1px solid var(--border); font-weight: var(--fw-semibold); margin: 0; }
.trivia-chip--me { background: var(--grad-brand); color: var(--text-inverse); border-color: transparent; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trivia-chip--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: transparent; }

/* ---------- Host screen ---------- */
.trivia-live { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); }
.trivia-live__head { display: flex; align-items: center; gap: var(--sp-3); }
.trivia-live__progress { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.trivia-live__view { flex: 1; }

.trivia-lobby { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 900px) { .trivia-lobby { grid-template-columns: 1fr; } }
.trivia-join { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5); }
.trivia-join__lead { margin: 0; font-size: var(--fs-lg); }
.trivia-join__url { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.trivia-join__qr { width: min(260px, 70vw); height: auto; border-radius: var(--radius); background: var(--surface); padding: var(--sp-2); box-shadow: var(--shadow); }

.trivia-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trivia-cloud__item { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); background: var(--surface-glass); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-weight: var(--fw-semibold); font-size: var(--fs-lg); animation: pop var(--t-slow) var(--ease); }
.trivia-cloud__kick { border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-pill); min-width: 32px; min-height: 32px; font: inherit; font-size: var(--fs-sm); padding: 0 var(--sp-2); }
.trivia-cloud__kick:hover, .trivia-cloud__kick:focus-visible { background: var(--err-bg); color: var(--err-fg); }
.trivia-cloud__item.is-armed { border-color: var(--c-red-700); }
.trivia-cloud__item.is-armed .trivia-cloud__kick { background: var(--err-bg); color: var(--err-fg); }

.trivia-controls { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3); border-radius: var(--radius-lg); background: var(--surface-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); box-shadow: var(--shadow); }
.trivia-controls [data-armed="1"] { --btn-bg: var(--err-bg); --btn-fg: var(--err-fg); }

/* Question on stage */
.tq { position: relative; display: grid; gap: var(--sp-4); justify-items: center; text-align: center; overflow: hidden; }
.tq__prompt { margin: 0; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.15; max-width: 32ch; text-wrap: balance; overflow-wrap: anywhere; }
.tq__prompt--play { font-size: var(--fs-xl); }
.tq__media { width: min(900px, 100%); display: grid; place-items: center; }
.tq__media--compact { width: min(420px, 100%); }
.tq__image, .tq__video { max-width: 100%; max-height: 42vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--surface-2); }
.tq__media--compact .tq__image { max-height: 24vh; }
.tq__status { display: flex; align-items: center; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.tq__info { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.tq__explanation { margin: 0; max-width: 60ch; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--info-bg); color: var(--info-fg); }

.tq-timer { --p: 1; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 360deg), var(--surface-2) 0); box-shadow: var(--shadow); }
.tq-timer__num { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--surface); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.tq-timer.is-low { background: conic-gradient(var(--c-red-700) calc(var(--p) * 360deg), var(--surface-2) 0); }
.tq-timer.is-low .tq-timer__num { color: var(--err-fg); }
.tq-timer--sm { width: 56px; height: 56px; }
.tq-timer--sm .tq-timer__num { width: 46px; height: 46px; font-size: var(--fs-lg); }

.tq-options { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.tq-opt { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 84px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); background: var(--opt); color: var(--text-inverse); text-align: left; font-size: var(--fs-xl); font-weight: var(--fw-semibold); box-shadow: var(--shadow); overflow: hidden; transition: opacity var(--t), transform var(--t) var(--ease); }
.tq-opt__letter { font-family: var(--font-display); font-weight: var(--fw-bold); opacity: 0.85; }
.tq-opt__label { flex: 1; overflow-wrap: anywhere; }
.tq-opt__count { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); }
.tq-opt__bar { position: absolute; left: 0; bottom: 0; height: 6px; width: var(--w, 0%); background: var(--text-inverse); opacity: 0.75; transition: width var(--t-slow) var(--ease); }
.tq-opt.is-wrong { opacity: 0.35; }
.tq-opt.is-correct { transform: scale(1.02); box-shadow: var(--shadow-glow); outline: 4px solid var(--text-inverse); outline-offset: -8px; }

.tq-board { width: min(640px, 100%); display: grid; gap: var(--sp-2); }
.tq-board__title { margin: 0; font-size: var(--fs-xl); }
.tq-board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); width: 100%; }
.tq-board__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); background: var(--surface-glass); border: 1px solid var(--border); text-align: left; animation: pop var(--t-slow) var(--ease); }
.tq-board__rank { display: inline-grid; place-items: center; min-width: 2em; height: 2em; border-radius: var(--radius-pill); background: var(--grad-brand); color: var(--text-inverse); font-weight: var(--fw-bold); }
.tq-board__name { flex: 1; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.tq-board__score { font-family: var(--font-display); font-weight: var(--fw-bold); }

/* Final podium */
.tq-final { position: relative; display: grid; gap: var(--sp-5); justify-items: center; text-align: center; overflow: hidden; padding-bottom: var(--sp-4); }
.tq-final__title { margin: 0; font-size: var(--fs-hero); }
.tq-podium { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-3); width: min(760px, 100%); }
.tq-podium__step { flex: 1; display: grid; gap: var(--sp-1); justify-items: center; animation: pop var(--t-slow) var(--ease) backwards; }
.tq-podium__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.tq-podium__score { color: var(--text-muted); font-weight: var(--fw-semibold); }
.tq-podium__block { display: grid; place-items: center; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--text-inverse); font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); box-shadow: var(--shadow-lg); }
.tq-podium__step--1 .tq-podium__block { height: 13rem; background: var(--grad-aurora); }
.tq-podium__step--2 .tq-podium__block { height: 9rem; background: var(--grad-glacier); }
.tq-podium__step--3 .tq-podium__block { height: 6rem; background: var(--grad-sunset); }
.tq-podium__step--1 { animation-delay: 600ms; }
.tq-podium__step--2 { animation-delay: 300ms; }
.tq-board--rest { width: min(640px, 100%); }

.trivia-confetti--1 { background: var(--c-violet); }
.trivia-confetti--2 { background: var(--c-cyan); }
.trivia-confetti--3 { background: var(--c-pink); }
.trivia-confetti--4 { background: var(--c-amber); }
.trivia-confetti--5 { background: var(--c-green); }
.trivia-confetti--6 { background: var(--c-sky); }

/* ---------- Player phone ---------- */
.trivia-play { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); width: min(640px, 100%); margin: 0 auto; }
.trivia-play__head { display: flex; align-items: center; gap: var(--sp-2); }
.trivia-play__body { flex: 1; display: flex; flex-direction: column; }
.trivia-card { flex: 1; display: grid; gap: var(--sp-3); align-content: start; justify-items: center; text-align: center; padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--surface-glass); border: 1px solid var(--border); box-shadow: var(--shadow); animation: pop var(--t) var(--ease); }
.trivia-card--center { align-content: center; }
.trivia-card--ok { border-color: var(--c-green-700); }
.trivia-card--bad { border-color: var(--c-red-700); }
.trivia-big { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.trivia-ready { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); animation: bob 1.4s ease-in-out infinite; }
.trivia-points { margin: 0; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--ok-fg); }
.trivia-qhead { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-3); }
.trivia-right, .trivia-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center; }
.trivia-wait { flex: 1; display: grid; place-items: center; align-content: center; gap: var(--sp-3); text-align: center; }

.tq-answers { width: 100%; display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.tq-answers--two { grid-template-columns: 1fr; }
@media (max-width: 380px) { .tq-answers { grid-template-columns: 1fr; } }
.tq-answer { display: flex; align-items: center; gap: var(--sp-2); min-height: 96px; padding: var(--sp-3); border: none; border-radius: var(--radius-lg); background: var(--opt); color: var(--text-inverse); font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); touch-action: manipulation; }
.tq-answer:active { transform: scale(0.97); }
.tq-answer:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tq-answer[disabled] { opacity: 0.55; cursor: default; }
.tq-answer[aria-pressed="true"] { outline: 4px solid var(--text); outline-offset: 2px; transform: scale(0.98); }
.tq-answer .tq-opt__label { font-size: var(--fs-md); }

.trivia-badge-big { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-inverse); box-shadow: var(--shadow-lg); animation: winner 900ms var(--ease); }
.trivia-badge-big--ok { background: var(--c-green-700); }
.trivia-badge-big--bad { background: var(--c-red-700); }
.trivia-badge-big--none { background: var(--text-muted); }
.trivia-badge-big--sent { background: var(--grad-brand); }

.trivia-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--brand); animation: spin 0.9s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .trivia-cloud__item, .tq-board__row, .tq-podium__step, .trivia-card, .trivia-badge-big, .trivia-ready { animation: none; }
  .trivia-spinner { animation-duration: 3s; }
}
.trivia-actor { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }