/* ==========================================================================
   Perez Nova — base: colour tokens, buttons, nav, footer, search, achievements.
   Loaded on every page. Everything is prefixed .nv- so nothing collides with
   Ultra Seven or plugins.
   ========================================================================== */

:root,
html[data-nova-theme="light"] {
	--nv-bg: #fbfaff;
	--nv-surface: rgba(255, 255, 255, .74);
	--nv-surface2: #ffffff;
	--nv-border: rgba(31, 27, 46, .09);
	--nv-border2: rgba(31, 27, 46, .2);
	--nv-ink: #15122a;
	--nv-text: #3b3748;
	--nv-muted: #5f5975;
	--nv-faint: #958fac;
	--nv-dot: rgba(31, 27, 46, .06);
	--nv-g1: #9d8df7;
	--nv-g2: #f97ff0;
	--nv-gtext: #1d1930;
	--nv-link: #7a3fc2;
	--nv-spot: rgba(157, 141, 247, .15);
	--nv-err: rgba(249, 127, 240, .2);
	--nv-chip: rgba(31, 27, 46, .045);
	--nv-key: #ffffff;
	--nv-keyedge: rgba(31, 27, 46, .18);
	--nv-shadow: 0 40px 100px -50px rgba(157, 141, 247, .6);
	--nv-shadow-sm: 0 18px 40px -24px rgba(31, 27, 46, .35);
	--nv-sans: 'Google Sans', 'Google Sans Flex', 'Product Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--nv-mono: 'Google Sans Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--nv-grad: linear-gradient(90deg, var(--nv-g1), var(--nv-g2));
	--nv-nav-top: 14px;
	color-scheme: light;
}

html[data-nova-theme="dark"] {
	--nv-bg: #0a0815;
	--nv-surface: rgba(20, 16, 36, .66);
	--nv-surface2: #110d20;
	--nv-border: rgba(255, 255, 255, .085);
	--nv-border2: rgba(255, 255, 255, .2);
	--nv-ink: #f6f4fd;
	--nv-text: #cbc5e2;
	--nv-muted: #a39dc0;
	--nv-faint: #6d668d;
	--nv-dot: rgba(255, 255, 255, .04);
	--nv-link: #c3b6ff;
	--nv-spot: rgba(157, 141, 247, .15);
	--nv-chip: rgba(255, 255, 255, .055);
	--nv-key: rgba(255, 255, 255, .05);
	--nv-keyedge: rgba(0, 0, 0, .6);
	--nv-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8);
	--nv-shadow-sm: 0 18px 40px -20px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

/* No-JS fallback: follow the device. */
@media (prefers-color-scheme: dark) {
	html:not([data-nova-theme]) {
		--nv-bg: #0a0815; --nv-surface: rgba(20, 16, 36, .66); --nv-surface2: #110d20;
		--nv-border: rgba(255, 255, 255, .085); --nv-border2: rgba(255, 255, 255, .2);
		--nv-ink: #f6f4fd; --nv-text: #cbc5e2; --nv-muted: #a39dc0; --nv-faint: #6d668d;
		--nv-dot: rgba(255, 255, 255, .04); --nv-link: #c3b6ff; --nv-chip: rgba(255, 255, 255, .055);
		--nv-key: rgba(255, 255, 255, .05); --nv-keyedge: rgba(0, 0, 0, .6);
		--nv-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8); color-scheme: dark;
	}
}

/* --------------------------------------------------------------------------
   Shared building blocks
   -------------------------------------------------------------------------- */
.nv-chrome, .nv-chrome *, .nv-nav, .nv-nav *, .nv-home, .nv-home * { box-sizing: border-box; }
.nv-chrome, .nv-nav { font-family: var(--nv-sans); color: var(--nv-text); text-wrap: pretty; }
.nv-chrome a, .nv-nav a, .nv-home a { color: var(--nv-link); }
.nv-chrome ul, .nv-nav ul, .nv-home ul { list-style: none; margin: 0; padding: 0; }
.nv-chrome button, .nv-nav button, .nv-home button { font: inherit; }
.nv-chrome :focus-visible, .nv-nav :focus-visible, .nv-home :focus-visible { outline: 2px solid var(--nv-g1); outline-offset: 3px; }

