/* Party games - shared comic style */

.party-root {
	--ink: #1a1a2e;
	--paper: #fffdf5;
	--yellow: #ffd43b;
	--pink: #ff4d8d;
	--cyan: #3bc9db;
	--green: #51cf66;
	--purple: #845ef7;
	--orange: #ff922b;
	--red: #fa3e3e;
	--shadow: 6px 6px 0 var(--ink);

	position: fixed;
	inset: 0;
	z-index: 10;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	font-family: 'Fredoka', 'Comic Sans MS', sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--ink);
	text-shadow: none;
	background-color: var(--yellow);
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .55) 0 18%, transparent 19%),
		radial-gradient(rgba(255, 146, 43, .35) 2px, transparent 2.5px);
	background-size: 100% 100%, 18px 18px;
	user-select: none;
}

.party-root *, .party-root *::before, .party-root *::after {
	box-sizing: border-box;
}

.party-root h1, .party-root h2, .party-root h3, .party-root p {
	margin: 0;
	padding: 0;
	color: inherit;
	text-shadow: none;
	border: none;
}

.party-root :where(h1, h2, h3) {
	font-family: inherit;
}

.party-root button {
	font-family: inherit;
	color: var(--ink);
	text-shadow: none;
	cursor: pointer;
}

.party-root button:disabled {
	cursor: not-allowed;
}

/* ------------------------------------------------------------ header */

.party-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 24px 0;
}

.party-logo {
	font-family: 'Bangers', 'Impact', sans-serif;
	font-size: 44px;
	letter-spacing: 2px;
	transform: rotate(-3deg);
	display: flex;
	gap: 10px;
	align-items: baseline;
	-webkit-text-stroke: 2px var(--ink);
	paint-order: stroke fill;
	text-shadow: 4px 4px 0 var(--ink);
}

.party-home-button {
	margin-left: auto;
	margin-right: 14px;
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 6px 9px;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .1s, box-shadow .1s;
}

.party-home-button:hover { transform: translate(-2px, -2px) rotate(8deg); box-shadow: 6px 6px 0 var(--ink); }

.party-flag-button {
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 6px;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .1s, box-shadow .1s;
	line-height: 0;
}

.party-flag-button:hover { transform: translate(-2px, -2px) rotate(-4deg); box-shadow: 6px 6px 0 var(--ink); }
.party-flag-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.party-flag {
	width: 48px;
	height: 30px;
	border-radius: 4px;
	display: block;
}

.party-loading {
	margin: auto;
	font-family: 'Bangers', sans-serif;
	font-size: 48px;
	animation: party-wobble 1s infinite;
}

/* ------------------------------------------------------------ generic pieces */

.party-card {
	background: var(--paper);
	border: 4px solid var(--ink);
	border-radius: 22px;
	box-shadow: 8px 8px 0 var(--ink);
	padding: 20px 24px;
}

.party-card-title, .party-title {
	font-family: 'Bangers', sans-serif;
	font-weight: normal;
	font-size: 34px;
	letter-spacing: 1.5px;
	line-height: 1.1;
}

.party-card-title { margin-bottom: 14px !important; }

.party-subtitle {
	font-size: 18px;
	font-weight: 600;
	margin: 16px 0 8px !important;
}

.party-sub {
	font-size: 18px;
	font-weight: 500;
	opacity: .8;
}

.party-hint {
	font-size: 14px;
	font-weight: 500;
	opacity: .75;
	text-align: center;
	max-width: 520px;
}

.party-message {
	background: var(--pink);
	color: #fff;
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 8px 12px;
	font-weight: 600;
	margin-bottom: 12px;
	animation: party-shake .4s;
}

.party-text-center { text-align: center; }

.party-waiting {
	font-size: 20px;
	font-weight: 600;
	animation: party-pulse 1.4s infinite;
}

.party-input {
	width: 100%;
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
	text-shadow: none;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 14px;
	padding: 10px 14px;
	outline: none;
	box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .08);
}

.party-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(132, 94, 247, .3); }

.party-label {
	display: block;
	font-weight: 600;
	margin: 12px 0 6px;
}

.party-btn {
	font-size: 18px;
	font-weight: 700;
	padding: 10px 20px;
	border: 3px solid var(--ink);
	border-radius: 14px;
	background: #fff;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .1s, box-shadow .1s, filter .1s;
	white-space: nowrap;
}

