.kerfuffle { max-width: 62rem; }
.kerfuffle [hidden] { display: none !important; }

.bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bar h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; flex: 1; }
.bar .crumb { font-size: 0.8rem; color: var(--ink-soft); width: 100%; }
.room { font-family: var(--font-mono); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.room .label { color: var(--ink-soft); }
.room .code { font-size: 1.15rem; letter-spacing: 0.12em; }
.flash { color: var(--bad); font-weight: 700; margin: 0 0 1rem; }

.layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 52rem) { .layout { grid-template-columns: minmax(0, 1fr) 14rem; } }
.play { min-width: 0; }
.hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0.25rem 0 1rem; }
.play h2, aside h2 { font-size: var(--step-1); margin: 0 0 0.5rem; }

/* Lobby. */
.lobby-view, .board-view { padding: 1.25rem; border-radius: var(--radius); background: color-mix(in srgb, var(--peach) 18%, var(--paper)); border: 2px solid color-mix(in srgb, var(--peach) 55%, var(--paper)); box-shadow: var(--shadow); }
.joined { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.joined li { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--paper); border: 2px solid var(--rule); font-weight: 600; }
.you { color: var(--ink-soft); font-weight: 400; }
.tag { margin-left: 0.4rem; font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--lilac); color: #3a1636; font-weight: 700; }
.tag.ready { background: var(--mint); }
.mode { display: inline-flex; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); padding: 0.2rem; gap: 0.2rem; }
.mode button { border: 0; background: transparent; box-shadow: none; padding: 0.45rem 1rem; }
.mode button[aria-checked="true"] { background: var(--candyfloss); color: #3a1636; }
.start { font-size: var(--step-1); padding: 0.7rem 1.6rem; }
.is-ready { background: var(--mint) !important; border-color: var(--mint) !important; color: #23412f !important; }

/* The arena: a cream card in both themes, as the drawings need. */
.arena-view { padding: 1rem; border-radius: var(--radius); background: #fff7ec; color: #4a2545; border: 2px solid #f3d6e6; box-shadow: var(--shadow); }
.arena-view .hint { color: #7a5a76; }
.topline { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 600; }
.topline .title { font-size: var(--step-1); }
.topline .count { font-size: var(--step-2); color: #c2337f; min-width: 1.5em; text-align: right; }
.timer { height: 0.5rem; border-radius: 999px; background: #f3d6e6; overflow: hidden; margin: 0.25rem 0 0.75rem; }
.timer i { display: block; height: 100%; background: #ff8fc7; transform-origin: left; }

.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: start; }
.duel .vs { font-family: var(--font-display); font-weight: 700; color: #c2337f; align-self: center; }
.side { min-width: 0; }
.side.right { text-align: right; }
.side .who { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); overflow-wrap: anywhere; }
.hists { display: flex; flex-wrap: wrap; gap: 2px; min-height: 1.6rem; }
.side.right .hists { flex-direction: row-reverse; }
.hist { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; background: #fff; border: 1.5px solid #f3d6e6; display: grid; place-items: center; }
.hist .pic { width: 100%; height: 100%; }
.hists .none { font-size: 0.8rem; color: #7a5a76; }
.duel.meet .hists { animation: glow 900ms ease-in-out 2; }
.duel.meet .hist { width: 2.2rem; height: 2.2rem; }
@keyframes glow { 50% { transform: scale(1.06); } }

.stagebox { min-height: 17rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.75rem 0 0.25rem; }
.stagebox .big { font-family: var(--font-display); font-size: var(--step-2); margin: 0.25rem 0; }
.stagebox .big strong { color: #c2337f; }
.st-meet .big, .st-intro .big { animation: pop 400ms ease-out; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }

.picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; width: 100%; }
.pick { display: flex; flex-direction: column; align-items: center; padding: 0.35rem 0.2rem 0.5rem; border-radius: 1rem; background: #fff; color: #4a2545; border: 3px solid #f3d6e6; font-size: 0.85rem; }
.pick .pic { width: 100%; max-width: 6rem; aspect-ratio: 1; }
.pick[aria-pressed="true"] { border-color: #c2337f; background: #ffe3f1; transform: translateY(-4px) rotate(-2deg); }
@media (max-width: 26rem) { .pick span { font-size: 0.7rem; } }

/* The clash. */
.clash { width: 100%; }
.arena { position: relative; aspect-ratio: 100 / 55; max-width: 34rem; margin: 0 auto; overflow: hidden; border-radius: 1rem; background: linear-gradient(#fff7ec 78%, #ffe3f1 78%); }
.fig { position: absolute; bottom: 2%; width: 34%; aspect-ratio: 1; animation: in-left 400ms ease-out both; }
.fig.left { left: 8%; }
.fig.right { right: 8%; animation-name: in-right; }
.fig .pic { width: 100%; height: 100%; }
.fig .flip { transform: scaleX(-1); }
.arena .q { display: grid; place-items: center; height: 100%; font: 700 4rem var(--font-display); color: #c7b5ff; animation: wobble 500ms ease-in-out infinite; }
@keyframes in-left { from { transform: translateX(-120%); } }
@keyframes in-right { from { transform: translateX(120%); } }
@keyframes wobble { 50% { transform: rotate(8deg) scale(1.05); } }
.word { position: absolute; left: 50%; top: 12%; translate: -50% 0; font: 700 var(--step-2) var(--font-display); color: #c2337f; opacity: 0; animation: word 2.4s 0.7s ease-out both; white-space: nowrap; }
@keyframes word { 0% { opacity: 0; transform: scale(0.3) rotate(-12deg); } 20% { opacity: 1; transform: scale(1.2) rotate(4deg); } 30% { transform: scale(1) rotate(-3deg); } 85% { opacity: 1; } 100% { opacity: 0; } }
.picknames { max-width: 34rem; margin: 0 auto; display: flex; justify-content: space-between; font-weight: 700; font-size: 0.9rem; padding: 0.2rem 0.5rem; }
.clash .line { margin: 0.4rem 0 0; font-size: var(--step-0); }
.verdict { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin: 0.2rem 0; animation: pop 400ms 1s ease-out both; }
.verdict.good { color: #2f8a5e; }
.verdict.bad { color: #c2337f; }

/* Each animation: the winner .w, the loser .l; --dir is 1 when the winner is on the left. */
.arena .fig.w, .arena .fig.l { animation-duration: 0.4s, 2.4s; animation-delay: 0s, 0.5s; animation-timing-function: ease-out, ease-in-out; animation-fill-mode: both, forwards; }
.arena .fig.left.w, .arena .fig.left.l { animation-name: in-left, var(--a); }
.arena .fig.right.w, .arena .fig.right.l { animation-name: in-right, var(--a); }

.a-chase .w { --a: chase-w; }
.a-chase .l { --a: chase-l; }
@keyframes chase-w { 30% { transform: translateX(calc(var(--dir) * 40%)) translateY(-6%); } 60% { transform: translateX(calc(var(--dir) * 90%)); } 100% { transform: translateX(calc(var(--dir) * 120%)); } }
@keyframes chase-l { 10% { transform: translateY(-14%); } 25% { transform: translateX(calc(var(--dir) * 30%)) translateY(0); } 40% { transform: translateX(calc(var(--dir) * 60%)) translateY(-12%); } 100% { transform: translateX(calc(var(--dir) * 200%)); } }

.a-nap .w { --a: nap-w; }
.a-nap .l { --a: nap-l; }
@keyframes nap-w { 40% { transform: translateX(calc(var(--dir) * 120%)) translateY(-58%) scale(0.6); } 55%, 100% { transform: translateX(calc(var(--dir) * 140%)) translateY(-43%) scale(0.55) rotate(calc(var(--dir) * 4deg)); } }
@keyframes nap-l { 0%, 50% { transform: none; } 58% { transform: scaleY(0.9); } 70%, 100% { transform: scaleY(0.96) rotate(calc(var(--dir) * 3deg)); } }

.a-scare .w { --a: scare-w; }
.a-scare .l { --a: scare-l; }
@keyframes scare-w { 20% { transform: translateX(calc(var(--dir) * 20%)) scale(1.1); } 40%, 100% { transform: translateX(calc(var(--dir) * 15%)); } }
@keyframes scare-l { 20% { transform: none; } 35% { transform: translateY(-60%) rotate(calc(var(--dir) * 12deg)); } 45% { transform: translateY(-55%) rotate(calc(var(--dir) * -10deg)); } 55% { transform: translateY(-60%) rotate(calc(var(--dir) * 10deg)); } 70% { transform: translateY(-58%); } 100% { transform: translateX(calc(var(--dir) * 30%)) translateY(-58%) rotate(calc(var(--dir) * 4deg)); } }

.a-nibble .w { --a: nibble-w; }
.a-nibble .l { --a: nibble-l; }
@keyframes nibble-w { 20%, 90% { transform: translateX(calc(var(--dir) * 70%)); } 30%, 50%, 70% { transform: translateX(calc(var(--dir) * 74%)) rotate(-4deg); } 40%, 60%, 80% { transform: translateX(calc(var(--dir) * 70%)) rotate(4deg); } 100% { transform: translateX(calc(var(--dir) * 60%)); } }
@keyframes nibble-l { 0%, 25% { transform: none; } 35% { transform: scale(0.8); } 55% { transform: scale(0.55); } 75%, 100% { transform: scale(0.3) translateY(70%); } }

.a-gobble .w { --a: gobble-w; }
.a-gobble .l { --a: gobble-l; }
@keyframes gobble-w { 0%, 35% { transform: none; } 45% { transform: scale(1.18, 0.9); } 60% { transform: scale(0.95, 1.08); } 75%, 100% { transform: scale(1.06); } }
@keyframes gobble-l { 15% { transform: translateY(-40%) rotate(calc(var(--dir) * -60deg)); } 40% { transform: translateX(calc(var(--dir) * -110%)) translateY(-30%) rotate(calc(var(--dir) * -200deg)) scale(0.5); } 45%, 100% { transform: translateX(calc(var(--dir) * -130%)) translateY(-20%) scale(0); } }

.a-tug .w { --a: tug-w; }
.a-tug .l { --a: tug-l; }
@keyframes tug-w { 10%, 50% { transform: scale(1.08, 0.96); } 60%, 100% { transform: none; } }
@keyframes tug-l { 50% { transform: translateX(calc(var(--dir) * -85%)) rotate(calc(var(--dir) * -540deg)) scale(0.7); } 70% { transform: translateX(calc(var(--dir) * -40%)) rotate(calc(var(--dir) * -720deg)) scale(0.85); } 85%, 100% { transform: translateX(calc(var(--dir) * 10%)) rotate(calc(var(--dir) * -700deg)); } }

.a-stuck .w { --a: stuck-w; }
.a-stuck .l { --a: stuck-l; }
@keyframes stuck-w { 35% { transform: translateX(calc(var(--dir) * 100%)) scale(0.75); } 45%, 100% { transform: translateX(calc(var(--dir) * 125%)) translateY(25%) scale(0.5) rotate(calc(var(--dir) * 30deg)); } }
@keyframes stuck-l { 0%, 40% { transform: none; } 50% { transform: translateX(3%) rotate(3deg); } 55% { transform: translateX(-3%) rotate(-3deg); } 60% { transform: translateX(3%) rotate(2deg); } 65% { transform: translateX(-2%); } 75%, 100% { transform: rotate(calc(var(--dir) * -8deg)); filter: grayscale(0.6); } }

.a-suck .w { --a: suck-w; }
.a-suck .l { --a: suck-l; }
@keyframes suck-w { 0%, 100% { transform: none; } 20%, 40% { transform: scale(1.04, 0.97) translateX(calc(var(--dir) * 3%)); } 30%, 50% { transform: scale(0.97, 1.04); } }
@keyframes suck-l { 0% { transform: none; } 40% { transform: translateX(calc(var(--dir) * -130%)) rotate(calc(var(--dir) * -720deg)) scale(0); } 70% { transform: translateX(calc(var(--dir) * -130%)) scale(0); } 85% { transform: translateX(calc(var(--dir) * -60%)) translateY(-40%) scale(0.8); filter: grayscale(1) brightness(0.8); } 100% { transform: translateX(calc(var(--dir) * -30%)) scale(0.8); filter: grayscale(1) brightness(0.85); } }

.a-tie .fig.left { animation: in-left 0.4s ease-out both, tie-l 1.6s 0.5s ease-in-out both; }
.a-tie .fig.right { animation: in-right 0.4s ease-out both, tie-r 1.6s 0.5s ease-in-out both; }
@keyframes tie-l { 40% { transform: translateX(55%); } 55% { transform: translateX(-10%) rotate(-8deg); } 100% { transform: none; } }
@keyframes tie-r { 40% { transform: translateX(-55%); } 55% { transform: translateX(10%) rotate(8deg); } 100% { transform: none; } }

/* The question. */
.question { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); margin: 0.25rem 0 0.75rem; }
.st-read .question { animation: pop 400ms ease-out; }
.question.small { font-size: var(--step-0); margin-bottom: 0.25rem; animation: none; }
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; width: 100%; }
.option { font-size: var(--step-0); padding: 0.9rem 0.4rem; border-radius: 1rem; background: #fff; color: #4a2545; border: 3px solid #c7b5ff; overflow-wrap: anywhere; }
.option.chosen { border-color: #c2337f; background: #ffe3f1; }
.option:disabled { opacity: 1; }
.qresult .answer { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); margin: 0; color: #2f8a5e; }
.qresult .fact { margin: 0.1rem 0 0.4rem; }
.points { font-weight: 700; }
.under { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 0.5rem; }
.under .hint { margin: 0; }

/* The table. */
.board-view .qresult { text-align: center; padding: 0.75rem; border-radius: 1rem; background: var(--paper); margin-bottom: 1rem; }
.board-view .qresult .answer { color: var(--good, #2f8a5e); }
.table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 1rem; overflow: hidden; }
.table th, .table td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--rule); }
.table th { font-size: 0.8rem; color: var(--ink-soft); }
.table .num, .table th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.me td { background: color-mix(in srgb, var(--candyfloss) 18%, var(--paper)); font-weight: 700; }
.table tr.champ td:nth-child(2)::after { content: ' 🏆'; }
@media (max-width: 26rem) { .last-col { display: none; } }
.trophy { text-align: center; }
.trophy span { font-size: 4rem; display: block; animation: pop 600ms ease-out; }
.board-view .line { text-align: center; }
.next { font-family: var(--font-display); font-weight: 600; text-align: center; }

aside ol, aside ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.wins li { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px dashed var(--rule); }
.wins .empty { color: var(--ink-soft); }
.others li { font-size: 0.85rem; padding: 0.2rem 0; display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.others .mini { width: 1.3rem; height: 1.3rem; display: inline-block; background: #fff7ec; border-radius: 0.3rem; }
.others .mini .pic { width: 100%; height: 100%; }
.others .mid { color: var(--ink-soft); }

.how { margin-top: 2rem; }
.how p { max-width: var(--measure); }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.confetti i { position: absolute; top: -2vh; width: 0.6rem; height: 0.9rem; border-radius: 0.15rem; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--drift), 105vh) rotate(var(--spin)); } }

@media (prefers-reduced-motion: reduce) {
  .arena .fig, .arena .fig.w, .arena .fig.l, .word, .verdict, .question, .st-meet .big, .duel.meet .hists, .arena .q, .trophy span { animation: none !important; }
  .word { opacity: 1; }
}