/* Blame Game on the TV (likely.js): the question on a neon card whose border says
   what's at stake (gold: the room's pick wins points; pink: they lose them), the players to vote
   for, and the reveal. The card is the Squib prompt card (game.css .prompt-card) in two colours. */

#s-likely { justify-content: flex-start; padding-top: 1.4vw; }
#s-likely > .fireworks { position: absolute; inset: -10vh 0 -6vh; z-index: 0; }
.lk-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-height: 6.4vw; }
.lk-title { font-size: 3.6vw; line-height: 1.05; white-space: nowrap; }
.lk-title.long { font-size: 3.1vw; }
.lk-title.off { visibility: hidden; }

/* ---- the question card ---- */
.lk-card { position: relative; z-index: 3; margin-top: 1.4vw; }
.lk-card.small { margin-top: .6vw; }
.lk-card .tube rect { stroke-width: 3.5; }
/* gold: the pick wins */
.lk-card.good .prompt-k { color: var(--gx-gold); text-shadow: 0 0 .6vw rgba(255,195,90,.6); }
.lk-card.good { box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,.85), 0 0 6vw -1.4vw rgba(255,180,80,.4); }
/* pink: the pick loses */
.lk-card.bad .tube rect { stroke: var(--gx-pink-soft); filter: drop-shadow(0 0 .4vw var(--gx-pink)) drop-shadow(0 0 1vw rgba(255,79,154,.5)); }
.lk-card.bad { box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,.85), 0 0 6vw -1.4vw rgba(255,79,154,.45); }
/* the tube strikes in its own colour as the card draws in (in place of the Squib prompt's pink-to-gold) */
.prompt-card.lk-card.good.drawing:not(.small) .tube rect { animation: lk-strike 1.7s linear both; }
.prompt-card.lk-card.bad.drawing:not(.small) .tube rect { animation: lk-strike 1.7s linear both; }
/* the tube draws round, stutters like a sign striking, and settles (its colour is the card's own) */
@keyframes lk-strike {
  0% { stroke-dashoffset: 100; opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; }
  66% { opacity: .12; } 69% { opacity: 1; } 72% { opacity: .3; } 78%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
.lk-stakes { margin-top: .9vw; font: 600 1.05vw var(--gx-sans); color: rgba(255,255,255,.7); transition: font-size .6s, margin .6s; }
.lk-card.small .lk-stakes { margin-top: .4vw; font-size: .8vw; }
.lk-stakes b { font-weight: 800; }
.lk-card.good .lk-stakes b { color: var(--gx-gold); }
.lk-card.bad .lk-stakes b { color: var(--gx-pink-soft); }
.prompt-card.lk-card.drawing:not(.small) .lk-stakes { animation: breathe .8s cubic-bezier(.2,.8,.2,1) 1.9s backwards; }

/* ---- the players, under the card ---- */
.lk-board { position: absolute; left: 50%; top: 25.5vw; z-index: 2; display: flex; align-items: flex-end; gap: 1.1vw; transform: translateX(-50%);
  opacity: 0; pointer-events: none; transition: opacity .5s .3s; }
#s-likely[data-sub="voting"] .lk-board, #s-likely[data-sub="reveal"] .lk-board { opacity: 1; }
.lk-board { --w: 8.6vw; --guy: 5.6vw; --vw: 2.9vw; --vguy: 2.3vw; }
.lk-board[data-n="7"], .lk-board[data-n="8"] { --w: 7.6vw; --guy: 5vw; --vw: 2.6vw; --vguy: 2.1vw; gap: .8vw; }
.lk-tile { position: relative; width: var(--w); display: flex; flex-direction: column; align-items: center; transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .5s, filter .5s;
  animation: oo-in .5s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay: calc(var(--i) * .06s + .4s); }
.lk-tile.gone { opacity: .45; }
/* the votes a player gets pile up over their head, three to a row, staying inside their own column */
.lk-voters { position: absolute; left: 50%; bottom: calc(100% + .2vw); width: calc(var(--w) + .7vw); transform: translateX(-50%); display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; align-items: flex-start; gap: .1vw 0; }
.lk-voter { position: relative; display: flex; flex-direction: column; align-items: center; width: var(--vw); font: 600 .6vw var(--gx-sans); color: rgba(255,255,255,.85); animation: oo-land .34s cubic-bezier(.2,1.5,.4,1) both; transform-origin: 50% 100%; }
.lk-voter > span:last-of-type { max-width: 100%; padding: .02vw .2vw; border-radius: 99px; box-sizing: border-box; color: #fff; background: rgba(10,6,12,.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-voter .guy-mini { width: var(--vguy); height: var(--vguy); }
.lk-voter .guy-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lk-guy { width: var(--guy); height: var(--guy); transition: filter .5s; }
.lk-guy svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lk-tile.hit .lk-guy { animation: lk-hit .3s cubic-bezier(.2,1.5,.4,1); }
@keyframes lk-hit { 40% { transform: scale(1.12, .9); } }
.lk-name { max-width: 100%; margin-top: .3vw; padding: .22vw .7vw; border-radius: 99px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 .95vw var(--gx-sans); color: #fff; background: rgba(16,11,18,.8); border: 1px solid var(--gx-line); transition: background .4s, color .4s, border-color .4s; }
.lk-tile.voted .lk-name::after { content: " ✓"; color: var(--gx-gold); }
.lk-pts { min-height: 2.4vw; margin-top: .35vw; }
.lk-delta { display: inline-block; font: 800 1.8vw var(--gx-sans); letter-spacing: -.02em; color: transparent; -webkit-background-clip: text; background-clip: text; animation: lk-delta .55s cubic-bezier(.2,1.5,.4,1) both; }
.lk-delta.up { background-image: linear-gradient(180deg, #fff6dc, #ffd98a 50%, #e0b04a); filter: drop-shadow(0 0 .6vw rgba(255,195,90,.6)); }
.lk-delta.down { background-image: linear-gradient(180deg, #ffe6f1, #ff8cc4 55%, #ff4f9a); filter: drop-shadow(0 0 .6vw rgba(255,79,154,.6)); }
@keyframes lk-delta { from { opacity: 0; transform: translateY(-.8vw) scale(1.5); } }

/* the room's pick: up and lit; a roast's pick shakes under the glare */
.lk-tile.picked { transform: translateY(-.8vw) scale(1.12); z-index: 2; }
.lk-tile.picked.good .lk-guy { filter: drop-shadow(0 0 1.2vw rgba(255,195,90,.95)); }
.lk-tile.picked.good .lk-name { color: #2a1a08; border-color: #ffe6a8; background: linear-gradient(180deg, #fff0c0, #e0b04a); }
.lk-tile.picked.bad .lk-guy { filter: drop-shadow(0 0 1.2vw rgba(255,79,154,.95)); animation: lk-shame .45s ease-in-out 3; }
.lk-tile.picked.bad .lk-name { border-color: #ffd3e6; background: linear-gradient(180deg, #ff8cc4, #ff4f9a); }
@keyframes lk-shame { 25% { transform: translateX(-.25vw) rotate(-4deg); } 75% { transform: translateX(.25vw) rotate(4deg); } }
.lk-tile.not { opacity: .55; filter: saturate(.5); transform: scale(.94); }

.lk-status { position: fixed; left: 60vw; bottom: 3.4vw; margin: 0; width: fit-content; max-width: 38vw; }
.lk-status:empty { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lk-tile, .lk-voter, .lk-delta { animation-duration: .01s !important; animation-delay: 0s !important; }
  .lk-tile.picked.bad .lk-guy { animation: none !important; }
}

/* Pib's deciding vote, when two at the table tie */
.lk-voter.pib > span:last-of-type { color: #2a1a08; background: linear-gradient(180deg, #fff0c0, #e0b04a); font-weight: 800; }

/* writing the questions: the answering screen (host.js renderAnswering) without the pot, since
   Blame Game has none */
#s-answering[data-sub="likely"] .pot, #s-answering[data-sub="likely"] .pot-mult { visibility: hidden; }