/* Pokemon NNN 2026 — countdown strip under the site header + the /pokemon-nnn/ roadmap (town-map stage).
   Needs nnn-tokens.css (loaded first). Day = light theme, night = html[data-jg-theme="dark"]; every
   colour comes from a --nnn-* token or is redeclared for night below. Pixel font (PKMN) only for
   timers, labels and short titles: it has no " $ @ + … – — · glyphs. */

/* ================================================================ sprites + motion */

@keyframes jg-nnn-wobble {
	0%, 58%, 100% { transform: rotate(0); }
	64% { transform: rotate(-16deg); }
	70% { transform: rotate(13deg); }
	76% { transform: rotate(-8deg); }
	82% { transform: rotate(5deg); }
	88% { transform: rotate(0); }
}
@keyframes jg-nnn-bounce {
	0%, 100% { transform: translateY(0); }
	45% { transform: translateY(-10px); }
	60% { transform: translateY(0); }
	70% { transform: translateY(-3px); }
}
@keyframes jg-nnn-roll {
	0% { transform: translateX(-80px) rotate(0); }
	100% { transform: translateX(calc(100vw + 80px)) rotate(900deg); }
}
@keyframes jg-nnn-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4px); }
}
@keyframes jg-nnn-blink {
	50% { opacity: .2; }
}
@keyframes jg-nnn-halo {
	0%, 100% { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 0 0 3px var(--nnn-yellow); }
	50% { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 0 0 3px var(--nnn-yellow), 0 0 18px 6px var(--nnn-yellow); }
}
@keyframes jg-nnn-redhalo {
	0%, 100% { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 0 0 3px var(--nnn-red); }
	50% { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 0 0 3px var(--nnn-red), 0 0 20px 6px var(--nnn-red); }
}
@keyframes jg-nnn-bob {
	0%, 100% { transform: translateY(-50%); }
	50% { transform: translateY(calc(-50% - 4px)); }
}
@keyframes jg-nnn-flash {
	0%, 100% { filter: none; }
	50% { filter: brightness(1.35) drop-shadow(0 0 10px var(--nnn-yellow)); }
}

.jg-nnn-sprite,
.jg-nnn-banner-ball,
.jg-nnn-rm-balls i {
	background: url(img/sprites/pokeball-pixel.png) center / 32px 32px no-repeat;
	image-rendering: pixelated;
}

/* ================================================================ countdown strip */

.jg-nnn-banner {
	--bn-bg1: var(--nnn-blue2);
	--bn-bg2: var(--nnn-blue);
	--bn-line: var(--nnn-frame);
	--bn-text: #FFFFFF;
	--bn-accent: var(--nnn-yellow);
	position: relative;
	display: block;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	background: linear-gradient(90deg, var(--bn-bg1) 0%, var(--bn-bg2) 50%, var(--bn-bg1) 100%);
	border-bottom: 3px solid var(--bn-line);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .22);
	color: var(--bn-text) !important;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none !important;
}
html[data-jg-theme="dark"] .jg-nnn-banner {
	--bn-bg1: var(--nnn-bg2);
	--bn-bg2: var(--nnn-card2);
	--bn-line: var(--nnn-yellow);
	--bn-text: #FFFFFF;
	--bn-accent: var(--nnn-yellow);
}
.jg-nnn-banner.is-live,
html[data-jg-theme="dark"] .jg-nnn-banner.is-live {
	--bn-bg1: var(--nnn-red2);
	--bn-bg2: var(--nnn-red);
	--bn-line: var(--nnn-frame);
	--bn-accent: #FFFFFF;
}
/* scanlines: the GBA screen feel without an image */
.jg-nnn-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 4px);
}
.jg-nnn-banner[hidden] { display: none !important; }
.jg-nnn-banner [hidden] { display: none !important; }

.jg-nnn-banner-in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 56px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 8px 24px;
}
.jg-nnn-banner-ball {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	transform-origin: 50% 88%;
	animation: jg-nnn-wobble 2.8s ease-in-out infinite;
}
.jg-nnn-banner.is-live .jg-nnn-banner-ball,
.jg-nnn-banner.is-today .jg-nnn-banner-ball { animation: jg-nnn-bounce 1.1s ease-in-out infinite; }
.jg-nnn-banner-text {
	min-width: 0;
	text-align: center;
	font-weight: 700;
	letter-spacing: .01em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.jg-nnn-banner-timer {
	display: inline-block;
	/* no right padding + the last glyph's letter-spacing taken back: the tail's "." sits flush */
	padding: 0 0 0 2px;
	margin-right: -1px;
	font-family: var(--nnn-font-pixel);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	color: var(--bn-accent);
	text-shadow: 2px 2px 0 var(--nnn-frame);
	white-space: nowrap;
	vertical-align: -1px;
}
.jg-nnn-banner-tail { color: var(--bn-accent); }
.jg-nnn-banner.is-live .jg-nnn-banner-lead::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 2px;
	background: currentColor;
	vertical-align: 0;
	animation: jg-nnn-blink 1s steps(2, start) infinite;
}
.jg-nnn-banner-chev {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 10px;
	border-color: transparent transparent transparent var(--bn-accent);
	filter: drop-shadow(2px 2px 0 var(--nnn-frame));
	animation: jg-nnn-nudge 1s steps(2, start) infinite;
}
.jg-nnn-banner:hover .jg-nnn-banner-text { text-decoration: underline; text-underline-offset: 3px; }
.jg-nnn-banner:focus-visible { outline: 3px solid var(--bn-accent); outline-offset: -5px; }

