/* Pokemon NNN 2026 — the landing under the roadmap map (/pokemon-nnn/), rebuilt 2026-10-27.
   Full-width BANDS (cream / paper / night / finale), inner max-width 1120px; Gen-3 frames only on cards.
   Colours: --nnn-* tokens (nnn-tokens.css; day on :root, night under html[data-jg-theme="dark"]). The night
   and finale bands are dark in BOTH themes: they re-point the --nnn-* surface tokens to the landing's own
   --ld-night* / --ld-finale* tokens below, so every component inside follows without extra rules.
   Brand fills (red/blue/purple) carry white text, light fills (yellow/gold/orange) carry --nnn-frame.
   PKMN pixel font only on text without " $ @ + … – — ’ glyphs (landing.php jg_nnn_ld_px decides). */

/* ================================================================ tokens + base */

.jg-nnn-ld {
	/* night palette (the dark values of nnn-tokens.css), used by the dark bands in both themes */
	--ld-night: #0E1626;
	--ld-night2: #182238;
	--ld-night3: #1E2B47;
	--ld-night-text: #E8EEF8;
	--ld-night-muted: #A9B4C8;
	--ld-night-line: #2C3A58;
	--ld-night-frame: #0A0F1C;
	--ld-night-frame2: #3C4C6E;
	/* finale: black with gold */
	--ld-finale: #14100A;
	--ld-finale2: #231A0D;
	--ld-finale3: #2E2311;
	--ld-finale-text: #F6EBD0;
	--ld-finale-muted: #CDBB92;
	--ld-finale-line: #4A3A1C;
	--ld-white: #FFFFFF;
	--ld-ink: #2A2A2A;
	--ld-bevel: rgba(0, 0, 0, .16);
	--ld-pop-shadow: 0 12px 30px rgba(0, 0, 0, .28);
	--ld-gut: 24px;
	--ld-pad: 64px;

	position: relative;
	z-index: 1;
	isolation: isolate;
	box-sizing: border-box;
	color: var(--nnn-text);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}
html[data-jg-theme="dark"] .jg-nnn-ld {
	--ld-night: #070C18;
	--ld-night2: #111A2E;
	--ld-night3: #18233C;
	--ld-finale: #0B0805;
	--ld-finale2: #1C1509;
	--ld-finale3: #261C0C;
	--ld-ink: #05070F;
	--ld-pop-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.jg-nnn-ld *,
.jg-nnn-ld *::before,
.jg-nnn-ld *::after { box-sizing: border-box; }
.jg-nnn-ld [hidden],
.jg-nnn-ld[hidden] { display: none !important; }
.jg-nnn-ld p { margin: 0; }
.jg-nnn-ld ol,
.jg-nnn-ld ul { margin: 0; padding: 0; list-style: none; }
.jg-nnn-ld img { max-width: 100%; height: auto; }
.jg-nnn-ld h2,
.jg-nnn-ld h3 { margin: 0; padding: 0; border: 0; background: none; text-transform: none; }
.jg-nnn-ld .jg-nnn-pixel { text-transform: uppercase; }
.jg-nnn-ld-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.jg-nnn-ld-anchor { position: absolute; top: calc(var(--ld-pad) * -1); }

/* focus: visible on every surface (blue on light, yellow on dark) */
.jg-nnn-ld a:focus-visible,
.jg-nnn-ld button:focus-visible,
.jg-nnn-ld summary:focus-visible {
	outline: 3px solid var(--nnn-blue);
	outline-offset: 3px;
	border-radius: 6px;
}
html[data-jg-theme="dark"] .jg-nnn-ld a:focus-visible,
html[data-jg-theme="dark"] .jg-nnn-ld button:focus-visible,
html[data-jg-theme="dark"] .jg-nnn-ld summary:focus-visible,
.jg-nnn-ld-band.is-night a:focus-visible,
.jg-nnn-ld-band.is-night button:focus-visible,
.jg-nnn-ld-band.is-night summary:focus-visible,
.jg-nnn-ld-band.is-finale a:focus-visible,
.jg-nnn-ld-band.is-finale button:focus-visible,
.jg-nnn-ld-band.is-finale summary:focus-visible { outline-color: var(--nnn-yellow); }

/* ================================================================ bands */

.jg-nnn-ld-band {
	--ld-acc: var(--nnn-red);
	--ld-on: var(--ld-white);
	position: relative;
	padding: var(--ld-pad) var(--ld-gut);
	color: var(--nnn-text);
	scroll-margin-top: 80px;
}
.jg-nnn-ld-in { position: relative; max-width: 1120px; margin: 0 auto; }

.jg-nnn-ld-band.is-cream {
	background-color: var(--nnn-bg);
	background-image: radial-gradient(var(--nnn-bg2) 1.6px, transparent 1.7px);
	background-size: 20px 20px;
}
.jg-nnn-ld-band.is-paper {
	background: var(--nnn-card);
	border-top: 3px solid var(--nnn-frame);
	border-bottom: 3px solid var(--nnn-frame);
}
.jg-nnn-ld-band.is-paper + .jg-nnn-ld-band { border-top: 0; }
.jg-nnn-ld-band.is-night,
.jg-nnn-ld-band.is-finale {
	--nnn-card: var(--ld-night2);
	--nnn-card2: var(--ld-night3);
	--nnn-text: var(--ld-night-text);
	--nnn-muted: var(--ld-night-muted);
	--nnn-line: var(--ld-night-line);
	--nnn-frame: var(--ld-night-frame);
	--nnn-frame2: var(--ld-night-frame2);
	--nnn-bg2: var(--ld-night3);
	--ld-acc: var(--nnn-yellow);
	--ld-on: var(--ld-night-frame);
	color: var(--nnn-text);
}
.jg-nnn-ld-band.is-night {
	background-color: var(--ld-night);
	background-image:
		radial-gradient(1.5px 1.5px at 22px 30px, var(--ld-night-muted) 50%, transparent 51%),
		radial-gradient(1px 1px at 140px 80px, var(--ld-night-text) 50%, transparent 51%),
		radial-gradient(2px 2px at 200px 170px, var(--nnn-yellow) 50%, transparent 51%),
		radial-gradient(1px 1px at 70px 190px, var(--ld-night-muted) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 250px 40px, var(--ld-night-text) 50%, transparent 51%),
		linear-gradient(180deg, var(--ld-night) 0%, var(--ld-night2) 100%);
	background-size: 280px 240px, 280px 240px, 280px 240px, 280px 240px, 280px 240px, 100% 100%;
	border-top: 4px solid var(--nnn-yellow);
	border-bottom: 4px solid var(--nnn-yellow);
}
.jg-nnn-ld-band.is-finale {
	--nnn-card: var(--ld-finale2);
	--nnn-card2: var(--ld-finale3);
	--nnn-text: var(--ld-finale-text);
	--nnn-muted: var(--ld-finale-muted);
	--nnn-line: var(--ld-finale-line);
	--nnn-frame2: var(--nnn-gold);
	--ld-acc: var(--nnn-gold);
	background-color: var(--ld-finale);
	background-image:
		radial-gradient(ellipse 60% 70% at 50% 0%, var(--ld-finale3) 0%, transparent 70%),
		repeating-linear-gradient(90deg, transparent 0 46px, var(--ld-finale2) 46px 48px);
	border-top: 4px solid var(--nnn-gold);
	border-bottom: 4px solid var(--nnn-gold);
	text-align: center;
}

/* ================================================================ band heading */

.jg-nnn-ld-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 780px;
	margin: 0 auto 36px;
	text-align: center;
}
.jg-nnn-ld-kick {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 12px 5px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--ld-acc);
	color: var(--ld-on);
	box-shadow: 0 3px 0 var(--nnn-frame);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	line-height: 1.2;
}
.jg-nnn-ld-band.is-night .jg-nnn-ld-kick,
.jg-nnn-ld-band.is-finale .jg-nnn-ld-kick { border-color: var(--ld-acc); box-shadow: none; }
.jg-nnn-ld .jg-nnn-ld-h {
	margin: 0;
	color: var(--nnn-text);
	font-size: clamp(26px, 3.2vw, 44px);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 1px;
	text-wrap: balance;
}
.jg-nnn-ld .jg-nnn-ld-h.is-plain { font-weight: 900; letter-spacing: 0; }
.jg-nnn-ld-band.is-finale .jg-nnn-ld-h { color: var(--nnn-gold); text-shadow: 0 3px 0 var(--ld-finale); }
.jg-nnn-ld .jg-nnn-ld-sub {
	max-width: 640px;
	margin-top: 14px;
	color: var(--nnn-muted);
	font-size: 17px;
	line-height: 1.5;
	text-wrap: balance;
}
.jg-nnn-ld-head-i { margin-top: 16px; }

