/* JigsawEarth — puzzle engine styles */

/* Textured "table surface" behind the puzzle, like a canvas/felt playmat,
   lit like a table under a lamp: warm light in the middle, darker edges. */
body.single-puzzle {
	background-color: #a9ad95;
	background-image:
		radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 246, 224, 0.2), rgba(255, 246, 224, 0) 70%),
		radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
		url('../img/leather-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* The game fills the first screen; the page scrolls on to "About this
	   place" below it. Dragging on the table never scrolls the page
	   (touch-action: none on the table), and pieces can't leave it. */
}

/* Once solved, the completion panel docks to the bottom of the viewport
   and the finished photo is resized to fit above it. The scroll lock is
   released so the footer is reachable again. */
body.single-puzzle.jig-solved-state {
	height: auto;
	overflow: auto;
}

body.single-puzzle .je-header {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
}

/* --je-text-muted (light gray) has poor contrast on the leather photo —
   darken just the text that sits directly on it. */
body.single-puzzle .jig-credit {
	color: #3a2f1f;
}

.jig-app {
	max-width: none;
	margin: 0 auto;
	padding: 0 24px 48px;
}

/* z-index 0 keeps piece stacking (which climbs with every drag) inside the
   board, so pieces can never end up drawn over the header dropdown or the
   bar's menus. */
#jig-root {
	position: relative;
	z-index: 0;
	overflow-y: auto;
}

.jig-pause-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 18, 14, 0.55);
	cursor: pointer;
	z-index: 400;
}

.jig-pause-overlay[hidden] {
	display: none;
}

.jig-pause-overlay span {
	font-family: var(--je-font-heading);
	font-size: 2.4rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}


.jig-app.jig-fullscreen {
	max-width: none;
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	padding-top: 16px;
	/* The fullscreened element paints over <body>, so it needs its own
	   copy of the same leather texture to keep the look consistent. */
	background-color: #a9ad95;
	background-image:
		radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 246, 224, 0.2), rgba(255, 246, 224, 0) 70%),
		radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
		url('../img/leather-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Breadcrumb strip — full-bleed like the bar, with the puzzle title as
   its last (unlinked) step. */
.jig-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 -24px 12px;
	padding: 10px 24px;
	background: var(--je-surface);
	border-bottom: 1px solid var(--je-border);
	font-size: 0.9rem;
}

.jig-crumbs a {
	color: var(--je-primary);
	text-decoration: none;
	font-weight: 600;
}

.jig-crumbs a:hover {
	text-decoration: underline;
}

.jig-crumbs__sep {
	color: var(--je-text-muted);
}

.jig-crumbs__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.jig-save {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: #fff;
	color: var(--je-text);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.jig-save:hover {
	border-color: #d4537e;
}

.jig-save.is-saved {
	color: #c2416f;
	border-color: #d4537e;
}

.jig-save.is-saved svg {
	fill: currentColor;
}

.jig-save[hidden] {
	display: none;
}

.jig-complete-answer {
	font-weight: 600;
}

.jig-app__title {
	font-family: var(--je-font-heading);
	font-size: 1.05rem;
	margin: 0;
	color: var(--je-text);
}

/* Game bar under the table, jigsawplanet-style: tools left, progress and
   clock centred, sharing/help/fullscreen right. */
.jig-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	margin: 8px -24px 0;
	padding: 8px 24px;
	background: #26241f;
	color: #f1efe8;
}

.jig-bar__left,
.jig-bar__right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.jig-bar__right {
	justify-content: flex-end;
}

.jig-bar__center {
	display: flex;
	align-items: center;
	gap: 14px;
}

.jig-bar__divider {
	width: 1px;
	height: 22px;
	background: rgba(241, 239, 232, 0.3);
}

.jig-bar .jig-icon-btn,
.jig-bar .jig-play-as__toggle {
	background: transparent;
	border-color: rgba(241, 239, 232, 0.25);
	color: #f1efe8;
}

.jig-bar .jig-icon-btn:hover,
.jig-bar .jig-play-as__toggle:hover {
	background: rgba(241, 239, 232, 0.12);
	border-color: rgba(241, 239, 232, 0.45);
}

.jig-bar .jig-icon-btn.is-active {
	background: var(--je-accent);
	border-color: var(--je-accent);
	color: #fff;
}

.jig-bar .jig-progress {
	color: #d3d1c7;
}

.jig-bar .jig-percent {
	color: #6fd08c;
}

.jig-bar .jig-timer__icon {
	color: #5dcaa5;
	opacity: 1;
}

.jig-bar .jig-timer.is-paused {
	color: #b4b2a9;
	opacity: 1;
}

/* Refined bar (design idea 8): a frosted strip over the table, the score in
   one pill and every button the same soft, round shape. Delete this block to
   go back to the plain dark bar. */
.jig-bar {
	background: rgba(30, 29, 26, 0.84);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.16);
}

.jig-bar__center {
	justify-self: center;
	padding: 5px 16px;
	border: 1px solid rgba(241, 239, 232, 0.14);
	border-radius: 999px;
	background: rgba(241, 239, 232, 0.07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.jig-bar .jig-icon-btn,
.jig-bar .jig-play-as__toggle {
	background: rgba(241, 239, 232, 0.06);
	border-color: rgba(241, 239, 232, 0.16);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.jig-bar .jig-icon-btn:hover,
.jig-bar .jig-play-as__toggle:hover {
	background: rgba(241, 239, 232, 0.16);
	border-color: rgba(241, 239, 232, 0.35);
	transform: translateY(-1px);
}

.jig-bar .jig-icon-btn:active,
.jig-bar .jig-play-as__toggle:active {
	transform: none;
}

.jig-bar .jig-icon-btn.is-active {
	background: var(--je-accent);
	border-color: var(--je-accent);
}

/* The bar sits at the bottom of the screen, so its menus open upward. */
.jig-bar .jig-play-as__menu,
.jig-bar .jig-share__menu {
	top: auto;
	bottom: calc(100% + 10px);
}

.jig-bar .jig-play-as__menu {
	left: 0;
	right: auto;
}

.jig-play-as {
	position: relative;
}

.jig-play-as__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--je-border);
	background: #fff;
	color: var(--je-text);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.jig-play-as__toggle:hover {
	border-color: var(--je-primary);
}

.jig-share {
	position: relative;
}

.jig-share__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 160px;
	padding: 6px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(15, 30, 35, 0.2);
	z-index: 50;
}

.jig-share__menu[hidden] {
	display: none;
}

.jig-share__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	color: var(--je-text);
	font-size: 0.95rem;
	text-decoration: none;
}

.jig-share__option:hover {
	background: var(--je-tray-bg);
}

@media (max-width: 600px) {
	.jig-share__label,
	.jig-share__caret {
		display: none;
	}

	.jig-share .jig-play-as__toggle {
		padding: 8px 11px;
	}
}

.jig-play-as__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(15, 30, 35, 0.2);
	padding: 6px;
	min-width: 220px;
	z-index: 50;
	display: grid;
	grid-template-rows: repeat(6, auto);
	grid-auto-flow: column;
	gap: 2px 6px;
}

.jig-play-as__menu[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.jig-play-as__menu {
		right: auto;
		left: 0;
	}
}

.jig-play-as__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: none;
	background: none;
	color: var(--je-text);
	padding: 9px 10px;
	border-radius: 6px;
	font-size: 0.95rem;
	cursor: pointer;
	text-align: left;
}

.jig-play-as__option:hover {
	background: var(--je-tray-bg);
}

.jig-play-as__option.is-active {
	background: var(--je-primary);
	color: #fff;
}

.jig-play-as__shape {
	grid-row: 7;
	grid-column: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
	padding: 10px 10px 6px;
	border: none;
	border-top: 1px solid rgba(15, 30, 35, 0.1);
	background: none;
	color: var(--je-text);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.jig-switch {
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: 10px;
	background: rgba(15, 30, 35, 0.2);
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.jig-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

.jig-play-as__shape.is-active .jig-switch {
	background: var(--je-primary);
}

.jig-play-as__shape.is-active .jig-switch::after {
	transform: translateX(14px);
}

.jig-piece-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	background-color: currentColor;
	opacity: 0.7;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6c0-2 4-2 4 0h6v6c2 0 2 4 0 4v6h-6c0 2-4 2-4 0H4v-6c-2 0-2-4 0-4V4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6c0-2 4-2 4 0h6v6c2 0 2 4 0 4v6h-6c0 2-4 2-4 0H4v-6c-2 0-2-4 0-4V4z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.jig-play-as__option.is-active .jig-piece-icon {
	background-color: #fff;
}

.jig-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--je-text-muted);
	margin: 0;
}

.jig-progress .jig-piece-icon {
	width: 18px;
	height: 18px;
}

.jig-timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--je-accent);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	user-select: none;
}

.jig-timer__icon {
	display: inline-flex;
	color: var(--je-primary);
	opacity: 0.85;
}

.jig-timer__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.jig-timer.is-paused {
	color: var(--je-text-muted);
	opacity: 0.7;
}

.jig-timer.is-paused .jig-timer__pause-icon {
	display: block;
}

.jig-timer.is-paused .jig-timer__pause-icon {
	display: block;
}

.jig-percent {
	font-size: 1.5rem;
	font-weight: 700;
	color: #2e8b3d;
	font-variant-numeric: tabular-nums;
}

.jig-scale-wrapper {
	position: relative;
}

/* One open surface for the whole puzzle — pieces are scattered directly
   on it, no separate target box or side tray. */
.jig-mat {
	position: relative;
	/* No text selection, long-press menu or grey tap flash while playing
	   with a finger. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	/* Pieces may reach the table's edge with the empty margin of their
	   canvas hanging past it; that margin must not add scrollbars. */
	overflow: hidden;
	touch-action: none;
}

/* Floating "box lid" reference photo — fixed to the viewport corner, never
   over the pieces, so it can't be read as a build target. */
.jig-ref-panel {
	position: fixed;
	right: 18px;
	bottom: 110px;
	width: 220px;
	max-width: 40vw;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	border: 3px solid #fff;
	/* Same colour lift the engine gives the pieces. */
	filter: saturate(1.1) contrast(1.05);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 500;
}

#jig-root.jig-show-ref .jig-ref-panel {
	opacity: 1;
	transform: translateY(0);
}

.jig-ref-toggle {
	border: 1px solid var(--je-border);
	background: #fff;
	color: var(--je-text);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	cursor: pointer;
}

.jig-ref-toggle.is-active {
	background: var(--je-accent);
	border-color: var(--je-accent);
	color: #fff;
}

.jig-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--je-border);
	background: #fff;
	color: var(--je-text);
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
}

/* The picture button is hidden in mystery games; its display rule above
   would otherwise override the hidden attribute. */
.jig-icon-btn[hidden] {
	display: none;
}

.jig-icon-btn:hover {
	background: var(--je-tray-bg);
}

.jig-icon-btn.is-active {
	background: var(--je-accent);
	border-color: var(--je-accent);
	color: #fff;
}

.jig-piece {
	position: absolute;
	cursor: grab;
	touch-action: none;
	/* Loose pieces rest on the table with a soft contact shadow. */
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
	transition: opacity 0.4s ease;
}

/* Inside an assembled patch a piece's shadow would fall across its
   neighbours and smudge the picture — keep only a hairline of depth. */
.jig-piece.jig-joined {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

/* The finished puzzle should read as one clean photo, not a mosaic of
   jigsaw seams — this fades in over the pieces once the last one connects. */
.jig-solved-image {
	position: absolute;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.jig-solved-image.is-visible {
	opacity: 1;
}

/* The band of light that sweeps across the finished picture (design idea 9,
   _showSolvedImage in puzzle-engine.js). */
.jig-shine {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
}

.jig-shine::after {
	content: '';
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: -60%;
	width: 45%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-14deg);
	animation: jig-shine 0.9s ease-in-out 0.3s forwards;
}

@keyframes jig-shine {
	from {
		left: -60%;
	}

	to {
		left: 120%;
	}
}

.jig-piece.jig-dragging {
	cursor: grabbing;
	/* Lifted off the table while carried. */
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3));
}

.jig-piece.jig-solved {
	filter: none;
	cursor: default;
}

/* The soft glow where two pieces have just joined (_sparkle in
   puzzle-engine.js). */
.jig-spark {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255, 250, 228, 0.9) 0%, rgba(255, 236, 170, 0.45) 32%, rgba(255, 236, 170, 0) 70%);
	mix-blend-mode: screen;
	animation: jig-spark 0.6s ease-out forwards;
}

@keyframes jig-spark {
	0% {
		transform: scale(0.3);
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	100% {
		transform: scale(1.4);
		opacity: 0;
	}
}

.jig-credit {
	margin-top: 8px;
	font-size: 0.78rem;
	color: var(--je-text-muted);
}

.jig-credit p {
	margin: 0;
}

.jig-credit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
}

.jig-credit[hidden] {
	display: none;
}

.jig-about-link {
	font-weight: 600;
	white-space: nowrap;
}

/* About this place: a readable card below the game. */
.jig-about {
	max-width: 900px;
	margin: 36px auto 0;
	scroll-margin-top: 90px;
}

.jig-about__card {
	padding: 26px 30px;
	background: var(--je-surface);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	color: var(--je-text);
	line-height: 1.7;
}

.jig-about__card h2 {
	margin: 0 0 12px;
	font-family: var(--je-font-heading);
	font-size: 1.35rem;
	line-height: 1.3;
}

.jig-about__card p {
	margin: 0 0 14px;
}

.jig-about__tip {
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--je-tray-bg);
}

.jig-about__tip strong {
	color: var(--je-primary-dark);
	margin-right: 4px;
}

.jig-about__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--je-border);
	font-size: 0.92rem;
}

.jig-about__facts dt {
	display: inline;
	font-weight: 600;
	margin-right: 6px;
}

.jig-about__facts dt::after {
	content: ':';
}

.jig-about__facts dd {
	display: inline;
	margin: 0;
}

.jig-about__facts a {
	color: var(--je-primary);
}

.jig-about__more {
	margin-top: 28px;
}

.jig-about__more h2 {
	margin: 0;
	padding: 10px 16px;
	display: inline-block;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.88);
	font-family: var(--je-font-heading);
	font-size: 1.1rem;
	color: var(--je-text);
}

.jig-about__more .jig-grid {
	margin-top: 14px;
}

@media (max-width: 600px) {
	.jig-about {
		margin-top: 24px;
	}

	.jig-about__card {
		padding: 20px 18px;
	}
}

.jig-complete-suggestions {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--je-border);
}

.jig-complete-suggestions__title {
	font-family: var(--je-font-heading);
	font-size: 0.9rem;
	color: var(--je-text);
	margin: 0 0 10px;
	text-align: center;
}

