/* ===== Temas e palco dos slides (1600×900 escalado) ===== */
.theme-aurora {
  --st-bg: radial-gradient(1200px 700px at 85% -10%, #5b2bd6 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #c1297f 0%, transparent 55%), #120b2e;
  --st-solid: #120b2e; --st-fg: #ffffff; --st-muted: rgba(255,255,255,.68); --st-card: rgba(255,255,255,.08); --st-line: rgba(255,255,255,.16);
  --st-accent: #ff7ac6; --c1: #8f7bff; --c2: #ff7ac6; --c3: #43d9c1; --c4: #ffc857; --c5: #6fb6ff; --c6: #ff8a65;
  --st-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.theme-oceano {
  --st-bg: radial-gradient(1000px 700px at 100% 0%, #1484b8 0%, transparent 60%), linear-gradient(160deg, #04243f, #083a63);
  --st-solid: #062c4c; --st-fg: #f2fbff; --st-muted: rgba(242,251,255,.7); --st-card: rgba(255,255,255,.08); --st-line: rgba(255,255,255,.16);
  --st-accent: #5ee7ff; --c1: #5ee7ff; --c2: #7c9dff; --c3: #74f2a8; --c4: #ffd166; --c5: #ff9bd2; --c6: #b69cff;
  --st-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.theme-papel {
  --st-bg: #fbf7ef; --st-solid: #fbf7ef; --st-fg: #211c16; --st-muted: #6f6659; --st-card: #ffffff; --st-line: #e7dfd0;
  --st-accent: #e8590c; --c1: #e8590c; --c2: #1c7ed6; --c3: #2b8a3e; --c4: #ae3ec9; --c5: #f59f00; --c6: #0ca678;
  --st-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.theme-floresta {
  --st-bg: radial-gradient(900px 600px at 90% 10%, #2d6a4f 0%, transparent 60%), linear-gradient(170deg, #0b241c, #123829);
  --st-solid: #0f2e22; --st-fg: #f1faee; --st-muted: rgba(241,250,238,.7); --st-card: rgba(255,255,255,.07); --st-line: rgba(255,255,255,.15);
  --st-accent: #b7e36b; --c1: #b7e36b; --c2: #52d1a0; --c3: #ffd166; --c4: #f78c6b; --c5: #7fc8f8; --c6: #e0a6ff;
  --st-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.theme-crepusculo {
  --st-bg: linear-gradient(135deg, #ff6a5b 0%, #c53f98 45%, #4b2bb8 100%);
  --st-solid: #a13a8f; --st-fg: #ffffff; --st-muted: rgba(255,255,255,.78); --st-card: rgba(255,255,255,.14); --st-line: rgba(255,255,255,.25);
  --st-accent: #ffe066; --c1: #ffe066; --c2: #ffffff; --c3: #7cf5d4; --c4: #ffb3c7; --c5: #9ad0ff; --c6: #ffa94d;
  --st-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.theme-giz {
  --st-bg: radial-gradient(1200px 800px at 50% 40%, #2f4a40 0%, #1d2f28 100%);
  --st-solid: #24392f; --st-fg: #f3f1e7; --st-muted: rgba(243,241,231,.7); --st-card: rgba(255,255,255,.06); --st-line: rgba(255,255,255,.2);
  --st-accent: #ffe08a; --c1: #fef3c7; --c2: #ffb4a2; --c3: #a7f3d0; --c4: #bfdbfe; --c5: #fde68a; --c6: #f5c2e7;
  --st-font: 'Patrick Hand', 'Comic Sans MS', system-ui, sans-serif;
}

.stage-wrap { position: relative; overflow: hidden; background: var(--st-bg); color: var(--st-fg); container-type: size; }
.stage {
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px;
  transform-origin: center center; font-family: var(--st-font); color: var(--st-fg);
  display: flex; flex-direction: column; padding: 70px 90px 60px;
}
.stage * { box-sizing: border-box; }
.s-title { font-size: 64px; font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 36px; text-wrap: balance; }
.s-title.center { text-align: center; }
.s-title.lg { font-size: 50px; margin-bottom: 28px; }
.s-title.xl { font-size: 42px; margin-bottom: 24px; line-height: 1.18; }
.quiz-top .timer { margin-top: -6px; }
.quiz-explain {
  margin-top: 18px; padding: 18px 26px; border-radius: 16px; font-size: 27px; line-height: 1.4;
  background: var(--st-card); border: 1px solid var(--st-line); border-left: 6px solid #2fa36b; animation: pop .5s ease;
}
.quiz-explain b { color: #2fa36b; margin-right: 6px; }
.quiz-explain[hidden] { display: none; }
.revealed .quiz-bars { max-height: 260px; }
.s-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.s-empty { margin: auto; text-align: center; color: var(--st-muted); font-size: 34px; font-weight: 600; }
.s-empty .dots::after { content: ''; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.s-hidden {
  margin: auto; text-align: center; font-size: 36px; font-weight: 700; color: var(--st-muted);
  display: grid; gap: 12px; place-items: center;
}
.s-hidden b { font-size: 120px; color: var(--st-fg); font-variant-numeric: tabular-nums; line-height: 1; }

/* Barra de entrada (código) */
.joinbar {
  position: absolute; top: 0; left: 0; right: 0; height: 58px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 24px; font-weight: 600; color: var(--st-muted); font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.joinbar b { color: var(--st-fg); font-weight: 800; }
.joinbar .code { background: var(--st-card); border: 1px solid var(--st-line); padding: 2px 14px; border-radius: 10px; color: var(--st-fg); font-weight: 800; letter-spacing: .06em; }
.stage-counter {
  position: absolute; right: 36px; bottom: 22px; display: flex; gap: 22px; font-size: 22px; font-weight: 700; color: var(--st-muted);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.stage-counter span { display: inline-flex; align-items: center; gap: 8px; }

/* Conteúdo */
.s-content { display: grid; grid-template-columns: 1fr; align-items: center; height: 100%; gap: 60px; }
.s-content.has-img { grid-template-columns: 1.05fr .95fr; }
.s-content.only-title { text-align: center; }
.s-content .s-title { font-size: 84px; margin-bottom: 30px; }
.s-content.long .s-title { font-size: 64px; }
.s-content .body { font-size: 38px; line-height: 1.45; color: var(--st-muted); white-space: pre-wrap; }
.s-content.dense .body { font-size: 30px; }
.s-content img, .s-media img { width: 100%; max-height: 700px; object-fit: contain; border-radius: 22px; }
.s-media { display: flex; justify-content: center; }
.q-with-img { display: grid; grid-template-columns: 1fr 460px; gap: 40px; min-height: 0; flex: 1; }
.q-with-img > .q-main { min-width: 0; display: flex; flex-direction: column; }
.q-with-img img { width: 100%; max-height: 640px; object-fit: contain; border-radius: 18px; align-self: center; }

/* Barras verticais */
.bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 36px; padding-bottom: 8px; min-height: 0; }
.bar-col { flex: 1; max-width: 240px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 14px; min-width: 0; }
.bar-val { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar-val small { font-size: 24px; color: var(--st-muted); font-weight: 700; margin-left: 4px; }
.bar {
  width: 100%; border-radius: 14px 14px 6px 6px; min-height: 8px; height: 0;
  transition: height .7s cubic-bezier(.2, .9, .25, 1.1), opacity .4s, filter .4s;
  background: var(--bar-color, var(--c1));
}
.bar-label { font-size: 26px; font-weight: 600; text-align: center; line-height: 1.2; min-height: 64px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bars.many .bar-label { font-size: 21px; }
.bars.many { gap: 20px; }

/* Rosca */
.donut-wrap { flex: 1; display: grid; grid-template-columns: 560px 1fr; align-items: center; gap: 70px; min-height: 0; }
.donut { width: 540px; height: 540px; border-radius: 50%; position: relative; transition: background .6s; }
.donut::after { content: ''; position: absolute; inset: 120px; border-radius: 50%; background: var(--st-solid); }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-size: 70px; font-weight: 800; text-align: center; line-height: 1; }
.donut-center small { display: block; font-size: 22px; color: var(--st-muted); font-weight: 600; margin-top: 8px; }
.legend { display: grid; gap: 18px; }
.legend-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 18px; align-items: center; font-size: 32px; font-weight: 600; }
.legend-row i { width: 30px; height: 30px; border-radius: 8px; }
.legend-row b { font-variant-numeric: tabular-nums; }

/* Quiz */
.quiz-top { display: flex; align-items: flex-start; gap: 40px; }
.quiz-top .s-title { flex: 1; }
.timer { position: relative; width: 150px; height: 150px; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 12; }
.timer .track { stroke: var(--st-line); }
.timer .prog { stroke: var(--st-accent); stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer.low .prog { stroke: #ff5d5d; }
.timer span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 58px; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer.done span { font-size: 30px; }
.quiz-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 30px; padding-bottom: 20px; }
.quiz-bars .bar-col { max-width: 200px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quiz-opts.n3, .quiz-opts.n5, .quiz-opts.n6 { grid-template-columns: 1fr 1fr 1fr; }
.quiz-opt {
  display: flex; align-items: center; gap: 20px; padding: 20px 26px; border-radius: 18px; color: #fff; font-size: 32px; font-weight: 700;
  transition: opacity .4s, transform .4s, box-shadow .4s; min-height: 96px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.quiz-opt .shape { font-size: 34px; width: 40px; text-align: center; flex: none; }
.quiz-opt .txt { flex: 1; line-height: 1.2; }
.quiz-opt .cnt { font-size: 30px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
.revealed .quiz-opt .cnt { opacity: 1; }
.revealed .quiz-opt:not(.correct) { opacity: .35; transform: scale(.97); }
.revealed .quiz-opt.correct { box-shadow: 0 0 0 6px #fff, 0 20px 40px rgba(0,0,0,.35); transform: scale(1.02); }
.revealed .quiz-opt.correct::after { content: '✓'; font-size: 40px; font-weight: 900; }
.qc-ok { background: #2fa36b; } .qc-no { background: #e5484d; }
.qc-0 { background: #e5484d; } .qc-1 { background: #3e7bfa; } .qc-2 { background: #e5a000; } .qc-3 { background: #2fa36b; } .qc-4 { background: #8e4ec6; } .qc-5 { background: #f06a1d; }
.quiz-wait { flex: 1; display: grid; place-items: center; text-align: center; }
.quiz-wait b { display: block; font-size: 150px; line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-wait span { font-size: 32px; color: var(--st-muted); font-weight: 600; }

/* Nuvem de palavras */
.cloud { position: relative; flex: 1; min-height: 0; }
.cloud-word {
  position: absolute; white-space: nowrap; font-weight: 800; line-height: 1; transform: translate(-50%, -50%);
  transition: left .6s ease, top .6s ease, font-size .6s ease, opacity .5s; letter-spacing: -.01em;
}
.cloud-word.new { opacity: 0; }

/* Mural de respostas abertas */
.wall { flex: 1; min-height: 0; overflow: hidden; columns: 3; column-gap: 24px; }
.wall.c1 { columns: 1; max-width: 1000px; margin: 0 auto; width: 100%; }
.wall.c2 { columns: 2; }
.wall.c4 { columns: 4; }
.note {
  break-inside: avoid; margin: 0 0 24px; padding: 24px 28px; border-radius: 18px; font-size: 28px; line-height: 1.35; font-weight: 500;
  background: var(--st-card); border: 1px solid var(--st-line); position: relative; white-space: pre-wrap; word-break: break-word;
  animation: pop .5s cubic-bezier(.2, .9, .3, 1.3);
}
.wall.small .note { font-size: 22px; padding: 18px 20px; margin-bottom: 16px; }
.note::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 5px; border-radius: 0 4px 4px 0; background: var(--note-color, var(--c1)); }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: none; } }
.mod-btns { position: absolute; right: 10px; top: 10px; display: none; gap: 6px; }
.presenter .note:hover .mod-btns, .presenter .qa-item:hover .mod-btns { display: flex; }
.mod-btns button {
  border: 0; border-radius: 10px; padding: 8px 14px; font: 600 18px 'Plus Jakarta Sans', sans-serif; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff;
}
.mod-btns button:hover { background: rgba(0,0,0,.8); }

/* Escala */
.scale { flex: 1; display: grid; grid-template-columns: 330px 1fr; gap: 70px; align-items: center; min-height: 0; }
.scale-avg { text-align: center; }
.scale-avg b { display: block; font-size: 170px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--st-accent); }
.scale-avg span { font-size: 28px; color: var(--st-muted); font-weight: 600; }
.scale-main { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 16px; }
.scale-main .bars { gap: 18px; }
.scale-main .bar-label { min-height: 0; font-size: 30px; font-weight: 800; }
.scale-track { position: relative; height: 16px; border-radius: 99px; background: linear-gradient(90deg, var(--c2), var(--c1)); margin: 10px 0 0; }
.scale-marker {
  position: absolute; top: 50%; width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; border-radius: 50%;
  background: var(--st-fg); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: left .7s cubic-bezier(.2, .9, .25, 1.1);
}
.scale-ends { display: flex; justify-content: space-between; font-size: 24px; color: var(--st-muted); font-weight: 600; }

/* Ranking */
.rank { position: relative; flex: 1; min-height: 0; }
.rank-row { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 70px 380px 1fr 190px; align-items: center; gap: 24px; transition: top .7s cubic-bezier(.2, .9, .25, 1.1); }
.rank-pos { font-size: 44px; font-weight: 800; color: var(--st-muted); text-align: center; }
.rank-label { font-size: 32px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rank-bar { height: 100%; max-height: 54px; min-height: 30px; border-radius: 10px; background: var(--st-card); overflow: hidden; }
.rank-bar i { display: block; height: 100%; width: 0; border-radius: 10px; transition: width .7s cubic-bezier(.2, .9, .25, 1.1); }
.rank-val { white-space: nowrap; font-size: 26px; font-weight: 700; color: var(--st-muted); font-variant-numeric: tabular-nums; }

/* Perguntas da turma (Q&A) */
.qa { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.qa.single { grid-template-columns: 1fr; max-width: 1150px; margin: 0 auto; width: 100%; }
.qa-item {
  position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 22px; align-items: center; padding: 22px 26px;
  background: var(--st-card); border: 1px solid var(--st-line); border-radius: 18px; animation: pop .5s cubic-bezier(.2, .9, .3, 1.3);
}
.qa-item.top { border-color: var(--st-accent); box-shadow: 0 0 0 2px var(--st-accent) inset; }
.qa-item.answered { opacity: .45; }
.qa-votes { text-align: center; font-size: 40px; font-weight: 800; line-height: 1; }
.qa-votes small { display: block; font-size: 18px; color: var(--st-muted); font-weight: 600; margin-top: 4px; }
.qa-text { font-size: 30px; line-height: 1.3; font-weight: 600; word-break: break-word; }
.qa-by { font-size: 20px; color: var(--st-muted); margin-top: 6px; font-weight: 500; }

/* Pódio */
.podium-wrap { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; min-height: 0; align-items: end; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 100%; }
.pod { width: 230px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pod-name { font-size: 30px; font-weight: 800; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: 24px; color: var(--st-muted); font-weight: 700; }
.pod-block {
  width: 100%; border-radius: 18px 18px 0 0; display: grid; place-items: start center; padding-top: 18px; font-size: 80px; font-weight: 900;
  color: rgba(0,0,0,.35); height: 0; transition: height 1s cubic-bezier(.2, .9, .25, 1.05);
}
.pod.p1 .pod-block { background: linear-gradient(#ffe27a, #f4b400); }
.pod.p2 .pod-block { background: linear-gradient(#eef1f6, #b8c0cc); }
.pod.p3 .pod-block { background: linear-gradient(#f6c69b, #cd7f32); }
.pod-medal { font-size: 60px; line-height: 1; }
.board { display: grid; gap: 12px; align-self: center; }
.board-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 14px 22px; background: var(--st-card); border-radius: 14px; font-size: 27px; font-weight: 700; }
.board-row .pos { color: var(--st-muted); }
.board-row .pts { font-variant-numeric: tabular-nums; }

/* Reações flutuantes */
.reaction-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.float-emoji { position: absolute; bottom: -80px; font-size: 64px; animation: floatUp 3.2s ease-out forwards; will-change: transform, opacity; }
@keyframes floatUp {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  10% { opacity: 1; transform: translate(0, -60px) scale(1.1); }
  100% { transform: translate(var(--dx, 0px), -900px) scale(1); opacity: 0; }
}

/* Confete */
.confetti { position: absolute; top: -20px; width: 14px; height: 22px; border-radius: 3px; animation: fall linear forwards; z-index: 6; pointer-events: none; }
@keyframes fall { to { transform: translate(var(--dx), 1000px) rotate(var(--rot)); } }

/* ===== Tela do aluno ===== */
.play-page {
  min-height: 100vh; min-height: 100dvh; background: var(--st-bg); background-attachment: fixed; color: var(--st-fg);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.play { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--st-muted); font-weight: 600; min-height: 34px; }
.play-head .who { display: inline-flex; align-items: center; gap: 6px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 18px 0; gap: 18px; }
.play-title { font-size: clamp(1.4rem, 5.5vw, 1.9rem); font-weight: 800; line-height: 1.2; margin: 0; text-wrap: balance; font-family: var(--st-font); }
.play-sub { color: var(--st-muted); margin: 0; }
.play-card { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 20px; padding: 20px; backdrop-filter: blur(6px); }
.play-img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 14px; }
.p-input, .p-textarea {
  width: 100%; font: inherit; font-size: 1.1rem; padding: .85em 1em; border-radius: 14px;
  border: 2px solid var(--st-line); background: rgba(255,255,255,.95); color: #1c1830;
}
.theme-papel .p-input, .theme-papel .p-textarea { background: #fff; }
.p-input:focus, .p-textarea:focus { outline: none; border-color: var(--st-accent); }
.p-textarea { min-height: 120px; resize: vertical; }
.p-code { text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.p-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 1em; border-radius: 14px; border: 0;
  font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; background: var(--st-fg); color: var(--st-solid);
  transition: transform .08s, opacity .2s; -webkit-tap-highlight-color: transparent;
}
.p-btn:active { transform: scale(.98); }
.p-btn:disabled { opacity: .45; cursor: not-allowed; }
.p-btn.ghost { background: transparent; color: var(--st-fg); border: 2px solid var(--st-line); }
.p-options { display: grid; gap: 10px; }
.p-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 1em 1.1em; border-radius: 14px; font: inherit; font-size: 1.05rem; font-weight: 600;
  border: 2px solid var(--st-line); background: var(--st-card); color: var(--st-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s;
}
.p-opt .mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--st-muted); flex: none; display: grid; place-items: center; font-size: 14px; }
.p-opt.multi .mark { border-radius: 7px; }
.p-opt.sel { border-color: var(--st-fg); background: color-mix(in srgb, var(--st-fg) 14%, transparent); }
.p-opt.sel .mark { background: var(--st-fg); border-color: var(--st-fg); color: var(--st-solid); }
.p-opt.sel .mark::after { content: '✓'; font-weight: 900; }
.p-quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-quiz.n2 { grid-template-columns: 1fr; }
.p-quiz button {
  min-height: 110px; border: 0; border-radius: 16px; color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; padding: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 5px 0 rgba(0,0,0,.25); -webkit-tap-highlight-color: transparent;
}
.p-quiz button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.p-quiz .shape { font-size: 1.8rem; }
.p-quiz.n2 button { min-height: 90px; flex-direction: row; font-size: 1.2rem; }
.p-timer { height: 8px; border-radius: 99px; background: var(--st-line); overflow: hidden; }
.p-timer i { display: block; height: 100%; background: var(--st-accent); border-radius: 99px; transition: width .25s linear; }
.p-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; }
.p-scale button {
  aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--st-line); background: var(--st-card); color: var(--st-fg);
  font: inherit; font-size: 1.2rem; font-weight: 800; cursor: pointer;
}
.p-scale button.sel { background: var(--st-fg); color: var(--st-solid); border-color: var(--st-fg); }
.p-scale-ends { display: flex; justify-content: space-between; font-size: .85rem; color: var(--st-muted); gap: 12px; }
.p-rank { display: grid; gap: 8px; }
.p-rank-item {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: .7em .8em; border-radius: 14px;
  background: var(--st-card); border: 2px solid var(--st-line); font-weight: 600; transition: transform .2s;
}
.p-rank-item .n { font-weight: 800; color: var(--st-muted); text-align: center; }
.p-rank-item .mv { display: flex; gap: 4px; }
.p-rank-item .mv button { width: 38px; height: 38px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--st-fg) 14%, transparent); color: var(--st-fg); font-size: 1rem; cursor: pointer; }
.p-rank-item .mv button:disabled { opacity: .25; }
.p-done { text-align: center; display: grid; gap: 10px; justify-items: center; }
.p-done .big { font-size: 4rem; line-height: 1; }
.p-done h2 { margin: 0; font-size: 1.5rem; }
.p-result { display: grid; gap: 8px; margin-top: 6px; }
.p-result-row { display: grid; gap: 4px; font-size: .92rem; font-weight: 600; }
.p-result-row .track { height: 10px; border-radius: 99px; background: var(--st-line); overflow: hidden; }
.p-result-row .track i { display: block; height: 100%; border-radius: 99px; transition: width .6s; }
.p-result-row .lab { display: flex; justify-content: space-between; gap: 10px; }
.p-qa-list { display: grid; gap: 8px; }
.p-qa { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: .8em .9em; border-radius: 14px; background: var(--st-card); border: 1px solid var(--st-line); }
.p-qa.answered { opacity: .5; }
.p-qa .t { font-weight: 600; word-break: break-word; }
.p-qa .by { font-size: .8rem; color: var(--st-muted); }
.p-qa .vote { display: grid; justify-items: center; min-width: 52px; padding: .4em; border-radius: 12px; border: 2px solid var(--st-line); background: transparent; color: var(--st-fg); font: inherit; font-weight: 800; cursor: pointer; }
.p-qa .vote.on { background: var(--st-fg); color: var(--st-solid); border-color: var(--st-fg); }
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-chip { padding: .35em .8em; border-radius: 99px; background: var(--st-card); border: 1px solid var(--st-line); font-weight: 600; font-size: .9rem; }
.p-react { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 18px; background: var(--st-card); border: 1px solid var(--st-line); }
.p-react button { background: none; border: 0; font-size: clamp(1.3rem, 6.5vw, 1.7rem); cursor: pointer; padding: 4px 0; border-radius: 12px; transition: transform .1s; -webkit-tap-highlight-color: transparent; }
.p-react button:active { transform: scale(1.35); }
.p-msg { text-align: center; padding: .7em; border-radius: 12px; background: rgba(229, 72, 77, .9); color: #fff; font-weight: 700; }
.p-counter { font-size: .85rem; color: var(--st-muted); text-align: right; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.p-rankcard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.p-rankcard div { padding: 10px 4px; border-radius: 14px; background: var(--st-card); }
.p-rankcard b { display: block; font-size: 1.5rem; }
.p-rankcard span { font-size: .78rem; color: var(--st-muted); font-weight: 600; }
.p-foot { text-align: center; font-size: .78rem; color: var(--st-muted); padding-top: 6px; }