.party-btn:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); filter: brightness(1.05); }
.party-btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.party-btn:disabled { background: #ddd !important; color: #888 !important; box-shadow: 2px 2px 0 #888; border-color: #888; }

.party-btn-green { background: var(--green); }
.party-btn-pink { background: var(--pink); color: #fff !important; }
.party-btn-yellow { background: var(--yellow); }
.party-btn-white { background: #fff; }
.party-btn-big { font-size: 26px; padding: 14px 34px; font-family: 'Bangers', sans-serif; font-weight: normal; letter-spacing: 1.5px; }
.party-btn-small { font-size: 15px; padding: 6px 14px; }
.party-btn.chosen { outline: 4px solid var(--purple); outline-offset: 3px; transform: scale(1.05); }

.party-actions, .party-controls {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 16px;
}

.party-badge {
	background: var(--purple);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 1px 8px;
	text-transform: uppercase;
}

.party-avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid var(--ink);
	background: #fff;
	object-fit: cover;
	flex-shrink: 0;
}

.party-avatar.small { width: 34px; height: 34px; border-width: 2px; }
.party-avatar.medium { width: 56px; height: 56px; }
.party-avatar.banner { width: 52px; height: 52px; }
.party-avatar.big { width: 96px; height: 96px; border-width: 4px; box-shadow: 4px 4px 0 var(--ink); }
.party-avatar.huge { width: 150px; height: 150px; border-width: 5px; box-shadow: 6px 6px 0 var(--ink); }
.party-avatar.gone { filter: grayscale(1); opacity: .6; }
.party-avatar.wobble { animation: party-wobble 2s ease-in-out infinite; }

/* ------------------------------------------------------------ start screen */

.party-start {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
	gap: 36px;
	padding: 24px 40px 40px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	align-items: start;
}

.party-profile-card { transform: rotate(-1deg); }
.party-games-card { transform: rotate(1deg); }

.party-profile-preview {
	display: flex;
	align-items: center;
	gap: 18px;
}

.party-avatar-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
}

.party-avatar-option {
	padding: 0;
	border: none;
	background: none;
	border-radius: 50%;
	transition: transform .12s;
	aspect-ratio: 1;
}

.party-avatar-option .party-avatar { width: 100%; height: 100%; }
.party-avatar-option:hover { transform: scale(1.12) rotate(-6deg); }
.party-avatar-option.selected { transform: scale(1.15); }
.party-avatar-option.selected .party-avatar { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink); }

.party-game-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 200px;
	max-height: 46vh;
	overflow-y: auto;
	padding: 4px 10px 10px 4px;
}

.party-empty {
	margin: auto;
	font-size: 18px;
	font-weight: 500;
	opacity: .7;
	text-align: center;
}

.party-game-entry {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas: "name count badge" "creator count badge";
	align-items: center;
	column-gap: 12px;
	text-align: left;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 14px;
	padding: 10px 14px;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .1s, background .1s;
	animation: party-pop-in .3s;
}

.party-game-entry:hover { transform: translate(-2px, -2px); }
.party-game-entry.selected { background: var(--cyan); transform: scale(1.02); }
.party-game-name { grid-area: name; font-size: 20px; font-weight: 700; }
.party-game-creator { grid-area: creator; font-size: 14px; opacity: .75; }
.party-game-count { grid-area: count; font-weight: 600; }
.party-game-entry .party-badge { grid-area: badge; }

.party-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 46, .55);
	z-index: 50;
	animation: party-fade-in .2s;
}

.party-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(460px, calc(100vw - 32px));
	z-index: 51;
	animation: party-modal-in .25s cubic-bezier(.3, 1.6, .5, 1);
}

.party-round-picker {
	display: flex;
	gap: 12px;
}

.party-round-option {
	width: 56px;
	height: 56px;
	font-family: 'Bangers', sans-serif !important;
	font-size: 30px;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform .1s;
}

.party-round-option:hover { transform: scale(1.1); }
.party-round-option.selected { background: var(--yellow); transform: scale(1.15) rotate(-8deg); }

/* ------------------------------------------------------------ game layout */

.party-game {
	display: grid;
	grid-template-columns: 1fr 290px;
	gap: 24px;
	padding: 12px 24px 70px;
	flex: 1;
	min-height: 0;
}