.nv-wrap { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.nv-sr, .nv-skip:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.nv-skip:focus {
	position: fixed; z-index: 100000; top: 10px; left: 10px; padding: 12px 18px; border-radius: 12px;
	background: var(--nv-ink); color: var(--nv-bg); font-family: var(--nv-sans); font-weight: 700; text-decoration: none;
}
.nv-icon { flex-shrink: 0; display: block; }
.nv-grad-text {
	background: var(--nv-grad); -webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
.nv-kicker { font-family: var(--nv-mono); font-size: 13px; color: var(--nv-link); }
.nv-label { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted); }
.nv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--nv-g1); }
.nv-dot--pink { background: var(--nv-g2); }
.nv-dot--violet { background: var(--nv-g1); }
.nv-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--nv-g1); margin-right: 10px; animation: nv-pulse 1.8s ease-out infinite; vertical-align: middle; }
.nv-pulse--pink { background: var(--nv-g2); }
.nv-dots { display: inline-flex; gap: 6px; margin-right: 14px; vertical-align: middle; }
.nv-dots i { width: 10px; height: 10px; border-radius: 999px; background: var(--nv-border2); }
.nv-bar { height: 8px; border-radius: 999px; background: var(--nv-chip); overflow: hidden; }
.nv-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--nv-grad); transition: width .5s ease; }
.nv-bar--glow > span { box-shadow: 0 0 18px var(--nv-g2); transition: width .1s linear; }
.nv-badge { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; background: var(--nv-g2); color: var(--nv-gtext); }
.nv-when-light { display: none; }
html[data-nova-theme="light"] .nv-when-light { display: block; }
html[data-nova-theme="light"] .nv-when-dark { display: none; }

@keyframes nv-pulse { 0% { box-shadow: 0 0 0 0 rgba(157, 141, 247, .7); } 100% { box-shadow: 0 0 0 10px rgba(157, 141, 247, 0); } }
@keyframes nv-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nv-pop { 0% { transform: scale(.5) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.07) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes nv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Buttons */
.nv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 44px; padding: 0 18px; border-radius: 13px; border: 1px solid transparent;
	font-family: var(--nv-sans); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none !important;
	cursor: pointer; white-space: nowrap;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.nv-btn:hover { transform: translateY(-1px); }
.nv-btn:active { transform: translateY(1px) scale(.98); }
.nv-btn--grad { background: var(--nv-grad); color: var(--nv-gtext) !important; box-shadow: 0 12px 30px -14px var(--nv-g2); }
.nv-btn--ink { background: var(--nv-ink); color: var(--nv-bg) !important; }
.nv-btn--outline { background: transparent; border-color: var(--nv-border2); color: var(--nv-ink) !important; }
.nv-btn--glass { background: var(--nv-surface); border-color: var(--nv-border2); color: var(--nv-ink) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nv-btn--chip { background: var(--nv-chip); border-color: var(--nv-border2); color: var(--nv-ink) !important; }
.nv-btn--lg { min-height: 54px; padding: 0 22px; border-radius: 15px; font-size: 16px; }
.nv-btn--xl { min-height: 58px; padding: 0 26px; border-radius: 16px; font-size: 17px; }
.nv-btn--block { display: flex; width: 100%; }
/* Buttons that are <button> elements keep the same lettering as link buttons */
:is(.nv-chrome, .nv-nav, .nv-home) button.nv-btn { font-family: var(--nv-sans); font-size: 15px; font-weight: 700; line-height: 1; }
:is(.nv-chrome, .nv-nav, .nv-home) button.nv-btn--lg { font-size: 16px; }
:is(.nv-chrome, .nv-nav, .nv-home) button.nv-btn--xl { font-size: 17px; }

/* --------------------------------------------------------------------------
   Floating navigation
   -------------------------------------------------------------------------- */
.nv-nav { position: fixed; z-index: 9990; left: 0; right: 0; top: var(--nv-nav-top); padding: 0 16px; pointer-events: none; transition: top .2s ease, transform .3s cubic-bezier(.2, .8, .3, 1); }
.nv-nav.is-tucked { transform: translateY(calc(-100% - var(--nv-nav-top) - 12px)); }
.nv-nav__bar {
	pointer-events: auto; position: relative; max-width: 1280px; margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
	padding: 8px 8px 8px 12px; border-radius: 20px; background: var(--nv-surface);
	-webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
	border: 1px solid var(--nv-border); box-shadow: var(--nv-shadow);
}
.nv-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--nv-ink) !important; }
.nv-nav__mark {
	width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--nv-g1), var(--nv-g2));
	color: var(--nv-gtext); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: -.02em;
}
.nv-nav__name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.nv-nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.nv-nav__item { position: relative; }
/* The nav is moved to the top of <body> by JS, outside .nv-chrome, so it is
   targeted directly. Keeps it free of list bullets whatever other CSS does. */