.jig-complete-suggestions .jig-grid {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0;
	overflow-x: auto;
	padding-bottom: 2px;
}

.jig-complete-suggestions .jig-card {
	flex: 0 0 120px;
}

.jig-complete-suggestions .jig-card:hover {
	transform: none;
}

.jig-error {
	text-align: center;
	color: var(--je-text-muted);
	padding: 40px 0;
}

.jig-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 80px 0;
	color: var(--je-text-muted);
	font-size: 0.95rem;
}

.jig-spinner {
	width: 18px;
	height: 18px;
	border: 2.5px solid var(--je-border);
	border-top-color: var(--je-primary);
	border-radius: 50%;
	animation: jig-spin 0.8s linear infinite;
}

@keyframes jig-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Docked to the bottom edge, full width — the assembled photo is resized
   to sit fully above it instead of being covered by a centered modal. */
.jig-complete-overlay {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(6px);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
	max-height: 42vh;
	overflow-y: auto;
}

.jig-complete-card {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 48px;
	text-align: center;
}

.jig-complete-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 1.2rem;
	line-height: 1;
}

.jig-complete-top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.jig-complete-card h2 {
	font-family: var(--je-font-heading);
	color: var(--je-primary);
	margin: 0;
	font-size: 1.2rem;
}

/* Keeps "Location Discovered 🎉" together when the heading wraps on phones. */
.jig-complete-card h2 .jig-nowrap {
	white-space: nowrap;
}

.jig-complete-card p {
	margin: 0;
	color: var(--je-text-muted);
}

.jig-complete-top a,
.jig-complete-top button {
	display: inline-block;
	background: var(--je-accent);
	color: #fff;
	border: none;
	padding: 8px 20px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9rem;
	cursor: pointer;
}

/* Puzzle grid cards (home, archive, taxonomy, shortcode) */

.jig-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 22px 18px;
	margin: 24px 0;
}

/* Polaroid-style photo card: white frame + shadow, like a print sitting on the page. */
.jig-card {
	display: block;
	background: var(--je-surface);
	border-radius: 8px;
	padding: 10px 10px 14px;
	text-decoration: none;
	color: var(--je-text);
	box-shadow: 0 3px 10px rgba(15, 30, 35, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jig-card:hover {
	transform: translateY(-4px) rotate(-0.8deg);
	box-shadow: 0 12px 26px rgba(15, 30, 35, 0.18);
}

.jig-card:nth-child(even):hover {
	transform: translateY(-4px) rotate(0.8deg);
}

.jig-card__thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 4px;
	background: var(--je-tray-bg);
}

.jig-card__body {
	padding: 10px 4px 0;
}

.jig-card__title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.3;
}

.jig-card__meta {
	font-size: 0.75rem;
	color: var(--je-text-muted);
}

@media (max-width: 600px) {
	.jig-bar {
		grid-template-columns: auto auto;
		grid-template-areas:
			'center center'
			'left right';
		justify-content: space-between;
		row-gap: 8px;
	}

	.jig-bar__left {
		grid-area: left;
		gap: 6px;
	}

	.jig-bar__center {
		grid-area: center;
		justify-content: center;
	}

	.jig-bar__right {
		grid-area: right;
		gap: 6px;
	}

	.jig-bar .jig-icon-btn {
		width: 32px;
		height: 32px;
	}

	.jig-bar .jig-play-as__toggle {
		padding: 7px 10px;
	}

	.jig-ref-panel {
		bottom: 150px;
	}
}

.jig-help {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(20, 18, 14, 0.55);
}

.jig-help[hidden] {
	display: none;
}

.jig-help__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 32px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.jig-help__tabs {
	display: flex;
	align-items: stretch;
	background: var(--je-tray-bg);
	border-bottom: 1px solid var(--je-border);
}

.jig-help__tab {
	flex: 1;
	padding: 14px 10px;
	border: none;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--je-text-muted);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.jig-help__tab.is-active {
	color: var(--je-text);
	border-bottom-color: var(--je-primary);
	background: #fff;
}

.jig-help__close {
	width: 48px;
	border: none;
	background: none;
	color: var(--je-text-muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.jig-help__close:hover {
	color: var(--je-text);
}

.jig-help__panel {
	padding: 18px 24px 22px;
	overflow-y: auto;
	color: var(--je-text);
	font-size: 0.95rem;
	line-height: 1.55;
}

.jig-help__panel[hidden] {
	display: none;
}

.jig-help__panel p {
	margin: 0 0 12px;
}

.jig-help__panel strong {
	color: var(--je-primary);
}

.jig-help__panel a {
	color: var(--je-primary);
}

/* Phones: breadcrumbs and Save share one line. The "Jigsaw Earth" step is
   dropped (the logo already leads home) and a long title ends in "…". */
@media (max-width: 600px) {
	.jig-crumbs {
		flex-wrap: nowrap;
		padding-top: 8px;
		padding-bottom: 8px;
		margin-bottom: 8px;
	}

	.jig-crumbs__trail {
		flex-wrap: nowrap;
		min-width: 0;
		white-space: nowrap;
	}

	.jig-crumbs__trail > a:first-child,
	.jig-crumbs__trail > a:first-child + .jig-crumbs__sep {
		display: none;
	}

	.jig-crumbs__trail .jig-app__title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.95rem;
	}

	.jig-save {
		flex-shrink: 0;
	}
}

/* Other tables (Play As, or a custom puzzle's link). The felt colours get
   soft light in the middle and a darker rim, like a lamp over a card table.
   Each rule also covers the fullscreen app, which paints over <body>. */
body.single-puzzle.je-table-forest,
body.single-puzzle.je-table-ocean,
body.single-puzzle.je-table-slate,
body.single-puzzle.je-table-sand,
body.single-puzzle.je-table-charcoal,
body.single-puzzle.je-table-midnight,
body.single-puzzle.je-table-terracotta,
body.je-table-forest .jig-app.jig-fullscreen,
body.je-table-ocean .jig-app.jig-fullscreen,
body.je-table-slate .jig-app.jig-fullscreen,
body.je-table-sand .jig-app.jig-fullscreen,
body.je-table-charcoal .jig-app.jig-fullscreen,
body.je-table-midnight .jig-app.jig-fullscreen,
body.je-table-terracotta .jig-app.jig-fullscreen {
	background-image: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.28));
	background-size: cover;
}