.party-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.party-turn-banner {
	align-self: center;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--pink);
	color: #fff;
	border: 4px solid var(--ink);
	border-radius: 18px;
	padding: 6px 22px 6px 8px;
	box-shadow: var(--shadow);
	transform: rotate(-1.5deg);
	min-height: 66px;
}

.party-banner-text {
	font-family: 'Bangers', sans-serif;
	font-size: 32px;
	letter-spacing: 1.5px;
	-webkit-text-stroke: 1.5px var(--ink);
	paint-order: stroke fill;
	padding-left: 10px;
}

.party-round-tag {
	background: #fff;
	color: var(--ink);
	font-weight: 700;
	border: 3px solid var(--ink);
	border-radius: 999px;
	padding: 2px 12px;
	font-size: 15px;
}

.party-stage {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.party-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 900px;
	animation: party-pop-in .35s cubic-bezier(.3, 1.6, .5, 1);
}

.party-leave {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 20;
	font-size: 15px;
	font-weight: 600;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 6px 14px;
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform .1s;
}

.party-leave:hover { transform: translate(-1px, -1px) rotate(-2deg); background: #ffe3e3; }

/* ------------------------------------------------------------ scoreboard */

/* scoreboard and chat stay in view while the stage scrolls */
.party-side {
	min-width: 0;
	position: sticky;
	top: 12px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-height: calc(100vh - 110px);
}

.party-scoreboard {
	background: var(--paper);
	border: 4px solid var(--ink);
	border-radius: 20px;
	box-shadow: var(--shadow);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}

.party-scoreboard-title {
	font-family: 'Bangers', sans-serif !important;
	font-size: 28px;
	font-weight: normal;
	letter-spacing: 1px;
	text-align: center;
	color: var(--purple) !important;
	-webkit-text-stroke: 1px var(--ink);
}

.party-score-row {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 5px 8px;
	transition: transform .3s, background .3s;
	animation: party-slide-in .35s;
}

.party-score-row.active { background: #fff3bf; transform: scale(1.03) rotate(-1deg); }
.party-score-row.me { border-color: var(--purple); }
.party-score-row.away { opacity: .55; }

.party-place {
	font-family: 'Bangers', sans-serif;
	font-size: 22px;
	min-width: 26px;
}

.party-score-name {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	font-weight: 600;
}

.party-score-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 110px;
}

.party-you { font-size: 12px; opacity: .6; }
.party-crown { font-size: 14px; }
.party-ready { color: var(--green); font-weight: 900; -webkit-text-stroke: .5px var(--ink); }

.party-away-tag {
	font-size: 11px;
	font-weight: 700;
	background: #495057;
	color: #fff;
	border-radius: 999px;
	padding: 0 6px;
}

.party-score-points {
	font-family: 'Bangers', sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	white-space: nowrap;
}

.party-plus {
	margin-left: 4px;
	color: var(--red);
	animation: party-pop-in .5s cubic-bezier(.3, 1.8, .5, 1);
	display: inline-block;
}

.party-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.party-context-menu {
	position: fixed;
	z-index: 61;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--ink);
	overflow: hidden;
	min-width: 150px;
	/* the scoreboard is on the right, so open to the left of the cursor */
	transform: translateX(-100%);
	animation: party-pop-in .15s;
}

.party-context-title {
	font-weight: 700;
	padding: 6px 12px;
	background: var(--yellow);
	border-bottom: 3px solid var(--ink);
}

.party-context-menu button {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: #fff;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 600;
}