.nv-chrome li, .nv-nav li, .nv-home li { list-style: none !important; margin: 0; }
.nv-chrome li::marker, .nv-nav li::marker, .nv-home li::marker { content: none; }
.nv-nav__item::before, .nv-nav__sub li::before { content: none !important; display: none !important; }
.nv-nav__item > a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none !important; color: var(--nv-muted) !important; font-size: 15px; font-weight: 500; }
.nv-nav__item > a:hover { color: var(--nv-ink) !important; background: var(--nv-chip); }
.nv-nav__item.has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nv-nav__sub {
	position: absolute; left: 0; top: 100%; min-width: 240px; padding: 8px !important; margin-top: 6px !important;
	border-radius: 16px; background: var(--nv-surface2); border: 1px solid var(--nv-border2); box-shadow: var(--nv-shadow);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease;
}
.nv-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nv-nav__item:hover > .nv-nav__sub, .nv-nav__item:focus-within > .nv-nav__sub { opacity: 1; visibility: visible; transform: none; }
.nv-nav__sub a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--nv-text) !important; text-decoration: none !important; font-size: 14px; }
.nv-nav__sub a:hover { background: var(--nv-chip); color: var(--nv-ink) !important; }
.nv-nav__tools { display: flex; align-items: center; gap: 8px; }
.nv-tool {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px;
	border-radius: 12px; border: 1px solid var(--nv-border); background: var(--nv-chip); color: var(--nv-ink); cursor: pointer;
	font-family: var(--nv-mono); font-size: 13px; transition: border-color .2s ease, transform .15s ease;
}
.nv-tool:hover { border-color: var(--nv-border2); }
.nv-tool--ach .nv-icon { color: #c39af4; }
.nv-nav__cta { min-height: 44px; font-size: 14px; padding: 0 16px; border-radius: 12px; }
.nv-nav__burger { display: none; }

@media (max-width: 1020px) {
	.nv-nav__menu { display: none; order: 5; width: 100%; }
	.nv-nav__menu.is-open { display: block; }
	.nv-nav__links { flex-direction: column; align-items: stretch; padding: 8px 0 4px; }
	.nv-nav__item > a { padding: 12px; }
	.nv-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; margin: 0 !important; padding: 0 0 0 12px !important; }
	.nv-nav__burger { display: inline-flex; }
}
.nv-nav__extra { display: none; }
@media (max-width: 560px) {
	.nv-nav__name { display: none; }
	.nv-nav__cta { padding: 0 12px; font-size: 13px; }
	.nv-tool--ach span { display: none; }
	/* One slim row on phones: Play Typing Quest and Achievements move into the menu. */
	.nv-nav__tools .nv-tool--ach, .nv-nav__tools .nv-nav__cta { display: none; }
	.nv-nav__extra { display: grid; gap: 8px; padding: 4px 4px 8px; }
	.nv-nav__extra .nv-btn { min-height: 50px; justify-content: center; }
	.nv-nav__extra .nv-icon-trophy { color: #c39af4; }
	.nv-nav__extra-count { font-family: var(--nv-mono); font-size: 13px; font-weight: 500; color: var(--nv-muted); }
}
@media (min-width: 370px) and (max-width: 560px) {
	.nv-nav__name { display: inline; font-size: 16px; }
}

/* Things that differ between phones and bigger screens */
.nv-phone-only { display: none !important; }
@media (max-width: 720px) {
	.nv-phone-only { display: inline-flex !important; }
	.nv-wide-only { display: none !important; }
}
.nv-tip-touch { display: none; }
@media (hover: none) {
	.nv-tip-mouse { display: none; }
	.nv-tip-touch { display: inline; }
}

/* Buy Me a Coffee banner (Simple Banner plugin): slimmer on phones */
@media (max-width: 720px) {
	#simple-banner .simple-banner-text { font-size: 13px !important; line-height: 1.4 !important; padding: 8px 44px 8px 14px !important; }
	#simple-banner .simple-banner-button { font-size: 14px !important; }
}

/* Reading progress (single posts) */
.nv-progress { position: fixed; z-index: 9991; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.nv-progress span { display: block; height: 100%; width: 0; background: var(--nv-grad); box-shadow: 0 0 12px var(--nv-g2); }
body.admin-bar .nv-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nv-progress { top: 46px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.nv-footer { margin-top: 140px; border-top: 1px solid var(--nv-border); background: var(--nv-bg); color: var(--nv-muted); font-family: var(--nv-sans); }
.nv-footer__top { display: flex; flex-wrap: wrap; gap: 24px 32px; justify-content: space-between; align-items: center; padding-top: 56px; }
.nv-footer__top p { margin: 0; font-size: 18px; color: var(--nv-muted); text-wrap: balance; }
.nv-footer__word { padding-top: 56px; overflow: hidden; }
.nv-footer__word div { font-size: clamp(64px, 15.6vw, 236px); font-weight: 700; line-height: .8; letter-spacing: -.065em; white-space: nowrap; color: var(--nv-bg); -webkit-text-stroke: 2.4px var(--nv-border2); paint-order: stroke fill; }
.nv-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; padding-bottom: 36px; font-family: var(--nv-mono); font-size: 12px; }
.nv-footer__links { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 560px) { .nv-footer__links { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 22px; } }
.nv-footer a { color: var(--nv-muted) !important; }
.nv-footer a.nv-btn { color: var(--nv-bg) !important; }

/* --------------------------------------------------------------------------
   Overlays: search palette + achievements drawer
   -------------------------------------------------------------------------- */
.nv-overlay { position: fixed; inset: 0; z-index: 99990; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.nv-overlay[hidden] { display: none; }
.nv-overlay__scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(8, 6, 16, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: default; }
.nv-palette {
	position: relative; width: 100%; max-width: 660px; border-radius: 22px; border: 1px solid var(--nv-border2);
	background: var(--nv-surface2); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .65); overflow: hidden; animation: nv-rise .2s ease both;
}
.nv-palette__head { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 64px; border-bottom: 1px solid var(--nv-border); color: var(--nv-g1); }
.nv-palette__head input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important; font-family: var(--nv-sans); font-size: 18px; color: var(--nv-ink); padding: 0; height: auto; }
.nv-palette kbd, .nv-palette__foot { font-family: var(--nv-mono); font-size: 11px; color: var(--nv-faint); }
.nv-palette kbd { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--nv-border); background: transparent; box-shadow: none; }
.nv-palette__list { padding: 8px; max-height: 52vh; overflow-y: auto; }
.nv-palette__row {
	display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
	text-decoration: none !important; color: var(--nv-ink) !important; box-shadow: inset 3px 0 0 transparent;
}
.nv-palette__row.is-active { background: var(--nv-chip); box-shadow: inset 3px 0 0 var(--nv-g1); }
.nv-palette__row span { flex: 1 1 auto; min-width: 0; font-size: 15px; }
.nv-palette__row em { flex-shrink: 0; font-style: normal; font-family: var(--nv-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.nv-palette__empty { padding: 24px 14px; color: var(--nv-muted); font-size: 15px; }
.nv-palette__foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--nv-border); }