body.single-puzzle.je-table-forest,
body.je-table-forest .jig-app.jig-fullscreen { background-color: #3f6149; }
body.single-puzzle.je-table-ocean,
body.je-table-ocean .jig-app.jig-fullscreen { background-color: #2f5670; }
body.single-puzzle.je-table-slate,
body.je-table-slate .jig-app.jig-fullscreen { background-color: #5b646c; }
body.single-puzzle.je-table-sand,
body.je-table-sand .jig-app.jig-fullscreen { background-color: #cdb994; }
body.single-puzzle.je-table-charcoal,
body.je-table-charcoal .jig-app.jig-fullscreen { background-color: #2b2b2e; }
body.single-puzzle.je-table-midnight,
body.je-table-midnight .jig-app.jig-fullscreen { background-color: #1f2a44; }
body.single-puzzle.je-table-terracotta,
body.je-table-terracotta .jig-app.jig-fullscreen { background-color: #9c5a40; }

/* Light oak: a varnished wooden tabletop. Photo by simon on Unsplash. */
body.single-puzzle.je-table-oak,
body.je-table-oak .jig-app.jig-fullscreen {
	background-color: #dcc39c;
	background-image:
		radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 246, 224, 0.2), rgba(255, 246, 224, 0) 70%),
		radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
		url('../img/oak-bg.jpg');
	background-size: cover;
}

/* Table picker at the foot of Play As. */
.jig-play-as__tables {
	grid-row: 8;
	grid-column: 1 / span 2;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	padding: 8px 10px 6px;
	border-top: 1px solid rgba(15, 30, 35, 0.1);
}

.jig-play-as__tables-label {
	margin-right: auto;
	color: var(--je-text);
	font-size: 0.95rem;
	font-weight: 600;
}

.jig-table-swatch {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(15, 30, 35, 0.25);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	flex-shrink: 0;
}

.jig-table-swatch:hover {
	box-shadow: 0 0 0 1px rgba(15, 30, 35, 0.5);
}

.jig-table-swatch.is-active {
	box-shadow: 0 0 0 2px var(--je-primary);
}

.jig-table-swatch--leather { background-color: #a9ad95; background-image: url('../img/leather-bg.jpg'); background-size: 400%; }
.jig-table-swatch--oak { background-color: #dcc39c; background-image: url('../img/oak-bg.jpg'); background-size: 500%; }
.jig-table-swatch--forest { background-color: #3f6149; }
.jig-table-swatch--ocean { background-color: #2f5670; }
.jig-table-swatch--slate { background-color: #5b646c; }
.jig-table-swatch--sand { background-color: #cdb994; }
.jig-table-swatch--charcoal { background-color: #2b2b2e; }
.jig-table-swatch--midnight { background-color: #1f2a44; }
.jig-table-swatch--terracotta { background-color: #9c5a40; }

.jig-help__small {
	font-size: 0.85em;
	opacity: 0.8;
}

/* Credit text sits right on the table: light on the dark colours. */
body.je-table-forest .jig-credit,
body.je-table-ocean .jig-credit,
body.je-table-slate .jig-credit,
body.je-table-charcoal .jig-credit,
body.je-table-midnight .jig-credit,
body.je-table-terracotta .jig-credit,
body.je-table-forest .jig-credit a,
body.je-table-ocean .jig-credit a,
body.je-table-slate .jig-credit a,
body.je-table-charcoal .jig-credit a,
body.je-table-midnight .jig-credit a,
body.je-table-terracotta .jig-credit a {
	color: #f1eee6;
}

/* A custom puzzle link that can't be played here. */
.jig-custom-error {
	max-width: 460px;
	margin: 60px auto;
	padding: 24px;
	background: var(--je-surface);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.jig-custom-error p {
	margin: 0 0 16px;
	color: var(--je-text);
}

.jig-custom-error__cta {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* Create Your Own page */

.je-container.je-create {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* A legend ignores normal spacing inside its fieldset; floated, it lines
   up with the plain labels next to it. */
.je-create legend.je-create__label {
	float: left;
	width: 100%;
	padding: 0;
}

.je-create legend + * {
	clear: both;
}

.je-create__intro p {
	color: var(--je-text-muted);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 0 22px;
}

/* "Coming soon" while the create page is switched off */
.je-create--soon {
	max-width: 640px;
	padding-top: 48px;
	padding-bottom: 64px;
	text-align: center;
}

.je-create--soon .je-create__intro p {
	margin-bottom: 12px;
}

.je-create__intro .je-create__soon-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 14px;
	border-radius: 999px;
	background: #f3b35b;
	color: #3b2a12;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.je-create__soon-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

.je-create__card {
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(15, 30, 35, 0.07);
	padding: 8px 24px 24px;
}

.je-create__step {
	padding: 18px 0 20px;
	border-bottom: 1px solid var(--je-border);
}

.je-create__step h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--je-font-heading);
	font-size: 1.15rem;
}

.je-create__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--je-primary);
	color: #fff;
	font-size: 0.9rem;
}

.je-create__tabs {
	display: inline-flex;
	padding: 4px;
	margin-bottom: 14px;
	background: var(--je-tray-bg);
	border-radius: 999px;
}

.je-create__tab {
	border: none;
	background: none;
	padding: 8px 16px;
	border-radius: 999px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--je-text-muted);
	cursor: pointer;
}

.je-create__tab.is-active {
	background: var(--je-surface);
	color: var(--je-primary);
	box-shadow: 0 1px 4px rgba(15, 30, 35, 0.12);
}

.je-create__source[hidden],
.je-create__preview[hidden],
.je-create__error[hidden],
.je-create__credit[hidden],
.je-create__result[hidden] {
	display: none;
}

.je-create__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 30px 16px;
	border: 2px dashed var(--je-border);
	border-radius: 14px;
	background: var(--je-bg);
	color: var(--je-text-muted);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.je-create__drop strong {
	color: var(--je-text);
}

.je-create__drop:hover,
.je-create__drop.is-over,
.je-create__drop:focus-within {
	border-color: var(--je-primary);
	background: #eef7f6;
}

.je-create__drop svg {
	color: var(--je-primary);
}

.je-create__drop input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.je-create__note {
	margin: 10px 0 0;
	font-size: 0.85rem;
	color: var(--je-text-muted);
	line-height: 1.5;
}

.je-create__label {
	display: block;
	margin: 14px 0 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--je-text);
}

.je-create__label span {
	font-weight: 400;
	color: var(--je-text-muted);
}

.je-create input[type='text'],
.je-create input[type='url'],
.je-create select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--je-border);
	border-radius: 10px;
	background: #fff;
	color: var(--je-text);
	font: inherit;
	font-size: 16px;
}

.je-create input:focus,
.je-create select:focus {
	outline: none;
	border-color: var(--je-primary);
	box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15);
}

.je-create__row {
	display: flex;
	gap: 8px;
}

.je-create__row input {
	flex: 1;
	min-width: 0;
}

.je-create__preview {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	padding: 10px;
	background: var(--je-bg);
	border-radius: 12px;
}

.je-create__preview img {
	width: 120px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.je-create__preview p {
	margin: 0;
}

.je-create__preview-name {
	font-weight: 600;
	word-break: break-all;
}

.je-create__preview-size {
	font-size: 0.85rem;
	color: var(--je-text-muted);
}

.je-create__error {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: #9b2c1f;
	font-size: 0.9rem;
}

.je-create__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.je-create fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.je-create__cut label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
	font-size: 0.95rem;
	cursor: pointer;
}

.je-create__cut label span {
	color: var(--je-text-muted);
	font-size: 0.85rem;
}

.je-create__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.je-create__swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.je-create__swatch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.je-create__swatch span {
	width: 46px;
	height: 34px;
	border-radius: 8px;
	border: 2px solid var(--je-surface);
	box-shadow: 0 0 0 1px var(--je-border);
}

.je-create__swatch input:checked + span {
	box-shadow: 0 0 0 3px var(--je-primary);
}

.je-create__swatch input:focus-visible + span {
	outline: 2px solid var(--je-primary);
	outline-offset: 3px;
}

.je-create__swatch em {
	font-style: normal;
	font-size: 0.75rem;
	color: var(--je-text-muted);
}

.je-create__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 18px;
	font-size: 0.92rem;
	line-height: 1.5;
	cursor: pointer;
}

.je-create__check input {
	margin-top: 4px;
}

.je-create__actions {
	padding-top: 20px;
	text-align: center;
}

.je-create__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 26px;
	border: 1px solid var(--je-accent);
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.je-create__btn:hover {
	filter: brightness(1.05);
}

.je-create__btn--ghost {
	background: #fff;
	color: var(--je-text);
	border-color: var(--je-border);
}

.je-create__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.je-create__actions .je-create__btn {
	padding: 13px 40px;
	font-size: 1.05rem;
}

.je-create__result {
	margin-top: 22px;
	padding: 18px;
	border-radius: 14px;
	background: #eef7f6;
	border: 1px solid #cfe6e4;
}

.je-create__result h2 {
	margin: 0 0 4px;
	font-family: var(--je-font-heading);
	color: var(--je-primary);
	font-size: 1.2rem;
}

.je-create__result > p {
	margin: 0 0 10px;
}

.je-create__share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.je-create__how,
.je-create__faq {
	margin-top: 36px;
}

.je-create__steps {
	margin: 0;
	padding-left: 22px;
	line-height: 1.6;
}

.je-create__steps li {
	margin-bottom: 8px;
}

.je-create__faq details {
	border-bottom: 1px solid var(--je-border);
	padding: 12px 0;
}

.je-create__faq summary {
	font-weight: 600;
	cursor: pointer;
}

.je-create__faq details p {
	margin: 8px 0 0;
	color: var(--je-text-muted);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.je-create__card {
		padding: 4px 16px 18px;
	}

	.je-create__grid {
		grid-template-columns: 1fr;
	}

	.je-create__tabs {
		display: flex;
	}

	.je-create__tab {
		flex: 1;
		padding: 8px 6px;
	}

	.je-create__share .je-create__btn {
		flex: 1 1 100%;
	}

	.je-create__swatches {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The narrowest phones (320–420px): a slimmer bar so every button fits
   inside its padding, with the same space on both sides. */
@media (max-width: 420px) {
	.jig-bar {
		padding-left: 10px;
		padding-right: 10px;
		column-gap: 4px;
	}

	.jig-bar__left,
	.jig-bar__right {
		gap: 4px;
	}

	.jig-bar .jig-icon-btn {
		width: 30px;
		height: 30px;
	}

	.jig-bar .jig-play-as__toggle {
		padding: 6px 7px;
		font-size: 0.8rem;
	}
}

@media (max-width: 380px) {
	.jig-bar .jig-icon-btn {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 340px) {
	.jig-bar__left,
	.jig-bar__right {
		gap: 2px;
	}
}

/* ---------------------------------------------------------------------
 * Travel passport: rubber stamps, the note in the "Solved!" panel and the
 * /passport/ page.
 * ------------------------------------------------------------------- */

/* Ink colour per continent. */
.je-stamp.je-ink--europe { --ink: #2b58a3; }
.je-stamp.je-ink--asia { --ink: #b3342b; }
.je-stamp.je-ink--africa { --ink: #a35f16; }
.je-stamp.je-ink--north-america { --ink: #1c7250; }
.je-stamp.je-ink--south-america { --ink: #7a3a9c; }
.je-stamp.je-ink--oceania { --ink: #0a7a86; }
.je-stamp.je-ink--antarctica { --ink: #3d6a86; }

/* Sized in em so one font-size scales the whole stamp. */
.je-stamp {
	--ink: #3f4a52;
	font-size: 16px;
	width: 7em;
	height: 7em;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	padding: 0.5em;
	color: var(--ink);
	border: 0.19em solid var(--ink);
	box-shadow: inset 0 0 0 0.16em #fff, inset 0 0 0 0.26em var(--ink);
	font-family: var(--je-font-heading);
	text-transform: uppercase;
	text-align: center;
	line-height: 1.05;
	transform: rotate(var(--tilt, -4deg));
	opacity: 0.9;
	/* Worn, uneven ink. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.je-stamp--round {
	border-radius: 50%;
}

.je-stamp--oval {
	border-radius: 50%;
	width: 8em;
	height: 6em;
}

.je-stamp--rect {
	border-radius: 0.45em;
	width: 7.6em;
	height: 5.6em;
}

.je-stamp__top {
	font-size: 0.52em;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.je-stamp__name {
	font-size: 1.02em;
	font-weight: 700;
	max-width: 100%;
	overflow-wrap: break-word;
}

.je-stamp__date {
	font-size: 0.56em;
	font-weight: 600;
	letter-spacing: 0.08em;
	border-top: 0.14em solid currentColor;
	padding-top: 0.25em;
}

/* A brand-new stamp is pressed in once the finishing tune has played. */
.je-stamp.is-new {
	animation: je-stamp-in 0.42s cubic-bezier(0.2, 1.5, 0.45, 1) 1.1s both;
}

@keyframes je-stamp-in {
	from {
		opacity: 0;
		transform: rotate(var(--tilt, -4deg)) scale(2.4);
	}
	to {
		opacity: 0.9;
		transform: rotate(var(--tilt, -4deg)) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.je-stamp.is-new {
		animation: none;
	}
}

/* In the "Solved!" panel. */
.jig-passport-note {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--je-border);
	text-align: left;
}

.jig-passport-note .je-stamp {
	font-size: 11px;
}

.jig-passport-note__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.9rem;
	color: var(--je-text-muted);
}

.jig-passport-note__text strong {
	color: var(--je-text);
	font-size: 1rem;
}

.jig-passport-note__extra {
	color: var(--je-primary-dark);
	font-weight: 600;
}

.jig-passport-note__link {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.jig-passport-note {
		gap: 8px 12px;
		margin-top: 10px;
		padding-top: 10px;
	}

	.jig-passport-note .je-stamp {
		font-size: 8px;
	}

	.jig-passport-note__text {
		font-size: 0.82rem;
		max-width: calc(100% - 90px);
	}

	.jig-passport-note__link {
		flex-basis: 100%;
		text-align: center;
	}
}

/* Buttons used on the passport page. */
.je-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 2px solid var(--je-primary);
	background: var(--je-primary);
	color: #fff;
	font: 600 0.92rem var(--je-font-body);
	text-decoration: none;
	cursor: pointer;
}

.je-btn:hover {
	background: var(--je-primary-dark);
	border-color: var(--je-primary-dark);
}

.je-btn--ghost {
	background: transparent;
	color: var(--je-primary);
}

.je-btn--ghost:hover {
	background: rgba(14, 124, 123, 0.08);
	color: var(--je-primary-dark);
}

/* The page. */
.je-passport {
	padding: 28px 0 56px;
}

.je-passport h2 {
	font-size: 1.35rem;
	margin: 0 0 14px;
}

.je-passport__head {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 22px;
}

.je-passport__head h1 {
	margin: 0 0 6px;
	font-size: 2rem;
}

.je-passport__head p {
	margin: 0;
	color: var(--je-text-muted);
	max-width: 640px;
}

/* A little passport booklet. */
.je-passport__cover {
	flex: none;
	width: 78px;
	height: 106px;
	border-radius: 6px 10px 10px 6px;
	background: linear-gradient(90deg, #0a4f4e 0 7px, #0e6a69 7px);
	box-shadow: 0 6px 14px rgba(10, 60, 60, 0.3), inset -3px 0 0 rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transform: rotate(-5deg);
}

.je-passport__cover-globe {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #e2c16b;
	background:
		linear-gradient(#e2c16b, #e2c16b) center / 2px 100% no-repeat,
		linear-gradient(#e2c16b, #e2c16b) center / 100% 2px no-repeat;
	box-shadow: inset 0 0 0 7px #0e6a69, inset 0 0 0 9px #e2c16b;
}

.je-passport__cover-word {
	font: 700 0.56rem var(--je-font-heading);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e2c16b;
}

.je-passport__empty {
	background: #fff6e6;
	border: 1px solid #f0d9ae;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.je-passport__empty[hidden] {
	display: none;
}

.je-passport__empty p {
	margin: 0 0 12px;
}

.je-passport__empty-actions,
.je-passport__keep-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.je-passport__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 8px;
}

.je-passport__stat {
	background: var(--je-surface);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.08);
}

.je-passport__stat dt {
	font-size: 0.8rem;
	color: var(--je-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.je-passport__stat dd {
	margin: 2px 0 0;
	font: 600 1.9rem/1.1 var(--je-font-heading);
	color: var(--je-primary-dark);
}

.je-passport__stat small {
	font-size: 0.95rem;
	color: var(--je-text-muted);
	font-weight: 500;
}

.je-passport__streak-hint {
	margin: 0 0 8px;
	font-size: 0.9rem;
	color: #a35f16;
}

.je-passport__streak-hint[hidden] {
	display: none;
}

.je-passport__map-card,
.je-passport__section,
.je-passport__keep {
	margin-top: 26px;
}

.je-passport__map-card {
	background: var(--je-surface);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 2px 10px rgba(15, 30, 35, 0.08);
}

.je-passport__map-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 10px;
}

.je-passport__map-top h2 {
	margin: 0;
}

.je-passport__zoom {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	max-width: 100%;
	scrollbar-width: none;
}

.je-passport__zoom button {
	flex: none;
	border: 1px solid var(--je-border);
	background: #fff;
	color: var(--je-text);
	border-radius: 999px;
	padding: 5px 12px;
	font: 500 0.82rem var(--je-font-body);
	cursor: pointer;
}

.je-passport__zoom button.is-active {
	background: var(--je-primary);
	border-color: var(--je-primary);
	color: #fff;
}

.je-passport__map {
	position: relative;
	background: #d6eaee;
	border-radius: 10px;
	overflow: hidden;
}

.je-world {
	display: block;
	width: 100%;
	height: auto;
}

.je-world path,
.je-world circle {
	fill: #e7dfcb;
	stroke: #fff;
	stroke-width: 0.6;
	vector-effect: non-scaling-stroke;
	transition: fill 0.2s;
}

.je-world circle {
	r: calc(3px / var(--zoom, 1));
}

.je-world .has-puzzles path,
.je-world .has-puzzles circle {
	fill: #a9d8cf;
	cursor: pointer;
}

.je-world .has-puzzles:hover path,
.je-world .has-puzzles:hover circle {
	fill: #7fc3b6;
}

.je-world .is-visited path,
.je-world .is-visited circle {
	fill: var(--je-primary);
}

.je-world .is-visited:hover path,
.je-world .is-visited:hover circle {
	fill: var(--je-primary-dark);
}

.je-passport__tip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 12px));
	background: rgba(20, 32, 38, 0.92);
	color: #fff;
	font-size: 0.8rem;
	padding: 6px 10px;
	border-radius: 8px;
	pointer-events: none;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
}

.je-passport__tip[hidden] {
	display: none;
}

.je-passport__legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 10px 0 0;
	padding: 0;
	font-size: 0.82rem;
	color: var(--je-text-muted);
}

.je-key {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: #e7dfcb;
	vertical-align: -1px;
	margin-right: 4px;
}

.je-key--open {
	background: #a9d8cf;
}

.je-key--visited {
	background: var(--je-primary);
}

.je-passport__group {
	margin-bottom: 18px;
}

.je-passport__group[hidden] {
	display: none;
}

.je-passport__group h3 {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 1.05rem;
	margin: 0 0 10px;
}

.je-passport__group h3 a {
	color: var(--je-text);
	text-decoration: none;
}

.je-passport__count {
	font: 500 0.85rem var(--je-font-body);
	color: var(--je-text-muted);
}

.je-stamps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 12px;
}

/* A passport page: stamped countries show their stamp, the rest an empty
   dashed spot inviting a visit. */
.je-stamps__slot > a,
.je-stamps__slot.is-stamped:not(:has(a)) {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 132px;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	background: #fffdf7;
	border: 2px dashed #ddd2b8;
	color: var(--je-text-muted);
	transition: border-color 0.15s, background 0.15s;
}

.je-stamps__slot > a:hover {
	border-color: var(--je-primary);
	background: #fff;
}

.je-stamps__name {
	font: 600 0.95rem var(--je-font-heading);
	color: var(--je-text);
	opacity: 0.55;
}

.je-stamps__cta {
	font-size: 0.78rem;
	margin-top: 4px;
	color: var(--je-primary);
}

.je-stamps__slot.is-stamped > a,
.je-stamps__slot.is-stamped:not(:has(a)) {
	border: 1px solid #efe6d2;
	background: #fffdf7 repeating-linear-gradient(0deg, transparent 0 21px, rgba(14, 124, 123, 0.05) 21px 22px);
}

.je-stamps__slot.is-stamped .je-stamps__name,
.je-stamps__slot.is-stamped .je-stamps__cta {
	display: none;
}

.je-stamps__slot .je-stamp {
	font-size: 14px;
}

.je-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.je-badge {
	background: var(--je-surface);
	border-radius: 12px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.07);
}

.je-badge__icon {
	font-size: 2rem;
	line-height: 1;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff4dc;
	box-shadow: inset 0 0 0 2px #f0c46a;
	margin-bottom: 4px;
}

.je-badge strong {
	font-size: 0.92rem;
}

.je-badge__text {
	font-size: 0.78rem;
	color: var(--je-text-muted);
}

.je-badge:not(.is-earned) .je-badge__icon {
	filter: grayscale(1);
	opacity: 0.45;
	background: #f1eee7;
	box-shadow: inset 0 0 0 2px #ddd6c7;
}

.je-badge:not(.is-earned) strong {
	color: var(--je-text-muted);
}

.je-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
}

.je-recent a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--je-surface);
	border-radius: 10px;
	padding: 8px 8px 10px;
	text-decoration: none;
	color: var(--je-text);
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.08);
	font-size: 0.88rem;
	font-weight: 600;
}

.je-recent img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 4px;
}

.je-recent small {
	font-weight: 400;
	color: var(--je-text-muted);
	font-size: 0.78rem;
}

.je-passport__keep {
	border-top: 1px solid var(--je-border);
	padding-top: 22px;
}

.je-passport__keep h2 {
	font-size: 1.1rem;
	margin-bottom: 6px;
}

.je-passport__keep p {
	color: var(--je-text-muted);
	font-size: 0.9rem;
	margin: 0 0 12px;
	max-width: 720px;
}

.je-passport__import {
	position: relative;
	overflow: hidden;
}

.je-passport__import input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.je-passport__reset {
	background: none;
	border: none;
	color: #a2412f;
	font: 500 0.88rem var(--je-font-body);
	text-decoration: underline;
	cursor: pointer;
	padding: 6px;
}

.je-passport__keep-msg:empty {
	display: none;
}

@media (max-width: 700px) {
	.je-passport {
		padding-top: 18px;
	}

	.je-passport__head {
		gap: 14px;
		align-items: flex-start;
	}

	.je-passport__head h1 {
		font-size: 1.5rem;
	}

	.je-passport__head p {
		font-size: 0.9rem;
	}

	.je-passport__cover {
		width: 54px;
		height: 74px;
		gap: 6px;
	}

	.je-passport__cover-globe {
		width: 24px;
		height: 24px;
		box-shadow: inset 0 0 0 5px #0e6a69, inset 0 0 0 7px #e2c16b;
	}

	.je-passport__cover-word {
		font-size: 0.42rem;
	}

	.je-passport__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.je-passport__stat {
		padding: 10px 12px;
	}

	.je-passport__stat dd {
		font-size: 1.5rem;
	}

	.je-passport__map-card {
		padding: 10px;
		margin-left: -6px;
		margin-right: -6px;
	}

	.je-stamps {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 8px;
	}

	.je-stamps__slot > a,
	.je-stamps__slot.is-stamped:not(:has(a)) {
		height: 104px;
	}

	.je-stamps__slot .je-stamp {
		font-size: 11px;
	}

	.je-badges {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

.je-badge__bar {
	width: 80%;
	height: 5px;
	margin-top: 6px;
	border-radius: 999px;
	background: linear-gradient(var(--je-accent), var(--je-accent)) 0 0 / var(--done, 0%) 100% no-repeat, #eee7d8;
}

.je-badge__num {
	font-size: 0.72rem;
	color: var(--je-text-muted);
}

/* Sound menu in the game bar: the place's soundscape and piece sounds. */
.jig-sound {
	position: relative;
}

.jig-sound__off {
	display: none;
}

#jig-sound-toggle.is-muted .jig-sound__on {
	display: none;
}

#jig-sound-toggle.is-muted .jig-sound__off {
	display: inline;
}

.jig-sound__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	width: 250px;
	padding: 6px;
	background: #fff;
	color: var(--je-text);
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(15, 30, 35, 0.22);
	z-index: 60;
}

.jig-sound__menu[hidden] {
	display: none;
}

.jig-sound__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: 8px;
	background: none;
	color: var(--je-text);
	text-align: left;
	cursor: pointer;
}

.jig-sound__row:hover {
	background: rgba(14, 124, 123, 0.07);
}

.jig-sound__row + .jig-sound__row,
.jig-sound__volume + .jig-sound__row {
	border-top: 1px solid rgba(15, 30, 35, 0.08);
	border-radius: 0 0 8px 8px;
}

.jig-sound__text {
	display: flex;
	flex-direction: column;
	font-size: 0.9rem;
	line-height: 1.3;
}

.jig-sound__text small {
	color: var(--je-text-muted);
	font-size: 0.78rem;
}

.jig-sound__row.is-active .jig-switch {
	background: var(--je-primary);
}

.jig-sound__row.is-active .jig-switch::after {
	transform: translateX(14px);
}

.jig-sound__volume {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 10px 10px;
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.jig-sound__volume input {
	flex: 1;
	accent-color: var(--je-primary);
}

.jig-sound__volume input:disabled {
	opacity: 0.4;
}

@media (max-width: 600px) {
	.jig-sound__menu {
		width: min(260px, calc(100vw - 24px));
	}
}

/* The narrowest phones: no room for fullscreen (and most of them, iPhones
   included, can't do it anyway). */
@media (max-width: 360px) {
	.jig-bar #jig-fullscreen-toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Daily "Where on Earth?": the strip above the table, the guess dialog
 * with its map, and the result.
 * ------------------------------------------------------------------- */

.je-daily-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 7px 16px;
	background: #fff6e4;
	border-bottom: 1px solid #f0dfbd;
	font-size: 0.86rem;
	color: #6b4b1c;
}

.je-daily-banner .je-daily-next {
	margin-left: auto;
	color: var(--je-text-muted);
}

body.je-daily-open {
	overflow: hidden;
}

.je-daily-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 25, 30, 0.6);
	backdrop-filter: blur(3px);
}

.je-daily-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(860px, 100%);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.je-daily-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px 12px;
}

.je-daily-titles h2 {
	margin: 0;
	font-size: 1.3rem;
	color: var(--je-text);
}

.je-daily-titles p {
	margin: 4px 0 0;
	font-size: 0.88rem;
	color: var(--je-text-muted);
}

.je-daily-titles p:empty {
	display: none;
}

.je-daily-photo {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 5;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 20, 24, 0.94);
	cursor: zoom-out;
}

.je-daily-card.is-showing-photo .je-daily-photo {
	display: flex;
}

.je-daily-photo img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
}

/* The finished picture and the map: side by side on wide screens, the
   picture as a strip above the map on narrow ones. */
.je-daily-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 18px;
	flex: none;
}