/* band accents */
.jg-nnn-ld-band.is-journey { --ld-acc: var(--nnn-red); }
.jg-nnn-ld-band.is-how { --ld-acc: var(--nnn-blue); }
.jg-nnn-ld-band.is-tasks { --ld-acc: var(--nnn-red); }
.jg-nnn-ld-band.is-moves { --ld-acc: var(--nnn-orange); --ld-on: var(--nnn-frame); }
.jg-nnn-ld-band.is-prizes { --ld-acc: var(--type-dragon); }
.jg-nnn-ld-band.is-rules { --ld-acc: var(--nnn-blue); }

/* ================================================================ buttons, links, chips */

.jg-nnn-ld .jg-nnn-btn { padding: 12px 20px; font-size: 16px; text-decoration: none; }
.jg-nnn-ld a.jg-nnn-btn,
.jg-nnn-ld a.jg-nnn-btn:visited,
.jg-nnn-ld a.jg-nnn-btn:hover { color: var(--ld-white); text-decoration: none; }
.jg-nnn-ld .jg-nnn-btn.is-off,
.jg-nnn-ld .jg-nnn-btn.is-off:hover {
	background: var(--nnn-line);
	color: var(--nnn-muted);
	box-shadow: 0 3px 0 var(--nnn-frame);
	transform: none;
	cursor: default;
}
.jg-nnn-ld a.jg-nnn-ld-textlink,
.jg-nnn-ld a.jg-nnn-ld-textlink:visited {
	color: var(--nnn-text);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.jg-nnn-ld a.jg-nnn-ld-textlink:hover { color: var(--nnn-red); }
.jg-nnn-ld-band.is-night a.jg-nnn-ld-textlink:hover,
.jg-nnn-ld-band.is-finale a.jg-nnn-ld-textlink:hover { color: var(--nnn-yellow); }
.jg-nnn-ld a.jg-nnn-ld-link { color: var(--nnn-blue); font-weight: 700; word-break: break-all; }
html[data-jg-theme="dark"] .jg-nnn-ld a.jg-nnn-ld-link { color: var(--nnn-yellow); }
.jg-nnn-ld .jg-nnn-sm { font-weight: 800; letter-spacing: .02em; }
.jg-nnn-ld-muted { color: var(--nnn-muted); text-align: center; }

.jg-nnn-ld-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 16px;
}

