/* v54.3 (invite.js): the result card's 邀請朋友 in the room's colour, the lobby's state in large type, and the link button glowing while the 房主 is alone.
   Both pulses are opacity only and stop after a few beats: a lobby can sit open for minutes on a phone. */
#invite {
	border-color: #ffe397;
	color: #ffe397;
}
.room-state {
	display: grid;
	justify-items: center;
	gap: 2px;
	margin: 4px 0 8px;
	padding: 10px 12px 9px;
	border: 1px solid #719a9b66;
	border-radius: 12px;
	background: #06151dcc;
	text-align: center;
}
.room-state:not([data-state]) {
	display: none;
}
.room-state b {
	font: 900 22px/1.2 system-ui;
	color: #f6f0d6;
}
.room-state span {
	font-size: 13px;
	font-weight: 700;
	color: #9fc2bb;
}
.room-state span:empty {
	display: none;
}
.room-state i {
	font-size: 12px;
	font-weight: 800;
	font-style: normal;
	color: #ffe397;
}
.room-state i:empty {
	display: none;
}
.room-state[data-state='seated'] {
	border-color: #78eee099;
}
.room-state[data-state='seated'] b {
	color: #9bffe3;
}
.room-state[data-state='live'] {
	border-color: #ffe39799;
	background: #2a2410cc;
}
.room-state[data-state='live'] b {
	color: #ffe397;
}
.room-state[data-state='fail'] {
	border-color: #ffab9399;
}
.room-state[data-state='fail'] b {
	color: #ffcdbf;
}
/* still going: joining, or a match on that you play the next one of */
.room-state[data-state='join'] b::after,
.room-state[data-state='live'] b::after {
	content: '';
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.35em;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.18em;
	will-change: opacity;
	animation: room-state-pulse 1.1s ease-in-out 8;
}
@keyframes room-state-pulse {
	50% {
		opacity: 0.25;
	}
}
/* The glow is a ring that fades in and out (opacity only, no repaint) four times, then the gold border stays. */
#room-share.nudge {
	position: relative;
	border-color: #ffe397;
	color: #ffe397;
}
#room-share.nudge::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 12px;
	box-shadow: 0 0 0 3px #ffe39766;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
	animation: invite-nudge 1.4s ease-in-out 4;
}
@keyframes invite-nudge {
	50% {
		opacity: 1;
	}
}
#room-seats li.me {
	box-shadow: inset 0 0 0 2px #ffe397;
}
@media (orientation: landscape) and (max-height: 550px) {
	.room-state {
		margin: 2px 0 4px;
		padding: 5px 10px;
	}
	.room-state b {
		font-size: 17px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.room-state b::after,
	#room-share.nudge::after {
		animation: none;
	}
}
/* v54.5: the LIVE line at the top of the select screen. It slides in, stays about three seconds and fades (opacity and transform only); it never
   takes a tap. */
.live-feed {
	position: absolute;
	top: calc(max(8px, env(safe-area-inset-top)) + 54px);
	left: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 7px;
	max-width: calc(100% - 28px);
	padding: 5px 12px 5px 9px;
	border: 1px solid #ffffff22;
	border-radius: 999px;
	background: #06151dee;
	color: #f6f0d6;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -8px);
}
.live-feed b {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: #ff8a7a;
}
.live-feed b::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff5d4d;
}
.live-feed span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.live-feed.on {
	animation: live-feed 3.6s ease both;
}
@keyframes live-feed {
	0% {
		opacity: 0;
		transform: translate(-50%, -8px);
	}
	8%,
	86% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -4px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.live-feed.on {
		animation: none;
		opacity: 1;
		transform: translate(-50%, 0);
	}
}