/* Keep the ballot on the notebook while its selected answers take center stage. */
body[data-phase="reveal"] { --lab-b:#dbd1dd; --lab-c:#e8d3c7; --lab-accent:#7c647e; }
.choice-arena-reveal :is(.choice-timer-value,.choice-progress-value,.choice-arena-roster) { visibility:hidden; }
.choice-arena-reveal .choice-arena-option { overflow:visible; transition:opacity .3s,background .3s; }
.reveal-picks { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; position:absolute; left:0; right:0; top:-24px; z-index:4; pointer-events:none; }
.reveal-pick { position:relative; display:flex; flex-direction:column; align-items:center; }
.reveal-pick-avatar { width:38px; height:38px; object-fit:contain; border-radius:50%; background:#fff9e6; border:2px solid #a18b5e; box-shadow:1px 2px 0 #77684f40; }
.reveal-pick-name { font:700 10px/1.3 'Cairo',sans-serif; color:#373d42; background:#fff9e6; border-radius:4px; padding:0 4px; }
.choice-arena-option .reveal-pick-name { display:none; }
.choice-arena-option.is-active-answer { opacity:.28; }
.choice-arena-option.is-spent-answer { opacity:.45; border-style:dashed; }
.choice-arena-option.is-correct-answer { background:#c8dfb5 !important; border:2px solid #56734b !important; opacity:1; }
.arena-answer-pop {
 position:absolute; z-index:12; left:24%; top:37%; width:52%; min-height:27%; box-sizing:border-box;
 padding:42px 24px 20px; color:#373d42; background:#fff9e6; border:2px solid #66685b;
 border-radius:9px 15px 8px 12px; box-shadow:6px 8px 0 #77684f35,0 20px 50px #373d4220;
 text-align:center; direction:rtl; isolation:isolate;
}
.arena-answer-pop[hidden] { display:none; }
.arena-answer-pop .quiet-reveal-title { position:relative; z-index:1; margin:8px auto; width:fit-content; max-width:100%; font:900 clamp(25px,3vw,48px)/1.5 'Cairo',sans-serif; color:inherit; text-shadow:none; overflow-wrap:anywhere; }
.arena-answer-pop .quiet-reveal-kind { position:static; margin:0; font:700 16px/1.6 'Cairo',sans-serif; color:#687c63; }
.arena-answer-pop .quiet-reveal-meta { position:static; font:600 15px/1.5 'Cairo',sans-serif; }
.arena-answer-pop .quiet-reveal-meta p { position:static; margin:3px; padding:0; min-height:0; border:0; font:inherit; color:inherit; }
.arena-answer-pop .quiet-reveal-voters { display:none; }
.arena-answer-pop .quiet-reveal-meta { padding:0; gap:4px; border:0; }
.arena-answer-pop .quiet-reveal-meta[aria-hidden="true"] { visibility:hidden; }
.arena-answer-pop .reveal-picks { top:-43px; gap:6px; padding:0 5%; }
.arena-answer-pop .reveal-pick-avatar { width:clamp(38px,4.3vw,62px); height:clamp(38px,4.3vw,62px); }
.arena-answer-pop .reveal-pick-name { font-size:12px; }
.choice-arena-reveal .quiet-reveal-progress { position:absolute; top:14%; left:40%; right:auto; width:20%; text-align:center; color:#687c63; font:700 18px 'Cairo',sans-serif; }

/* Drum roll: the card twitches on every suspense hit, harder each time (hits at 0 → 1.35s). */
.arena-answer-pop.is-drumroll { animation:reveal-drumroll 1400ms linear both; }

/* ---- Shared result pieces ---- */
.reveal-ink {
 position:absolute; z-index:2;
 overflow:visible; pointer-events:none; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.reveal-ink path { stroke-dasharray:1; stroke-dashoffset:0; }
.reveal-ink--lie path { stroke:#c7604e; stroke-width:9px; opacity:.9; }
.reveal-ink--lie .reveal-ink-stroke--1 { animation:reveal-ink-draw 200ms cubic-bezier(.3,.6,.3,1) 20ms both; }
.reveal-ink--lie .reveal-ink-stroke--2 { animation:reveal-ink-draw 200ms cubic-bezier(.3,.6,.3,1) 400ms both; }
.reveal-ink--truth path { stroke:#4f7a45; stroke-width:6px; animation:reveal-ink-draw 520ms cubic-bezier(.4,.1,.3,1) 60ms both; }

.reveal-stamp {
 position:absolute; z-index:7; right:5%; bottom:-34px;
 padding:2px 24px; border-radius:45% 35% 42% 30%;
 font:900 clamp(28px,4vw,56px)/1.3 'Cairo',sans-serif;
 rotate:-9deg; pointer-events:none;
}
.reveal-stamp--truth { color:#35532e; background:#f9df84; border:3px dashed #56734b; animation:reveal-stamp-slam 460ms cubic-bezier(.3,.7,.35,1) 600ms both; }
.reveal-stamp--lie { color:#a8473a; background:#fbe1d6; border:3px dashed #b8574a; rotate:7deg; animation:reveal-stamp-slam 420ms cubic-bezier(.3,.7,.35,1) 640ms both; }

.reveal-points {
 position:absolute; z-index:7; left:9%; bottom:-22px;
 padding:1px 14px; border-radius:6px 11px 7px 10px;
 font:900 clamp(18px,2.2vw,32px)/1.4 'Cairo',sans-serif; direction:ltr;
 color:#4d5145; background:repeating-linear-gradient(110deg,#e0c27af2 0 7px,#ebd49cf2 7px 9px);
 box-shadow:2px 3px 0 #77684f30; rotate:4deg; pointer-events:none;
 animation:reveal-points-pop 520ms cubic-bezier(.3,1.5,.5,1) 880ms both;
}
.arena-answer-pop.truth .reveal-points { animation-delay:1020ms; }

/* Author beat: a taped name card with the writer's portrait, just under the answer card. */
.arena-answer-pop .quiet-reveal-author { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.reveal-author {
 position:absolute; z-index:8; left:50%; top:calc(100% + 34px); translate:-50% 0;
 display:flex; align-items:center; gap:10px; width:max-content; max-width:92%;
 padding:6px 18px 6px 10px; border:2px solid #66685b; border-radius:8px 13px 9px 12px;
 background:#fff9e6; color:#373d42; box-shadow:3px 4px 0 #77684f40;
 font:900 clamp(18px,2.3vw,34px)/1.3 'Cairo',sans-serif; white-space:nowrap; rotate:-2deg; pointer-events:none;
 animation:reveal-author-in 480ms cubic-bezier(.3,1.4,.5,1) 1000ms both;
}
.reveal-author--lie { border-color:#9a5a4e; background:#fbe1d6; color:#7c3a30; }
.reveal-author--truth { border-color:#56734b; background:#e7f1dc; color:#35532e; rotate:2deg; animation-delay:1150ms; }
.reveal-author-faces { display:flex; }
.reveal-author-avatar { width:clamp(40px,4.6vw,66px); height:clamp(40px,4.6vw,66px); object-fit:contain; border-radius:50%; background:#fff9e6; border:2px solid currentColor; }
.reveal-author-faces .reveal-author-avatar + .reveal-author-avatar { margin-inline-start:-14px; }
.reveal-author-label { overflow:hidden; text-overflow:ellipsis; }
@keyframes reveal-author-in {
 0% { opacity:0; scale:.4; translate:-50% 24px; }
 60% { opacity:1; scale:1.12; translate:-50% -4px; }
 100% { opacity:1; scale:1; translate:-50% 0; }
}

.reveal-impact { position:absolute; inset:0; z-index:6; pointer-events:none; }
.reveal-impact-mark {
 position:absolute; width:32px; height:5px; margin:-2.5px 0 0 -16px; border-radius:4px;
 background:#4d5145; opacity:0; rotate:var(--a);
 animation:reveal-impact 440ms cubic-bezier(.15,.8,.3,1) 620ms both;
}
.arena-answer-pop.is-wrong .reveal-impact-mark { background:#b8574a; animation-delay:660ms; }

/* ---- Wrong answer: X scribbled on each "nope" tone, stamped, then ripped in two ---- */
.arena-answer-pop.is-wrong {
 background:#f6e3dc; border-color:#9a5a4e; color:#5a3a33;
 transition:background .2s,border-color .2s;
 animation:reveal-nope 760ms linear both;
}
.arena-answer-pop.is-wrong .quiet-reveal-kind { color:#9a544a; }
.reveal-picks.is-fooled .reveal-pick { animation:reveal-fooled 900ms ease-in-out 420ms both; }
.choice-arena-option.is-spent-answer .choice-arena-text-label {
 background:linear-gradient(#c7604e,#c7604e) 100% 58% / 100% 3px no-repeat;
 animation:reveal-strike 360ms cubic-bezier(.3,.6,.3,1) 250ms both;
}
.arena-answer-pop.is-torn { background:transparent; border-color:transparent; box-shadow:none; animation:none; }
.arena-answer-pop.is-torn > :not(.reveal-picks,.reveal-tear,.reveal-impact,.reveal-author) { visibility:hidden; }
.arena-answer-pop.is-torn .reveal-picks { animation:reveal-picks-drop 560ms cubic-bezier(.5,0,.8,.4) 120ms both; }
.reveal-tear { position:absolute; inset:-2px; z-index:3; pointer-events:none; }
.reveal-tear-face {
 position:absolute; inset:0; box-sizing:border-box; padding:42px 24px 20px;
 background:#f6e3dc; border:2px solid #9a5a4e; border-radius:9px 15px 8px 12px;
 box-shadow:4px 6px 0 #77684f30; color:#5a3a33; text-align:center; direction:rtl;
}
.reveal-tear-face *,.reveal-tear-face *::before,.reveal-tear-face *::after { animation:none !important; }
.reveal-tear--left { clip-path:polygon(-20% -30%,51% -30%,51% 0,48% 15%,52% 28%,48% 42%,52% 57%,48% 72%,51% 86%,49% 100%,49% 130%,-20% 130%); animation:reveal-tear-left 800ms cubic-bezier(.45,0,.85,.45) both; }
.reveal-tear--right { clip-path:polygon(51% -30%,120% -30%,120% 130%,49% 130%,49% 100%,51% 86%,48% 72%,52% 57%,48% 42%,52% 28%,48% 15%,51% 0); animation:reveal-tear-right 800ms cubic-bezier(.45,0,.85,.45) both; }

/* ---- Right answer: circled in green, sunburst, stamped, confetti bursts out and floats down ---- */
.arena-answer-pop.truth {
 background:#dbe9c9; border-color:#56734b; color:#35532e;
 transition:background .3s,border-color .3s;
 box-shadow:0 0 0 8px #e8c77780,8px 12px 0 #56734b35,0 0 80px #e8c77770;
 animation:reveal-victory 900ms cubic-bezier(.3,.7,.35,1) both;
}
.reveal-truth-rays {
 position:absolute; z-index:11; left:50%; top:50%; width:62%; aspect-ratio:1; pointer-events:none;
 translate:-50% -50%; border-radius:50%;
 background:repeating-conic-gradient(from 4deg,#f3d98d9e 0 6deg,transparent 6deg 16deg);
 -webkit-mask-image:radial-gradient(circle,#000 22%,transparent 62%);
 mask-image:radial-gradient(circle,#000 22%,transparent 62%);
 animation:reveal-rays-in 700ms cubic-bezier(.2,.8,.3,1) 560ms both,reveal-rays-spin 30s linear 560ms infinite;
}
.reveal-picks.is-winners .reveal-pick { animation:reveal-hop 460ms cubic-bezier(.3,.7,.4,1) calc(860ms + var(--i,0) * 90ms) 2; }
.choice-arena-option.is-correct-answer { animation:reveal-card-bump 560ms cubic-bezier(.3,1.5,.5,1) 620ms both; }
.choice-arena-stage.reveal-jolt { animation:reveal-jolt 380ms linear 620ms both; }
.reveal-confetti-field { position:absolute; z-index:8; left:50%; top:45%; width:0; height:0; overflow:visible; pointer-events:none; }
.reveal-confetti {
 position:absolute; left:-6px; top:-8px; width:12px; height:16px; opacity:0;
 background:var(--c,#e8c777); border:1px solid #79756560;
 animation:
  reveal-confetti-burst 620ms cubic-bezier(.12,.8,.3,1) var(--delay) both,
  reveal-confetti-fall 1900ms cubic-bezier(.4,0,.7,1) calc(var(--delay) + 560ms) both;
}
.reveal-confetti:nth-child(3n) { width:9px; height:9px; border-radius:50%; }
.reveal-confetti:nth-child(4n) { width:18px; height:18px; border:0; clip-path:polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 77%,20% 100%,30% 60%,0 38%,38% 35%); }
.reveal-confetti:nth-child(5n) { width:6px; height:20px; border-radius:40%; }

@keyframes reveal-drumroll {
 0.0% { rotate:0.50deg; scale:1; }
 10.2% { rotate:0deg; scale:1; }
 18.6% { rotate:-0.72deg; scale:1.006; }
 27.6% { rotate:0deg; scale:1; }
 35.0% { rotate:0.94deg; scale:1.012; }
 42.9% { rotate:0deg; scale:1; }
 49.3% { rotate:-1.16deg; scale:1.018; }
 56.0% { rotate:0deg; scale:1; }
 61.4% { rotate:1.38deg; scale:1.024; }
 67.3% { rotate:0deg; scale:1; }
 72.1% { rotate:-1.60deg; scale:1.030; }
 77.2% { rotate:0deg; scale:1; }
 81.4% { rotate:1.82deg; scale:1.036; }
 85.8% { rotate:0deg; scale:1; }
 89.3% { rotate:-2.04deg; scale:1.042; }
 93.2% { rotate:0deg; scale:1; }
 96.4% { rotate:2.26deg; scale:1.048; }
 100% { rotate:0deg; scale:1; }
}
@keyframes reveal-ink-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes reveal-stamp-slam {
 0% { opacity:0; scale:2.4; translate:0 -30px; }
 45% { opacity:1; scale:.86 1.1; translate:0 0; }
 70% { scale:1.08 .95; }
 100% { opacity:1; scale:1; translate:0 0; }
}
@keyframes reveal-points-pop {
 0% { opacity:0; scale:.3; translate:0 18px; }
 60% { opacity:1; scale:1.18; translate:0 -6px; }
 100% { opacity:1; scale:1; translate:0 0; }
}
@keyframes reveal-impact {
 0% { opacity:0; transform:translateX(0) scaleX(.3); }
 20% { opacity:.85; }
 100% { opacity:0; transform:translateX(34px) scaleX(.2); }
}
@keyframes reveal-nope {
 0%,26%,50%,74%,100% { translate:0 0; }
 5% { translate:-14px 0; }
 11% { translate:11px 0; }
 17% { translate:-6px 0; }
 55% { translate:-14px 0; }
 61% { translate:11px 0; }
 67% { translate:-6px 0; }
}
@keyframes reveal-fooled {
 0% { rotate:0deg; translate:0 0; filter:none; }
 20% { rotate:-14deg; }
 40% { rotate:12deg; }
 60% { rotate:-8deg; }
 100% { rotate:9deg; translate:0 7px; filter:grayscale(.55); }
}
@keyframes reveal-strike { from { background-size:0% 3px; } to { background-size:100% 3px; } }
@keyframes reveal-picks-drop { to { opacity:0; translate:0 60px; rotate:-6deg; } }
@keyframes reveal-tear-left {
 0% { transform:none; opacity:1; }
 22% { transform:translate(-3%,-2%) rotate(-3deg); opacity:1; }
 72% { opacity:1; }
 100% { transform:translate(-18%,70%) rotate(-22deg); opacity:0; }
}
@keyframes reveal-tear-right {
 0% { transform:none; opacity:1; }
 22% { transform:translate(3%,-1%) rotate(3deg); opacity:1; }
 72% { opacity:1; }
 100% { transform:translate(18%,75%) rotate(20deg); opacity:0; }
}
@keyframes reveal-victory {
 0% { scale:1; rotate:0deg; }
 12% { scale:.94 1.04; rotate:0deg; }
 30% { scale:1.1; rotate:-2deg; }
 48% { scale:.97; rotate:1deg; }
 66% { scale:1.03; rotate:-.4deg; }
 100% { scale:1; rotate:0deg; }
}
@keyframes reveal-rays-in { from { opacity:0; scale:.3; } to { opacity:1; scale:1; } }
@keyframes reveal-rays-spin { to { rotate:360deg; } }
@keyframes reveal-hop {
 0%,100% { translate:0 0; scale:1; }
 20% { translate:0 2px; scale:1.1 .88; }
 55% { translate:0 -18px; scale:.94 1.08; }
 80% { translate:0 0; scale:1.06 .94; }
}
@keyframes reveal-card-bump {
 0% { scale:1; }
 40% { scale:1.1; }
 100% { scale:1; }
}
@keyframes reveal-jolt {
 0%,100% { translate:0 0; }
 15% { translate:4px 3px; }
 32% { translate:-4px -2px; }
 50% { translate:2px -1px; }
 70% { translate:-1px 1px; }
}
@keyframes reveal-confetti-burst {
 0% { opacity:0; translate:0 0; scale:.2; }
 12% { opacity:1; }
 100% { opacity:1; translate:var(--bx) var(--by); scale:1; }
}
@keyframes reveal-confetti-fall {
 0% { transform:translate(0,0) rotate(0deg); opacity:1; }
 75% { opacity:1; }
 100% { transform:translate(var(--drift),var(--fall)) rotate(var(--r)); opacity:0; }
}

@media(prefers-reduced-motion:reduce) {
 .arena-answer-pop.is-drumroll,.arena-answer-pop.is-wrong,.arena-answer-pop.truth,.choice-arena-stage.reveal-jolt,
 .choice-arena-option.is-correct-answer,.reveal-picks .reveal-pick,.reveal-stamp,.reveal-points,.reveal-author,.reveal-ink path,
 .choice-arena-option.is-spent-answer .choice-arena-text-label { animation:none; }
 .reveal-impact,.reveal-confetti-field { display:none; }
 .reveal-truth-rays { animation:none; }
}