/**
 * WildWhere.
 *
 * Everything is scoped under .fww. Tokens fall back to the theme's own custom
 * properties where the site defines them, so the game inherits a brand change
 * without being edited.
 *
 * Two conventions carried over from the other game plugins, both learned the
 * hard way:
 *
 *   1. Any .fww-* element styled display:flex needs an explicit [hidden]
 *      rule. `display:flex` beats the `hidden` attribute's UA `display:none`,
 *      so without it the reveal panel and both modals render on page load.
 *      The list is at the bottom of this file - add to it when you add a
 *      hidden flex element.
 *
 *   2. Motion never shares a property. The map's ambient drift lives on its
 *      own layer (.fww-map-aurora) rather than on the canvas, because the
 *      canvas is being written by the renderer and an animation on the same
 *      element would fight it.
 *
 * Sizing is by container query, not media query: the shortcode can land in a
 * narrow sidebar or a full-width page and should adapt to its column rather
 * than to the viewport.
 */

.fww {
	/* -------------------------------------------------------- brand ---- */
	--fww-ink: var(--theme-color-5, #1a3a2f);
	--fww-sky: var(--theme-color-4, #6fa8e8);
	--fww-mint: #e8f4ec;
	--fww-leaf: #7bc142;
	--fww-coral: #e06840;
	--fww-cream: #fdfbf2;
	--fww-amber: #e8a840;

	/* ---------------------------------------------------------- map ---- */
	/* The map panel is deliberately dark against a light page. A range glow
	   needs somewhere dark to glow, and a dark panel reads as "instrument"
	   rather than "illustration". */
	--fww-ocean: #0d2029;
	--fww-ocean-lip: #16394a;
	--fww-land: #2b4d43;
	--fww-border: #43705f;
	--fww-graticule: rgba(255, 255, 255, .07);
	--fww-range: #8fd94f;
	--fww-range-glow: rgba(143, 217, 79, .3);
	--fww-pin: #ff7a4d;
	--fww-arc: #f0b64a;
	--fww-label-ink: #e6f2ee;
	--fww-label-halo: rgba(6, 18, 24, .9);

	/* The warm/cold ladder. Read by the canvas as well as the DOM, so a guess
	   marker on the map is exactly the colour of its pip and its badge. Cold
	   is blue and hot is red because every player already knows that; the
	   middle is deliberately desaturated so the two ends stay the loud ones. */
	--fww-temp-0: #4a90d9;
	--fww-temp-1: #6bb6dd;
	--fww-temp-2: #a8cfd6;
	--fww-temp-3: #f2c14e;
	--fww-temp-4: #ef8b3c;
	--fww-temp-5: #e2452c;

	/* --------------------------------------------------------- shell ---- */
	--fww-r: var(--default-border-radius, 12px);
	--fww-r-sm: var(--input-border-radius, 8px);
	--fww-shadow: var(--default-box-shadow, 0 12px 30px rgba(26, 58, 47, .08));
	--fww-line: rgba(26, 58, 47, .12);

	container-type: inline-size;
	font-family: var(--body-font, "Nunito Sans", system-ui, sans-serif);
	color: var(--fww-ink);
	max-width: 900px;
	margin: 0 auto 2rem;
}

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

.fww-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

.fww-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .75rem;
}

.fww-meta {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0;
	font-size: clamp(.8rem, 2cqi, .95rem);
	letter-spacing: .01em;
}

.fww-brand {
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.15em;
	color: var(--fww-ink);
}

.fww-hash {
	font-weight: 700;
	color: var(--fww-leaf);
}

.fww-date {
	opacity: .6;
}

.fww-head-actions {
	display: flex;
	gap: .4rem;
}

/* ------------------------------------------------------------- buttons --- */

.fww-btn {
	appearance: none;
	border: 1px solid var(--fww-line);
	background: #fff;
	color: var(--fww-ink);
	font: inherit;
	font-weight: 700;
	border-radius: var(--fww-r-sm);
	padding: .6rem 1rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1),
		box-shadow .18s ease,
		background-color .18s ease,
		opacity .18s ease;
}

.fww-btn:hover:not(:disabled):not(.is-disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(26, 58, 47, .14);
}

.fww-btn:active:not(:disabled) {
	transform: translateY(0);
}

.fww-btn:focus-visible {
	outline: 3px solid var(--fww-sky);
	outline-offset: 2px;
}