@media (max-width: 640px) {
	.jg-nnn-banner { font-size: 13px; }
	.jg-nnn-banner-in { gap: 10px; min-height: 52px; padding: 8px 16px; }
	.jg-nnn-banner-timer { font-size: 16px; }
	.jg-nnn-banner-text { text-align: left; }
}

/* ================================================================ countdown card (roadmap hero row, compact) */

/* the kicker pill on the left, then the lead, the timer and the when-line stacked beside it */
.jg-nnn-cd {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0 12px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 480px;
	padding: 7px 14px 8px 10px;
	text-align: left;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 4px 0 var(--nnn-frame);
}
.jg-nnn-cd [hidden],
.jg-nnn-cd-go[hidden] { display: none !important; }
.jg-nnn-cd-kicker {
	grid-row: 1 / span 3;
	align-self: center;
	display: inline-block;
	padding: 3px 7px 2px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-red);
	color: #FFFFFF;
	font-size: 10px;
	letter-spacing: 1px;
	white-space: nowrap;
}
.jg-nnn-cd-kicker:empty { display: none; }
.jg-nnn-cd.is-live .jg-nnn-cd-kicker { animation: jg-nnn-blink 1.2s steps(2, start) infinite; }
.jg-nnn-cd-line,
.jg-nnn-cd-when,
.jg-nnn-cd-go { grid-column: 2; }
.jg-nnn-cd-line {
	min-width: 0;
	color: var(--nnn-text);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
}
.jg-nnn-cd-timer {
	display: block;
	margin: 3px 0 2px;
	font-family: var(--nnn-font-pixel);
	font-size: clamp(18px, 1.6vw, 23px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 1px;
	color: var(--nnn-blue2);
	text-shadow: 2px 2px 0 var(--nnn-yellow);
	white-space: nowrap;
}
html[data-jg-theme="dark"] .jg-nnn-cd-timer {
	color: var(--nnn-yellow);
	text-shadow: 2px 2px 0 var(--nnn-frame);
}
.jg-nnn-cd-when {
	color: var(--nnn-muted);
	font-size: 12px;
	line-height: 1.3;
}
.jg-nnn-cd-go { justify-self: start; margin-top: 5px; padding: 6px 11px; font-size: 13px; }
.jg-nnn-rm .jg-nnn-cd-go,
.jg-nnn-rm .jg-nnn-cd-go:hover { color: #FFFFFF !important; text-decoration: none !important; }

/* ================================================================ roadmap page shell */

body.jg-nnn-roadmap-page .site-main,
body.jg-nnn-roadmap-page #content.site-main {
	max-width: none !important;
	width: 100%;
	margin: 0;
	padding: 0 !important;
}
body.jg-nnn-roadmap-page .page-content { margin: 0; }

.jg-nnn-rm {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-bottom: 48px;
	background: var(--nnn-bg);
	color: var(--nnn-text);
	font-size: 15px;
	line-height: 1.5;
}
.jg-nnn-rm-off { padding: 40px 16px; text-align: center; }
.jg-nnn-rm .jg-nnn-rm-h2 {
	margin: 0;
	color: var(--nnn-text);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: 1.2;
}

/* ---------------- hero: ONE slim row above the map (lockup left, compact countdown right) */

.jg-nnn-rm-hero {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
	border-bottom: 3px solid var(--nnn-frame);
	background: repeating-linear-gradient(180deg, var(--nnn-bg) 0 10px, var(--nnn-bg2) 10px 13px);
}
.jg-nnn-rm-hero-in {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}
.jg-nnn-rm-balls {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.jg-nnn-rm-balls i {
	position: absolute;
	left: 0;
	width: 32px;
	height: 32px;
	opacity: .55;
}
.jg-nnn-rm-balls i:nth-child(1) { top: 10px; left: 1.2%; opacity: .35; animation: jg-nnn-bounce 2.4s ease-in-out infinite; }
.jg-nnn-rm-balls i:nth-child(2) { top: 12px; right: 1.6%; left: auto; opacity: .4; transform-origin: 50% 88%; animation: jg-nnn-wobble 3.4s ease-in-out infinite; }

/* the title at ~60 % of the old hero size, the kicker + tally stacked beside it */
.jg-nnn-rm-lockup {
	display: flex;
	align-items: center;
	gap: 4px 18px;
	min-width: 0;
}
.jg-nnn-rm-meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding-bottom: 6px;
}
.jg-nnn-rm .jg-nnn-rm-kicker {
	color: var(--nnn-red);
	font-size: 11px;
	letter-spacing: 2px;
	line-height: 1.2;
}
html[data-jg-theme="dark"] .jg-nnn-rm .jg-nnn-rm-kicker { color: var(--nnn-yellow); }
.jg-nnn-rm .jg-nnn-rm-title {
	flex: none;
	margin: 0;
	padding: 0 0 .32em;
	font-family: var(--nnn-font-logo);
	font-size: clamp(26px, 2.76vw, 41px);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: .02em;
	color: var(--nnn-blue2);
	text-transform: none;
}
/* Pokemon-logo lockup: thick blue rim (stroke on the element) under a yellow→orange face (::after) */
.jg-nnn-logo {
	position: relative;
	display: inline-block;
	font-family: var(--nnn-font-logo);
	color: var(--nnn-blue2);
	-webkit-text-stroke: .13em var(--nnn-blue2);
	text-shadow: 0 .07em 0 var(--nnn-frame);
	white-space: nowrap;
}
.jg-nnn-logo::after {
	content: attr(data-text);
	position: absolute;
	/* PokemonSolid's glyphs hang below the line box: stretch the face's box so the gradient covers them */
	inset: 0 0 -.45em 0;
	-webkit-text-stroke: 0;
	text-shadow: none;
	color: var(--nnn-yellow);
	background: linear-gradient(180deg, var(--nnn-yellow) 28%, var(--nnn-orange) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.jg-nnn-logo.is-nnn { margin-left: .12em; }
.jg-nnn-rm .jg-nnn-rm-sub {
	margin: 0;
	color: var(--nnn-text);
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1.2;
}
.jg-nnn-rm-sub span { white-space: nowrap; }
.jg-nnn-rm-sub i {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 7px;
	background: var(--nnn-red);
	vertical-align: 2px;
}
/* the intro sentence, under the map */
.jg-nnn-rm-intro { padding: 16px 24px 0; }
.jg-nnn-rm .jg-nnn-rm-dek {
	max-width: 760px;
	margin: 0 auto;
	color: var(--nnn-muted);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

/* ---------------- small icons (jg_nnn_rm_icon) */

.jg-nnn-ico-svg { display: block; }
.jg-nnn-ico-live {
	display: inline-block;
	padding: 6px 7px 5px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-red);
	color: #FFFFFF;
	font-family: var(--nnn-font-pixel);
	font-size: 11px;
	line-height: 1;
}
.jg-nnn-ico-live::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	background: currentColor;
	animation: jg-nnn-blink 1s steps(2, start) infinite;
}

/* ---------------- route map: the town-map stage (nnn-roadmap.js) */

.jg-nnn-map {
	padding: 12px 24px 0;
	scroll-margin-top: 70px;
}
.jg-nnn-map [hidden] { display: none !important; }
.jg-nnn-map-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 10px;
}
.jg-nnn-rm .jg-nnn-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jg-nnn-map-legend li { margin: 0; padding: 0; list-style: none; }
.jg-nnn-map-legend li::before { content: none; }
.jg-nnn-rm .jg-nnn-map-leg,
.jg-nnn-rm .jg-nnn-map-leg:hover,
.jg-nnn-rm .jg-nnn-map-leg:focus {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 30px;
	margin: 0;
	padding: 4px 10px 3px 8px;
	border: 2px solid var(--nnn-frame);
	border-radius: 6px;
	background: var(--nnn-card);
	box-shadow: inset 0 0 0 1px var(--nnn-frame2), 0 2px 0 var(--nnn-frame);
	color: var(--nnn-text);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}
.jg-nnn-rm .jg-nnn-map-leg:hover { background: var(--nnn-card2); }
.jg-nnn-rm .jg-nnn-map-leg:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--nnn-frame2), 0 0 0 var(--nnn-frame); }
.jg-nnn-rm .jg-nnn-map-leg:focus-visible { outline: 3px solid var(--nnn-blue); outline-offset: 2px; }
/* the swatch is a short footstep trail in the path's colour */
.jg-nnn-map-leg i {
	flex: 0 0 22px;
	width: 22px;
	height: 8px;
	background: radial-gradient(circle, var(--lcx) 2.2px, #1E1E24 2.3px, #1E1E24 3.3px, transparent 3.5px) 0 50% / 7.4px 8px repeat-x;
}
.jg-nnn-map-leg.lane-finale { --lc: var(--nnn-gold); }

.jg-nnn-map-ctl {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.jg-nnn-rm .jg-nnn-map-next,
.jg-nnn-rm .jg-nnn-map-next:hover,
.jg-nnn-rm .jg-nnn-map-next:focus {
	min-height: 34px;
	margin: 0;
	padding: 8px 14px 7px;
	border: 2px solid var(--nnn-frame);
	border-radius: 6px;
	background: var(--nnn-red);
	color: #FFFFFF;
	font-size: 12px;
	text-transform: none;
}
.jg-nnn-rm .jg-nnn-map-next:focus-visible { outline: 3px solid var(--nnn-blue); outline-offset: 2px; }
.jg-nnn-map-zoom {
	display: inline-flex;
	border: 2px solid var(--nnn-frame);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 3px 0 var(--nnn-frame);
}
.jg-nnn-rm .jg-nnn-map-zoom button,
.jg-nnn-rm .jg-nnn-map-zoom button:hover,
.jg-nnn-rm .jg-nnn-map-zoom button:focus {
	min-width: 40px;
	min-height: 32px;
	margin: 0;
	padding: 6px 8px 5px;
	border: 0;
	border-left: 2px solid var(--nnn-frame);
	border-radius: 0;
	background: var(--nnn-card);
	box-shadow: inset 0 0 0 1px var(--nnn-frame2);
	color: var(--nnn-text);
	font-family: var(--nnn-font-pixel);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}
.jg-nnn-rm .jg-nnn-map-zoom button:first-child { border-left: 0; }
.jg-nnn-rm .jg-nnn-map-zoom button:hover { background: var(--nnn-card2); }
.jg-nnn-rm .jg-nnn-map-zoom button[aria-pressed="true"] { background: var(--nnn-yellow); color: #2A2A2A; }
.jg-nnn-rm .jg-nnn-map-zoom button:focus-visible { outline: 3px solid var(--nnn-blue); outline-offset: -3px; }

/* the stage: a Gen-3 window onto the world */
.jg-nnn-map-stage {
	position: relative;
	height: clamp(480px, 70vh, 900px);
	overflow: hidden;
	border: 3px solid var(--nnn-frame);
	border-radius: var(--nnn-radius);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 6px 0 var(--nnn-frame);
	background: #70C8A0; /* the wallpaper's own grass, around a world smaller than the stage */
	/* idle: a vertical swipe scrolls the page (the script takes sideways drags + pinches); engaged: all
	   touch input is the map's. Mice are unaffected. */
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	contain: layout paint;
	outline: none;
}
/* engaged: nothing chains on to the page. Only then: on the (overflow: hidden) stage, contain would also
   stop an idle wheel from scrolling the page. */
.jg-nnn-map-stage.is-engaged { touch-action: none; overscroll-behavior: contain; }
/* engaged = taken by a click / tap / focus: a red window frame; keyboard focus = the blue ring */
.jg-nnn-map-stage.is-engaged { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 6px 0 var(--nnn-frame), 0 0 0 3px var(--nnn-red); }
.jg-nnn-map-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 6px 0 var(--nnn-frame), 0 0 0 4px var(--nnn-blue); }
.jg-nnn-map-stage.is-dragging { cursor: grabbing; }
.jg-nnn-map-stage.is-dragging .jg-nnn-stop { pointer-events: none; }
.jg-nnn-map-stage.is-js:not(.is-ready) .jg-nnn-map-world { visibility: hidden; }
/* no script: a plain scrollable picture */
.jg-nnn-map-stage:not(.is-js) { overflow: auto; touch-action: auto; cursor: auto; }
.jg-nnn-map-stage:not(.is-js) .jg-nnn-map-hint { display: none; }
.jg-nnn-map-stage img { -webkit-user-drag: none; }

.jg-nnn-map-world {
	--z: 3;
	--mw: 1920;
	--mh: 1080;
	--tw: 50;        /* tile, in wallpaper px: 150x84 at 3x */
	--th: 28.125;
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--mw) * var(--z) * 1px);
	height: calc(var(--mh) * var(--z) * 1px);
	background: url(img/map/pokemon-map.png) 0 0 / 100% 100% no-repeat;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform-origin: 0 0;
	will-change: transform;
}
.jg-nnn-map-stage:not(.is-js) .jg-nnn-map-world { position: relative; }
/* night: the town after dark (under the trails and tiles) */
.jg-nnn-map-world::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: transparent;
}
.jg-nnn-map-vignette {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	border-radius: 5px;
	box-shadow: inset 0 0 36px rgba(32, 32, 32, .22);
}