/* flag pills (short facts in a row) */
.jg-nnn-ld .jg-nnn-ld-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.jg-nnn-ld .jg-nnn-ld-flags.is-light { justify-content: center; margin-top: 28px; }
.jg-nnn-ld-flags li {
	padding: 7px 12px 6px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-card);
	color: var(--nnn-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.jg-nnn-ld-flags li.jg-nnn-pixel { font-size: 12px; font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld-flags.is-light li { background: var(--nnn-card2); box-shadow: 0 2px 0 var(--nnn-frame); }
.jg-nnn-ld-flags li.is-warn { background: var(--nnn-red); border-color: var(--nnn-red2); color: var(--ld-white); }
.jg-nnn-ld-band.is-night .jg-nnn-ld-flags li { border-color: var(--nnn-frame2); }

/* ================================================================ the (i) component */

.jg-nnn-i {
	position: relative;
	display: inline-flex;
	flex: none;
	vertical-align: middle;
	text-align: left;
}
.jg-nnn-ld .jg-nnn-i-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--nnn-text);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}
.jg-nnn-ld summary.jg-nnn-i-btn::-webkit-details-marker { display: none; }
.jg-nnn-ld summary.jg-nnn-i-btn::marker { content: ''; }
.jg-nnn-i-dot {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border: 2px solid var(--nnn-frame);
	border-radius: 50%;
	background: var(--nnn-blue);
	color: var(--ld-white);
	box-shadow: 0 2px 0 var(--nnn-blue2);
	font-family: var(--nnn-font-pixel);
	font-size: 14px;
	line-height: 1;
	text-transform: none;
	transition: background-color .15s ease;
}
.jg-nnn-ld .jg-nnn-i-btn:hover .jg-nnn-i-dot,
.jg-nnn-i.is-open .jg-nnn-i-dot,
.jg-nnn-i[open] .jg-nnn-i-dot { background: var(--nnn-red); box-shadow: 0 2px 0 var(--nnn-red2); }
.jg-nnn-ld-band.is-night .jg-nnn-i-dot,
.jg-nnn-ld-band.is-finale .jg-nnn-i-dot {
	border-color: var(--ld-night-frame);
	background: var(--nnn-yellow);
	color: var(--ld-night-frame);
	box-shadow: 0 2px 0 var(--nnn-orange);
}
.jg-nnn-ld-band.is-night .jg-nnn-i-btn:hover .jg-nnn-i-dot,
.jg-nnn-ld-band.is-night .jg-nnn-i.is-open .jg-nnn-i-dot,
.jg-nnn-ld-band.is-finale .jg-nnn-i-btn:hover .jg-nnn-i-dot,
.jg-nnn-ld-band.is-finale .jg-nnn-i.is-open .jg-nnn-i-dot { background: var(--ld-white); }
/* labelled variant: "What is this?" */
.jg-nnn-ld .jg-nnn-i-btn.has-lab {
	padding: 4px 14px 4px 4px;
	border: 2px solid var(--nnn-frame);
	background: var(--nnn-card);
	box-shadow: 0 3px 0 var(--nnn-frame);
	font-size: 15px;
	font-weight: 800;
}
.jg-nnn-ld-band.is-night .jg-nnn-i-btn.has-lab,
.jg-nnn-ld-band.is-finale .jg-nnn-i-btn.has-lab { border-color: var(--nnn-frame2); box-shadow: none; }
.jg-nnn-i-lab { white-space: nowrap; }

/* the panel (no JS: <details> content; JS: popover or inline panel) */
.jg-nnn-i-panel {
	color: var(--nnn-text);
	background: var(--nnn-card);
	border: 3px solid var(--nnn-frame);
	border-radius: var(--nnn-radius);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), var(--ld-pop-shadow);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: normal;
}
.jg-nnn-i-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 8px 16px;
	border-bottom: 2px dashed var(--nnn-line);
}
.jg-nnn-i-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.25; }
.jg-nnn-i-title.jg-nnn-pixel { font-size: 13px; font-weight: 400; letter-spacing: 1px; color: var(--nnn-red); }
html[data-jg-theme="dark"] .jg-nnn-i-title.jg-nnn-pixel,
.jg-nnn-ld-band.is-night .jg-nnn-i-title.jg-nnn-pixel,
.jg-nnn-ld-band.is-finale .jg-nnn-i-title.jg-nnn-pixel { color: var(--nnn-yellow); }
.jg-nnn-ld .jg-nnn-i-x {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--nnn-frame);
	border-radius: 6px;
	background: var(--nnn-card2);
	color: var(--nnn-text);
	cursor: pointer;
}
.jg-nnn-ld .jg-nnn-i-x:hover { background: var(--nnn-red); color: var(--ld-white); }
.jg-nnn-i-body { padding: 12px 16px 16px; }
.jg-nnn-i-body p + p,
.jg-nnn-i-body p + ol,
.jg-nnn-i-body ol + p { margin-top: 10px; }
.jg-nnn-ld .jg-nnn-i-list { padding-left: 0; counter-reset: none; }
.jg-nnn-ld .jg-nnn-i-list li { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--nnn-line); }
.jg-nnn-i-note { color: var(--nnn-muted); }
.jg-nnn-ld .jg-nnn-i-meta {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--nnn-line);
	color: var(--nnn-muted);
	font-size: 13.5px;
	font-weight: 700;
}
.jg-nnn-i-body a { color: var(--nnn-blue); font-weight: 700; }
html[data-jg-theme="dark"] .jg-nnn-i-body a,
.jg-nnn-ld-band.is-night .jg-nnn-i-body a,
.jg-nnn-ld-band.is-finale .jg-nnn-i-body a { color: var(--nnn-yellow); }

/* no JS: the open <details> takes a full row and shows its panel in the flow (rows holding an (i) wrap) */
.jg-nnn-ld:not(.is-js) .jg-nnn-ld-step-top,
.jg-nnn-ld:not(.is-js) .jg-nnn-ld-move-top,
.jg-nnn-ld:not(.is-js) .jg-nnn-ld-rank-top { flex-wrap: wrap; }
.jg-nnn-i[open]:not(.is-js) { flex: 0 0 100%; flex-direction: column; align-items: flex-start; width: 100%; grid-column: 1 / -1; }
.jg-nnn-i[open]:not(.is-js) .jg-nnn-i-panel { width: 100%; margin-top: 10px; box-shadow: inset 0 0 0 2px var(--nnn-frame2); }

/* JS popover (>= 760px): anchored under the button, kept inside the viewport by nnn-landing.js */
.jg-nnn-i-panel.is-pop {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	z-index: 60;
	width: min(420px, calc(100vw - 32px));
}
.jg-nnn-i-panel.is-pop.is-up { top: auto; bottom: calc(100% + 14px); }
.jg-nnn-i-panel.is-pop::before {
	content: '';
	position: absolute;
	top: -10px;
	left: calc(var(--i-arrow, 26px) - 8px);
	width: 16px;
	height: 16px;
	border-top: 3px solid var(--nnn-frame);
	border-left: 3px solid var(--nnn-frame);
	background: var(--nnn-card);
	transform: rotate(45deg);
}
.jg-nnn-i-panel.is-pop.is-up::before { top: auto; bottom: -10px; transform: rotate(225deg); }
.jg-nnn-ld-band.is-night .jg-nnn-i-panel,
.jg-nnn-ld-band.is-finale .jg-nnn-i-panel { border-color: var(--ld-acc); }
.jg-nnn-ld-band.is-night .jg-nnn-i-panel.is-pop::before,
.jg-nnn-ld-band.is-finale .jg-nnn-i-panel.is-pop::before { border-color: var(--ld-acc); }
.jg-nnn-i-panel.is-pop .jg-nnn-i-body { max-height: min(60vh, 460px); overflow: auto; overscroll-behavior: contain; }
/* JS inline panel (phones): a full-width block at the end of its card / row */
.jg-nnn-i-panel.is-inline {
	flex: 0 0 100%;
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 12px;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 4px 0 var(--nnn-line);
}
.jg-nnn-ld-head > .jg-nnn-i-panel.is-inline { margin-top: 18px; }