.party-context-menu button:hover { background: #e7f5ff; }
.party-context-menu button.danger:hover { background: #ffe3e3; color: var(--red); }

/* ------------------------------------------------------------ lobby */

.party-lobby {
	background: var(--paper);
	border: 4px solid var(--ink);
	border-radius: 24px;
	box-shadow: 8px 8px 0 var(--ink);
	padding: 24px;
}

.party-lobby-players {
	display: grid;
	grid-template-columns: repeat(4, 120px);
	gap: 16px;
	margin: 10px 0;
}

.party-lobby-player {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	text-align: center;
	animation: party-pop-in .4s cubic-bezier(.3, 1.8, .5, 1);
}

.party-lobby-slot {
	width: 96px;
	height: 96px;
	margin: 0 auto;
	border: 4px dashed rgba(26, 26, 46, .3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Bangers', sans-serif;
	font-size: 40px;
	color: rgba(26, 26, 46, .3);
}

/* ------------------------------------------------------------ thinking */

.party-thinking { margin-top: 30px; }

.party-thinking-avatar { position: relative; }

.party-thought {
	position: absolute;
	right: -50px;
	top: -30px;
	font-size: 60px;
	animation: party-float 2s ease-in-out infinite;
}

/* ------------------------------------------------------------ countdown */

.party-countdown {
	font-family: 'Bangers', sans-serif;
	font-size: 220px;
	line-height: 1;
	color: var(--pink);
	-webkit-text-stroke: 5px var(--ink);
	paint-order: stroke fill;
	text-shadow: 10px 10px 0 var(--ink);
	animation: party-count .9s cubic-bezier(.3, 1.8, .5, 1);
}

/* ------------------------------------------------------------ timer */

.party-timer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 999px;
	padding: 2px 16px 2px 10px;
	font-family: 'Bangers', sans-serif;
	font-size: 30px;
	letter-spacing: 1px;
	box-shadow: 3px 3px 0 var(--ink);
	min-width: 86px;
	justify-content: center;
}

.party-timer-icon { font-size: 22px; }

.party-timer.danger {
	background: var(--red);
	color: #fff;
	animation: party-shake .5s infinite;
}

/* ------------------------------------------------------------ prompt & joker */

.party-prompt-row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}

.party-prompt {
	font-family: 'Bangers', sans-serif;
	font-size: 32px;
	letter-spacing: 1px;
	text-align: center;
}

.party-joker-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	font-size: 32px;
	background: var(--purple);
	border: 3px solid var(--ink);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--ink);
	animation: party-number-in .35s cubic-bezier(.3, 1.8, .5, 1);
}

.party-joker-badge.on-tile {
	position: absolute;
	top: 10px;
	right: 10px;
	transform: rotate(12deg);
}

/* ------------------------------------------------------------ results */

.party-results {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 10px;
}

.party-result {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: "avatar name" "avatar points" "joker joker";
	column-gap: 10px;
	align-items: center;
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 16px;
	padding: 8px 14px 8px 8px;
	box-shadow: 4px 4px 0 var(--ink);
	animation: party-pop-in .4s cubic-bezier(.3, 1.8, .5, 1) backwards;
}

.party-result:nth-child(2) { animation-delay: .1s; }
.party-result:nth-child(3) { animation-delay: .2s; }
.party-result:nth-child(4) { animation-delay: .3s; }
.party-result:nth-child(5) { animation-delay: .4s; }
.party-result:nth-child(6) { animation-delay: .5s; }
.party-result:nth-child(7) { animation-delay: .6s; }

.party-result .party-avatar { grid-area: avatar; }
.party-result-name { grid-area: name; font-weight: 700; }

.party-result-points {
	grid-area: points;
	font-family: 'Bangers', sans-serif;
	font-size: 30px;
	color: var(--red);
	-webkit-text-stroke: 1px var(--ink);
	line-height: 1;
}

.party-result.zero .party-result-points { color: #868e96; font-size: 20px; -webkit-text-stroke: 0; font-family: 'Fredoka', sans-serif; }
.party-result.jackpot { background: var(--yellow); animation: party-pop-in .4s cubic-bezier(.3, 1.8, .5, 1) backwards, party-wobble 1s 0.5s ease-in-out 3; }

.party-result-joker {
	grid-area: joker;
	font-size: 13px;
	font-weight: 600;
	background: #f3f0ff;
	border-radius: 8px;
	padding: 1px 6px;
	margin-top: 2px;
	text-align: center;
}

.party-result-joker:empty { display: none; }

/* ------------------------------------------------------------ left / finished */

.party-left { margin-top: 30px; }

.party-final {
	background: var(--paper);
	background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255, 212, 59, .25) 22px 44px);
	border: 5px solid var(--ink);
	border-radius: 28px;
	box-shadow: 10px 10px 0 var(--ink);
	padding: 24px 34px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: min(100%, 640px);
}

.party-final-title {
	font-family: 'Bangers', sans-serif !important;
	font-weight: normal;
	font-size: 76px;
	letter-spacing: 3px;
	line-height: 1;
	color: var(--yellow) !important;
	-webkit-text-stroke: 3px var(--ink);
	paint-order: stroke fill;
	text-shadow: 6px 6px 0 var(--ink) !important;
	transform: rotate(-3deg);
	animation: party-count 1s cubic-bezier(.3, 1.8, .5, 1);
}

.party-final-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 12px;
}

