/* Game-wide approved scrapbook direction. Stable placement preserves visual continuity. */
:root { --scrap-paper:#fffdf5; --scrap-ink:#373d42; --scrap-pencil:#777960; --scrap-tape:#d6bf86; }
.lab-world::before { rotate:-1.2deg; scale:1.05; opacity:.8; }
.lab-world::after {
 background:radial-gradient(ellipse at 4% 69%,transparent 0 36px,#9f794b17 37px 40px,transparent 42px),linear-gradient(101deg,transparent 48%,#87775209 49%,#fffdf533 50%,transparent 51%);
}
.lab-doodle { opacity:.48; stroke-width:2.6; }
.lab-doodle--cat { width:8vw; left:-1%; top:17%; --tilt:-23deg; }
.lab-doodle--ufo { width:8vw; right:-1%; top:20%; --tilt:24deg; }
.lab-doodle--squiggle-a { width:13vw !important; left:-3%; --tilt:45deg; }
.lab-doodle--squiggle-b { width:11vw !important; right:-2%; --tilt:-24deg; }
.lab-doodle--squiggle-c { width:15vw !important; left:17%; --tilt:13deg; }
.lab-doodle--star { --tilt:31deg; }
body:not([data-phase="intro"]) .lab-phase-heading {
 width:max-content; max-width:76%; margin:20px auto 0; padding:3px 24px 12px;
 rotate:-2deg; background:linear-gradient(175deg,transparent 62%,#e8c7779c 63% 88%,transparent 89%);
}
body:not([data-phase="intro"]) .lab-phase-heading::after { width:70%; height:7px; border-bottom:3px solid #56594b; border-top:1px solid #56594b80; rotate:2deg; margin:0 auto; }
.choice-arena-stage .choice-arena-options .choice-arena-option {
 --paper-tilt:-1.8deg; rotate:var(--paper-tilt); translate:0 -2px;
 border-radius:2px 7px 3px 2px; border-width:1px 2px 2px 1px;
 box-shadow:3px 5px 0 #77684f27; overflow:visible;
 background-image:linear-gradient(173deg,transparent 70%,#77684f08 71%,transparent 75%);
}
.choice-arena-stage .choice-arena-option:nth-child(4n + 2) { --paper-tilt:2.1deg; translate:5px 3px; }
.choice-arena-stage .choice-arena-option:nth-child(4n + 3) { --paper-tilt:1deg; translate:-4px -1px; }
.choice-arena-stage .choice-arena-option:nth-child(4n) { --paper-tilt:-2.4deg; translate:2px 3px; }
.choice-arena-option::after {
 content:''; position:absolute; width:52px; height:17px; top:-8px; left:12%; rotate:-14deg;
 background:repeating-linear-gradient(75deg,#c0ccadc9 0 6px,#d8dfc6cc 7px 9px);
 clip-path:polygon(3% 0,98% 3%,96% 30%,100% 60%,97% 98%,0 94%,4% 70%,0 32%); pointer-events:none;
}
.choice-arena-option:nth-child(even)::after { left:auto; right:16%; rotate:17deg; background:repeating-linear-gradient(105deg,#dfba86b9 0 5px,#f0dbb8ce 6px 8px); }
.choice-arena-option:nth-child(3n)::after { width:32px; height:20px; left:4%; rotate:-35deg; }
.choice-arena-stage .choice-arena-number { background:transparent; color:#494d3e; border:2px solid #777960; border-radius:42% 55% 39% 51%; rotate:9deg; box-shadow:2px 0 0 #77796065; }
.choice-arena-stage .choice-arena-drawing-frame { rotate:1.6deg; border-width:8px 11px 22px 8px; box-shadow:-5px 8px 0 #bcae923d,4px 3px 0 #fffdf5; }
.choice-arena-stage .choice-timer-value { rotate:7deg; border-radius:43% 53% 46% 40%; }
.reveal-pick:nth-child(4n + 1) { rotate:-12deg; translate:0 -4px; }
.reveal-pick:nth-child(4n + 2) { rotate:8deg; translate:0 5px; }
.reveal-pick:nth-child(4n + 3) { rotate:-5deg; translate:0 -7px; }
.reveal-pick:nth-child(4n) { rotate:14deg; translate:0 2px; }
.reveal-pick-avatar { border-radius:8px 4px 12px 3px; border:3px solid #fffdf5; outline:1px solid #928773; box-shadow:3px 3px 0 #77684f35; }
.reveal-pick-name { rotate:-3deg; background:#ead8ac; padding:1px 5px; }
.arena-answer-pop { rotate:-1.5deg; border-radius:3px 13px 2px 7px; border-width:2px 1px 3px 2px; box-shadow:9px 10px 0 #77684f35,-4px -3px 0 #fffdf580; }
.arena-answer-pop::before { content:''; position:absolute; left:-13px; top:30%; width:45px; height:65px; rotate:17deg; background:repeating-linear-gradient(85deg,#d6bf86b0 0 5px,#eadcbcc0 6px 8px); pointer-events:none; }
.arena-answer-pop.is-wrong::before { display:none; }
.arena-answer-pop .quiet-reveal-title { rotate:1deg; }
.arena-answer-pop.truth .quiet-reveal-kind { width:max-content; margin:auto; padding:0 13px; border-bottom:3px double #56734b; rotate:-3deg; }
/* Other display scenes use the same thrown-together paper vocabulary. */
@media(min-width:800px) {
 .setup-card { rotate:1.3deg; }
 .setup-intro { rotate:-2deg; }
 .lobby-join-card { rotate:-1.1deg; }
 .lobby-roster-card { rotate:.8deg; }
 .lobby-player-card:nth-child(3n+1) { rotate:-3deg; translate:0 3px; }
 .lobby-player-card:nth-child(3n+2) { rotate:2deg; translate:0 -3px; }
 .lobby-player-card:nth-child(3n) { rotate:-1deg; }
 .room-code-cell:nth-child(odd) { rotate:-6deg; translate:0 -4px; }
 .room-code-cell:nth-child(even) { rotate:5deg; translate:0 3px; }
 .paper-drawing-instruction { rotate:-1.7deg; }
 .evidence-drawing-frame,.gallery-salon-drawing-frame { rotate:-1.5deg; }
 .scoreboard-ranking-list { rotate:1deg; }
 .final-awards-board { rotate:-1deg; }
 .gallery-salon-best-lie { rotate:2deg; }
}
.intro-paper-prop--pencil-left svg { rotate:-13deg; }
.intro-paper-prop--crayon-blue svg { rotate:13deg; }
.intro-logo-blank { rotate:-1deg; border-radius:2px 13px 4px 8px; }
/* Phone inputs and drawing canvases stay level; only decoration gets scattered. */
@media(max-width:600px) {
 .lab-doodle { max-width:45px; opacity:.3; }
 .lab-doodle--squiggle-a,.lab-doodle--squiggle-b { max-width:60px; }
}

/* The same cut-out heading, paper edges and photo scraps on every TV phase. */
body:not([data-screen]) :is(.scoreboard-spotlight-title,.scoreboard-ranking-title,.final-scrapbook-title,.gallery-salon-title,.round-rocket-label,.setup-intro h1) {
 rotate:-2deg; color:var(--scrap-ink); text-shadow:2px 3px 0 #e8d69e80;
 text-decoration:underline; text-decoration-color:#a88c575c; text-decoration-thickness:7px; text-underline-offset:10px;
}
body:not([data-screen]) :is(.lobby-player-card .player-avatar,.paper-player-avatar,.evidence-player-avatar,.choice-player-avatar,.scoreboard-winner-avatar,.scoreboard-row-avatar,.final-champion-avatar,.final-runner-avatar,.final-award-avatar,.gallery-salon-avatar) {
 border-radius:4px 10px 3px 7px; border:5px solid var(--scrap-paper); outline:1px solid #928773;
 background:#fff9e6; object-fit:contain; box-shadow:3px 4px 0 #77684f35; rotate:-4deg;
}
:is(.lobby-player-card,.paper-player-token,.evidence-player-token,.choice-player-token,.scoreboard-ranking-row,.final-award-row):nth-child(even) img { rotate:5deg; }
body:not([data-screen]) :is(.setup-card,.lobby-join-card,.lobby-roster-card,.lobby-guide-card,.paper-drawing-instruction,.final-awards-board,.gallery-salon-best-lie) {
 border-radius:2px 8px 3px 6px !important; border-width:1px 2px 3px 1px !important;
 background-image:repeating-linear-gradient(0deg,transparent 0 31px,#748e9c0d 31px 32px) !important;
 box-shadow:5px 7px 0 #77684f2b !important;
}
.lobby-roster-card::after,.lobby-guide-card::after,.final-awards-board::after,.gallery-salon-best-lie::after {
 content:''; position:absolute; width:75px; height:23px; top:-9px; left:15%; rotate:12deg;
 background:repeating-linear-gradient(100deg,#d6bf86c0 0 6px,#eadcbccc 7px 9px); pointer-events:none;
}
.lobby-canvas .lobby-player-card { background:#fffdf5 !important; border:0 !important; border-bottom:2px solid #8f826440 !important; box-shadow:2px 3px 0 #77684f16; }
.lobby-canvas .lobby-player-name { color:var(--scrap-ink); }
.lobby-canvas :is(.player-connection,.player-role) { color:#586248; }
.paper-player-token:nth-child(odd),.evidence-player-token:nth-child(odd),.choice-player-token:nth-child(odd) { translate:0 -5px; }
.paper-player-token:nth-child(even),.evidence-player-token:nth-child(even),.choice-player-token:nth-child(even) { translate:0 4px; }
.paper-timer-value { width:max-content; margin:auto; padding:0 20px; border:3px solid #777960; border-radius:46% 40% 52% 43%; rotate:6deg; background:#f4e4b780; }
.paper-progress-value,.paper-privacy-panel { rotate:-2deg; }
.round-rocket-stage .round-rocket-number { padding:8px 45px; background:#fffdf5; border:2px solid #777960; border-radius:2px 9px 3px 6px; box-shadow:7px 9px 0 #77684f2b; rotate:5deg; text-shadow:4px 4px 0 #e8d69e; }
.round-rocket-stage .round-rocket-number::after { content:''; position:absolute; top:-9px; left:25%; width:70px; height:24px; rotate:-16deg; background:#d6bf86cc; }
.round-rocket-instruction { rotate:-2deg; padding:5px 20px; background:#e6d7ba7a; }
.scoreboard-spotlight-stage::before,.final-scrapbook-stage::before { rotate:-1.7deg; border-radius:2px 10px 3px 7px !important; background:#fffdf5 repeating-linear-gradient(0deg,transparent 0 31px,#748e9c12 31px 32px) !important; }
.scoreboard-spotlight-stage .scoreboard-ranking-list { background:transparent !important; border:0 !important; box-shadow:none !important; padding:5px 18px; }
.scoreboard-ranking-row { background:#fffdf5; border:1px solid #8f826470; border-bottom:2px solid #8f826470; margin:3px 0; padding-inline:9px; box-shadow:2px 3px 0 #77684f22; rotate:-.7deg; }
.scoreboard-ranking-row:nth-child(even) { rotate:.9deg; background:#f6efdb; }
.scoreboard-rank-badge { background:#e6d7ba !important; color:#494d3e !important; border:1px solid #777960; border-radius:43% 51% 39% 52%; }
.scoreboard-winner-delta,.scoreboard-row-delta { rotate:-5deg; border-radius:0 !important; }
.final-champion-name,.final-runner-name,.final-award-name { color:var(--scrap-ink) !important; text-shadow:none !important; }
.final-champion-avatar,.scoreboard-winner-avatar { rotate:-7deg !important; border-bottom-width:14px !important; }
.final-runner-avatar { rotate:7deg !important; }
.final-award-row { rotate:-1.2deg; border-bottom:1px dashed #8f826460; }
.final-award-row:nth-child(even) { rotate:1.5deg; }
.gallery-salon-prompt { rotate:2deg; background:#f5e3b8; padding:8px 12px; border-bottom:2px solid #8f826460; }
.gallery-salon-counter,.gallery-salon-round { rotate:-4deg; }
.pause-box,.visual-loading-card { color:var(--scrap-ink); background:#fffdf5 !important; border:2px solid #777960; border-radius:3px 9px 4px 7px; box-shadow:7px 8px 0 #77684f40; }
.pause-box h2,.visual-loading-card h2 { color:var(--scrap-ink); }

/* Phone: paper is crooked at its edges; writing and touch surfaces remain level. */
body[data-screen] { --phone-yellow:#e8c777; --phone-coral:#ad6658; --phone-blue:#466f86; --phone-cyan:#607b63; }
body[data-screen] :is(.join-card,.phase-box,.host-controls,.pause-card) {
 position:relative; background:#fffdf5; border:1.5px solid #777960; border-radius:3px 10px 4px 6px;
 box-shadow:4px 5px 0 #77684f26; padding:20px 16px;
}
body[data-screen] :is(.join-card,.phase-box)::before {
 content:''; position:absolute; top:-9px; left:12%; width:65px; height:20px; rotate:-12deg;
 background:repeating-linear-gradient(100deg,#d6bf86c9 0 6px,#eadcbcd9 7px 9px); pointer-events:none;
}
body[data-screen] :is(.logo,.phase-title) { rotate:-2deg; text-shadow:2px 2px 0 #e8d69e; background:linear-gradient(175deg,transparent 66%,#e8c77770 67% 89%,transparent 90%); }
body[data-screen] :is(.lobby-player,.summary-chip,.prompt-card,.score-row) { border-radius:2px 8px 3px 5px; border-color:#8f8264; box-shadow:2px 3px 0 #77684f20; }
body[data-screen] .lobby-player:nth-child(odd) { rotate:-.7deg; }
body[data-screen] .lobby-player:nth-child(even) { rotate:.7deg; }
body[data-screen] :is(.lp-avatar img,.player-avatar,.me-avatar img) { border-radius:3px 8px 2px 5px; border:3px solid #fffdf5; outline:1px solid #928773; background:#fff9e6; rotate:-5deg; }
body[data-screen] .btn { border-radius:3px 8px 3px 6px; box-shadow:2px 3px 0 #77684f26; }
body[data-screen] .btn-primary { background:#607b63; color:#fffdf5; border-color:#435b46; }
body[data-screen] .ballot-choice-row { margin-block:5px; }
body[data-screen] .ballot-vote-btn { background:#f8efd5; border:1.5px solid #777960; }
body[data-screen] .ballot-choice-row:nth-child(3n+2) .ballot-vote-btn { background:#eaf0df; }
body[data-screen] .ballot-choice-row:nth-child(3n) .ballot-vote-btn { background:#f4e5df; }
body[data-screen] .ballot-vote-btn.voted { background:#c8dfb5 !important; outline:3px solid #56734b; }
body[data-screen] .big-status-icon { rotate:-8deg; background:#e8d69e80; border:2px solid #777960; border-radius:43% 51% 39% 52%; padding:12px; }
body[data-screen] :is(input,textarea) { border-radius:2px 6px 3px 4px; border-color:#777960; background:#fffef9; }
body[data-screen] .drawing-box { padding:10px; }
body[data-screen] .drawing-box::before { display:none; }
body[data-screen] .canvas-wrap { border-radius:2px; border:2px solid #777960; }
body[data-screen] .prompt-card { background:#f5e3b8; border-bottom:2px solid #a18b5e; }

body:not([data-screen]) .scoreboard-rank-badge { background:#e6d7ba !important; color:#373d42 !important; }

/* Brighter cut-paper choices, shared by the TV ballot and phone ballot. */
:root {
 --ballot-edge-a:polygon(1% 2%,8% 0%,16% 2%,25% 1%,34% 3%,43% 1%,52% 2%,61% 0%,71% 2%,80% 1%,90% 3%,98% 2%,100% 8%,99% 20%,100% 34%,98.5% 47%,100% 60%,99% 75%,100% 90%,98% 98%,89% 99%,80% 97%,70% 100%,59% 98%,48% 99%,37% 97%,26% 100%,16% 98%,7% 100%,1% 97%,0% 84%,1% 70%,0% 55%,1% 41%,0% 26%,1% 13%);
 --ballot-edge-b:polygon(0% 5%,8% 1%,17% 3%,26% 0%,35% 2%,44% 1%,53% 3%,62% 1%,71% 2%,80% 0%,89% 2%,97% 1%,99% 6%,98% 19%,100% 34%,99% 49%,100% 63%,98% 77%,99% 94%,97% 99%,87% 97%,77% 100%,67% 98%,57% 99%,47% 97%,37% 100%,27% 98%,17% 99%,7% 97%,1% 99%,0% 83%,1% 68%,0% 54%,1% 39%,0% 24%);
}
.choice-arena-stage .choice-arena-options .choice-arena-option,
body[data-screen] .ballot-vote-btn {
 --ballot-paper:#f0be4e;
 isolation:isolate; overflow:visible;
 border:0; border-radius:0; background:transparent !important;
 box-shadow:none; filter:drop-shadow(0 3px 0 #77684f45) drop-shadow(0 6px 5px #77684f33);
 color:#253039;
}
.choice-arena-stage .choice-arena-options .choice-arena-option { position:absolute; }
body[data-screen] .ballot-vote-btn { position:relative; }
.choice-arena-stage .choice-arena-number {
 background:#fffdf5; color:#253039; box-shadow:1px 2px 0 #77684f4d;
}
.choice-arena-stage .choice-arena-option:nth-child(5n + 2),
body[data-screen] .ballot-choice-row:nth-child(5n + 2) .ballot-vote-btn { --ballot-paper:#4cc0b5; }
.choice-arena-stage .choice-arena-option:nth-child(5n + 3),
body[data-screen] .ballot-choice-row:nth-child(5n + 3) .ballot-vote-btn { --ballot-paper:#f08273; }
.choice-arena-stage .choice-arena-option:nth-child(5n + 4),
body[data-screen] .ballot-choice-row:nth-child(5n + 4) .ballot-vote-btn { --ballot-paper:#97c66b; }
.choice-arena-stage .choice-arena-option:nth-child(5n + 5),
body[data-screen] .ballot-choice-row:nth-child(5n + 5) .ballot-vote-btn { --ballot-paper:#ab88cd; }
.choice-arena-stage .choice-arena-option::before,
body[data-screen] .ballot-vote-btn::before {
 content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
 clip-path:var(--ballot-edge-a); background-color:var(--ballot-paper);
 background-image:linear-gradient(167deg,#ffffff2d,#fff0 43%,#6a49371d 90%),radial-gradient(circle at 15% 30%,#ffffff25 0 1px,#0000 1.3px),radial-gradient(circle at 72% 61%,#584b3a20 0 1px,#0000 1.3px);
 background-size:auto,19px 23px,23px 19px;
}
.choice-arena-stage .choice-arena-option:nth-child(3n + 2)::before,
body[data-screen] .ballot-choice-row:nth-child(3n + 2) .ballot-vote-btn::before { clip-path:var(--ballot-edge-b); }
.choice-arena-stage .choice-arena-option.is-correct-answer {
 --ballot-paper:#97c66b; background:transparent !important; border:0 !important;
 filter:drop-shadow(0 0 3px #56734b) drop-shadow(0 5px 0 #56734b55);
}
body[data-screen] .ballot-vote-btn.selected {
 background:transparent; border:0; box-shadow:none; outline:0;
 translate:0 -2px;
 filter:brightness(1.05) drop-shadow(0 0 2px #254e69) drop-shadow(0 0 8px #466f86) drop-shadow(0 5px 2px #77684f55);
}
body[data-screen] .ballot-vote-btn.voted {
 --ballot-paper:#97c66b !important; background:transparent !important; border:0; outline:0; opacity:1;
 filter:drop-shadow(0 0 2px #56734b) drop-shadow(0 5px 2px #77684f55);
}
body[data-screen] .ballot-submit {
 position:sticky; isolation:isolate; border:0; border-radius:0;
 background:transparent; box-shadow:none; color:#fffdf5;
 filter:drop-shadow(0 3px 0 #2f6d6645);
}
body[data-screen] .ballot-submit::before {
 content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
 background:#2f6d66;
 clip-path:polygon(1% 3%,14% 1%,27% 3%,40% 0%,53% 2%,66% 1%,79% 3%,92% 1%,99% 4%,98% 30%,100% 55%,98% 94%,85% 99%,71% 97%,57% 100%,43% 98%,29% 100%,15% 97%,2% 99%,0% 70%,1% 37%);
}
/* Pinned over the answers, so the disabled state stays opaque instead of fading. */
body[data-screen] .ballot-submit:disabled { opacity:1; color:#fffdf5; }
body[data-screen] .ballot-submit:disabled::before { background:#86998f; }
body[data-screen] :is(.ballot-vote-btn,.ballot-submit):focus-visible {
 outline:3px solid #254e69; outline-offset:3px;
}