.fww-btn:disabled,
.fww-btn.is-disabled {
	opacity: .45;
	cursor: default;
}

.fww-btn-icon {
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border-radius: 50%;
	font-size: 1.05rem;
}

.fww-btn-primary {
	background: var(--fww-ink);
	border-color: var(--fww-ink);
	color: var(--fww-cream);
}

.fww-btn-primary:hover:not(:disabled) {
	background: #16302a;
}

/* ------------------------------------------------------------- stage ---- */

/* One column at every width. The map is the thing being played, so it gets
   the full column and the photo sits above it as a banner - side by side cost
   the map roughly two thirds of its area for no gain, since the photo needs
   far less room than a world map does. */
.fww-stage {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
}

/* --------------------------------------------------------------- photo --- */

.fww-photo {
	margin: 0;
	border-radius: var(--fww-r);
	overflow: hidden;
	background: var(--fww-mint);
	box-shadow: var(--fww-shadow);
	position: relative;
}

.fww-photo-frame {
	position: relative;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.fww-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Held at 1.06 so the slow drift never exposes an edge. */
	transform: scale(1.06);
	animation: fww-drift 26s ease-in-out infinite alternate;
}

@keyframes fww-drift {
	from { transform: scale(1.06) translate3d(-1.2%, -.8%, 0); }
	to   { transform: scale(1.1) translate3d(1.2%, .8%, 0); }
}

/* A single slow sweep of light across the photo. Own element, own property. */
.fww-photo-sheen {
	position: absolute;
	inset: -40% -120%;
	background: linear-gradient(
		100deg,
		transparent 42%,
		rgba(255, 255, 255, .22) 50%,
		transparent 58%
	);
	transform: translateX(-40%);
	animation: fww-sheen 7.5s ease-in-out 1.2s infinite;
	pointer-events: none;
}

@keyframes fww-sheen {
	0%   { transform: translateX(-45%); opacity: 0; }
	12%  { opacity: 1; }
	40%  { transform: translateX(45%); opacity: 0; }
	100% { transform: translateX(45%); opacity: 0; }
}

/* Bottom right of the photo, matching the map's own controls so the two
   panels read as one instrument. */
.fww-photo-expand {
	position: absolute;
	z-index: 2;
	right: .55rem;
	bottom: .55rem;
}

.fww-species {
	padding: .85rem 1rem 1rem;
	background: #fff;
}

@container (min-width: 721px) {
	.fww-photo {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		align-items: stretch;
	}

	.fww-photo-frame {
		aspect-ratio: 16 / 10;
		height: 100%;
	}

	.fww-species {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 1rem 1.4rem;
	}
}

.fww-eyebrow {
	display: block;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fww-leaf);
	margin-bottom: .15rem;
}

.fww-species-name {
	margin: 0;
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-size: clamp(1.35rem, 4.4cqi, 1.9rem);
	line-height: 1.15;
	color: var(--fww-ink);
}

/* ----------------------------------------------------------------- map --- */

.fww-mapwrap {
	position: relative;
	border-radius: var(--fww-r);
	overflow: hidden;
	background: var(--fww-ocean);
	box-shadow: var(--fww-shadow);
	aspect-ratio: 16 / 9;
	min-height: 260px;
	isolation: isolate;
}

@container (max-width: 720px) {
	.fww-mapwrap {
		/* Taller than the map needs, on purpose: on a phone the extra height
		   is thumb room for placing and dragging a pin, which matters more
		   than trimming the ocean. */
		aspect-ratio: 4 / 3;
	}
}

/* Ambient motion behind the canvas. Two very slow, very large radial washes
   drifting out of phase - enough to keep the panel alive, not enough to
   compete with the map. */