.je-daily-pic {
	position: relative;
	display: block;
	height: 24vh;
	min-height: 120px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #1f2a33;
	cursor: zoom-in;
}

.je-daily-pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.je-daily-pic::after {
	content: '🔍';
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	font-size: 0.8rem;
}

.je-daily-mapwrap {
	position: relative;
	flex: none;
}

@media (min-width: 900px) {
	.je-daily-card {
		width: min(1200px, 100%);
	}

	.je-daily-body {
		flex-direction: row;
		gap: 14px;
	}

	.je-daily-pic {
		flex: 0 0 42%;
		height: auto;
	}

	.je-daily-mapwrap {
		flex: 1;
		min-width: 0;
	}
}

.je-daily-map {
	height: min(56vh, 480px);
	border-radius: 12px;
	overflow: hidden;
	background: #d6eaee;
	touch-action: none;
	cursor: crosshair;
	user-select: none;
	-webkit-user-select: none;
	transition: height 0.35s ease;
}

.je-daily-card.is-revealed .je-daily-map {
	height: min(34vh, 320px);
	cursor: grab;
}

@media (min-width: 601px) and (max-width: 899px) {
	.je-daily-map {
		height: min(44vh, 420px);
	}
}

.je-daily-map svg {
	display: block;
	width: 100%;
	height: 100%;
}

.je-daily-loading {
	margin: 0;
	padding: 40px 16px;
	text-align: center;
	color: var(--je-text-muted);
}

.je-daily-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.je-daily-zoom button {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--je-text);
	font-size: 1.2rem;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.je-world .is-answer path,
.je-world .is-answer circle {
	fill: #a9d8cf;
}

.je-daily-pin path {
	stroke: #fff;
	stroke-width: 1.6;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

.je-world .je-daily-pin circle {
	r: 3.4px;
	fill: #fff;
	stroke: none;
}

.je-daily-pin--guess path {
	fill: var(--je-accent);
}

.je-daily-pin--answer path {
	fill: var(--je-primary);
}

.je-daily-line {
	stroke: #26333b;
	stroke-width: 2;
	stroke-dasharray: 6 5;
	vector-effect: non-scaling-stroke;
}

.je-daily-foot {
	padding: 14px 18px 18px;
}

.je-daily-go {
	display: block;
	width: 100%;
	padding: 13px;
	border: none;
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font: 600 1.02rem var(--je-font-body);
	cursor: pointer;
}

.je-daily-go:disabled {
	background: #d9d2c3;
	color: #7a7266;
	cursor: default;
}

.je-daily-result {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

.je-daily-score p {
	margin: 0;
}

.je-daily-squares {
	margin-bottom: 6px !important;
}

.je-sq {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.je-sq i {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: #e3ddd0;
}

.je-sq i.is-full {
	background: #3fae6a;
}

.je-sq i.is-half {
	background: #f0c233;
}

.je-daily-squares .je-sq {
	gap: 5px;
}

.je-daily-squares .je-sq i {
	width: 30px;
	height: 30px;
	border-radius: 6px;
}

.je-daily-km {
	font-size: 1.1rem;
	color: var(--je-text);
}

.je-daily-pts {
	color: var(--je-text-muted);
	font-size: 0.92rem;
}

.je-daily-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 0;
}

.je-daily-stats div {
	background: #f6f2e9;
	border-radius: 10px;
	padding: 8px 4px;
}

.je-daily-stats dt {
	font-size: 0.72rem;
	color: var(--je-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.je-daily-stats dd {
	margin: 2px 0 0;
	font: 600 1.15rem var(--je-font-heading);
	color: var(--je-primary-dark);
}

.je-daily-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.je-daily-share,
.je-daily-continue {
	padding: 11px 22px;
	border-radius: 999px;
	font: 600 0.95rem var(--je-font-body);
	cursor: pointer;
}

.je-daily-share {
	border: none;
	background: var(--je-primary);
	color: #fff;
}

.je-daily-continue {
	border: 2px solid var(--je-primary);
	background: #fff;
	color: var(--je-primary);
}

.je-daily-share--small {
	padding: 4px 12px;
	font-size: 0.8rem;
}

.je-daily-next {
	margin: 0;
	font-size: 0.85rem;
	color: var(--je-text-muted);
}

/* In the "Solved!" panel. */
.jig-complete-card .je-daily-line {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 10px;
	font-size: 0.92rem;
	color: var(--je-text);
}

.jig-complete-card .je-daily-again {
	flex-basis: 100%;
	margin: 0;
	color: var(--je-text-muted);
	text-align: center;
}

@media (max-width: 600px) {
	.je-daily-modal {
		padding: 0;
		align-items: stretch;
	}

	.je-daily-card {
		max-height: none;
		height: 100%;
		border-radius: 0;
	}

	.je-daily-head {
		padding: 12px 14px 10px;
		gap: 12px;
	}

	.je-daily-titles h2 {
		font-size: 1.1rem;
	}

	.je-daily-titles p {
		font-size: 0.8rem;
	}

	.je-daily-body {
		margin: 0 10px;
		gap: 8px;
	}

	.je-daily-pic {
		height: 22vh;
	}

	.je-daily-map {
		height: calc(100dvh - 210px - 22vh);
		min-height: 220px;
	}

	.je-daily-card.is-revealed .je-daily-pic {
		height: 16vh;
	}

	.je-daily-card.is-revealed .je-daily-map {
		height: 30vh;
	}

	.je-daily-foot {
		padding: 12px 14px 16px;
	}

	.je-daily-stats dd {
		font-size: 1rem;
	}

	.je-daily-banner {
		font-size: 0.78rem;
		padding: 6px 12px;
	}
}

/* Postcards */
.jig-complete-top .jig-postcard-btn {
	background: #fff;
	color: var(--je-primary-dark);
	border: 2px solid var(--je-primary);
	padding: 6px 16px;
}

.je-postcard-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 25, 30, 0.7);
}

.je-postcard-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(900px, 100%);
	max-height: 100%;
	padding: 18px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.je-postcard-canvas {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 150px);
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.je-postcard-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--je-text);
	font-size: 1.4rem;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.je-postcard-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.je-postcard-save,
.je-postcard-share {
	padding: 11px 24px;
	border-radius: 999px;
	border: none;
	font: 600 0.95rem var(--je-font-body);
	cursor: pointer;
}

.je-postcard-save {
	background: var(--je-accent);
	color: #fff;
}

.je-postcard-share {
	background: var(--je-primary);
	color: #fff;
}

@media (max-width: 600px) {
	.je-postcard-card {
		padding: 10px;
	}

	.je-postcard-close {
		top: 4px;
		right: 4px;
	}
}

/* ---------------------------------------------------------------------
 * Journeys: cards, a journey's page and the strip on a puzzle.
 * ------------------------------------------------------------------- */

.je-jr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
	margin: 18px 0 32px;
}

.je-jr-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--je-surface);
	border-radius: 14px;
	color: var(--je-text);
	text-decoration: none;
	box-shadow: 0 3px 12px rgba(15, 30, 35, 0.1);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.je-jr-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(15, 30, 35, 0.16);
}

.je-jr-card__strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	height: 120px;
	background: #e7dfcb;
}

.je-jr-card__strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.je-jr-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
	flex: 1;
}

.je-jr-card__body strong {
	font-family: var(--je-font-heading);
	font-size: 1.15rem;
}

.je-jr-card__text {
	color: var(--je-text-muted);
	font-size: 0.88rem;
	line-height: 1.45;
	flex: 1;
}

.je-jr-card__progress,
.je-jr-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--je-primary-dark);
}

.je-jr-card.is-complete .je-jr-card__progress {
	color: #a35f16;
}

/* Progress dots: done, next, still to come. Long journeys wrap to a
   second row instead of running off a phone screen. */
.je-jr-dots {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}

.je-jr-dots + span {
	white-space: nowrap;
}

.je-jr-dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e2dac7;
}

.je-jr-dots i.is-done {
	background: var(--je-primary);
}

.je-jr-dots i.is-next {
	background: var(--je-accent);
}

/* A journey's page */
.je-jr-page {
	padding-top: 18px;
	padding-bottom: 20px;
}

.je-jr-crumbs {
	display: flex;
	gap: 8px;
	font-size: 0.88rem;
	color: var(--je-text-muted);
}

.je-jr-crumbs a {
	text-decoration: none;
}

.je-jr-head h1 {
	margin: 10px 0 6px;
	font-size: 2.1rem;
}

.je-jr-head__lead {
	margin: 0 0 14px;
	color: var(--je-text-muted);
	font-size: 1.05rem;
	max-width: 760px;
}

.je-jr-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.je-jr-cta {
	padding: 11px 22px;
	background: var(--je-accent);
	border-color: var(--je-accent);
}

.je-jr-cta:hover {
	background: #d4762c;
	border-color: #d4762c;
}

.je-jr-progress {
	margin: 0;
}

.je-jr-map {
	height: 300px;
	margin: 20px 0;
	border-radius: 14px;
	overflow: hidden;
	background: #d6eaee;
}

.je-jr-map svg {
	display: block;
	width: 100%;
	height: 100%;
}

.je-jr-route {
	fill: none;
	stroke: #26333b;
	stroke-width: 2;
	stroke-dasharray: 5 6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0.7;
}

.je-world .je-jr-mark circle {
	r: 13px;
	fill: #9aa3a8;
	stroke: #fff;
	stroke-width: 2.5;
	vector-effect: none;
}

.je-jr-mark text {
	fill: #fff;
	font: 700 13px var(--je-font-body);
}

.je-world .je-jr-mark.is-done circle {
	fill: var(--je-primary);
}

.je-world .je-jr-mark.is-next circle,
.je-world .je-jr-mark.is-open circle {
	fill: var(--je-accent);
}

.je-jr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.je-jr-stops {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.je-jr-stop a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px 10px 10px;
	background: var(--je-surface);
	border-radius: 12px;
	color: var(--je-text);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.08);
	border: 2px solid transparent;
}

.je-jr-stop a:hover {
	border-color: var(--je-primary);
}

.je-jr-stop__num {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #9aa3a8;
	color: #fff;
	font: 700 0.9rem/30px var(--je-font-body);
	text-align: center;
}

.je-jr-stop__thumb {
	flex: none;
	width: 84px;
	height: 60px;
	object-fit: cover;
	border-radius: 8px;
}

.je-jr-stop__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.je-jr-stop__text strong {
	font-size: 0.98rem;
}

.je-jr-stop__text span {
	font-size: 0.82rem;
	color: var(--je-text-muted);
}