/* ================================================================ 1 journey */

.jg-nnn-ld-band.is-journey { padding-top: 48px; }
.jg-nnn-ld-band.is-journey .jg-nnn-ld-head { margin-bottom: 26px; }
.jg-nnn-ld-band.is-journey .jg-nnn-ld-h { font-size: clamp(28px, 3.6vw, 48px); }
.jg-nnn-ld-journey-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 22px;
}
.jg-nnn-ld-journey-row > .jg-nnn-i-panel.is-inline { text-align: left; }
.jg-nnn-ld .jg-nnn-ld-mchips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 26px;
}
.jg-nnn-ld-mchip {
	padding: 6px 11px 5px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-card);
	color: var(--nnn-text);
	box-shadow: inset 0 0 0 1px var(--nnn-frame2);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.jg-nnn-ld-mchip.jg-nnn-pixel { font-size: 12px; font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld-mchip.is-pts { background: var(--nnn-yellow); color: var(--nnn-frame); box-shadow: none; }
.jg-nnn-ld-mchip.is-rank.is-champion { background: var(--nnn-gold); color: var(--nnn-frame); }
.jg-nnn-ld-mchip.is-rank.is-arceus { background: var(--type-normal); color: var(--nnn-frame); }
.jg-nnn-ld-mchip.is-rank.is-giratina { background: var(--type-ghost); color: var(--ld-white); }
.jg-nnn-ld-mchip.is-rank.is-dialga { background: var(--type-dragon); color: var(--ld-white); }
.jg-nnn-ld-mchip.is-rank.is-palkia { background: var(--type-fairy); color: var(--nnn-frame); }

/* ================================================================ 2 how it works */

.jg-nnn-ld-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	counter-reset: none;
}
.jg-nnn-ld-step {
	position: relative;
	padding: 16px 18px 20px;
	background: var(--nnn-card2);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--nnn-line);
}
.jg-nnn-ld-step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.jg-nnn-ld-step-top .jg-nnn-i { margin-left: auto; }
.jg-nnn-ld-step-n {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--nnn-frame);
	border-radius: 50%;
	background: var(--nnn-red);
	color: var(--ld-white);
	font-size: 14px;
	line-height: 1;
}
.jg-nnn-ld-step.is-s2 .jg-nnn-ld-step-n { background: var(--nnn-blue); }
.jg-nnn-ld-step.is-s3 .jg-nnn-ld-step-n { background: var(--nnn-orange); color: var(--nnn-frame); }
.jg-nnn-ld-step.is-s4 .jg-nnn-ld-step-n { background: var(--type-dragon); }
.jg-nnn-ld-pix { display: block; flex: none; }
.jg-nnn-ld-pix .p-k { fill: var(--nnn-frame); }
.jg-nnn-ld-pix .p-r { fill: var(--nnn-red); }
.jg-nnn-ld-pix .p-w { fill: var(--ld-white); }
.jg-nnn-ld-pix .p-y { fill: var(--nnn-yellow); }
.jg-nnn-ld-pix .p-g { fill: var(--nnn-gold); }
.jg-nnn-ld-pix .p-c { fill: currentColor; }
html[data-jg-theme="dark"] .jg-nnn-ld-pix .p-k { fill: var(--ld-ink); }
.jg-nnn-ld-step-ico { width: 40px; height: 40px; }
.jg-nnn-ld .jg-nnn-ld-step-t { font-size: 18px; font-weight: 800; line-height: 1.2; }
.jg-nnn-ld .jg-nnn-ld-step-t.jg-nnn-pixel { font-size: 16px; font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld .jg-nnn-ld-step-t a,
.jg-nnn-ld .jg-nnn-ld-step-t a:visited { color: var(--nnn-text); text-decoration: none; }
.jg-nnn-ld .jg-nnn-ld-step-t a:hover { color: var(--nnn-red); text-decoration: underline; text-underline-offset: 3px; }
html[data-jg-theme="dark"] .jg-nnn-ld .jg-nnn-ld-step-t a:hover { color: var(--nnn-yellow); }
.jg-nnn-ld .jg-nnn-ld-step-x { margin-top: 8px; color: var(--nnn-muted); font-size: 16px; line-height: 1.45; }

/* ================================================================ 3 tasks */

.jg-nnn-ld .jg-nnn-ld-pills {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}
.jg-nnn-ld-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 62px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius);
	background: var(--nnn-card);
	color: var(--nnn-text);
	box-shadow: 0 3px 0 var(--nnn-frame);
}
.jg-nnn-ld-pill > a,
.jg-nnn-ld-pill > a:visited {
	display: flex;
	align-items: center;
	align-self: stretch;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
	border-radius: 6px;
}
.jg-nnn-ld-pill-in { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px; }
.jg-nnn-ld-pill-k { font-size: 13px; letter-spacing: 1px; line-height: 1.2; }
.jg-nnn-ld-pill-x { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--nnn-muted); }
.jg-nnn-ld-pill.is-shown { background: var(--nnn-red); border-color: var(--nnn-frame); color: var(--ld-white); box-shadow: 0 3px 0 var(--nnn-red2); }
.jg-nnn-ld-pill.is-shown .jg-nnn-ld-pill-x { color: var(--ld-white); }
.jg-nnn-ld-pill.is-past .jg-nnn-ld-pill-x::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--nnn-hp-hi); vertical-align: 1px; }
.jg-nnn-ld-pill.is-future {
	padding-left: 12px;
	border-style: dashed;
	background: transparent;
	box-shadow: none;
	color: var(--nnn-muted);
}
.jg-nnn-ld-pill.is-future .jg-nnn-ld-pill-in { padding-left: 0; }
.jg-nnn-ld-pill-ico { width: 24px; height: 24px; }