.fww-map-aurora {
	position: absolute;
	inset: -30%;
	z-index: 0;
	background:
		radial-gradient(38% 42% at 25% 30%, rgba(111, 168, 232, .3), transparent 70%),
		radial-gradient(34% 38% at 75% 68%, rgba(143, 217, 79, .22), transparent 70%);
	filter: blur(12px);
	animation: fww-aurora 24s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes fww-aurora {
	from { transform: translate3d(-4%, -3%, 0) scale(1); }
	to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

.fww-canvas {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;   /* we own pan and pinch */
	cursor: crosshair;
	opacity: 0;
	transition: opacity .5s ease;
}

.fww.is-ready .fww-canvas {
	opacity: 1;
}

/* The round is over: the map is now something to read rather than something
   to aim at, and it still pans. */
.fww.is-over .fww-canvas {
	cursor: grab;
}

.fww.is-over .fww-canvas:active {
	cursor: grabbing;
}

.fww-canvas:focus-visible {
	outline: 3px solid var(--fww-sky);
	outline-offset: -3px;
}

/* The loading state: a slow shimmer where the map will be. */
.fww-mapwrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
	background-size: 250% 100%;
	animation: fww-shimmer 1.5s linear infinite;
	pointer-events: none;
	transition: opacity .4s ease;
}

.fww.is-ready .fww-mapwrap::after,
.fww.is-broken .fww-mapwrap::after {
	opacity: 0;
	animation: none;
}

@keyframes fww-shimmer {
	from { background-position: 130% 0; }
	to   { background-position: -30% 0; }
}

.fww-map-hud {
	position: absolute;
	z-index: 3;
	top: .6rem;
	right: .6rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.fww-btn-map {
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border-radius: var(--fww-r-sm);
	background: rgba(13, 32, 41, .72);
	border-color: rgba(255, 255, 255, .18);
	color: #fff;
	backdrop-filter: blur(6px);
	font-size: 1rem;
}

.fww-btn-map:hover {
	background: rgba(13, 32, 41, .9);
}

.fww-btn-labels {
	font-size: .78rem;
	letter-spacing: .01em;
}

.fww-btn-labels.is-on {
	background: var(--fww-leaf);
	border-color: var(--fww-leaf);
	color: #0d2029;
}

.fww-prompt {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: .7rem;
	transform: translateX(-50%);
	margin: 0;
	padding: .4rem .85rem;
	border-radius: 999px;
	background: rgba(13, 32, 41, .78);
	backdrop-filter: blur(6px);
	color: #eaf6ee;
	font-size: clamp(.75rem, 2.2cqi, .875rem);
	font-weight: 700;
	white-space: nowrap;
	animation: fww-bob 3.4s ease-in-out infinite;
}

@keyframes fww-bob {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(-4px); }
}

.fww-noscript {
	position: absolute;
	inset: auto 1rem 1rem;
	z-index: 4;
	color: #eaf6ee;
	text-align: center;
}

/* ------------------------------------------------------------ controls --- */

.fww-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin: 1.1rem 0 0;
}

.fww-attempts {
	display: flex;
	gap: .4rem;
}