.nv-overlay--side { justify-content: flex-end; align-items: stretch; padding: 0; }
.nv-drawer {
	position: relative; width: min(440px, 100%); height: 100%; overflow-y: auto; background: var(--nv-surface2);
	border-left: 1px solid var(--nv-border2); padding: 26px; animation: nv-rise .3s ease both;
}
.nv-drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.nv-drawer__count { margin-top: 6px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--nv-ink); }
.nv-drawer__note { margin: 14px 0 18px; font-size: 14px; line-height: 1.5; color: var(--nv-muted); }
.nv-drawer__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px !important; }
.nv-ach { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--nv-border); opacity: .62; }
.nv-ach.is-on { opacity: 1; background: linear-gradient(90deg, var(--nv-spot), transparent); }
.nv-ach__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--nv-chip); color: var(--nv-faint); display: flex; align-items: center; justify-content: center; font-family: var(--nv-mono); font-weight: 700; }
.nv-ach.is-on .nv-ach__icon { background: linear-gradient(135deg, var(--nv-g1), var(--nv-g2)); color: var(--nv-gtext); }
.nv-ach b { display: block; font-size: 15px; color: var(--nv-ink); }
.nv-ach small { display: block; font-size: 13px; line-height: 1.4; color: var(--nv-muted); }

/* Toasts */
.nv-toasts { position: fixed; z-index: 99995; right: 20px; bottom: 20px; width: min(360px, calc(100% - 40px)); pointer-events: none; }
.nv-toast { border-radius: 18px; padding: 1px; background: linear-gradient(135deg, var(--nv-g1), var(--nv-g2)); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); animation: nv-toast .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.nv-toast.is-out { animation: nv-toast-out .3s ease forwards; }
.nv-toast > div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 17px; background: var(--nv-surface2); }
.nv-toast__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(135deg, var(--nv-g1), var(--nv-g2)); color: var(--nv-gtext); display: flex; align-items: center; justify-content: center; animation: nv-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.nv-toast__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-toast__copy small { font-family: var(--nv-mono); font-size: 10px; letter-spacing: .12em; color: var(--nv-muted); }
.nv-toast__copy b { font-size: 16px; color: var(--nv-ink); }
.nv-toast__copy span { font-size: 13px; color: var(--nv-muted); }
@keyframes nv-toast { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nv-toast-out { to { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
	.nv-chrome *, .nv-nav *, .nv-home * { animation: none !important; transition: none !important; }
}

/* Painting on the home-page grid: no text selection while the mouse is held. */
html.nv-painting, html.nv-painting * { -webkit-user-select: none !important; user-select: none !important; cursor: crosshair; }