.je-jr-stop__state {
	flex: none;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--je-primary);
	white-space: nowrap;
}

.je-jr-stop.is-done .je-jr-stop__num {
	background: var(--je-primary);
}

.je-jr-stop.is-next a {
	border-color: var(--je-accent);
}

.je-jr-stop.is-next .je-jr-stop__num,
.je-jr-stop.is-open .je-jr-stop__num {
	background: var(--je-accent);
}

.je-jr-stop.is-next .je-jr-stop__state {
	color: #c4661f;
}

.je-jr-stop.is-locked a {
	opacity: 0.6;
	cursor: not-allowed;
}

.je-jr-stop.is-locked a:hover {
	border-color: transparent;
}

.je-jr-stop.is-locked .je-jr-stop__thumb {
	filter: grayscale(0.8);
}

.je-jr-stop.is-locked .je-jr-stop__state {
	color: var(--je-text-muted);
}

.je-jr-stop.is-shaking a {
	animation: je-jr-shake 0.35s;
}

@keyframes je-jr-shake {
	25% { transform: translateX(-5px); }
	50% { transform: translateX(5px); }
	75% { transform: translateX(-3px); }
}

.je-jr-story {
	background: var(--je-surface);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.08);
}

.je-jr-story h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.je-jr-story p {
	margin: 0 0 12px;
	line-height: 1.65;
}

.je-jr-story__how {
	font-size: 0.88rem;
	color: var(--je-text-muted);
	border-top: 1px dashed var(--je-border);
	padding-top: 10px;
	margin-bottom: 0 !important;
}

.je-jr-more-title {
	margin: 36px 0 0;
}

/* On a puzzle played as a stop. */
.je-jr-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 7px 16px;
	background: #e9f5f2;
	border-bottom: 1px solid #cfe6e0;
	font-size: 0.86rem;
	color: var(--je-primary-dark);
}

.je-jr-banner a {
	font-weight: 700;
	text-decoration: none;
}

.je-jr-note {
	margin: 12px auto 0;
	padding: 12px 0 0;
	border-top: 1px dashed var(--je-border);
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.je-jr-note__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	font-size: 0.95rem;
	color: var(--je-text);
}

.je-jr-next {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 460px;
	padding: 8px 14px 8px 8px;
	border-radius: 12px;
	background: #fff4e6;
	border: 2px solid var(--je-accent);
	color: var(--je-text);
	text-decoration: none;
	text-align: left;
}

.je-jr-next img {
	width: 64px;
	height: 46px;
	object-fit: cover;
	border-radius: 7px;
	flex: none;
}

.je-jr-next span {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.je-jr-next small {
	color: var(--je-text-muted);
	font-size: 0.76rem;
}

.je-jr-next .je-jr-next__go {
	flex: none;
	color: #c4661f;
	font-weight: 700;
}

.je-jr-badge {
	margin: 0;
	font-weight: 600;
	color: var(--je-primary-dark);
}

.je-jr-more {
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 800px) {
	.je-jr-layout {
		grid-template-columns: 1fr;
	}

	.je-jr-map {
		height: 220px;
	}
}

@media (max-width: 600px) {
	.je-jr-head h1 {
		font-size: 1.6rem;
	}

	.je-jr-stop a {
		gap: 10px;
		padding: 8px 10px 8px 8px;
	}

	.je-jr-stop__thumb {
		width: 64px;
		height: 48px;
	}

	.je-jr-stop__state {
		font-size: 0.74rem;
		white-space: normal;
		max-width: 76px;
		text-align: right;
	}

	.je-jr-banner {
		font-size: 0.78rem;
		padding: 6px 12px;
	}
}

/* ---------------------------------------------------------------------
 * Player accounts: sign-in form, sign-in window, /account/ page.
 * ------------------------------------------------------------------- */

.je-acct__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.je-acct__label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 220px;
	font: 600 0.85rem var(--je-font-body);
	color: var(--je-text);
}

.je-acct__input {
	font: 400 1rem var(--je-font-body);
	padding: 10px 14px;
	border: 2px solid var(--je-border);
	border-radius: 12px;
	background: var(--je-surface);
	color: var(--je-text);
	width: 100%;
	box-sizing: border-box;
}

.je-acct__input:focus {
	outline: none;
	border-color: var(--je-primary);
}

.je-acct__input--code {
	font-size: 1.4rem;
	letter-spacing: 0.3em;
	text-align: center;
}

.je-acct__form .je-btn {
	justify-content: center;
	min-height: 46px;
}

.je-acct__form .je-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Honeypot field: kept out of sight and out of reach. */
.je-acct__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.je-acct__msg {
	margin: 10px 0 0;
	color: #a2412f;
	font-size: 0.9rem;
}

.je-acct__msg:empty {
	display: none;
}

.je-acct__sent {
	margin: 0 0 12px;
	color: var(--je-text);
}

.je-acct__link {
	background: none;
	border: none;
	padding: 6px 0;
	margin-top: 8px;
	color: var(--je-primary);
	font: 600 0.9rem var(--je-font-body);
	text-decoration: underline;
	cursor: pointer;
}

.je-acct__small {
	margin: 14px 0 0;
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.je-acct__small a {
	color: inherit;
}

/* The sign-in window. */
.je-acct-modal {
	position: fixed;
	inset: 0;
	z-index: 10050;
	background: rgba(15, 25, 30, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.je-acct-modal__card {
	position: relative;
	background: var(--je-bg);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 26px 24px 20px;
	width: 100%;
	max-width: 440px;
	box-sizing: border-box;
}

.je-acct-modal__card h2 {
	font-family: var(--je-font-heading);
	color: var(--je-primary);
	margin: 0 0 8px;
	font-size: 1.4rem;
}

.je-acct__intro {
	margin: 0 0 16px;
	color: var(--je-text-muted);
	font-size: 0.95rem;
}

.je-acct-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--je-surface);
	color: var(--je-text);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

/* Nudge in the "Great Job!" panel. */
.je-acct-nudge {
	text-align: center;
	margin: 4px 0 0;
}

/* Passport page: where it is kept. */
.je-passport__account {
	background: var(--je-surface);
	border: 2px dashed var(--je-border);
	border-radius: 14px;
	padding: 14px 16px;
	margin: 0 0 14px;
}

.je-passport__account p {
	margin: 0 0 10px;
}

.je-passport__account.is-on {
	border-style: solid;
	border-color: rgba(14, 124, 123, 0.35);
	color: var(--je-text);
}

.je-passport__account.is-on a {
	color: var(--je-primary);
	font-weight: 600;
}

/* The /account/ page. */
.je-account__card {
	background: var(--je-surface);
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(15, 30, 35, 0.08);
	margin-bottom: 24px;
}

.je-account__card--signin {
	max-width: 560px;
}

.je-account__who {
	margin: 0 0 14px;
}

.je-account__stats {
	margin-bottom: 12px;
}

.je-account__sync {
	margin: 0 0 16px;
	color: var(--je-primary);
	font-weight: 600;
	font-size: 0.92rem;
}

.je-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.je-account__points {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
	color: var(--je-text);
	font-size: 0.93rem;
}

/* Explore page world map. */
.je-xmap-regions {
	display: flex;
	gap: 8px;
	margin: 16px 0 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.je-xmap-regions button {
	flex: none;
	padding: 7px 15px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-text);
	font: 600 0.9rem var(--je-font-body);
	cursor: pointer;
}

.je-xmap-regions button.is-on {
	border-color: var(--je-primary);
	background: var(--je-primary);
	color: #fff;
}

.je-xmap {
	position: relative;
	margin-bottom: 8px;
	padding: 12px;
	border-radius: 22px;
	background: #cfe5e3;
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.je-xmap__svg svg {
	display: block;
	width: 100%;
	height: auto;
	cursor: grab;
}

.je-xmap__svg svg:active {
	cursor: grabbing;
}

.je-xmap__svg path,
.je-xmap__svg .je-world__c circle {
	fill: #fffdf7;
	stroke: #a9c9c5;
	stroke-width: 0.4;
	vector-effect: non-scaling-stroke;
}

.je-xmap__loading {
	margin: 0;
	padding: 120px 0;
	text-align: center;
	color: var(--je-text-muted);
}

/* Beats the passport map's own .je-world circle rules (same world.svg). */
.je-xmap .je-world .je-xmap__dot {
	r: var(--dot-r, 4px);
	fill: var(--je-accent);
	stroke: #fff;
	stroke-width: 1.2px;
	cursor: pointer;
	transition: fill 0.15s ease;
}

.je-xmap .je-world .je-xmap__dot:hover,
.je-xmap .je-world .je-xmap__dot.is-active {
	r: calc(var(--dot-r, 4px) * 1.7);
	fill: var(--je-primary);
}

.je-xmap__ui {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.je-xmap__ui button {
	width: 36px;
	height: 36px;
	border: 1px solid var(--je-border);
	border-radius: 10px;
	background: #fff;
	color: var(--je-text);
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.je-xmap__card {
	position: absolute;
	z-index: 5;
	width: 270px;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.je-xmap__head {
	display: flex;
	gap: 10px;
	color: var(--je-text);
	text-decoration: none;
}

.je-xmap__card ul {
	margin: 8px 0 0;
	padding: 6px 0 0 4px;
	border-top: 1px solid var(--je-border);
	list-style: none;
	font-size: 0.82rem;
	line-height: 1.5;
}

.je-xmap__card li a {
	color: var(--je-primary-dark);
	text-decoration: none;
}

.je-xmap__card li a:hover {
	text-decoration: underline;
}

.je-xmap__more {
	color: var(--je-text-muted);
}

.je-xmap .je-world .je-xmap__dot.is-many {
	r: calc(var(--dot-r, 4px) * 1.3);
}

.je-xmap__card[hidden] {
	display: none;
}

.je-xmap__card img {
	width: 90px;
	height: 68px;
	border-radius: 9px;
	object-fit: cover;
	flex: none;
}

.je-xmap__card span {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 0.85rem;
	line-height: 1.3;
}

.je-xmap__card strong {
	font-weight: 700;
}

.je-xmap__card small {
	color: var(--je-text-muted);
}

.je-xmap__card em {
	margin-top: auto;
	color: var(--je-primary);
	font-style: normal;
	font-weight: 700;
}

.je-xmap__hint {
	margin: 8px 4px 0;
	color: #4c6b69;
	font-size: 0.82rem;
}

@media (max-width: 600px) {
	.je-xmap {
		margin-left: -8px;
		margin-right: -8px;
		padding: 8px;
		border-radius: 16px;
	}

	.je-xmap__ui {
		top: 12px;
		right: 12px;
	}

	.je-xmap__card {
		width: 230px;
	}
}

/* Tiny countries are drawn as circles in world.svg; keep them small when zoomed. */
.je-xmap .je-world .je-world__c circle {
	r: calc(var(--dot-r, 4px) * 0.7);
	fill: #fffdf7;
	stroke: #a9c9c5;
}

/* Ad column beside the table, on wide screens only. It sits outside the
   table (pieces can't be dragged into it) with a clear gap, and stays in
   view while the page scrolls. The board takes the remaining width. */
.jig-rail {
	display: none;
}

@media (min-width: 1440px) {
	.jig-stage.has-rail {
		display: flex;
		align-items: flex-start;
		gap: 32px;
	}

	.jig-stage.has-rail #jig-root {
		flex: 1;
		min-width: 0;
	}

	.jig-stage.has-rail .jig-rail {
		display: block;
		flex: 0 0 300px;
		position: sticky;
		top: 84px;
	}
}

.jig-rail .je-ad {
	width: 300px;
	min-height: 0;
	margin: 0;
}

.jig-rail .je-ad__label {
	color: rgba(0, 0, 0, 0.55);
}

.jig-rail .je-ad--preview {
	height: 600px;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
}

/* Full screen is for the game alone. */
.jig-fullscreen .jig-stage.has-rail {
	display: block;
}

.jig-fullscreen .jig-rail {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Compact "Great Job!" panel: it takes less of the screen so the finished
 * picture above it stays big. Wide screens put the suggestions in a
 * column beside the message and the passport stamp.
 * ------------------------------------------------------------------- */
.jig-complete-overlay {
	max-height: 34vh;
}

.jig-complete-card {
	padding: 12px 48px;
}

.jig-complete-card .jig-passport-note {
	gap: 6px 14px;
	margin-top: 8px;
	padding-top: 8px;
}

.jig-complete-card .jig-passport-note .je-stamp {
	font-size: 7px;
}

.jig-complete-card .jig-passport-note__text {
	font-size: 0.85rem;
}

.jig-complete-card .jig-passport-note__text strong {
	font-size: 0.95rem;
}

.jig-complete-card .je-acct-nudge {
	margin: 2px 0 0;
	font-size: 0.85rem;
}

.jig-complete-suggestions {
	margin-top: 8px;
	padding-top: 8px;
}

.jig-complete-suggestions__title {
	margin-bottom: 6px;
	font-size: 0.82rem;
}

.jig-complete-suggestions .jig-grid {
	gap: 10px;
}

.jig-complete-suggestions .jig-card {
	flex: 0 0 96px;
	width: 96px;
	min-width: 0;
	padding: 5px 5px 7px;
}

.jig-complete-suggestions .jig-card__body {
	padding: 0;
}

.jig-complete-suggestions .jig-card__title {
	margin: 5px 0 0;
	font-size: 0.72rem;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jig-complete-suggestions .jig-card__meta {
	display: none;
}

@media (min-width: 900px) {
	.jig-complete-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 28px;
		align-items: center;
		text-align: left;
	}

	.jig-complete-card > * {
		grid-column: 1;
	}

	.jig-complete-top,
	.jig-complete-card .jig-passport-note,
	.jig-complete-card .je-daily-line {
		justify-content: flex-start;
	}

	.jig-complete-card .je-acct-nudge,
	.jig-complete-card .je-daily-again {
		text-align: left;
	}

	.jig-complete-card > .jig-complete-close {
		grid-column: auto;
	}

	.jig-complete-card > .jig-complete-suggestions {
		grid-column: 2;
		grid-row: 1 / span 6;
		margin: 0;
		padding: 0 0 0 24px;
		border-top: 0;
		border-left: 1px solid var(--je-border);
	}

	.jig-complete-suggestions .jig-grid {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.jig-complete-card {
		padding: 10px 40px 10px 14px;
	}

	.jig-complete-suggestions .jig-card {
		flex-basis: 84px;
		width: 84px;
	}
}

/* "Welcome back": a game left part way through, offered on the table
   before it is laid out again. */
.jig-resume {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 24px 16px;
}

.jig-resume__card {
	width: 100%;
	max-width: 420px;
	padding: 24px 22px 20px;
	background: var(--je-surface);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	text-align: center;
	color: var(--je-text);
}

.jig-resume__title {
	margin: 0 0 6px;
	font: 600 1.4rem var(--je-font-heading);
}

.jig-resume__text {
	margin: 0 0 16px;
	color: var(--je-text-muted);
	line-height: 1.5;
}

.jig-resume__bar,
.je-mine-card__bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--je-tray-bg);
	overflow: hidden;
}

.jig-resume__bar span,
.je-mine-card__bar span {
	display: block;
	height: 100%;
	min-width: 4px;
	border-radius: inherit;
	background: var(--je-primary);
}

.jig-resume__meta {
	margin: 8px 0 18px;
	font-size: 0.85rem;
	color: var(--je-text-muted);
}

.jig-resume__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.jig-resume__actions button {
	padding: 10px 22px;
	border-radius: 999px;
	border: 2px solid var(--je-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jig-resume__go {
	background: var(--je-primary);
	color: #fff;
}

.jig-resume__new {
	background: transparent;
	color: var(--je-primary);
}

/* My puzzles */
.je-mine {
	margin-top: 32px;
}

.je-mine h2 {
	margin: 0 0 14px;
	font: 600 1.35rem var(--je-font-heading);
}

.je-mine__count {
	font: 500 0.95rem var(--je-font-body, inherit);
	color: var(--je-text-muted);
}

.je-mine__more {
	margin: 14px 0 0;
}

.je-mine__playing {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}

.je-mine-card {
	position: relative;
}

.je-mine-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--je-surface);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: var(--je-text);
	box-shadow: 0 2px 10px rgba(15, 30, 35, 0.1);
}

.je-mine-card__link:hover,
.je-mine-card__link:focus-visible {
	box-shadow: 0 6px 18px rgba(15, 30, 35, 0.18);
}

.je-mine-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--je-tray-bg);
}

.je-mine-card__img--none {
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 2.4rem var(--je-font-heading);
	color: var(--je-text-muted);
}

.je-mine-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
}

.je-mine-card__title {
	font-weight: 700;
	line-height: 1.3;
}

.je-mine-card__meta {
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.je-mine-card__go {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--je-primary);
}

.je-mine-card__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: rgba(20, 25, 25, 0.6);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.je-mine-card__remove:hover,
.je-mine-card__remove:focus-visible {
	background: rgba(20, 25, 25, 0.85);
}

/* Leaderboard ------------------------------------------------------------ */

.je-lb {
	padding: 28px 0 56px;
}

.je-lb h2 {
	font-size: 1.35rem;
	margin: 0 0 6px;
}

.je-lb__head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.je-lb__head h1 {
	margin: 0 0 6px;
	font-size: 2rem;
}

.je-lb__head p {
	margin: 0;
	color: var(--je-text-muted);
	max-width: 680px;
}

.je-lb__trophy {
	flex: none;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff6d8, #f3c74f);
	font-size: 2.6rem;
	box-shadow: 0 4px 14px rgba(160, 110, 10, 0.25);
}

.je-lb__me {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding: 14px 18px;
	margin-bottom: 26px;
	border-radius: 14px;
	background: var(--je-tray-bg);
}

.je-lb__me:empty {
	display: none;
}

.je-lb__me p {
	margin: 0;
	color: var(--je-text-muted);
}

.je-lb__me .je-lb__me-name {
	color: var(--je-text);
	font-weight: 700;
}

.je-lb__board,
.je-lb__ranks,
.je-lb__how {
	background: var(--je-surface);
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(15, 30, 35, 0.08);
	margin-bottom: 24px;
}

.je-lb__sub {
	margin: 0 0 14px;
	color: var(--je-text-muted);
	font-size: 0.95rem;
}

.je-lb__sub a {
	font-weight: 600;
	white-space: nowrap;
}

.je-lb__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.je-lb__tabs button {
	padding: 6px 14px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: transparent;
	color: var(--je-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.je-lb__tabs button[aria-selected="true"] {
	background: var(--je-primary);
	border-color: var(--je-primary);
	color: #fff;
}

.je-lb__panel[hidden] {
	display: none;
}

.je-lb__table {
	width: 100%;
	border-collapse: collapse;
}

.je-lb__table th {
	padding: 6px 8px;
	border-bottom: 2px solid var(--je-border);
	color: var(--je-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.je-lb__table td {
	padding: 9px 8px;
	border-bottom: 1px solid var(--je-border);
	vertical-align: middle;
}

.je-lb__table tbody tr:last-child td {
	border-bottom: none;
}

.je-lb__table tr.is-me td {
	background: #fff4d6;
}

.je-lb__table .je-lb__pos {
	width: 2.6em;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.je-lb__table .je-lb__num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.je-lb__table td.je-lb__num {
	font-weight: 700;
}

.je-lb__who strong {
	display: block;
}

.je-lb__who span {
	display: block;
	font-size: 0.82rem;
	color: var(--je-text-muted);
}

.je-lb__empty,
.je-lb__note {
	margin: 4px 0 0;
	color: var(--je-text-muted);
	font-size: 0.92rem;
}

.je-lb__ranks > p {
	margin: 0 0 14px;
	color: var(--je-text-muted);
}

.je-lb__rank-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.je-lb__rank-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--je-tray-bg);
}

.je-lb__rank-icon {
	flex: none;
	font-size: 1.7rem;
}

.je-lb__rank-text strong {
	display: block;
}

.je-lb__rank-text span {
	font-size: 0.85rem;
	color: var(--je-text-muted);
}

.je-lb__how ul {
	margin: 0;
	padding-left: 1.2em;
	color: var(--je-text-muted);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.je-lb__head {
		gap: 14px;
	}

	.je-lb__head h1 {
		font-size: 1.5rem;
	}

	.je-lb__trophy {
		width: 60px;
		height: 60px;
		font-size: 1.9rem;
	}

	.je-lb__board,
	.je-lb__ranks,
	.je-lb__how {
		padding: 16px 12px;
	}

	.je-lb__table th,
	.je-lb__table td {
		padding-left: 4px;
		padding-right: 4px;
	}

	.je-lb__table .je-lb__more {
		display: none;
	}
}

/* Leaderboard line in the finish panel. */
.jig-lb-note {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--je-border);
	font-size: 0.9rem;
	color: var(--je-text-muted);
	text-align: left;
}

.jig-lb-note__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jig-lb-note__text strong {
	color: var(--je-text);
}

.jig-lb-note__link {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Traveller rank on the passport page. */
.je-passport__rank {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 6px 0 4px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--je-surface);
	box-shadow: 0 2px 10px rgba(15, 30, 35, 0.08);
}

.je-passport__rank[hidden] {
	display: none;
}

.je-passport__rank-icon {
	flex: none;
	font-size: 2.2rem;
}

.je-passport__rank-body {
	flex: 1 1 220px;
	min-width: 0;
}

.je-passport .je-passport__rank-label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--je-text-muted);
}

.je-passport__rank-name {
	margin: 0 0 6px;
}

.je-passport__rank-name strong {
	font-size: 1.2rem;
}

.je-passport__rank-name span,
.je-passport__rank-next {
	color: var(--je-text-muted);
	font-size: 0.9rem;
}

.je-passport__rank-next {
	margin: 6px 0 0;
}

.je-passport__rank-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--je-tray-bg);
	overflow: hidden;
}