.fww-pip {
	width: 2rem;
	height: .38rem;
	border-radius: 999px;
	background: var(--fww-line);
	transition: background-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.fww-pip.is-used {
	background: var(--fww-pip-color, var(--fww-coral));
	transform: scaleX(1.08);
}

.fww-lock {
	font-size: clamp(.95rem, 2.8cqi, 1.05rem);
	padding: .8rem 1.9rem;
	position: relative;
}

/* Once a pin is down, the button asks to be pressed. It stops the moment it
   is disabled again, so the pulse always means "you can act now". */
.fww-lock:not(:disabled) {
	animation: fww-ready 2.4s ease-in-out infinite;
}

@keyframes fww-ready {
	0%, 100% { box-shadow: 0 0 0 0 rgba(224, 104, 64, .45); }
	60%      { box-shadow: 0 0 0 14px rgba(224, 104, 64, 0); }
}

.fww-hints {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}

.fww-btn-hint {
	font-size: .8rem;
	font-weight: 700;
	padding: .45rem .8rem;
	background: var(--fww-mint);
	border-color: transparent;
}

.fww-btn-hint.is-used {
	opacity: .4;
}

.fww-hint-cost {
	color: var(--fww-coral);
	font-weight: 800;
}

.fww-hint-out {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	width: 100%;
	max-width: 34rem;
}

.fww-hint-line {
	background: var(--fww-mint);
	border-left: 3px solid var(--fww-leaf);
	border-radius: var(--fww-r-sm);
	padding: .5rem .75rem;
	font-size: .9rem;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.fww-hint-line.is-in {
	opacity: 1;
	transform: none;
}

.fww-feedback {
	margin: .9rem auto 0;
	max-width: 34rem;
	text-align: center;
	font-weight: 700;
	padding: .65rem .9rem;
	border-radius: var(--fww-r-sm);
	background: var(--fww-mint);
	animation: fww-pop .4s cubic-bezier(.22, 1, .36, 1);
}

.fww-feedback.is-miss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	background: #fdeee8;
	color: #8a3a1e;
}

/* One word, in the colour of the band. The badge is the signal; the sentence
   beside it is the detail. */
.fww-temp {
	flex: 0 0 auto;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0d2029;
	background: var(--fww-temp-2);
}

.fww-feedback.is-temp-0 { background: #e7f1fa; color: #1d4a72; }
.fww-feedback.is-temp-1 { background: #e6f4f6; color: #17555e; }
.fww-feedback.is-temp-2 { background: #eef4f6; color: #2f5560; }
.fww-feedback.is-temp-3 { background: #fdf4e0; color: #7a5a12; }
.fww-feedback.is-temp-4 { background: #fdeddd; color: #8a4a15; }
.fww-feedback.is-temp-5 { background: #fdeae5; color: #8f2f1c; }

.fww-feedback.is-temp-0 .fww-temp { background: var(--fww-temp-0); }
.fww-feedback.is-temp-1 .fww-temp { background: var(--fww-temp-1); }
.fww-feedback.is-temp-2 .fww-temp { background: var(--fww-temp-2); }
.fww-feedback.is-temp-3 .fww-temp { background: var(--fww-temp-3); }
.fww-feedback.is-temp-4 .fww-temp { background: var(--fww-temp-4); }
.fww-feedback.is-temp-5 .fww-temp { background: var(--fww-temp-5); color: #fff; }

.fww-feedback.is-ok {
	background: #e9f7e2;
	color: #2f6a1d;
}

@keyframes fww-pop {
	from { opacity: 0; transform: translateY(8px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- scoreline --- */

/*
 * The running total, and the log of guesses under it.
 *
 * Both are new in 1.2.0 and both exist for the same reason: the score has
 * always been a curve, and the player used to see it exactly once, after the
 * last guess was spent. A number that moves while there are still guesses left
 * is the difference between a game you are playing and a test you are sitting.
 *
 * Sized and coloured to rhyme with the reveal panel's scorecard - the round
 * should end on the same component the player has been watching, larger.
 */
.fww-runscore {
	width: 100%;
	max-width: 34rem;
	margin: 1rem auto 0;
	animation: fww-pop .4s cubic-bezier(.22, 1, .36, 1);
}

.fww-runscore-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .35rem;
}

.fww-runscore-label {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .65;
}

.fww-runscore-value {
	font-weight: 800;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}

.fww-runscore-max {
	font-weight: 700;
	font-size: .85rem;
	opacity: .55;
}

.fww-runbar {
	height: .45rem;
	border-radius: 999px;
	background: var(--fww-line);
	overflow: hidden;
}

.fww-runbar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fww-amber), var(--fww-leaf));
	transition: width .8s cubic-bezier(.22, 1, .36, 1);
}

.fww-guesses {
	list-style: none;
	margin: .6rem auto 0;
	padding: 0;
	width: 100%;
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

/* Same entrance as .fww-hint-line, on purpose: a guess landing and a hint
   landing are the same kind of event and should not arrive differently. */
.fww-guess {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .5rem .7rem;
	border-radius: var(--fww-r-sm);
	background: var(--fww-mint);
	font-size: .9rem;
	font-weight: 700;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.fww-guess.is-in {
	opacity: 1;
	transform: none;
}

.fww-guess-n {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(26, 58, 47, .1);
	font-size: .75rem;
	font-weight: 800;
}

.fww-guess-dist {
	font-variant-numeric: tabular-nums;
}

.fww-guess-dir {
	font-weight: 600;
	opacity: .7;
}

/* Points push to the right edge; the column of them is the thing worth
   scanning down. */
.fww-guess-pts {
	margin-left: auto;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--fww-ink);
	opacity: .85;
}

/* The pin currently carrying the score. Recomputed every guess, because a
   later pin can be closer and still worth less. */
.fww-guess.is-best {
	box-shadow: inset 0 0 0 2px var(--fww-leaf);
}

.fww-guess.is-best .fww-guess-pts {
	opacity: 1;
}

.fww-guess.is-temp-0 { background: #e7f1fa; color: #1d4a72; }
.fww-guess.is-temp-1 { background: #e6f4f6; color: #17555e; }
.fww-guess.is-temp-2 { background: #eef4f6; color: #2f5560; }
.fww-guess.is-temp-3 { background: #fdf4e0; color: #7a5a12; }
.fww-guess.is-temp-4 { background: #fdeddd; color: #8a4a15; }
.fww-guess.is-temp-5 { background: #fdeae5; color: #8f2f1c; }

.fww-guess.is-temp-0 .fww-temp { background: var(--fww-temp-0); }
.fww-guess.is-temp-1 .fww-temp { background: var(--fww-temp-1); }
.fww-guess.is-temp-2 .fww-temp { background: var(--fww-temp-2); }
.fww-guess.is-temp-3 .fww-temp { background: var(--fww-temp-3); }
.fww-guess.is-temp-4 .fww-temp { background: var(--fww-temp-4); }
.fww-guess.is-temp-5 .fww-temp { background: var(--fww-temp-5); color: #fff; }

.fww-guess.is-temp-0 .fww-guess-pts,
.fww-guess.is-temp-1 .fww-guess-pts,
.fww-guess.is-temp-2 .fww-guess-pts,
.fww-guess.is-temp-3 .fww-guess-pts,
.fww-guess.is-temp-4 .fww-guess-pts,
.fww-guess.is-temp-5 .fww-guess-pts {
	color: inherit;
}

/* ------------------------------------------------------- the pause --- */

/*
 * The second and a half between locking in and finding out.
 *
 * The rings themselves are drawn on the canvas; this is only the part of the
 * page that has to stop inviting input while they run. The cursor is the
 * signal that matters - a map that still says "click to place" during a scan
 * gets clicked.
 */
.fww.is-resolving .fww-canvas {
	cursor: progress;
}

.fww.is-resolving .fww-prompt {
	animation: fww-thinking 1.5s ease-in-out infinite;
}

@keyframes fww-thinking {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

/* -------------------------------------------------------------- reveal --- */

.fww-reveal {
	margin-top: 1.2rem;
	padding: 1.4rem;
	border-radius: var(--fww-r);
	background: var(--fww-cream);
	border: 1px solid var(--fww-line);
	text-align: center;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.fww-reveal.is-in {
	opacity: 1;
	transform: none;
}

.fww-scorecard {
	margin-bottom: 1rem;
}

.fww-verdict {
	margin: 0 0 .4rem;
	font-weight: 800;
	font-size: clamp(1rem, 3cqi, 1.15rem);
}

.fww-score {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .4rem;
}

.fww-score-value {
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-size: clamp(2.4rem, 9cqi, 3.6rem);
	line-height: 1;
	font-weight: 700;
	color: var(--fww-ink);
	font-variant-numeric: tabular-nums;
}

.fww-score-max {
	font-size: .9rem;
	opacity: .55;
	font-weight: 700;
}

.fww-scorebar {
	height: .55rem;
	border-radius: 999px;
	background: var(--fww-line);
	overflow: hidden;
	margin: .7rem auto .5rem;
	max-width: 22rem;
}

.fww-scorebar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fww-amber), var(--fww-leaf));
	transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

.fww-distance {
	margin: 0;
	font-weight: 700;
	opacity: .75;
	font-size: .95rem;
}

.fww-reveal-name {
	margin: .2rem 0 0;
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-size: clamp(1.4rem, 5cqi, 1.9rem);
}

.fww-binomial {
	margin: .1rem 0 .8rem;
	font-style: italic;
	opacity: .7;
}

.fww-blurb,
.fww-rangenote {
	margin: 0 auto .6rem;
	max-width: 42rem;
	line-height: 1.6;
}

.fww-rangenote {
	font-weight: 700;
}

.fww-rangestat {
	margin: 0 auto 1rem;
	font-size: .82rem;
	opacity: .6;
}

.fww-reveal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin-bottom: .9rem;
}

.fww-credit,
.fww-countdown {
	margin: .3rem 0 0;
	font-size: .78rem;
	opacity: .6;
}

.fww-credit a {
	color: inherit;
}

.fww-ad {
	margin-top: 1.2rem;
	min-height: 250px;   /* reserved so the unit cannot shift the panel */
}

/* Confetti: one keyframe driven by per-particle custom properties, so 44
   particles cost 44 elements and one animation definition. */
.fww-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.fww-confetti span {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	background: hsl(var(--hue) 78% 58%);
	animation: fww-confetti 2.4s cubic-bezier(.2, .7, .3, 1) var(--d) forwards;
}

@keyframes fww-confetti {
	from { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
	to   { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); opacity: 0; }
}

/* ----------------------------------------------------------------- nav --- */

.fww-nav {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.2rem;
	flex-wrap: wrap;
}

.fww-nav-link {
	font-size: .875rem;
	padding: .5rem .95rem;
}

/* -------------------------------------------------------------- modals --- */

.fww-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(13, 32, 41, .55);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s ease;
}

.fww-modal.is-in {
	opacity: 1;
}

.fww-modal-card {
	position: relative;
	width: min(30rem, 100%);
	max-height: 85vh;
	overflow-y: auto;
	background: var(--fww-cream);
	border-radius: var(--fww-r);
	padding: 1.6rem 1.4rem 1.4rem;
	box-shadow: 0 24px 60px rgba(13, 32, 41, .35);
	transform: translateY(12px) scale(.98);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.fww-modal.is-in .fww-modal-card {
	transform: none;
}

.fww-modal-close {
	position: absolute;
	top: .6rem;
	right: .6rem;
}

.fww-modal-title {
	margin: 0 0 1rem;
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-size: 1.3rem;
}

.fww-statgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6rem;
	margin: 0 0 .8rem;
}

.fww-stat {
	text-align: center;
}

.fww-stat dt {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .6;
	font-weight: 700;
}

.fww-stat dd {
	margin: .15rem 0 0;
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}

.fww-help-list {
	margin: 0 0 1rem;
	padding: 0 0 0 .2rem;
	list-style: none;
	counter-reset: fww-help;
}

.fww-help-list li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin-bottom: .7rem;
	line-height: 1.5;
}

.fww-help-emoji {
	font-size: 1.25rem;
	line-height: 1.2;
	flex: 0 0 auto;
}

.fww-modal-foot {
	margin: 0;
	font-size: .85rem;
	opacity: .7;
}

/* Photo full screen. Its own backdrop: a photo needs a dark room, not the
   tinted pane the other two modals use. */
.fww-photo-modal {
	background: rgba(6, 14, 18, .94);
	backdrop-filter: blur(6px);
	padding: 0;
}

.fww-photo-full {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
}

.fww-photo-full img {
	max-width: 100%;
	/* Room for the caption and the close button at any viewport height. */
	max-height: calc(100% - 3.5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--fww-r-sm);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.fww-photo-caption {
	margin: 0;
	color: #eaf6ee;
	font-family: var(--title-font, Fredoka, system-ui, sans-serif);
	font-size: 1.05rem;
	text-align: center;
}

.fww-photo-close {
	position: absolute;
	z-index: 2;
	top: .8rem;
	right: .8rem;
	background: rgba(13, 32, 41, .8);
	border-color: rgba(255, 255, 255, .25);
	color: #fff;
}

.fww-photo-close:hover {
	background: rgba(13, 32, 41, .95);
}

.fww-error {
	padding: 1.5rem;
	text-align: center;
	background: var(--fww-mint, #e8f4ec);
	border-radius: 12px;
}

/* ------------------------------------------------------------ SEO copy --- */

/* Outside the .fww root on purpose, so the theme's article typography applies
   and this reads as page content rather than as part of the widget. */
.fww-about {
	max-width: 900px;
	margin: 2.5rem auto 0;
}

.fww-about h2 {
	margin-top: 1.8rem;
}

/* --------------------------------------------------- hidden flex fixes --- */

/* See convention 1 at the top of this file. Every rule above that sets
   display:flex on something that can be hidden must appear here. */
.fww-reveal[hidden],
.fww-modal[hidden],
.fww-hints[hidden],
.fww-runscore[hidden],
.fww-runscore-head[hidden],
.fww-guesses[hidden],
.fww-guess[hidden],
.fww-reveal-actions[hidden],
.fww-feedback[hidden],
.fww-hint-out[hidden],
.fww-controls[hidden],
.fww-map-hud[hidden],
.fww-btn[hidden],
.fww-prompt[hidden] {
	display: none;
}

/* --------------------------------------------------- reduced motion --- */

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

	.fww-photo-frame img {
		transform: scale(1);
	}

	.fww-photo-sheen,
	.fww-map-aurora,
	.fww-confetti {
		display: none;
	}
}