.party-final-row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 4px solid var(--ink);
	border-radius: 18px;
	padding: 8px 18px 8px 10px;
	box-shadow: 5px 5px 0 var(--ink);
	animation: party-slide-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
}

.party-final-row:nth-child(2) { animation-delay: .15s; }
.party-final-row:nth-child(3) { animation-delay: .3s; }
.party-final-row:nth-child(n+4) { animation-delay: .45s; }

.party-final-row.place-1 { background: #fff3bf; transform: scale(1.04); }
.party-final-row.place-2 { background: #f1f3f5; }
.party-final-row.place-3 { background: #ffe8cc; }

.party-final-place {
	width: 56px;
	display: flex;
	justify-content: center;
	font-family: 'Bangers', sans-serif;
	font-size: 34px;
}

.party-trophy { width: 54px; height: 54px; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .25)); }
.party-final-row.place-1 .party-trophy { animation: party-wobble 1.6s ease-in-out infinite; }

.party-final-name { flex: 1; font-size: 24px; font-weight: 700; }

.party-final-score {
	font-family: 'Bangers', sans-serif;
	font-size: 40px;
	letter-spacing: 1px;
	color: var(--pink);
	-webkit-text-stroke: 1.5px var(--ink);
	paint-order: stroke fill;
}

/* ------------------------------------------------------------ player picker */

.party-picker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	width: min(100%, 820px);
	margin: 6px 0;
}

.party-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 150px;
	min-height: 150px;
	padding: 12px 8px 10px;
	background: #fff;
	border: 4px solid var(--ink);
	border-radius: 20px;
	box-shadow: var(--shadow);
	transition: transform .12s, box-shadow .12s, background .2s;
	animation: party-pop-in .35s cubic-bezier(.3, 1.6, .5, 1) backwards;
}

.party-pick:nth-child(2n) { animation-delay: .05s; transform: rotate(1deg); }
.party-pick:nth-child(3n) { animation-delay: .1s; transform: rotate(-1deg); }
.party-pick:not(:disabled):hover { transform: translate(-3px, -3px) rotate(0); box-shadow: 9px 9px 0 var(--ink); }
.party-pick:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.party-pick:disabled { cursor: default !important; }
.party-picker.interactive .party-pick.self:disabled { opacity: .5; }

.party-pick.selected {
	background: #fff3bf;
	outline: 5px solid var(--purple);
	outline-offset: 3px;
	transform: scale(1.04) rotate(0);
}

.party-pick.highlighted {
	background: #d3f9d8;
	transform: scale(1.08) rotate(-2deg);
	z-index: 1;
}

.party-pick-name {
	font-weight: 700;
	font-size: 17px;
	text-align: center;
	overflow-wrap: anywhere;
}

.party-pick-stamp {
	position: absolute;
	top: -16px;
	right: -12px;
	font-family: 'Bangers', sans-serif;
	font-size: 22px;
	letter-spacing: 1px;
	color: #fff;
	background: var(--green);
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 0 8px;
	box-shadow: 2px 2px 0 var(--ink);
	transform: rotate(10deg);
	-webkit-text-stroke: 1px var(--ink);
	paint-order: stroke fill;
	animation: party-number-in .4s cubic-bezier(.3, 1.8, .5, 1) backwards;
	animation-delay: .3s;
}

.party-pick-voters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
}

.party-pick-voter { animation: party-number-in .4s cubic-bezier(.3, 1.8, .5, 1) backwards; animation-delay: .5s; }
.party-pick-voter .party-avatar { width: 28px; height: 28px; }

/* ------------------------------------------------------------ question card */

.party-question-card {
	width: min(100%, 760px);
	background: #fff;
	border: 4px solid var(--ink);
	border-radius: 22px;
	box-shadow: var(--shadow);
	padding: 16px 22px;
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	transform: rotate(-.6deg);
	overflow-wrap: anywhere;
}

.party-question-card .party-question-label {
	display: block;
	font-family: 'Bangers', sans-serif;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 1px;
	opacity: .6;
	margin-bottom: 4px;
}

.party-answer-card {
	width: min(100%, 700px);
	background: #fff3bf;
	border: 4px solid var(--ink);
	border-radius: 22px 22px 22px 4px;
	box-shadow: var(--shadow);
	padding: 18px 24px;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	transform: rotate(.8deg);
	overflow-wrap: anywhere;
	animation: party-pop-in .4s cubic-bezier(.3, 1.6, .5, 1) .1s backwards;
}