.je-passport__rank-bar span {
	display: block;
	height: 100%;
	min-width: 4px;
	border-radius: inherit;
	background: var(--je-primary);
}

/* Name picker on the account page. */
.je-lb-name-card h2 {
	font-size: 1.2rem;
	margin: 0 0 6px;
}

.je-lb-name-card > p {
	margin: 0 0 12px;
	color: var(--je-text-muted);
}

.je-lb-name__current {
	margin: 0 0 10px;
}

.je-lb-name__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.je-lb-name__select {
	min-width: 0;
	flex: 1 1 140px;
	padding: 8px 10px;
	border: 1px solid var(--je-border);
	border-radius: 10px;
	background: var(--je-surface);
	color: var(--je-text);
	font: inherit;
}

.je-lb-name__hide {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.92rem;
	color: var(--je-text-muted);
	cursor: pointer;
}

.je-lb-name__msg {
	min-height: 1.2em;
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--je-primary-dark);
}

.je-lb__medal {
	font-size: 1.4rem;
	line-height: 1;
}

/* Globe Coins ------------------------------------------------------------- */

/* Coins line in the finish panel. */
.jig-coins-note {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #fff8e1;
	font-size: 0.88rem;
	color: #6b5413;
	text-align: left;
}

.jig-coins-note__total {
	font-size: 1.25rem;
	color: #7a5a0c;
	font-variant-numeric: tabular-nums;
}

.jig-coins-note__why {
	flex: 1 1 200px;
}

.jig-coins-note__link {
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

/* Hints menu under the puzzle. */
.jig-hint {
	position: relative;
}

.jig-hint__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 50;
	min-width: 250px;
	padding: 6px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 30, 35, 0.2);
}

.jig-hint__menu[hidden] {
	display: none;
}

.jig-hint__head {
	margin: 4px 10px 6px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #7a5a0c;
}

.jig-hint__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: 6px;
	background: none;
	color: var(--je-text);
	font: inherit;
	font-size: 0.92rem;
	text-align: left;
	cursor: pointer;
}

.jig-hint__option:hover:not(:disabled) {
	background: var(--je-tray-bg);
}

.jig-hint__option:disabled {
	opacity: 0.45;
	cursor: default;
}

.jig-hint__option strong {
	white-space: nowrap;
	color: #7a5a0c;
}