.jg-nnn-ld-week {
	padding: 6px 0 0;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--nnn-line);
}
.jg-nnn-ld-week-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 12px 20px 14px;
	border-bottom: 2px solid var(--nnn-line);
}
.jg-nnn-ld-week-n {
	padding: 5px 9px 4px;
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-frame);
	color: var(--nnn-yellow);
	font-size: 12px;
	letter-spacing: 1px;
}
.jg-nnn-ld-week-t { font-size: 17px; font-weight: 800; }
.jg-nnn-ld-week-t.jg-nnn-pixel { font-size: 14px; font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld-week-d { color: var(--nnn-muted); font-size: 14px; font-weight: 700; }
.jg-nnn-ld-week-sum { margin-left: auto; font-size: 14px; font-weight: 800; }

.jg-nnn-ld .jg-nnn-ld-tasks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 0;
	padding: 4px 8px 8px;
}
.jg-nnn-ld-task {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 9px 12px;
	border-bottom: 1px dashed var(--nnn-line);
}
.jg-nnn-ld-tasks > .jg-nnn-ld-task:nth-last-child(-n+2):nth-child(odd),
.jg-nnn-ld-tasks > .jg-nnn-ld-task:last-child { border-bottom: 0; }
.jg-nnn-ld-tick {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--nnn-frame);
	border-radius: 4px;
	background: var(--nnn-card);
}
.jg-nnn-ld-task.is-done .jg-nnn-ld-tick {
	background: var(--nnn-hp-hi);
}
.jg-nnn-ld-task.is-done .jg-nnn-ld-tick::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border-right: 3px solid var(--nnn-frame);
	border-bottom: 3px solid var(--nnn-frame);
	transform: rotate(45deg);
}
.jg-nnn-ld-tpts {
	flex: none;
	min-width: 40px;
	padding: 4px 6px 3px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-yellow);
	color: var(--nnn-frame);
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}
.jg-nnn-ld-dot { flex: none; width: 11px; height: 11px; border: 2px solid var(--nnn-frame); border-radius: 50%; background: var(--nnn-muted); }
.is-pokemon > .jg-nnn-ld-dot { background: var(--nnn-red); }
.is-nsfw > .jg-nnn-ld-dot { background: var(--nnn-st-lov); }
.is-discord > .jg-nnn-ld-dot { background: var(--type-dragon); }
.is-stream > .jg-nnn-ld-dot { background: var(--nnn-blue); }
.jg-nnn-ld-task-t { flex: 1 1 0; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.jg-nnn-ld-task.is-done .jg-nnn-ld-task-t { color: var(--nnn-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.jg-nnn-ld-auto {
	flex: none;
	padding: 3px 6px 2px;
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-gold);
	color: var(--nnn-frame);
	font-size: 10px;
	letter-spacing: 1px;
}

.jg-nnn-ld-pastlist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.jg-nnn-ld-past {
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius);
	background: var(--nnn-card);
}
.jg-nnn-ld-past > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
}
.jg-nnn-ld-past > summary::-webkit-details-marker { display: none; }
.jg-nnn-ld-past-k { font-size: 12px; letter-spacing: 1px; }
.jg-nnn-ld-past-x { color: var(--nnn-muted); font-size: 14px; font-weight: 700; }
.jg-nnn-ld-chev {
	width: 10px;
	height: 10px;
	margin-left: auto;
	border-right: 3px solid var(--nnn-text);
	border-bottom: 3px solid var(--nnn-text);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.jg-nnn-ld-past[open] .jg-nnn-ld-chev { transform: rotate(225deg); }
.jg-nnn-ld-past[open] > summary { border-bottom: 2px solid var(--nnn-line); }

.jg-nnn-ld-tasks-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin-top: 22px;
}
.jg-nnn-ld-catkey { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--nnn-muted); font-size: 14px; font-weight: 700; }
.jg-nnn-ld-catkey li { display: inline-flex; align-items: center; gap: 6px; }

/* before Nov 1: one locked Week 1 card with the countdown */
.jg-nnn-ld-wk1 {
	display: grid;
	justify-items: center;
	gap: 8px;
	max-width: 520px;
	margin: 0 auto;
	padding: 28px 24px 26px;
	text-align: center;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--nnn-line);
}
.jg-nnn-ld-wk1-ico { width: 44px; height: 44px; }
.jg-nnn-ld-wk1-k { color: var(--nnn-red); font-size: 13px; letter-spacing: 1.5px; }
html[data-jg-theme="dark"] .jg-nnn-ld-wk1-k { color: var(--nnn-yellow); }
.jg-nnn-ld-wk1-t { font-size: 22px; font-weight: 900; line-height: 1.2; }
.jg-nnn-ld-wk1-t.jg-nnn-pixel { font-size: 20px; font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld-wk1-cd {
	margin-top: 4px;
	padding: 8px 14px 7px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-frame);
	color: var(--nnn-yellow);
	font-size: 18px;
	letter-spacing: 1px;
	font-variant-numeric: tabular-nums;
}
.jg-nnn-ld-wk1-when { color: var(--nnn-muted); font-size: 14px; font-weight: 700; }

/* ================================================================ 4 horde battles (night) */

