/* Player presence on the TV: bigger portraits, readable names, and each player's own colour on
   every screen, so the room sees people rather than a status row. Loaded last. */

/* Shared: every portrait is framed and tinted in its player's colour. */
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) {
  border-color:var(--player-color,#fffdf5); outline-color:#56594b;
  background:color-mix(in srgb,var(--player-color,#fff9e6) 16%,#fffdf7);
}
.player-token-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font:800 clamp(15px,2.9vh,32px)/1.3 'Cairo',sans-serif; color:var(--lab-ink,#373d42); }

/* Lobby: a blank sheet. Each player who joins is sketched onto it at a random spot from the
   portrait they drew on their phone, with their name written underneath in their colour. */
.lobby-canvas .lobby-board { position:relative; width:100%; min-height:0; container-type:size; direction:ltr; }
.lobby-board-empty { position:absolute; inset:0; margin:0; display:grid; place-items:center; padding:0 12%; direction:rtl; text-align:center; font:800 clamp(16px,2.6vh,30px)/1.6 'Cairo',sans-serif; color:#8f8264; }
.lobby-board-player { position:absolute; width:13vh; width:min(16cqw,31cqh); translate:-50% -50%; display:flex; flex-direction:column; align-items:center; direction:rtl; transition:opacity .3s,filter .3s; }
.lobby-board-player.disconnected { opacity:.5; filter:grayscale(.85); }
.lobby-board-portrait { position:relative; width:100%; aspect-ratio:1; }
/* A wash of the player's colour behind the ink, in place of a card. */
.lobby-board-portrait::before { content:""; position:absolute; inset:5%; border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; background:color-mix(in srgb,var(--player-color) 24%,transparent); }
.lobby-board-portrait svg:not(.lobby-board-pencil) { position:relative; display:block; width:100%; height:100%; overflow:visible; }
.lobby-board-portrait polyline { fill:none; stroke:#172445; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.lobby-board-stamp { position:relative; display:block; width:100%; height:100%; border-radius:14% 18% 13% 17%; object-fit:contain; mix-blend-mode:multiply; }
/* The pencil's tip, not its box, rides the end of the line. */
.lobby-board-pencil { position:absolute; z-index:1; width:38%; height:38%; translate:-8% -92%; fill:#f7d25a; stroke:#172445; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(2px 3px 0 #77684f30); pointer-events:none; }
.lobby-board-name { max-width:124%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 .3em; border-bottom:max(3px,.5vh) solid var(--player-color); border-radius:0 0 40% 60% / 0 0 8px 6px; font:800 clamp(15px,2.4vh,28px)/1.35 'Cairo',sans-serif; font-size:clamp(14px,5.5cqh,28px); color:var(--lab-ink,#373d42); }
.lobby-board-state { margin-top:.15em; font:800 clamp(11px,1.6vh,18px)/1.2 'Cairo',sans-serif; font-size:clamp(11px,4.2cqh,18px); color:#6f6753; }
.lobby-board-state.host { color:#a06a10; }

.lobby-board-player.drawing .lobby-board-portrait::before { animation:lobby-board-wash .6s ease-out var(--sketch-delay) both; }
.lobby-board-player.drawing polyline { opacity:0; animation:lobby-board-stroke linear forwards; }
.lobby-board-player.drawing .lobby-board-stamp { animation:player-presence-pop .5s cubic-bezier(.2,1.5,.4,1) var(--sketch-delay) both,lobby-board-wash .2s var(--sketch-delay) both; }
.lobby-board-player.drawing .lobby-board-name { animation:lobby-board-write .45s ease-out var(--name-delay) both; }
.lobby-board-player.drawing .lobby-board-name.ltr { animation-name:lobby-board-write-ltr; }
.lobby-board-player.drawing .lobby-board-state { animation:lobby-board-wash .3s ease-out var(--name-delay) both; }
@keyframes lobby-board-stroke { from { opacity:1; stroke-dashoffset:var(--stroke-length,0); } to { opacity:1; stroke-dashoffset:0; } }
@keyframes lobby-board-wash { from { opacity:0; } }
@keyframes lobby-board-write { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0); } }
@keyframes lobby-board-write-ltr { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }

/* Drawing: the players are the show while everyone draws. The instruction sheet shrinks to a
   side note and the roster takes the room. */
.paper-drawing-stage { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
.paper-drawing-stage .paper-drawing-instruction { font-size:clamp(24px,2.9vw,50px); }
.paper-drawing-stage .paper-player-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(0,1fr); gap:1.6vh 1vw; align-content:stretch; align-items:center; }
.paper-drawing-stage .paper-player-grid:has(> :nth-child(5)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.paper-drawing-stage .paper-player-grid:has(> :nth-child(7)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.paper-drawing-stage .paper-player-grid:has(> :nth-child(9)) { grid-template-columns:repeat(5,minmax(0,1fr)); }
.paper-drawing-stage .paper-player-token { width:100%; height:auto; max-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5vh; }
.paper-drawing-stage .paper-player-avatar { width:min(82%,17vh); height:auto; aspect-ratio:1; border-radius:14% 18% 13% 17%; border-width:max(4px,.7vh); outline-width:1.5px; object-fit:contain; transition:filter .3s,opacity .3s,scale .3s; }
.paper-drawing-stage .paper-player-token.waiting .paper-player-avatar { filter:grayscale(.85); opacity:.62; border-style:dashed; }
.paper-drawing-stage .paper-player-token.waiting .player-token-name { opacity:.7; }
.paper-drawing-stage .paper-player-token.done .paper-player-avatar { animation:player-presence-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
/* The tick is pinned to the portrait's corner, wherever the portrait sits inside its cell. */
.paper-drawing-stage .paper-player-marker { right:auto; left:calc(50% + min(41%,8.5vh) - 2.8vh); bottom:auto; top:-1.2vh; width:clamp(24px,4.4vh,46px); height:clamp(24px,4.4vh,46px); border-width:3px; }
.paper-drawing-stage .paper-player-marker.waiting { display:none; }
.paper-drawing-stage .paper-player-marker.done { background:#e7f7ee; border-color:#2f7d5b; }

/* Guess: who has written a title, big enough to call out the ones still thinking. */
.evidence-guess-stage .evidence-guess-roster { inset:auto; left:3%; top:55%; width:36.5%; height:40%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:1.2vh .8vw; align-items:center; justify-items:center; direction:rtl; }
.evidence-guess-stage .evidence-guess-roster:has(> :nth-child(7)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.evidence-guess-stage .evidence-guess-roster:has(> :nth-child(9)) { grid-template-columns:repeat(5,minmax(0,1fr)); }
.evidence-guess-stage .evidence-guess-roster:has(> :nth-child(9)) .player-token-name { font-size:clamp(13px,2.3vh,26px); }
.evidence-guess-stage .evidence-player-token { position:relative; inset:auto; left:auto; top:auto; width:100%; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:.4vh; }
.evidence-guess-stage .evidence-player-avatar { width:min(74%,13vh); height:auto; aspect-ratio:1; border-radius:14% 18% 13% 17%; border-width:max(4px,.6vh); object-fit:contain; transition:filter .3s,opacity .3s; }
.evidence-guess-stage .evidence-player-token.waiting .evidence-player-avatar { opacity:.6; filter:grayscale(.85); border-style:dashed; }
.evidence-guess-stage .evidence-player-token.waiting .player-token-name { opacity:.7; }
.evidence-guess-stage .evidence-player-token.done .evidence-player-avatar { animation:player-presence-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.evidence-guess-stage .evidence-player-marker { right:auto; left:calc(50% + min(37%,6.5vh) - 2.6vh); bottom:auto; top:-1.2vh; aspect-ratio:1; width:clamp(22px,4vh,42px); }
.evidence-guess-stage .evidence-player-token.waiting .evidence-player-marker { display:none; }

/* Vote: a row of faces under the drawing instead of a strip of dots. The tokens carry the
   progress, so the "sent N of M" line is kept for screen readers only. */
.choice-arena-stage:not(.choice-arena-reveal) .choice-progress-value { width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.choice-arena-stage .choice-arena-roster { left:19%; top:84.5%; width:62%; height:14.5%; display:flex; justify-content:center; align-items:flex-start; gap:1vw; direction:rtl; }
.choice-arena-stage .choice-player-token { width:auto; flex:0 1 10.5vh; min-width:0; aspect-ratio:auto; padding:0; border-radius:0; background:none; box-shadow:none; display:flex; flex-direction:column; align-items:center; gap:.2vh; }
.choice-arena-stage .choice-player-avatar { width:100%; height:auto; aspect-ratio:1; border-radius:14% 18% 13% 17%; border-width:max(3px,.5vh); object-fit:contain; transition:filter .3s,opacity .3s; }
.choice-arena-stage .choice-player-token.waiting .choice-player-avatar { opacity:.6; filter:grayscale(.85); border-style:dashed; }
.choice-arena-stage .choice-player-token.waiting .player-token-name { opacity:.7; }
.choice-arena-stage .choice-player-token.done .choice-player-avatar { animation:player-presence-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.choice-arena-stage .choice-player-token .player-token-name { font-size:clamp(13px,2.2vh,24px); }
.choice-arena-stage .choice-player-marker { right:auto; inset-inline-end:-10%; bottom:auto; top:-10%; width:clamp(20px,3.6vh,38px); }
.choice-arena-stage .choice-player-token.waiting .choice-player-marker { display:none; }

/* Reveal: the people who fell for it, and the liar, in their own colours and at a size that
   reads from the sofa. */
.arena-answer-pop .reveal-picks { top:calc(-1 * clamp(58px,8.6vw,118px)); gap:clamp(8px,1.2vw,20px); }
.arena-answer-pop .reveal-pick-avatar { width:clamp(54px,6.2vw,98px); height:clamp(54px,6.2vw,98px); border:max(4px,.6vh) solid var(--player-color,#fffdf5); outline:1.5px solid #56594b; background:color-mix(in srgb,var(--player-color,#fff9e6) 16%,#fffdf7); }
.arena-answer-pop .reveal-pick-name { font-size:clamp(14px,1.55vw,24px); font-weight:800; padding:1px 8px; background:color-mix(in srgb,var(--player-color,#ead8ac) 30%,#fffdf5); border:1.5px solid var(--player-color,#a18b5e); }
.arena-answer-pop { padding-top:clamp(42px,5vw,70px); }
.reveal-author { gap:clamp(10px,1.2vw,18px); padding:8px 26px 8px 12px; border-width:3px; font-size:clamp(24px,3.3vw,50px); top:calc(100% + 28px); }
.reveal-author[style*="--player-color"] { border-color:var(--player-color); background:color-mix(in srgb,var(--player-color) 24%,#fffdf5); color:#2c3136; box-shadow:5px 6px 0 color-mix(in srgb,var(--player-color) 45%,transparent); }
.reveal-author-avatar { width:clamp(54px,6.4vw,100px); height:clamp(54px,6.4vw,100px); border:max(3px,.5vh) solid var(--player-color,currentColor); background:color-mix(in srgb,var(--player-color,#fff9e6) 16%,#fffdf7); }

/* Standings between rounds: the leader's portrait wears their colour too. */
.scoreboard-spotlight-stage .scoreboard-row-avatar { border-width:max(3px,.5vh); }

@keyframes player-presence-pop { 0% { scale:.6; rotate:-10deg; } 70% { scale:1.12; } 100% { scale:1; } }
@media (prefers-reduced-motion: reduce) {
  :is(.paper-player-token,.evidence-player-token,.choice-player-token).done img { animation:none; }
}