.jig-hint__foot {
	margin: 6px 10px 4px;
	padding-top: 6px;
	border-top: 1px solid rgba(15, 30, 35, 0.1);
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.jig-hint__foot a {
	font-weight: 600;
}

.jig-piece.jig-hint-flash {
	filter: drop-shadow(0 0 6px #ffd54a) drop-shadow(0 0 2px #fff);
}

.jig-piece.jig-hint-edge {
	filter: drop-shadow(0 0 5px #ffd54a) drop-shadow(0 0 1px #c99a22);
}

/* Table colours from the shop, and the link to get more. */
.jig-play-as__tables {
	flex-wrap: wrap;
}

.jig-table-swatch[hidden] {
	display: none;
}

.jig-table-more {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px dashed rgba(15, 30, 35, 0.35);
	border-radius: 50%;
	color: var(--je-text-muted);
	font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
}

.jig-table-more:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

/* Passport covers bought in the shop. */
.je-passport__cover.je-cover--crimson { background: linear-gradient(90deg, #6a1420 0 7px, #8f1d2c 7px); }
.je-passport__cover.je-cover--navy { background: linear-gradient(90deg, #142043 0 7px, #1f2f5c 7px); }
.je-passport__cover.je-cover--black { background: linear-gradient(90deg, #0d0e10 0 7px, #26282c 7px); }
.je-passport__cover.je-cover--gold { background: linear-gradient(90deg, #8a6420 0 7px, #b8862b 7px); }

/* The shop page. */
.je-shop {
	padding: 28px 0 56px;
}

.je-shop h2 {
	font-size: 1.3rem;
	margin: 0 0 12px;
}

.je-shop__head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.je-shop__head h1 {
	margin: 0 0 6px;
	font-size: 2rem;
}

.je-shop__head p {
	margin: 0;
	max-width: 660px;
	color: var(--je-text-muted);
}

.je-shop__coin {
	flex: none;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff6d8, #f3c74f);
	font-size: 2.6rem;
	box-shadow: 0 4px 14px rgba(160, 110, 10, 0.25);
}

.je-shop__wallet,
.je-shop__video {
	margin-bottom: 24px;
	padding: 16px 20px;
	border-radius: 14px;
	background: #fff8e1;
	border: 1px solid #f0dc9c;
}

.je-shop__balance {
	margin: 0;
	font-size: 1.3rem;
	color: #6b5413;
}

.je-shop__balance strong {
	font-size: 1.8rem;
	font-variant-numeric: tabular-nums;
}

.je-shop__msg {
	min-height: 1.3em;
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--je-primary-dark);
}

.je-shop__keep {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--je-text-muted);
}

.je-shop__video {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.je-shop__video[hidden] {
	display: none;
}

.je-shop__video h2 {
	margin: 0 0 4px;
}

.je-shop__video p {
	margin: 0;
	color: var(--je-text-muted);
}

.je-shop__group {
	margin-bottom: 24px;
	padding: 20px;
	border-radius: 14px;
	background: var(--je-surface);
	box-shadow: 0 2px 10px rgba(15, 30, 35, 0.08);
}

.je-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.je-shop__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 12px;
	background: var(--je-tray-bg);
}

.je-shop__item.is-owned {
	box-shadow: inset 0 0 0 2px rgba(14, 124, 123, 0.35);
}

.je-shop__icon {
	flex: none;
	width: 48px;
	font-size: 2rem;
	text-align: center;
}

.je-shop__swatch {
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0 2px;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(15, 30, 35, 0.2);
}

.je-shop__swatch--cover {
	width: 36px;
	height: 48px;
	margin: 0 6px;
	border: none;
	border-radius: 3px 6px 6px 3px;
	box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.je-shop__text {
	flex: 1;
	min-width: 0;
}

.je-shop__text h3 {
	margin: 0 0 2px;
	font-size: 1rem;
}

.je-shop__text p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--je-text-muted);
	line-height: 1.4;
}

.je-shop__text .je-shop__have {
	margin-top: 4px;
	font-weight: 600;
	color: var(--je-primary-dark);
}

.je-shop__have[hidden] {
	display: none;
}

.je-shop__buy {
	flex: none;
	min-width: 76px;
	padding: 8px 12px;
	border: none;
	border-radius: 999px;
	background: #f3c74f;
	color: #4d3806;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.je-shop__buy:hover:not(:disabled) {
	background: #e9b52b;
}

.je-shop__buy:disabled {
	opacity: 0.5;
	cursor: default;
}

.je-shop__buy.is-use {
	background: var(--je-primary);
	color: #fff;
}

.je-shop__buy.is-on {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--je-border);
	color: var(--je-text);
}

.je-shop__info > p {
	margin: 0 0 12px;
	color: var(--je-text-muted);
}

.je-shop__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.je-shop__list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--je-border);
}

.je-shop__list li:last-child {
	border-bottom: none;
}

.je-shop__list strong {
	white-space: nowrap;
	color: #7a5a0c;
}

/* "Now boarding" before a Boarding Pass flight. */
.je-shop__boarding {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(10, 30, 40, 0.55);
}

.je-shop__boarding-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 360px;
	padding: 28px 24px;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.je-shop__boarding-card strong {
	font-size: 1.3rem;
}

.je-shop__boarding-plane {
	font-size: 3rem;
	animation: je-fly 1.8s ease-in forwards;
}

@keyframes je-fly {
	0% { transform: translate(-40px, 10px) rotate(0); }
	100% { transform: translate(120px, -60px) rotate(-10deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.je-shop__boarding-plane {
		animation: none;
	}
}

@media (max-width: 600px) {
	.je-shop__head h1 {
		font-size: 1.5rem;
	}

	.je-shop__coin {
		width: 60px;
		height: 60px;
		font-size: 1.9rem;
	}

	.je-shop__group {
		padding: 16px 12px;
	}

	.je-shop__grid {
		grid-template-columns: 1fr;
	}
}

/* Phones: the hints menu opens upwards when there's no room below. */
.jig-hint__menu.is-up {
	top: auto;
	bottom: calc(100% + 6px);
}

/* Coins won, next to the finishing time. */
.jig-coins-pill {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #fff1c2;
	color: #7a5a0c;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.jig-coins-note__intro {
	flex-basis: 100%;
	font-weight: 600;
	color: #7a5a0c;
}

.je-coin--big {
	width: 1.1em;
	height: 1.1em;
}

.je-shop__text .je-shop__have.is-short {
	color: #a35f16;
	font-weight: 500;
}

.je-passport__shield {
	white-space: nowrap;
}

/* On phones the toolbar is under the board, near the bottom of the screen. */
@media (max-width: 600px) {
	.jig-hint__menu {
		top: auto;
		bottom: calc(100% + 6px);
	}
}

/* Geography quizzes (/quizzes/, quiz.js) ------------------------------------ */

.je-quiz-wrap {
	padding-bottom: 48px;
}

/* The quizzes page: a card with a picture for each kind of quiz, then the
   medal board of every quiz and continent. */
.je-quiz-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 22px 0 8px;
}

.je-quiz-card {
	display: flex;
	flex-direction: column;
	background: var(--je-surface);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 1px 0 var(--je-border), 0 10px 30px -18px rgba(31, 42, 51, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.je-quiz-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 var(--je-border), 0 18px 36px -18px rgba(31, 42, 51, 0.45);
}

.je-quiz-card__main {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: var(--je-text);
	text-decoration: none;
}

.je-quiz-card__art {
	position: relative;
	height: 190px;
	overflow: hidden;
	background: #dcecf3;
}

.je-quiz-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.je-quiz-card--flags .je-quiz-card__art {
	background: linear-gradient(135deg, #12908c, #0a5958);
}

.je-quiz-card__flags {
	position: absolute;
	inset: -30px -40px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 12px;
	transform: rotate(-8deg);
}

.je-quiz-card__flags img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 5px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.je-quiz-card--map .je-quiz-card__art {
	background: linear-gradient(135deg, #2f6f9f, #1d4d73);
}

/* The map keeps its shape and covers the box, so the pin stays on Kenya. */
.je-quiz-card__map {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100%, 398px);
	aspect-ratio: 1000 / 477;
	transform: translate(-50%, -50%);
}

.je-quiz-card__map img {
	display: block;
	width: 100%;
	height: 100%;
	filter: invert(1);
	opacity: 0.8;
}

.je-quiz-card__pin {
	position: absolute;
	width: 22px;
	height: 22px;
	margin: -26px 0 0 -11px;
	border-radius: 50% 50% 50% 0;
	background: var(--je-accent);
	box-shadow: 0 0 0 6px rgba(232, 135, 58, 0.3);
	transform: rotate(-45deg);
}

.je-quiz-card__ask {
	position: absolute;
	left: 16px;
	bottom: 16px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--je-text);
	font-size: 0.92rem;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.je-quiz-card__q {
	position: absolute;
	right: 18px;
	top: 14px;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--je-accent);
	color: #fff;
	font: 600 1.9rem var(--je-font-heading);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.je-quiz-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex: 1;
	padding: 20px 22px 6px;
}

.je-quiz-card__title {
	margin: 0;
	font: 600 1.35rem/1.2 var(--je-font-heading);
}

.je-quiz-card__text {
	color: var(--je-text-muted);
}

.je-quiz-card__best {
	padding: 4px 11px;
	border-radius: 999px;
	background: #fdf1e3;
	color: #a35f16;
	font-size: 0.85rem;
	font-weight: 600;
}

.je-quiz-card__best:empty {
	display: none;
}

.je-quiz-card__play {
	margin-top: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--je-primary);
	color: #fff;
	font-weight: 600;
	transition: background 0.15s ease;
}

.je-quiz-card__main:hover .je-quiz-card__play {
	background: var(--je-primary-dark);
}

.je-quiz-card__regions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 12px 22px 20px;
}

.je-quiz-card__regions span {
	margin-right: 2px;
	color: var(--je-text-muted);
	font-size: 0.85rem;
}
.je-quiz-card__regions a,
.je-quiz-regions a {
	padding: 4px 11px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-text);
	font-size: 0.82rem;
	text-decoration: none;
}

.je-quiz-card__regions a:hover,
.je-quiz-regions a:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

.je-quiz-regions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.je-quiz-regions a {
	font-size: 0.88rem;
	padding: 5px 13px;
}

.je-quiz-regions a[aria-current='page'] {
	background: var(--je-primary);
	border-color: var(--je-primary);
	color: #fff;
}

@media (min-width: 760px) {
	.je-quiz-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* The medal board. */
.je-qboard {
	margin: 44px 0 8px;
}

.je-qboard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 16px;
}

.je-qboard__head h2 {
	margin: 0 0 4px;
	font: 600 1.5rem var(--je-font-heading);
}

.je-qboard__head p {
	margin: 0;
	max-width: 640px;
	color: var(--je-text-muted);
}

.je-qboard__progress {
	min-width: 240px;
	padding: 12px 18px;
	border: 1px solid var(--je-border);
	border-radius: 16px;
	background: var(--je-surface);
}

.je-qboard__progress p {
	margin: 0 0 8px;
	color: var(--je-text);
	font-weight: 600;
}

.je-qboard__bar {
	display: block;
	height: 10px;
	border-radius: 99px;
	background: #ece3cf;
	overflow: hidden;
}

.je-qboard__bar i {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #cd7f32, #e3b23c);
	transition: width 0.6s ease;
}

.je-qboard__scroll {
	border: 1px solid var(--je-border);
	border-radius: 22px;
	background: var(--je-surface);
	overflow-x: auto;
}

.je-qboard__table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.je-qboard__table thead th {
	padding: 10px 4px;
	background: var(--je-tray-bg);
	color: var(--je-text-muted);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.je-qboard__table thead td {
	background: var(--je-tray-bg);
}

.je-qboard__table tbody tr + tr > * {
	border-top: 1px solid var(--je-border);
}

.je-qboard__table tbody th {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 220px;
	padding: 12px 16px;
	text-align: left;
	font-weight: 400;
}

.je-qboard__table td {
	border-left: 1px solid var(--je-border);
	text-align: center;
}

.je-qboard__table td.is-world {
	background: #fbf7ef;
}

.je-qboard__table td a {
	display: grid;
	place-items: center;
	padding: 10px 4px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.je-qboard__table td a:hover {
	background: #f1f8f7;
}

.je-qboard__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: #e8f3f2;
	overflow: hidden;
}

.je-qboard__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.je-qboard__icon .je-qboard__flag {
	width: 32px;
	height: 24px;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.je-qboard__icon--map {
	background: #dcecf3;
}

.je-qboard__icon .je-qboard__map {
	object-fit: cover;
	opacity: 0.45;
}

.je-qboard__name {
	font: 600 1rem/1.2 var(--je-font-heading);
	color: var(--je-text);
}

.je-qboard__name small {
	display: block;
	margin-top: 2px;
	color: var(--je-text-muted);
	font: 400 0.8rem var(--je-font-body);
}

.je-qboard__medal {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px dashed #d9cfb8;
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--je-primary);
	font-size: 0.78rem;
	font-weight: 600;
}

.je-qboard__medal.is-gold,
.je-qboard__medal.is-silver,
.je-qboard__medal.is-bronze,
.je-qboard__medal.is-tried {
	border: 0;
	font: 600 0.92rem var(--je-font-heading);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}

.je-qboard__medal.is-gold {
	background: radial-gradient(circle at 35% 30%, #ffe08a, #d9a21b);
	color: #6b4a00;
}

.je-qboard__medal.is-silver {
	background: radial-gradient(circle at 35% 30%, #f4f6f8, #a9b3bc);
	color: #3d4852;
}

.je-qboard__medal.is-bronze {
	background: radial-gradient(circle at 35% 30%, #f0b27a, #b86b2a);
	color: #fff;
}

/* Played, but not yet enough for a medal. */
.je-qboard__medal.is-tried {
	background: #f1ece0;
	color: var(--je-text-muted);
	box-shadow: none;
}

/* On phones the quiz names stay in view while the board scrolls sideways. */
@media (max-width: 899px) {
	.je-qboard__table {
		min-width: 0;
		width: max-content;
	}

	.je-qboard__table tbody th,
	.je-qboard__table thead td {
		position: sticky;
		left: 0;
		z-index: 1;
		min-width: 0;
		width: 168px;
		background: var(--je-surface);
		box-shadow: 1px 0 0 var(--je-border);
	}

	.je-qboard__table thead td {
		background: var(--je-tray-bg);
	}

	.je-qboard__table thead th {
		width: 72px;
	}

	.je-qboard__icon {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}

	.je-qboard__name {
		font-size: 0.92rem;
	}
}
/* The game box. */
.je-quiz {
	max-width: 820px;
	padding: 20px;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 18px;
	box-shadow: 0 4px 18px rgba(31, 42, 51, 0.06);
}

.je-quiz__loading {
	margin: 0;
	padding: 36px 8px;
	text-align: center;
	color: var(--je-text-muted);
}

.je-quiz__start,
.je-quiz__end {
	text-align: center;
	padding: 10px 0 4px;
}

.je-quiz__how {
	margin: 0 0 16px;
	font-size: 1.05rem;
}

.je-quiz__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 12px;
}

.je-quiz .je-btn {
	padding: 11px 22px;
	font-size: 1rem;
}

.je-quiz__best {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: #7a5a0c;
}

.je-quiz__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.9rem;
	color: var(--je-text-muted);
}

.je-quiz__count {
	flex: 1;
	font-weight: 600;
	color: var(--je-text);
}

.je-quiz__score {
	color: var(--je-primary);
	font-weight: 600;
}

.je-quiz__time {
	font-variant-numeric: tabular-nums;
}

.je-quiz__track {
	height: 6px;
	margin: 8px 0 18px;
	border-radius: 999px;
	background: var(--je-tray-bg);
	overflow: hidden;
}

.je-quiz__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--je-primary);
	transition: width 0.3s ease;
}

.je-quiz__stage {
	text-align: center;
}

.je-quiz__prompt {
	margin: 0 0 14px;
	font-size: 1.1rem;
}

.je-quiz__prompt strong {
	font: 600 1.35rem var(--je-font-heading);
}

.je-quiz__flag {
	display: block;
	width: min(320px, 80%);
	height: auto;
	margin: 0 auto 16px;
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(31, 42, 51, 0.12), 0 6px 18px rgba(31, 42, 51, 0.12);
}

.je-quiz__country {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 4px 0 12px;
	font: 600 1.6rem var(--je-font-heading);
}

.je-quiz__miniflag {
	width: 40px;
	height: 30px;
	flex: none;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(31, 42, 51, 0.15);
}

.je-quiz__miniflag--inline {
	width: 32px;
	height: 24px;
	margin: 0 8px 0 2px;
	vertical-align: -0.3em;
}

.je-quiz__photo {
	margin: 0 0 14px;
}

.je-quiz__photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 48vh;
	object-fit: contain;
	border-radius: 10px;
	background: var(--je-tray-bg);
}

.je-quiz__photo figcaption {
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--je-text-muted);
	text-align: right;
}

.je-quiz__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.je-quiz__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 14px;
	border: 2px solid var(--je-border);
	border-radius: 12px;
	background: var(--je-surface);
	color: var(--je-text);
	font: 500 1rem var(--je-font-body);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.je-quiz__opt:hover:not(:disabled) {
	border-color: var(--je-primary);
	transform: translateY(-1px);
}

.je-quiz__opt:disabled {
	cursor: default;
}

.je-quiz__key {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 7px;
	background: var(--je-tray-bg);
	color: var(--je-text-muted);
	font-size: 0.78rem;
	font-weight: 600;
}

.je-quiz__opt.is-right {
	border-color: #2e9d62;
	background: #e6f6ec;
}

.je-quiz__opt.is-right .je-quiz__key {
	background: #2e9d62;
	color: #fff;
}

.je-quiz__opt.is-wrong {
	border-color: #d0543f;
	background: #fdecea;
}

.je-quiz__opt.is-wrong .je-quiz__key {
	background: #d0543f;
	color: #fff;
}

.je-quiz__feedback {
	min-height: 28px;
	margin-top: 14px;
	text-align: center;
}

.je-quiz__verdict {
	margin: 0 0 6px;
	font-weight: 600;
}

.je-quiz__feedback.is-right .je-quiz__verdict {
	color: #23824f;
}

.je-quiz__feedback.is-wrong .je-quiz__verdict {
	color: #b4432f;
}

.je-quiz__reveal {
	margin: 0 0 10px;
}

.je-quiz__skip {
	margin: -6px 0 12px;
	padding: 4px 12px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-text-muted);
	font-size: 0.85rem;
	cursor: pointer;
}

.je-quiz__skip:hover:not(:disabled) {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

/* Map quiz help: the hint button, then Show me. */
.je-quiz__help {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: -6px 0 12px;
}

.je-quiz__help .je-quiz__skip {
	margin: 0;
}

.je-quiz__hint {
	border-color: #f0c48e;
	background: #fdf1e3;
	color: #a35f16;
	font-weight: 600;
}

/* The end of a round. */
.je-quiz__result {
	margin: 0;
	font: 700 3rem/1.1 var(--je-font-heading);
	color: var(--je-primary);
}

.je-quiz__words {
	margin: 6px 0 8px;
	font-size: 1.05rem;
}

.je-quiz__newbest,
.je-quiz__coins {
	margin: 0 0 8px;
	font-weight: 600;
	color: #7a5a0c;
}

.je-quiz__review-title {
	margin: 22px 0 10px;
	font-size: 1.05rem;
}

.je-quiz__review {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.je-quiz__review li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--je-tray-bg);
	font-size: 0.9rem;
}

.je-quiz__review li span {
	color: var(--je-text-muted);
	font-size: 0.82rem;
}

.je-quiz__places {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	text-align: left;
}

.je-quiz__place {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--je-text);
	font-size: 0.82rem;
	text-decoration: none;
}

.je-quiz__place img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
	border: 3px solid #2e9d62;
}

.je-quiz__place.is-wrong img {
	border-color: #d0543f;
}