.jg-nnn-ld-horde { display: flex; flex-direction: column; gap: 26px; }
.jg-nnn-ld-horde .jg-nnn-ld-flags { justify-content: center; }
.jg-nnn-ld-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jg-nnn-ld-stage {
	--st: var(--nnn-hp-hi);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
	border: 3px solid var(--nnn-frame);
	border-radius: var(--nnn-radius);
	background: var(--nnn-card);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--ld-night-frame);
}
.jg-nnn-ld-stage.is-s2 { --st: var(--nnn-hp-mid); }
.jg-nnn-ld-stage.is-s3 { --st: var(--nnn-hp-lo); }
.jg-nnn-ld-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jg-nnn-ld-stage-n { color: var(--nnn-yellow); font-size: 12px; letter-spacing: 1px; }
.jg-nnn-ld-stage-min {
	padding: 3px 7px 2px;
	border-radius: var(--nnn-radius-pill);
	background: var(--st);
	color: var(--ld-night-frame);
	font-size: 11px;
	letter-spacing: 1px;
}
.jg-nnn-ld-stage-t { font-size: 24px; font-weight: 900; line-height: 1.1; }
.jg-nnn-ld-stage-t.jg-nnn-pixel { font-size: clamp(16px, 2.1vw, 24px); font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld-stage-bar {
	display: block;
	height: 10px;
	padding: 2px;
	border: 2px solid var(--nnn-frame2);
	border-radius: 6px;
	background: var(--nnn-hp-track);
}
.jg-nnn-ld-stage-bar i { display: block; height: 100%; border-radius: 3px; background: var(--st); }
.jg-nnn-ld-stage-x { color: var(--nnn-muted); font-size: 15px; line-height: 1.4; }

.jg-nnn-ld-next {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	align-content: start;
	gap: 8px 26px;
	padding: 16px 18px 18px;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--ld-night-frame);
}
.jg-nnn-ld-next > * { grid-column: 2; }
.jg-nnn-ld-next > .jg-nnn-ld-next-img { grid-column: 1; grid-row: 1 / span 6; align-self: start; }
.jg-nnn-ld-next-k { color: var(--nnn-yellow); font-size: 13px; letter-spacing: 1.5px; }
.jg-nnn-ld-next.is-live .jg-nnn-ld-next-k { color: var(--nnn-hp-lo); animation: jg-nnn-ld-blink 1.2s steps(2, start) infinite; }
.jg-nnn-ld-next-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 3px solid var(--nnn-frame);
	border-radius: 6px;
	background: radial-gradient(circle at 50% 45%, var(--ld-night3) 0%, var(--ld-night-frame) 75%);
}
.jg-nnn-ld-next-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jg-nnn-ld-next-q {
	position: absolute;
	right: 10px;
	bottom: 6px;
	color: var(--nnn-yellow);
	font-size: 40px;
	line-height: 1;
	text-shadow: 3px 3px 0 var(--ld-night-frame);
	animation: jg-nnn-ld-bob 2.4s ease-in-out infinite;
}
.jg-nnn-ld-next-t { font-size: 22px; font-weight: 900; line-height: 1.25; }
.jg-nnn-ld-next-t.jg-nnn-pixel { font-size: 24px; font-weight: 400; letter-spacing: 1px; }
.jg-nnn-ld-next-w { color: var(--nnn-muted); font-size: 14.5px; font-weight: 700; }
.jg-nnn-ld-next .jg-nnn-btn { justify-self: start; margin-top: 4px; }
.jg-nnn-ld-next .jg-nnn-ld-textlink { justify-self: start; font-size: 15px; }
.jg-nnn-ld .jg-nnn-ld-sched {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 2px dashed var(--nnn-line);
}
.jg-nnn-ld-sched li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 2px;
	border: 2px solid var(--nnn-line);
	border-radius: 6px;
	text-align: center;
}
.jg-nnn-ld-sched-n {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nnn-line);
	color: var(--nnn-text);
	font-size: 11px;
}
.jg-nnn-ld-sched-x { color: var(--nnn-muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
.jg-nnn-ld-sched li.is-next { border-color: var(--nnn-yellow); }
.jg-nnn-ld-sched li.is-next .jg-nnn-ld-sched-n { background: var(--nnn-yellow); color: var(--ld-night-frame); }
.jg-nnn-ld-sched li.is-live .jg-nnn-ld-sched-n { background: var(--nnn-hp-lo); color: var(--ld-white); }
.jg-nnn-ld-sched li.is-done { opacity: .6; }
.jg-nnn-ld-sched li.is-done .jg-nnn-ld-sched-n { background: var(--nnn-hp-hi); color: var(--ld-night-frame); }
.jg-nnn-ld-next.is-over { grid-template-columns: minmax(0, 1fr); }
.jg-nnn-ld-next.is-over > * { grid-column: 1; }
.jg-nnn-ld-next.is-over .jg-nnn-ld-next-t { font-size: 17px; }

/* ================================================================ 5 super moves */

.jg-nnn-ld-moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.jg-nnn-ld-move {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 16px;
	background: var(--nnn-card2);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--nnn-line);
}
.jg-nnn-ld-move::after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 4px;
	border-radius: 2px;
	background: var(--ld-type, var(--nnn-red));
}
.jg-nnn-ld-move-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.jg-nnn-ld-move-top .jg-nnn-pill { font-size: 12px; }
.jg-nnn-ld-move-top .jg-nnn-i { margin-left: auto; }
.jg-nnn-ld-cost {
	flex: none;
	white-space: nowrap;
	padding: 3px 6px 2px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-yellow);
	color: var(--nnn-frame);
	font-size: 11px;
	letter-spacing: .5px;
}
.jg-nnn-ld-move-name { position: relative; padding-left: 16px; font-size: 22px; font-weight: 900; line-height: 1.15; }
.jg-nnn-ld-move-name.jg-nnn-pixel { font-size: clamp(16px, 1.4vw, 19px); font-weight: 400; letter-spacing: .5px; }
/* the FireRed menu cursor: shows on hover / keyboard focus inside the card */
.jg-nnn-ld-cursor {
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid var(--nnn-text);
	opacity: 0;
	transition: opacity .12s ease;
}
.jg-nnn-ld-move:hover .jg-nnn-ld-cursor,
.jg-nnn-ld-move:focus-within .jg-nnn-ld-cursor { opacity: 1; }
.jg-nnn-ld-move-type { color: var(--nnn-muted); font-size: 11px; letter-spacing: 1px; }
.jg-nnn-ld-move-type::before {
	content: '';
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border: 2px solid var(--nnn-frame);
	border-radius: 2px;
	background: var(--ld-type, var(--nnn-red));
	vertical-align: -1px;
}
.jg-nnn-ld-move-x { margin-top: 2px; padding-bottom: 6px; font-size: 15px; line-height: 1.4; }

