/* BUG FIX (JCLUB): on the community page this pill sits in a flex row
   (.jnp-community-hero__actions) next to the notification bell, itself
   inside a flex row (.jnp-community-hero__row) alongside the page
   title. Flex items can shrink below their content size by default
   (flex-shrink:1, min-width:auto), so when the title block's own text
   needed the space, this pill (and the bell) could get squeezed down
   to a sliver — at which point its 3 "words" (star / count / "pt")
   wrapped onto separate lines, and border-radius:999px on that now
   roughly-square box drew it as a small circle instead of a pill.
   white-space:nowrap stops the internal wrap; flex-shrink:0 stops the
   box itself from being squeezed in the first place. */
.jnp-apps-points-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--jclub-white, #fff);
	white-space: nowrap;
	flex-shrink: 0;
}

.jnp-apps-trivia {
	background: var(--jclub-ink, #131316);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px;
	padding: 20px;
	color: var(--jclub-white, #fff);
	max-width: 480px;
	margin: 20px auto;
}
.jnp-apps-trivia--disabled { text-align: center; opacity: 0.7; }
.jnp-apps-trivia__intro h3 { margin: 0 0 8px; }
.jnp-apps-trivia__intro p { color: var(--jclub-grey, #999); font-size: 13px; margin: 0 0 14px; }
.jnp-apps-trivia__question { margin-bottom: 16px; }
.jnp-apps-trivia__question-text { font-weight: 600; margin-bottom: 8px; }
.jnp-apps-trivia__option {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	margin-bottom: 4px;
	cursor: pointer;
	font-size: 14px;
}
.jnp-apps-trivia__option:hover { background: rgba(255,255,255,0.06); }
.jnp-apps-trivia__option input { margin-right: 8px; }
.jnp-apps-trivia__result { text-align: center; }
.jnp-apps-trivia__result strong { color: var(--jclub-pink, #FF2D8F); font-size: 18px; }
.jnp-apps-trivia__total { color: var(--jclub-grey, #999); font-size: 13px; }
.jnp-apps-trivia__shared { color: var(--jclub-pink, #FF2D8F); font-size: 13px; font-weight: 600; }