/* small versions for the tutorials */
.party-question-card.mini { font-size: 18px; padding: 10px 16px; }
.party-answer-card.mini { font-size: 17px; padding: 10px 16px; }
.party-picker.mini { gap: 10px; }
.party-picker.mini .party-pick { width: 104px; min-height: 104px; padding: 8px 6px; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
.party-picker.mini .party-avatar.big { width: 56px; height: 56px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
.party-picker.mini .party-pick-name { font-size: 14px; }
.party-picker.mini .party-pick-stamp { font-size: 15px; }

@media (max-width: 900px) {
	.party-pick { width: 120px; min-height: 130px; }
	.party-question-card { font-size: 21px; }
	.party-answer-card { font-size: 19px; }
}

/* ------------------------------------------------------------ animations */

@keyframes party-pop-in {
	from { opacity: 0; scale: .6; }
	to { opacity: 1; scale: 1; }
}

@keyframes party-number-in {
	0% { scale: 0; rotate: -30deg; }
	100% { scale: 1; rotate: 0deg; }
}

@keyframes party-count {
	0% { opacity: 0; scale: 2.2; rotate: -15deg; }
	60% { opacity: 1; scale: .95; rotate: 4deg; }
	100% { scale: 1; rotate: 0deg; }
}

@keyframes party-slide-in {
	from { opacity: 0; translate: 40px 0; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes party-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes party-modal-in {
	from { opacity: 0; scale: .7; }
	to { opacity: 1; scale: 1; }
}

@keyframes party-wobble {
	0%, 100% { rotate: -4deg; }
	50% { rotate: 4deg; }
}

@keyframes party-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}

@keyframes party-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

@keyframes party-shake {
	0%, 100% { translate: 0 0; }
	25% { translate: -3px 0; rotate: -3deg; }
	75% { translate: 3px 0; rotate: 3deg; }
}

@keyframes party-armed {
	0%, 100% { box-shadow: var(--shadow); }
	50% { box-shadow: 0 0 0 6px var(--purple), var(--shadow); }
}

@keyframes party-armed-button {
	0%, 100% { scale: 1; }
	50% { scale: 1.12; }
}

@media (prefers-reduced-motion: reduce) {
	.party-root *, .party-root *::before, .party-root *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 900px) {
	.party-start { grid-template-columns: 1fr; padding: 16px; }
	.party-game { grid-template-columns: 1fr; padding: 8px 16px 70px; }
	.party-side { position: static; max-height: none; }
	.party-lobby-players { grid-template-columns: repeat(2, 120px); }
	.party-logo { font-size: 32px; }
	.party-avatar-grid { grid-template-columns: repeat(6, 1fr); }
	.party-countdown { font-size: 150px; }
}

/* ------------------------------------------------------------ tutorial */

.party-tutorial {
	width: min(760px, calc(100vw - 32px));
	/* same height for all steps, so the navigation doesn't jump */
	height: min(680px, calc(100vh - 32px));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 28px 18px;
}

.party-tutorial-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid var(--ink);
	background: #fff;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 2px 2px 0 var(--ink);
	transition: transform .1s;
}

.party-tutorial-close:hover { transform: rotate(90deg); background: #ffe3e3; }

.party-tutorial-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	animation: party-pop-in .3s cubic-bezier(.3, 1.6, .5, 1);
}

.party-tutorial-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 40px;
}

.party-tutorial-head .party-card-title { margin: 0 !important; }
.party-tutorial-emoji { font-size: 44px; animation: party-wobble 2s ease-in-out infinite; }

.party-tutorial-text {
	font-size: 17px !important;
	font-weight: 500;
	text-align: center;
	max-width: 620px;
	line-height: 1.4 !important;
}

.party-tutorial-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 200px;
	justify-content: center;
}
.party-tutorial-demo .party-controls { margin-top: 6px; }

.party-tutorial-feedback {
	font-weight: 700;
	font-size: 16px;
	min-width: 200px;
}

.party-tutorial-avatars {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	padding-top: 30px;
}

.party-tutorial-avatar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: party-float 2.4s ease-in-out infinite;
}

.party-tutorial-guess {
	position: absolute;
	top: -26px;
	right: -14px;
	font-size: 28px;
}

.party-tutorial-turn {
	margin-top: 6px;
	background: var(--pink);
	color: #fff;
	font-family: 'Bangers', sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	border: 3px solid var(--ink);
	border-radius: 10px;
	padding: 0 10px;
	transform: rotate(-4deg);
}

