/* Color Guesser Live: the parts only this game has. The room, lobby and
   standings are in /assets/css/live.css. */

/* ---------- Avatars, tags, chips ---------- */

.chip-cat[aria-pressed="true"] {
	background: var(--pink);
	color: var(--ink);
}

.chip-brands[aria-pressed="true"] {
	background: var(--cyan);
}

/* ---------- Entry ---------- */

.live-logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin-bottom: 26px;
	font-size: clamp(46px, 14vw, 84px);
	line-height: 1;
}

.live-logo .lt-tiles {
	gap: 4px;
}

.live-logo .lt-tile {
	border-width: 2.5px;
	box-shadow: 3px 3px 0 var(--ink);
}

.live-logo-word {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	animation: screen-in 0.6s 0.45s var(--ease-out) both;
}

/* A little on-air light */
.live-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.12em 0.45em 0.16em;
	border: var(--border);
	border-radius: 50px;
	background: var(--coral);
	box-shadow: 3px 3px 0 var(--ink);
	font-size: 0.3em;
	letter-spacing: 0;
	transform: rotate(-6deg);
}

.live-badge::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #fff;
	animation: on-air 1.6s ease-in-out infinite;
}

@keyframes on-air {
	50% {
		opacity: 0.25;
	}
}

/* ---------- Lobby ---------- */

.room-code .lt-tile {
	width: 0.95em;
}

.cat-chips {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px dashed #0000002a;
}

/* ---------- Question ---------- */

/* The picture stays in view while the sliders scroll beneath it. */
.q-stage {
	position: sticky;
	top: 8px;
	z-index: 3;
	margin-bottom: 14px;
	padding: 12px;
}

.q-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin-bottom: 10px;
}

.q-title .item-name {
	font-size: clamp(24px, 6.5vw, 34px);
}

.q-title .item-category {
	margin: 0;
	font-size: 14px;
}

.q-art .art {
	width: min(100%, calc(30vh * var(--ar, 1)));
	max-height: none;
	margin: 0 auto;
}

.q-picker {
	margin-bottom: 14px;
}

/* ---------- Reveal ---------- */

.reveal-head {
	margin-bottom: 14px;
	text-align: center;
}

.reveal-head .item-name {
	font-size: clamp(30px, 8vw, 44px);
}

.reveal-original {
	width: min(240px, 66%);
	margin: 0 auto 24px;
}

.reveal-original .art {
	box-shadow: var(--shadow);
	animation: wipe-in 0.8s 0.1s var(--ease-out) both;
}

.reveal-original figcaption {
	margin-top: 8px;
	font-weight: 700;
	text-align: center;
}

.reveal-original .hsl-list {
	margin-top: 2px;
	text-align: center;
}

/* Exact values, for anyone who wants to see how close they really were */
.hsl-list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.hsl-part {
	margin-right: 0.4em;
	font-weight: 700;
}

.guess-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.guess {
	position: relative;
	display: grid;
	gap: 8px;
	padding: 10px;
	border: var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
	animation: deal-in 0.55s var(--ease-spring) both;
	animation-delay: calc(var(--i) * 110ms + 300ms);
}

/* The winner keeps the same size as everyone else, but gets a rainbow
   paint border and a little tilt. */
.guess.is-top {
	border: 6px solid transparent;
	background:
		linear-gradient(var(--surface), var(--surface)) padding-box,
		conic-gradient(from 210deg, #ff5d8f, #ffd23f, #3bceac, #5b8cff, #b07cff, #ff5d8f) border-box;
	box-shadow: 4px 4px 0 var(--ink), 0 0 0 2px var(--ink);
	transform: rotate(-1.5deg);
}

.guess.is-me {
	outline: 4px solid var(--mint-strong);
	outline-offset: 2px;
}

.guess .art {
	border-radius: 10px;
}

.guess-rank {
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: var(--border);
	border-radius: 50%;
	background: var(--surface);
	font-weight: 800;
	font-size: 16px;
}

.guess.is-top .guess-rank {
	width: 40px;
	height: 40px;
	background: var(--yellow);
	font-size: 20px;
	transform: rotate(-8deg);
}

.guess-head {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.guess-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The score sits on the card's top-right corner, opposite the rank, so the
   name gets the whole row. */
.guess-score {
	position: absolute;
	top: -12px;
	right: -8px;
	z-index: 1;
	padding: 2px 9px 3px;
	border: var(--border);
	border-radius: 50px;
	background: var(--surface);
	font-weight: 800;
	font-size: 19px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transform: rotate(3deg);
}

.guess-score small {
	margin-left: 1px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.guess-swatches {
	display: flex;
	height: 14px;
	border: 2px solid var(--ink);
	border-radius: 6px;
	overflow: hidden;
}

.swatch {
	flex: 1;
}

.swatch + .swatch {
	border-left: 2px solid var(--ink);
}

.guess-note {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.guess-silent {
	grid-column: 1 / -1;
	color: var(--muted);
	font-weight: 600;
	text-align: center;
}

/* ---------- Wider screens ---------- */

@media (min-width: 600px) {
	.guess-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	/* Picture on the left, picker on the right */
	.screen-question {
		display: grid !important;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 0 24px;
		align-items: start;
	}

	.live-app:not([data-screen="question"]) .screen-question {
		display: none !important;
	}

	.q-bar {
		grid-column: 1 / -1;
	}

	.q-stage {
		grid-row: 2 / span 2;
		top: 20px;
	}

	.q-art .art {
		width: min(100%, calc(56vh * var(--ar, 1)));
	}

	.guess-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.reveal-original {
		width: 280px;
	}
}