/* ================================================================ 6 ranks & prizes */

.jg-nnn-ld .jg-nnn-ld-ladder {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	align-items: end;
	padding-bottom: 10px;
	border-bottom: 5px solid var(--nnn-frame);
}
.jg-nnn-ld-rank {
	--tier: var(--nnn-muted);
	--tier-on: var(--ld-white);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.jg-nnn-ld-rank.is-champion { --tier: var(--nnn-gold); --tier-on: var(--nnn-frame); }
.jg-nnn-ld-rank.is-arceus { --tier: var(--type-normal); --tier-on: var(--nnn-frame); }
.jg-nnn-ld-rank.is-giratina { --tier: var(--type-ghost); }
.jg-nnn-ld-rank.is-dialga { --tier: var(--type-dragon); }
.jg-nnn-ld-rank.is-palkia { --tier: var(--type-fairy); --tier-on: var(--nnn-frame); }
.jg-nnn-ld-rank-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: calc(168px + var(--rise, 0) * 34px);
	padding: 0 14px 16px;
	overflow: visible;
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 5px 0 var(--nnn-line);
}
.jg-nnn-ld-rank-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -14px 6px;
	padding: 8px 10px 8px 14px;
	border-bottom: 3px solid var(--nnn-frame);
	border-radius: 4px 4px 0 0;
	background: var(--tier);
	color: var(--tier-on);
}
.jg-nnn-ld-rank-top .jg-nnn-i { margin-left: auto; }
.jg-nnn-ld-rank-pts { font-size: 12px; letter-spacing: 1px; }
.jg-nnn-ld-rank-name { font-size: 24px; font-weight: 900; line-height: 1.1; }
.jg-nnn-ld-rank-name.jg-nnn-pixel { font-size: clamp(16px, 1.55vw, 21px); font-weight: 400; letter-spacing: .5px; }
.jg-nnn-ld-rank-hook { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.jg-nnn-ld-seats {
	align-self: flex-start;
	margin-top: auto;
	padding: 4px 8px 3px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-frame);
	color: var(--nnn-gold);
	font-size: 11px;
	letter-spacing: 1px;
}
.jg-nnn-ld-rank-next { margin-top: auto; color: var(--nnn-muted); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.jg-nnn-ld-seats + .jg-nnn-ld-rank-next { margin-top: 0; }
.jg-nnn-ld-rank.is-champion .jg-nnn-ld-rank-card { box-shadow: inset 0 0 0 2px var(--nnn-gold), 0 5px 0 var(--nnn-line); }
.jg-nnn-ld-rank.is-you .jg-nnn-ld-rank-card { outline: 4px solid var(--nnn-red); outline-offset: 2px; }
.jg-nnn-ld-you {
	position: relative;
	align-self: center;
	padding: 6px 10px 5px;
	border: 2px solid var(--nnn-frame);
	border-radius: var(--nnn-radius-pill);
	background: var(--nnn-red);
	color: var(--ld-white);
	font-size: 11px;
	letter-spacing: 1px;
	white-space: nowrap;
}
.jg-nnn-ld-you::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	margin-left: -7px;
	border-top: 7px solid var(--nnn-frame);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
}
.jg-nnn-ld-prizes-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	text-align: center;
}
.jg-nnn-ld-norank {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
	max-width: 720px;
	padding: 12px 18px;
	border: 2px dashed var(--nnn-frame);
	border-radius: var(--nnn-radius);
	background: var(--nnn-card);
}
.jg-nnn-ld-norank.is-you { border-style: solid; outline: 4px solid var(--nnn-red); outline-offset: 2px; }
.jg-nnn-ld-norank .jg-nnn-ld-you::after { display: none; }
.jg-nnn-ld-norank-t { font-size: 16px; font-weight: 800; }
.jg-nnn-ld-norank .jg-nnn-ld-rank-next { margin: 0; flex-basis: 100%; }
.jg-nnn-ld-norank > .jg-nnn-i-panel.is-inline { text-align: left; }
.jg-nnn-ld-note { max-width: 720px; color: var(--nnn-muted); font-size: 14.5px; line-height: 1.5; }

/* ================================================================ 7 championship gangbang (finale) */

.jg-nnn-ld-gb { display: flex; flex-direction: column; align-items: center; }
.jg-nnn-ld-gb-art {
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ld-finale3) 0%, transparent 70%);
}
.jg-nnn-ld-gb-trophy { width: 84px; height: 84px; filter: drop-shadow(0 4px 0 var(--ld-finale)); }
.jg-nnn-ld-gb-main { display: flex; flex-direction: column; align-items: center; width: 100%; }
.jg-nnn-ld-gb-main .jg-nnn-ld-head { margin-bottom: 18px; }
.jg-nnn-ld .jg-nnn-ld-gb-when {
	padding: 10px 18px;
	border: 3px solid var(--nnn-gold);
	border-radius: var(--nnn-radius);
	background: var(--ld-finale);
	color: var(--nnn-yellow);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 900;
	line-height: 1.3;
	text-wrap: balance;
}
.jg-nnn-ld .jg-nnn-ld-gb-hook { max-width: 620px; margin-top: 18px; color: var(--nnn-text); font-size: 18px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.jg-nnn-ld-gb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 18px;
	width: 100%;
	margin-top: 26px;
}
.jg-nnn-ld-gb-dates { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.jg-nnn-ld-gb-dates li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 210px;
	padding: 10px 14px 12px;
	border: 2px solid var(--nnn-line);
	border-radius: var(--nnn-radius);
	background: var(--nnn-card);
	text-align: left;
}
.jg-nnn-ld-gb-k { color: var(--nnn-gold); font-size: 11px; letter-spacing: 1px; }
.jg-nnn-ld-gb-dates b { font-size: 16px; }
.jg-nnn-ld-gb-dates span { color: var(--nnn-muted); font-size: 14px; font-weight: 700; }
.jg-nnn-ld .jg-nnn-ld-gb-dates .jg-nnn-ld-gb-tier { color: var(--nnn-text); font-size: 12.5px; }
.jg-nnn-ld-gb-row > .jg-nnn-i-panel.is-inline { text-align: left; }