.party-tutorial-rules {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 500;
}

.party-tutorial-rules b {
	display: inline-block;
	min-width: 48px;
	font-family: 'Bangers', sans-serif;
	font-weight: normal;
	font-size: 22px;
	color: var(--red);
}

.party-tutorial-result {
	font-weight: 700;
	background: var(--yellow);
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 4px 12px;
	transform: rotate(-1deg);
}

.party-tutorial-trophies {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.party-tutorial-trophies .party-trophy { width: 90px; height: 90px; animation: party-pop-in .5s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.party-tutorial-trophies .party-trophy:nth-child(2) { width: 130px; height: 130px; animation-delay: .15s; }
.party-tutorial-trophies .party-trophy:nth-child(3) { animation-delay: .3s; }

.party-tutorial-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.party-tutorial-dots { display: flex; gap: 8px; }

.party-tutorial-dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--ink);
	background: #fff;
	transition: transform .15s, background .15s;
}

.party-tutorial-dot.current { background: var(--pink); transform: scale(1.3); }

/* ------------------------------------------------------------ chat */

.party-chat {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 4px solid var(--ink);
	border-radius: 20px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.party-chat.collapsed { flex: none; }

.party-chat-header {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: none;
	background: var(--cyan);
	padding: 8px 14px;
	text-align: left;
}

.party-chat:not(.collapsed) .party-chat-header { border-bottom: 3px solid var(--ink); }

.party-chat-title {
	flex: 1;
	font-family: 'Bangers', sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	color: #fff;
	-webkit-text-stroke: 1px var(--ink);
	paint-order: stroke fill;
}

.party-chat-toggle { font-size: 14px; }

.party-chat-unread {
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	border: 2px solid var(--ink);
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: party-number-in .35s cubic-bezier(.3, 1.8, .5, 1);
}

.party-chat-messages {
	flex: 1;
	min-height: 140px;
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	user-select: text;
}

.party-chat-empty {
	margin: auto;
	text-align: center;
	font-size: 14px;
	opacity: .6;
}

.party-chat-message {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	animation: party-pop-in .25s cubic-bezier(.3, 1.6, .5, 1);
}

.party-chat-message.mine { justify-content: flex-end; }

.party-chat-bubble {
	max-width: 82%;
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 14px 14px 14px 4px;
	padding: 4px 10px 5px;
	box-shadow: 2px 2px 0 var(--ink);
	display: flex;
	flex-direction: column;
	overflow-wrap: anywhere;
}

.party-chat-message.mine .party-chat-bubble {
	background: #fff3bf;
	border-radius: 14px 14px 4px 14px;
}

.party-chat-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--purple);
}

.party-chat-text { font-size: 15px; line-height: 1.3; }

.party-chat-reactions {
	display: flex;
	justify-content: space-between;
	padding: 4px 8px;
	border-top: 2px dashed rgba(26, 26, 46, .2);
}

.party-chat-reaction {
	border: none;
	background: none;
	font-size: 22px;
	padding: 2px 4px;
	border-radius: 8px;
	transition: transform .1s;
}

.party-chat-reaction:hover { transform: scale(1.3) rotate(-10deg); }
.party-chat-reaction:active { transform: scale(.9); }

.party-chat-form {
	display: flex;
	gap: 6px;
	padding: 8px;
	border-top: 3px solid var(--ink);
	background: #fff;
}

.party-chat-form.too-fast { animation: party-shake .4s; }

.party-chat-input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	text-shadow: none;
	border: 2px solid var(--ink);
	border-radius: 10px;
	padding: 6px 10px;
	outline: none;
	background: #fff;
}

.party-chat-input:focus { border-color: var(--purple); }

.party-chat-send {
	width: 40px;
	border: 2px solid var(--ink);
	border-radius: 10px;
	background: var(--green);
	font-size: 18px;
	box-shadow: 2px 2px 0 var(--ink);
}

.party-chat-send:disabled { background: #e9ecef; color: #adb5bd; box-shadow: none; }

.party-chat-message.emoji-only .party-chat-bubble {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0 4px;
}

.party-chat-message.emoji-only .party-chat-text { font-size: 32px; line-height: 1.1; }
.party-chat-message.emoji-only:not(.mine) .party-chat-text { animation: party-wobble .6s ease-in-out 2; }