/* trails: dotted footsteps in the path's colour, solid up to the reached stops, faded beyond */
.jg-nnn-map-svg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.jg-nnn-seg-glow,
.jg-nnn-seg-under,
.jg-nnn-seg-dots {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.jg-nnn-trail,
.jg-nnn-map-leg,
.jg-nnn-stop { --lcx: var(--lc, var(--nnn-gold)); }
.jg-nnn-seg-glow { stroke: var(--lcx); stroke-width: 6; opacity: 0; }
.jg-nnn-seg-under { stroke: #1E1E24; stroke-width: 4; stroke-dasharray: 0 6.6; }
.jg-nnn-seg-dots { stroke: var(--lcx); stroke-width: 3; stroke-dasharray: 0 6.6; }
.jg-nnn-seg { opacity: .72; }
.jg-nnn-seg.is-done { opacity: 1; }
.jg-nnn-seg.is-done .jg-nnn-seg-glow { opacity: .4; }
.jg-nnn-trail.lane-finale { --lc: var(--nnn-gold); }
.jg-nnn-trail.lane-finale .jg-nnn-seg { opacity: .85; }
.jg-nnn-trail.lane-finale .jg-nnn-seg.is-done { opacity: 1; }
.jg-nnn-trail.lane-finale .jg-nnn-seg-under { stroke-width: 5; stroke-dasharray: 0 7.2; }
.jg-nnn-trail.lane-finale .jg-nnn-seg-dots { stroke-width: 3.4; stroke-dasharray: 0 7.2; }
.jg-nnn-stems line { stroke: #1E1E24; stroke-width: .7; stroke-dasharray: 1.4 1; opacity: .75; }

/* stops: a pokeball pin on the road + the tile beside it, both in wallpaper px x zoom */
.jg-nnn-stop {
	position: absolute;
	z-index: 2;
	left: calc(var(--x) * var(--z) * 1px);
	top: calc(var(--y) * var(--z) * 1px);
	width: 0;
	height: 0;
	color: var(--nnn-text);
	text-decoration: none !important;
}
.jg-nnn-rm a.jg-nnn-stop,
.jg-nnn-rm a.jg-nnn-stop:hover,
.jg-nnn-rm a.jg-nnn-stop:focus { color: var(--nnn-text); text-decoration: none !important; outline: none; }
.jg-nnn-stop:hover,
.jg-nnn-stop:focus-within,
.jg-nnn-stop.is-next,
.jg-nnn-stop.is-live { z-index: 3; }
.jg-nnn-stop-pin {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--z) * 6px);
	height: calc(var(--z) * 6px);
	background: url(img/sprites/pokeball-pixel.png) center / 100% 100% no-repeat;
	image-rendering: pixelated;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
	transform: translate(-50%, -50%);
}
.jg-nnn-stop.is-upcoming .jg-nnn-stop-pin,
.jg-nnn-stop.is-today .jg-nnn-stop-pin { filter: grayscale(1) brightness(1.15) drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
/* which path a stop belongs to: a ring in the path's colour round the pin (outside its grey filter) and a
   stripe along the tile's bottom edge; gold on the Championship trail */
.jg-nnn-stop::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: calc(var(--z) * 6px + 7px);
	height: calc(var(--z) * 6px + 7px);
	border: 3px solid var(--lcx);
	border-radius: 50%;
	box-shadow: 0 0 0 1px #1E1E24, inset 0 0 0 1px #1E1E24;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.jg-nnn-stop-card::after {
	content: '';
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	z-index: 2;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--lcx);
	box-shadow: 0 -1px 0 var(--nnn-frame2); /* keeps a dark path colour (route 4) apart from the dark tile */
	pointer-events: none;
}
.jg-nnn-stop-card {
	position: absolute;
	left: calc((var(--tx) - var(--x)) * var(--z) * 1px);
	top: calc((var(--ty) - var(--y)) * var(--z) * 1px);
	box-sizing: border-box;
	width: calc(var(--tw) * var(--z) * 1px);
	height: calc(var(--th) * var(--z) * 1px);
	border: 2px solid var(--nnn-frame);
	border-radius: 6px;
	background: var(--nnn-frame);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 3px 0 rgba(0, 0, 0, .45);
	transform: translate(-50%, -50%);
	transition: transform .15s ease;
	container-type: inline-size;
}
.jg-nnn-stop.is-champion .jg-nnn-stop-card {
	width: calc(var(--tw) * 1.2364 * var(--z) * 1px);
	height: calc(var(--th) * 1.2364 * var(--z) * 1px);
}
.jg-nnn-stop.is-gold .jg-nnn-stop-card { border-color: #5C4300; box-shadow: inset 0 0 0 2px var(--nnn-gold), 0 3px 0 rgba(0, 0, 0, .45); }
.jg-nnn-rm a.jg-nnn-stop[href]:hover .jg-nnn-stop-card { transform: translate(-50%, calc(-50% - 3px)); }
.jg-nnn-rm a.jg-nnn-stop[href]:focus-visible .jg-nnn-stop-card { outline: 3px solid var(--nnn-blue); outline-offset: 2px; }
.jg-nnn-rm a.jg-nnn-stop:not([href]) { cursor: inherit; }
.jg-nnn-stop-media {
	position: absolute;
	inset: 2px;
	overflow: hidden;
	border-radius: 3px;
	background: radial-gradient(circle at 50% 46%, var(--g2), var(--g1));
}
.jg-nnn-stop.has-thumb .jg-nnn-stop-media { background: var(--nnn-frame); }
.jg-nnn-stop-img,
.jg-nnn-stop-sil {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.jg-nnn-stop-q {
	position: absolute;
	top: 50%;
	right: 7cqw;
	color: var(--nnn-yellow);
	font-family: var(--nnn-font-pixel);
	font-size: clamp(14px, 19cqw, 40px);
	line-height: 1;
	text-shadow: 2px 2px 0 var(--nnn-frame), -1px -1px 0 var(--nnn-frame), 1px -1px 0 var(--nnn-frame), -1px 1px 0 var(--nnn-frame);
	transform: translateY(-50%);
	animation: jg-nnn-bob 2.2s ease-in-out infinite;
}
.jg-nnn-stop-date,
.jg-nnn-stop-tier {
	position: absolute;
	top: 3cqw;
	box-sizing: border-box;
	max-width: 70%;
	padding: .3em .45em .2em;
	border: 1.5px solid var(--nnn-frame);
	border-radius: 3px;
	line-height: 1;
	white-space: nowrap;
}
.jg-nnn-stop-date {
	left: 3cqw;
	background: var(--nnn-card);
	color: var(--nnn-text);
	font-family: var(--nnn-font-pixel);
	font-size: clamp(8px, 6cqw, 13px);
	letter-spacing: .02em;
	text-transform: uppercase;
}
.jg-nnn-stop-date .d-short { display: none; }
.jg-nnn-stop-tier {
	right: 3cqw;
	display: inline-flex;
	align-items: center;
	gap: .25em;
	max-width: 40%;
	font-size: clamp(8px, 6cqw, 13px);
	font-weight: 800;
}
.jg-nnn-stop-tier svg { flex: none; width: .85em; height: 1em; }
.jg-nnn-stop-tier.tier-ea { background: var(--nnn-blue); color: #FFFFFF; }
.jg-nnn-stop-tier.tier-exclusive { background: var(--nnn-gold); color: #2A2A2A; }
.jg-nnn-stop-tier.tier-live { background: var(--nnn-red); color: #FFFFFF; }
/* a stream's "Watch free" chip is too long to share the top row with its show day: it sits under it */
.jg-nnn-stop.is-stream .jg-nnn-stop-tier {
	left: 3cqw;
	right: auto;
	top: calc(4cqw + 1.5 * clamp(8px, 6cqw, 13px) + 3px);
	max-width: 70%;
}
.jg-nnn-stop-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2cqw;
	/* the bottom clears the path stripe */
	padding: 5cqw 3.5cqw calc(2.5cqw + 3px);
	background: linear-gradient(180deg, rgba(8, 8, 16, 0), rgba(8, 8, 16, .82) 42%);
	color: #FFFFFF;
}
.jg-nnn-stop-txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.jg-nnn-stop-kick,
.jg-nnn-stop-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 1px 1px 0 #000000;
}
.jg-nnn-stop-kick {
	color: var(--nnn-yellow);
	font-size: clamp(7px, 5.2cqw, 11px);
	font-weight: 800;
	line-height: 1.15;
}
.jg-nnn-stop-name {
	color: #FFFFFF;
	font-size: clamp(8px, 7cqw, 15px);
	font-weight: 800;
	line-height: 1.15;
}
.jg-nnn-stop-kick.is-pixel,
.jg-nnn-stop-name.is-pixel {
	font-family: var(--nnn-font-pixel);
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}
/* a stream's US-Central + UTC time ("6 PM CST · 00:00 UTC"), only on tiles big enough (3x and up) */
.jg-nnn-stop-time {
	display: none;
	overflow: hidden;
	color: #FFFFFF;
	font-size: clamp(7px, 5cqw, 11px);
	font-weight: 700;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 1px 1px 0 #000000;
	opacity: .9;
}
@container (min-width: 140px) {
	.jg-nnn-stop-time { display: block; }
}
.jg-nnn-stop-kick.k-tag { display: none; }
.jg-nnn-stop.is-today .k-def,
.jg-nnn-stop.is-live .k-def,
.jg-nnn-stop.is-done .k-def { display: none; }
.jg-nnn-stop.is-today .t-today,
.jg-nnn-stop.is-today.is-stale .t-soon,
.jg-nnn-stop.is-live .t-live,
.jg-nnn-stop.is-done .t-replay { display: block; }
.jg-nnn-stop.is-today.is-stale .t-today { display: none; }
.jg-nnn-stop.is-today .t-today { color: var(--nnn-orange); }
.jg-nnn-stop.is-live .t-live { color: #FF8A7A; animation: jg-nnn-blink 1.2s steps(2, start) infinite; }
.jg-nnn-stop-badge,
.jg-nnn-stop-crown .jg-nnn-ico-svg {
	flex: none;
	width: clamp(14px, 15cqw, 30px);
	height: clamp(14px, 15cqw, 30px);
	image-rendering: pixelated;
	filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .6));
}
.jg-nnn-stop-crown { display: block; flex: none; }
.jg-nnn-stop.has-thumb .jg-nnn-stop-badge { display: none; }

/* small tiles (phone, or zoomed out): short date, stream tiles drop the tier chip */
@container (max-width: 132px) {
	.jg-nnn-stop-date .d-long { display: none; }
	.jg-nnn-stop-date .d-short { display: inline; }
	.jg-nnn-stop.is-stream .jg-nnn-stop-tier:not(.is-locked) { display: none; }
	.jg-nnn-stop-badge,
	.jg-nnn-stop-crown { display: none; }
}

/* NEXT pulse + flag, LIVE halo */
.jg-nnn-stop.is-next .jg-nnn-stop-card { animation: jg-nnn-halo 1.6s ease-in-out infinite; }
.jg-nnn-stop.is-live .jg-nnn-stop-card { animation: jg-nnn-redhalo 1.4s ease-in-out infinite; }
.jg-nnn-stop.is-next .jg-nnn-stop-card::before,
.jg-nnn-stop.is-live .jg-nnn-stop-card::before {
	content: 'NEXT';
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
	padding: 3px 7px 2px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-red);
	color: #FFFFFF;
	font-family: var(--nnn-font-pixel);
	font-size: max(8px, calc(var(--z) * 3px));
	line-height: 1.2;
	white-space: nowrap;
	transform: translate(-50%, -70%);
	animation: jg-nnn-flag2 1.2s ease-in-out infinite;
}
.jg-nnn-stop.is-live .jg-nnn-stop-card::before { content: 'LIVE'; }
@keyframes jg-nnn-flag2 {
	0%, 100% { transform: translate(-50%, -70%) scale(1); }
	50% { transform: translate(-50%, -70%) scale(1.12); }
}
.jg-nnn-stop.is-flash .jg-nnn-stop-card { animation: jg-nnn-flash .45s ease-in-out 4; }

/* the hint: idle = how to take the map (pulses when a wheel scrolls past it); engaged = how to move,
   until the first move */
.jg-nnn-map-hint {
	position: absolute;
	left: 50%;
	top: 12px;
	z-index: 5;
	margin: 0;
	padding: 6px 12px;
	border: 2px solid var(--nnn-frame);
	border-radius: 6px;
	background: var(--nnn-card);
	box-shadow: inset 0 0 0 1px var(--nnn-frame2), 0 3px 0 var(--nnn-frame);
	color: var(--nnn-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity .4s ease;
}
.jg-nnn-map-stage.is-engaged.is-touched .jg-nnn-map-hint { opacity: 0; }
.jg-nnn-map-stage.is-nudge .jg-nnn-map-hint { animation: jg-nnn-hintpulse .6s ease-in-out 2; }
@keyframes jg-nnn-hintpulse {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50% { transform: translateX(-50%) scale(1.1); }
}
.jg-nnn-map-hint > span { display: none; }
.jg-nnn-map-stage:not(.is-engaged) .jg-nnn-map-hint .h-mouse.h-idle,
.jg-nnn-map-stage.is-engaged .jg-nnn-map-hint .h-mouse.h-on { display: inline; }
@media (hover: none) and (pointer: coarse) {
	.jg-nnn-map-stage:not(.is-engaged) .jg-nnn-map-hint .h-mouse.h-idle,
	.jg-nnn-map-stage.is-engaged .jg-nnn-map-hint .h-mouse.h-on { display: none; }
	.jg-nnn-map-stage:not(.is-engaged) .jg-nnn-map-hint .h-touch.h-idle,
	.jg-nnn-map-stage.is-engaged .jg-nnn-map-hint .h-touch.h-on { display: inline; }
}
/* touch screens: the map never fills the screen, so there is always page left to swipe on */
@media (pointer: coarse) {
	.jg-nnn-map-stage {
		height: min(clamp(420px, 62vh, 900px), calc(100vh - 140px));
		height: min(clamp(420px, 62svh, 900px), calc(100svh - 140px));
	}
	.jg-nnn-map-stage:not(.is-engaged) .jg-nnn-map-hint { padding: 4px 10px; font-size: 12px; }
}

/* ================================================================ responsive */

@media (max-width: 1360px) {
	.jg-nnn-rm-balls { display: none; }
}
@media (max-width: 1100px) {
	/* the tally goes under the title */
	.jg-nnn-rm-lockup { flex-direction: column; align-items: flex-start; }
	.jg-nnn-rm-meta { padding-bottom: 0; }
}
@media (max-width: 900px) {
	.jg-nnn-map-ctl { margin-left: 0; }
}
@media (max-width: 760px) {
	/* lockup, then the countdown full width: still two short rows */
	.jg-nnn-rm-hero-in { flex-direction: column; align-items: stretch; gap: 8px; }
	.jg-nnn-cd { max-width: none; }
}
@media (max-width: 640px) {
	.jg-nnn-rm-hero { padding: 8px 0 9px; }
	.jg-nnn-rm-hero-in { gap: 6px; padding: 0 16px; }
	/* title + kicker on one line, the tally under them */
	.jg-nnn-rm-lockup { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
	.jg-nnn-rm-meta { display: contents; }
	.jg-nnn-rm .jg-nnn-rm-title { padding-bottom: .22em; font-size: 26px; }
	.jg-nnn-rm .jg-nnn-rm-kicker { font-size: 9px; letter-spacing: 1px; }
	.jg-nnn-rm .jg-nnn-rm-sub { flex-basis: 100%; margin-top: -2px; font-size: 9px; letter-spacing: .5px; }
	.jg-nnn-rm-sub i { width: 4px; height: 4px; margin: 0 5px; vertical-align: 1px; }
	.jg-nnn-cd { padding: 5px 10px 6px 8px; gap: 0 10px; }
	.jg-nnn-cd-kicker { grid-row: 1; }
	.jg-nnn-cd-when,
	.jg-nnn-cd-go { grid-column: 1 / -1; }
	.jg-nnn-cd-line { font-size: 12px; }
	.jg-nnn-cd-timer { margin: 2px 0 1px; font-size: 18px; }
	.jg-nnn-cd-when { font-size: 11px; }
	.jg-nnn-rm-intro { padding: 14px 16px 0; }
	.jg-nnn-rm .jg-nnn-rm-dek { font-size: 14px; }
	.jg-nnn-map { padding: 8px 16px 0; }
	.jg-nnn-map-bar { gap: 6px; margin-bottom: 8px; }
	/* the heading stays for screen readers; the controls + legend are the map's own header here */
	.jg-nnn-rm .jg-nnn-map .jg-nnn-rm-h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.jg-nnn-rm .jg-nnn-map-legend {
		order: 3;
		flex-wrap: nowrap;
		width: 100%;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.jg-nnn-rm .jg-nnn-map-legend::-webkit-scrollbar { display: none; }
	/* the edge that has more chips fades out (nnn-roadmap.js toggles has-more-l / has-more-r) */
	.jg-nnn-rm .jg-nnn-map-legend.has-more-r {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	}
	.jg-nnn-rm .jg-nnn-map-legend.has-more-l {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
		mask-image: linear-gradient(90deg, transparent, #000 40px);
	}
	.jg-nnn-rm .jg-nnn-map-legend.has-more-l.has-more-r {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	}
	.jg-nnn-map-legend li { flex: none; }
	.jg-nnn-rm .jg-nnn-map-leg,
	.jg-nnn-rm .jg-nnn-map-leg:hover,
	.jg-nnn-rm .jg-nnn-map-leg:focus { min-height: 26px; padding: 3px 8px 2px 6px; font-size: 10px; }
	.jg-nnn-map-leg i { flex-basis: 16px; width: 16px; }
	.jg-nnn-map-ctl { width: 100%; margin-left: 0; justify-content: space-between; gap: 8px; }
	.jg-nnn-rm .jg-nnn-map-next,
	.jg-nnn-rm .jg-nnn-map-next:hover,
	.jg-nnn-rm .jg-nnn-map-next:focus { min-height: 30px; padding: 6px 10px 5px; font-size: 11px; }
	.jg-nnn-rm .jg-nnn-map-zoom button,
	.jg-nnn-rm .jg-nnn-map-zoom button:hover,
	.jg-nnn-rm .jg-nnn-map-zoom button:focus { min-width: 34px; min-height: 28px; font-size: 11px; }
	.jg-nnn-map-world { --tw: 55; --th: 30.9375; } /* 110x62 at 2x */
	.jg-nnn-map-hint { font-size: 12px; top: 10px; }
}

/* ================================================================ night touches */

html[data-jg-theme="dark"] .jg-nnn-rm-hero {
	background: repeating-linear-gradient(180deg, var(--nnn-bg) 0 10px, var(--nnn-bg2) 10px 13px);
}
html[data-jg-theme="dark"] .jg-nnn-rm .jg-nnn-map-leg,
html[data-jg-theme="dark"] .jg-nnn-map-zoom {
	box-shadow: inset 0 0 0 1px var(--nnn-frame2), 0 3px 0 rgba(0, 0, 0, .55);
}
html[data-jg-theme="dark"] .jg-nnn-cd { box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 4px 0 rgba(0, 0, 0, .55); }
html[data-jg-theme="dark"] .jg-nnn-map-stage {
	background: #2E5A48;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 6px 0 rgba(0, 0, 0, .55);
}
/* night rings: the blue focus ring drowns in the dark page, so keyboard focus is yellow */
html[data-jg-theme="dark"] .jg-nnn-map-stage.is-engaged {
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 6px 0 rgba(0, 0, 0, .55), 0 0 0 3px var(--nnn-red);
}
html[data-jg-theme="dark"] .jg-nnn-map-stage:focus-visible {
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 6px 0 rgba(0, 0, 0, .55), 0 0 0 4px var(--nnn-yellow);
}
html[data-jg-theme="dark"] .jg-nnn-rm a.jg-nnn-stop[href]:focus-visible .jg-nnn-stop-card { outline-color: var(--nnn-yellow); }
html[data-jg-theme="dark"] .jg-nnn-map-world::after { background: rgba(12, 20, 48, .30); }
html[data-jg-theme="dark"] .jg-nnn-trail,
html[data-jg-theme="dark"] .jg-nnn-map-leg,
html[data-jg-theme="dark"] .jg-nnn-stop { --lcx: var(--lc-n, var(--lc, var(--nnn-gold))); }
html[data-jg-theme="dark"] .jg-nnn-map-leg i { background-image: radial-gradient(circle, var(--lcx) 2.2px, #05070F 2.3px, #05070F 3.3px, transparent 3.5px); }
html[data-jg-theme="dark"] .jg-nnn-map-vignette {
	background: radial-gradient(ellipse at 50% 50%, rgba(6, 10, 26, 0) 52%, rgba(6, 10, 26, .55) 100%);
	box-shadow: inset 0 0 70px 6px rgba(6, 10, 26, .7);
}
html[data-jg-theme="dark"] .jg-nnn-map-hint { box-shadow: inset 0 0 0 1px var(--nnn-frame2), 0 3px 0 rgba(0, 0, 0, .55); }
html[data-jg-theme="dark"] .jg-nnn-rm .jg-nnn-map-zoom button[aria-pressed="true"] { background: var(--nnn-yellow); color: #2A2A2A; }

@media (prefers-reduced-motion: reduce) {
	.jg-nnn-banner-ball,
	.jg-nnn-banner-chev,
	.jg-nnn-rm-balls i,
	.jg-nnn-cd-kicker,
	.jg-nnn-ico-live::before,
	.jg-nnn-banner.is-live .jg-nnn-banner-lead::before,
	.jg-nnn-stop-card,
	.jg-nnn-stop-card::before,
	.jg-nnn-stop-q,
	.jg-nnn-stop .t-live,
	.jg-nnn-map-hint { animation: none !important; }
	.jg-nnn-rm-balls { display: none; }
	.jg-nnn-stop-card,
	.jg-nnn-map-hint { transition: none; }
}