/* ================================================================ 8 house rules */

.jg-nnn-ld-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jg-nnn-ld-rule {
	--rb: var(--nnn-red);
	--rb-on: var(--ld-white);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 3px solid var(--nnn-frame);
	border-radius: var(--nnn-radius);
	background: var(--nnn-card2);
	box-shadow: inset 0 0 0 2px var(--nnn-frame2), 0 4px 0 var(--nnn-line);
}
.jg-nnn-ld-rule.is-r2 { --rb: var(--nnn-blue); }
.jg-nnn-ld-rule.is-r3 { --rb: var(--nnn-st-lov); }
.jg-nnn-ld-rule.is-r4 { --rb: var(--type-ghost); }
.jg-nnn-ld-rule.is-r5 { --rb: var(--nnn-orange); --rb-on: var(--nnn-frame); }
.jg-nnn-ld-rule.is-r6 { --rb: var(--nnn-yellow); --rb-on: var(--nnn-frame); }
.jg-nnn-ld-rule.is-r7 { --rb: var(--type-dragon); }
.jg-nnn-ld-rule.is-r8 { --rb: var(--nnn-gold); --rb-on: var(--nnn-frame); }
.jg-nnn-ld-rule-badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border: 2px solid var(--nnn-frame);
	border-radius: 8px;
	background: var(--rb);
	color: var(--rb-on);
	box-shadow: inset 0 -4px 0 var(--ld-bevel);
}
.jg-nnn-ld-rule-ico { width: 26px; height: 26px; }
.jg-nnn-ld-rule-num { font-size: 24px; line-height: 1; }
.jg-nnn-ld-rule-t { flex: 1 1 0; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.25; }

/* ================================================================ 9 closing row */

.jg-nnn-ld-band.is-cta { padding-top: 48px; padding-bottom: 56px; text-align: center; }
.jg-nnn-ld .jg-nnn-ld-cta-k { margin-bottom: 18px; font-size: 22px; font-weight: 900; }
.jg-nnn-ld-cta-k.jg-nnn-pixel { font-size: 20px; font-weight: 400; letter-spacing: 1.5px; }

/* ================================================================ motion */

@keyframes jg-nnn-ld-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
@keyframes jg-nnn-ld-blink {
	to { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.jg-nnn-ld *,
	.jg-nnn-ld *::before,
	.jg-nnn-ld *::after { animation: none !important; transition: none !important; }
}

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

@media (max-width: 1140px) {
	.jg-nnn-ld-moves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jg-nnn-ld-move-name.jg-nnn-pixel { font-size: clamp(16px, 2.2vw, 20px); }
}
@media (max-width: 1080px) {
	.jg-nnn-ld .jg-nnn-ld-ladder { gap: 10px; }
	.jg-nnn-ld-rank-card { padding-left: 12px; padding-right: 12px; }
	.jg-nnn-ld-rank-top { margin-left: -12px; margin-right: -12px; }
}
@media (max-width: 1024px) {
	.jg-nnn-ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jg-nnn-ld-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jg-nnn-ld-next { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.jg-nnn-ld .jg-nnn-ld-tasks { grid-template-columns: minmax(0, 1fr); }
	.jg-nnn-ld-tasks > .jg-nnn-ld-task:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px dashed var(--nnn-line); }
	.jg-nnn-ld-tasks > .jg-nnn-ld-task:last-child { border-bottom: 0; }
	.jg-nnn-ld .jg-nnn-ld-ladder {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 12px;
		padding-bottom: 0;
		border-bottom: 0;
	}
	.jg-nnn-ld-rank-card { min-height: 0; }
	.jg-nnn-ld-rank-name.jg-nnn-pixel { font-size: 21px; }
	.jg-nnn-ld-you::after { display: none; }
	.jg-nnn-ld-you { align-self: flex-start; }
}
@media (max-width: 759px) {
	.jg-nnn-ld { --ld-gut: 16px; --ld-pad: 40px; }
	.jg-nnn-ld-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jg-nnn-ld-band.is-journey { padding-top: 32px; }
	.jg-nnn-ld-head { margin-bottom: 26px; }
	.jg-nnn-ld .jg-nnn-ld-sub { font-size: 16px; }
	.jg-nnn-ld-hud { grid-template-columns: minmax(0, 1fr); }
	.jg-nnn-ld .jg-nnn-ld-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.jg-nnn-ld-week-top { padding: 12px 14px; }
	.jg-nnn-ld-week-sum { margin-left: 0; flex-basis: 100%; }
	.jg-nnn-ld .jg-nnn-ld-tasks { padding: 2px 2px 6px; }
	.jg-nnn-ld-task { padding: 9px 10px; gap: 8px; }
	.jg-nnn-ld-task-t { font-size: 15px; }
	.jg-nnn-ld-next { display: flex; flex-direction: column; }
	.jg-nnn-ld-next-t.jg-nnn-pixel { font-size: 19px; }
	.jg-nnn-ld-gb-dates li { min-width: 0; flex: 1 1 100%; }
	.jg-nnn-ld-gb-art { width: 96px; height: 96px; margin-bottom: 8px; }
	.jg-nnn-ld-gb-trophy { width: 64px; height: 64px; }
	.jg-nnn-ld-tasks-foot { justify-content: center; }
}
@media (max-width: 640px) {
	.jg-nnn-ld-steps { grid-template-columns: minmax(0, 1fr); }
	.jg-nnn-ld-rules { grid-template-columns: minmax(0, 1fr); }
	.jg-nnn-ld-moves { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.jg-nnn-ld-move-name.jg-nnn-pixel { font-size: 20px; }
	.jg-nnn-ld-ctas { flex-direction: column; align-items: stretch; }
	.jg-nnn-ld-ctas .jg-nnn-btn { justify-content: center; }
	.jg-nnn-ld-ctas .jg-nnn-ld-textlink { text-align: center; }
	.jg-nnn-ld-journey-row { flex-direction: column; align-items: stretch; }
	.jg-nnn-ld-journey-row > .jg-nnn-i { align-self: center; }
	.jg-nnn-ld-sched-x { font-size: 11px; }
}