.je-quiz__place:hover span {
	color: var(--je-primary);
	text-decoration: underline;
}

/* The map quiz. */
.je-quiz-mapwrap {
	position: relative;
	margin-top: 12px;
}

.je-quiz-map {
	height: min(58vh, 500px);
	border-radius: 12px;
	overflow: hidden;
	background: #d6eaee;
	touch-action: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.je-quiz-map svg {
	display: block;
	width: 100%;
	height: 100%;
}

.je-world--quiz path,
.je-world--quiz circle {
	fill: #efeadd;
}

.je-world--quiz .is-quiz path,
.je-world--quiz .is-quiz circle {
	fill: #dccfa8;
}

.je-world--quiz .is-quiz:hover path,
.je-world--quiz .is-quiz:hover circle {
	fill: #cbb986;
}

.je-world--quiz .is-found path,
.je-world--quiz .is-found circle,
.je-world--quiz .is-found:hover path,
.je-world--quiz .is-found:hover circle {
	fill: #4cb07a;
}

.je-world--quiz .is-missed path,
.je-world--quiz .is-missed circle,
.je-world--quiz .is-missed:hover path,
.je-world--quiz .is-missed:hover circle {
	fill: #e0705c;
}

.je-world--quiz .is-wrong path,
.je-world--quiz .is-wrong circle {
	fill: #9aa5ab;
}

/* Hint 2: the country and its nearest neighbours. */
.je-world--quiz .is-hint path,
.je-world--quiz .is-hint circle {
	fill: #f2c27a;
}

.je-world--quiz .is-hint:hover path,
.je-world--quiz .is-hint:hover circle {
	fill: #e8a650;
}

/* Drawn over the map, so it needs to beat the map's own circle rules. */
.je-world--quiz circle.je-quiz-ring {
	fill: none;
	stroke: #b4432f;
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
	animation: je-quiz-ring 1.2s ease-in-out infinite;
}

@keyframes je-quiz-ring {
	50% { opacity: 0.35; }
}

.je-quiz-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.je-quiz-zoom button {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--je-text);
	font-size: 1.15rem;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

/* Text under the quiz. */
.je-quiz-about {
	max-width: 760px;
	margin: 36px 0 12px;
}

.je-quiz-about h2 {
	font-size: 1.25rem;
	margin: 0 0 8px;
}

.je-quiz-about h3 {
	font-size: 1.05rem;
	margin: 18px 0 6px;
}

.je-quiz-about__note {
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.je-quiz-more h2 {
	font-size: 1.15rem;
	margin: 30px 0 10px;
}

.je-quiz-more__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.je-quiz-more__links a {
	padding: 9px 14px;
	border: 1px solid var(--je-border);
	border-radius: 12px;
	background: var(--je-surface);
	color: var(--je-text);
	font-size: 0.92rem;
	text-decoration: none;
}

.je-quiz-more__links a:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

@media (max-width: 600px) {
	.je-quiz {
		padding: 14px;
		border-radius: 14px;
	}

	.je-quiz__options {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.je-quiz__opt {
		min-height: 46px;
	}

	.je-quiz__country {
		font-size: 1.3rem;
	}

	.je-quiz-map {
		height: min(52vh, 420px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.je-quiz-ring {
		animation: none;
	}
}

/* Quiz: sharing a result and the challenge from a shared link. */
.je-quiz-share {
	margin: 4px auto 14px;
	padding: 18px 12px 16px;
	max-width: 640px;
	border-radius: 14px;
	background: var(--je-tray-bg);
	text-align: center;
}

.je-quiz-share__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #d8eeee;
	font-size: 1.4rem;
}

.je-quiz-share__title {
	margin: 10px 0 5px;
	color: var(--je-text);
	font: 800 clamp(1.25rem, 5vw, 1.65rem)/1.2 var(--je-font-heading);
}

.je-quiz-share__subtitle {
	margin: 0 0 14px;
	color: var(--je-text-muted);
	font-size: 0.88rem;
}

.je-quiz-share__challenge {
	display: block;
	width: min(100%, 340px);
	min-height: 54px;
	margin: 0 auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 16px;
	background: var(--je-primary);
	color: #fff;
	font: 700 1.05rem var(--je-font-body);
	cursor: pointer;
	box-shadow: 0 3px 8px rgba(31, 42, 51, 0.16);
}

.je-quiz-share__challenge:hover {
	filter: brightness(0.94);
}

.je-quiz-share__challenge:focus-visible {
	outline: 3px solid var(--je-text);
	outline-offset: 3px;
}

.je-quiz-share__options {
	margin: 16px 0 10px;
	color: var(--je-text-muted);
	font-size: 0.8rem;
}

.je-quiz-share__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.je-quiz-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: none;
	border-radius: 999px;
	background: #fff;
	color: var(--je-text);
	font: 600 0.88rem var(--je-font-body);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(31, 42, 51, 0.12);
	transition: transform 0.15s, box-shadow 0.15s;
}

.je-quiz-share__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(31, 42, 51, 0.16);
}

.je-quiz-share__btn--share {
	background: var(--je-primary);
	color: #fff;
}

.je-quiz-share__btn--whatsapp svg {
	color: #25d366;
}

.je-quiz-share__btn--facebook svg {
	color: #1877f2;
}

.je-quiz-share__btn--telegram svg {
	color: #229ed9;
}

.je-quiz-challenge {
	max-width: 820px;
	margin: 0 0 12px;
	padding: 10px 16px;
	border-radius: 12px;
	background: #fff4e3;
	border: 1px solid #f3d3a4;
	color: #7a4a0c;
	font-weight: 600;
}

/* Phones: a grid of icons with small labels, like the phone's own share sheet. */
@media (max-width: 600px) {
	.je-quiz-share__row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px 6px;
	}

	.je-quiz-share__btn {
		flex-direction: column;
		gap: 4px;
		min-width: 0;
		padding: 9px 2px 7px;
		border-radius: 14px;
		font-size: 0.7rem;
	}

	.je-quiz-share__btn svg {
		width: 22px;
		height: 22px;
	}
}

.je-quiz-share__btn--instagram svg {
	color: #e1306c;
}

.je-quiz-share__hint {
	margin: 10px 0 0;
	font-size: 0.85rem;
	color: var(--je-text-muted);
	overflow-wrap: anywhere;
}

/* Quiz: ad column beside the game on wide screens only (300 × 600), well
   clear of the answer buttons, and in view for the whole round. */
.je-quiz-rail {
	display: none;
}

@media (min-width: 1200px) {
	.je-quiz-layout.has-rail {
		display: grid;
		grid-template-columns: minmax(0, 820px) 300px;
		gap: 56px;
		align-items: start;
	}

	.je-quiz-layout.has-rail .je-quiz-rail {
		display: block;
		position: sticky;
		top: 88px;
	}
}

/* The ad inside the quiz text (phones and tablets); wide screens with the
   side column don't show it. */
.je-quiz-about .je-ad--quiz-inline {
	margin: 24px auto;
}

@media (min-width: 1200px) {
	.je-quiz-layout.has-rail .je-ad--quiz-inline {
		display: none;
	}
}

.je-quiz-rail .je-ad {
	width: 300px;
	min-height: 0;
	margin: 0;
}

.je-quiz-rail .je-ad--preview {
	height: 600px;
	text-align: center;
}

/* Passport tabs: Stamps, Achievements, Records. */
.je-passport__tabs {
	display: flex;
	gap: 6px;
	margin-top: 26px;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--je-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.je-passport__tabs::-webkit-scrollbar {
	display: none;
}

.je-passport__tabs [role="tab"] {
	flex: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -4px;
	background: none;
	color: var(--je-text-muted);
	padding: 10px 14px;
	font: 600 1rem var(--je-font-heading);
	cursor: pointer;
}

.je-passport__tabs [role="tab"][aria-selected="true"] {
	color: var(--je-primary);
	border-bottom-color: var(--je-primary);
}

.je-passport__tabs [role="tab"]:focus-visible {
	outline: 2px solid var(--je-primary);
	outline-offset: -2px;
	border-radius: 8px 8px 0 0;
}

.je-passport__tab-count {
	font: 500 0.75rem var(--je-font-body);
	color: var(--je-text-muted);
}

.je-passport__panel[hidden] {
	display: none;
}

.je-passport__panel-intro {
	margin: 18px 0 14px;
	color: var(--je-text-muted);
	font-size: 0.92rem;
}

.je-passport__ach-new {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff4dc;
	box-shadow: inset 0 0 0 1px #f0c46a;
	font-weight: 600;
}

.je-passport__ach-new[hidden] {
	display: none;
}

/* Achievements: icon, goal with progress, and the three medals. */
.je-achs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 12px;
}

.je-ach {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
	background: var(--je-surface);
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.07);
}

.je-ach.is-tier-3 {
	box-shadow: inset 0 0 0 2px #f0c46a, 0 2px 8px rgba(15, 30, 35, 0.07);
}

.je-ach.is-new {
	box-shadow: inset 0 0 0 2px var(--je-accent), 0 2px 8px rgba(15, 30, 35, 0.07);
}

.je-ach__icon {
	flex: none;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1.6rem;
	background: #f1eee7;
	box-shadow: inset 0 0 0 2px #ddd6c7;
}

.je-ach:not([class*="is-tier-"]) .je-ach__icon {
	filter: grayscale(1);
	opacity: 0.55;
}

.je-ach[class*="is-tier-"] .je-ach__icon {
	background: #fff4dc;
	box-shadow: inset 0 0 0 2px #f0c46a;
}

.je-ach__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.je-ach__body strong {
	font-size: 0.95rem;
}

.je-ach__goal {
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.je-ach__bar {
	height: 5px;
	margin-top: 5px;
	border-radius: 999px;
	background: linear-gradient(var(--je-accent), var(--je-accent)) 0 0 / var(--done, 0%) 100% no-repeat, #eee7d8;
}

.je-ach__num {
	font-size: 0.72rem;
	color: var(--je-text-muted);
}

.je-ach__tiers {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 1.05rem;
	line-height: 1.1;
}

.je-ach__medal:not(.is-earned) {
	filter: grayscale(1);
	opacity: 0.3;
}

/* Records: cards of personal bests and totals. */
.je-records {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.je-records__card {
	min-width: 0;
	padding: 16px;
	border-radius: 12px;
	background: var(--je-surface);
	box-shadow: 0 2px 8px rgba(15, 30, 35, 0.07);
}

.je-records__card.is-wide {
	grid-column: 1 / -1;
}

.je-records__card h3 {
	margin: 0 0 10px;
	font-size: 1.05rem;
}

.je-records__list {
	margin: 0;
}

.je-records__list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid #f1ece0;
	font-size: 0.9rem;
}

.je-records__list > div:first-child {
	border-top: 0;
}

.je-records__list dt {
	color: var(--je-text-muted);
}

.je-records__list dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.je-records__list dd a {
	font-weight: 500;
}

.je-records__empty,
.je-records__note {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var(--je-text-muted);
}

.je-records__scroll {
	overflow-x: auto;
}

.je-records__quiz {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}

.je-records__quiz th,
.je-records__quiz td {
	padding: 7px 8px;
	text-align: center;
	white-space: nowrap;
	border-top: 1px solid #f1ece0;
}

.je-records__quiz thead th {
	border-top: 0;
	font-weight: 600;
	color: var(--je-text-muted);
	font-size: 0.78rem;
}

.je-records__quiz tbody th {
	text-align: left;
	font-weight: 600;
}

.je-records__quiz td a {
	font-weight: 600;
	text-decoration: none;
	color: var(--je-text);
}

.je-records__quiz td a:hover {
	color: var(--je-primary);
}

.je-records__quiz .is-perfect {
	color: #1c8a4a;
}

.je-records__quiz small {
	display: block;
	font-size: 0.7rem;
	color: var(--je-text-muted);
}

@media (max-width: 600px) {
	.je-passport__tabs [role="tab"] {
		padding: 9px 10px;
		font-size: 0.92rem;
	}

	.je-achs,
	.je-records {
		grid-template-columns: 1fr;
	}
}

/* A new achievement at the end of a quiz. */
.je-quiz__ach {
	margin: 6px 0 0;
	font-weight: 600;
}

.je-quiz__ach a {
	font-weight: 500;
}

/* Sharing a medal: the small Share button and its window. */
.je-ach-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: #fff;
	color: var(--je-primary);
	font: 600 0.78rem var(--je-font-body);
	vertical-align: middle;
	cursor: pointer;
}

.je-ach-share-btn:hover {
	border-color: var(--je-primary);
}

.je-ach-share-btn svg {
	width: 14px;
	height: 14px;
}

.je-ach__share {
	align-self: flex-start;
	margin-top: 6px;
}

.je-ach.is-shared {
	box-shadow: inset 0 0 0 2px var(--je-primary), 0 2px 8px rgba(15, 30, 35, 0.07);
}

.je-passport__ach-invite {
	margin: 18px 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff4e3;
	border: 1px solid #f3d3a4;
	color: #7a4a0c;
	font-weight: 600;
}

.je-passport__ach-invite[hidden] {
	display: none;
}

.je-ach-share {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 30, 35, 0.55);
}

.je-ach-share__win {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 18px 16px 16px;
	border-radius: 16px;
	background: var(--je-surface);
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.je-ach-share__title {
	margin: 0 30px 12px;
	font-size: 1.2rem;
}

.je-ach-share__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--je-text-muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.je-ach-share__close:hover {
	background: var(--je-tray-bg);
}

.je-ach-share__preview {
	min-height: 120px;
	margin-bottom: 12px;
}

.je-ach-share__preview img {
	display: block;
	height: min(44vh, 420px);
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(15, 30, 35, 0.18);
}

.je-ach-share__box {
	margin: 0;
	max-width: none;
}

/* Inviting friends: the link in the shop, and the message when coins arrive. */
.je-invite__row {
	display: flex;
	gap: 8px;
	margin: 10px 0 6px;
}

.je-invite__link {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--je-border);
	border-radius: 10px;
	background: #fff;
	color: var(--je-text);
	font: 500 0.88rem var(--je-font-body);
}

.je-invite__row .je-btn {
	flex: none;
}

.je-invite__note {
	margin: 0;
	font-size: 0.82rem;
	color: var(--je-text-muted);
}

.je-toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 10001;
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 12px 18px;
	border-radius: 14px;
	background: #1f2a33;
	color: #fff;
	font: 600 0.92rem var(--je-font-body);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transform: translateX(-50%);
	animation: je-toast-in 0.3s ease;
	transition: opacity 0.4s;
}

.je-toast.is-gone {
	opacity: 0;
}

@keyframes je-toast-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
}

@media (max-width: 480px) {
	.je-invite__row {
		flex-direction: column;
	}
}