/* Fazy Księżyca – Magiczny Pasek Dnia
   Style panelu. Kolory sterowane zmiennymi CSS. */

.fk-bar {
	--fk-accent: #c2703d;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	width: 100%;
	padding: 1.25rem 1.6rem;
	border-radius: 16px;
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	line-height: 1.45;
	position: relative;
	overflow: hidden;
}

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

/* ---------- Motyw ciemny (domyślny) ---------- */
.fk-bar.fk-dark {
	--fk-bg-a: #1c1411;
	--fk-bg-b: #2a1c16;
	--fk-text: #f3e4d6;
	--fk-text-soft: #c9a98f;
	--fk-border: rgba(194, 112, 61, 0.35);
	--fk-chip-bg: rgba(194, 112, 61, 0.12);
	--fk-chip-border: rgba(194, 112, 61, 0.28);

	--fk-moon-lit: #d9c3a3;
	--fk-moon-hi: #fbf2e2;
	--fk-moon-dark: #2c211b;
	--fk-moon-ring: rgba(255, 240, 220, 0.18);
	--fk-moon-glow: var(--fk-accent);

	color: var(--fk-text);
	background:
		radial-gradient(120% 160% at 12% 10%, rgba(194, 112, 61, 0.18) 0%, transparent 55%),
		linear-gradient(135deg, var(--fk-bg-a) 0%, var(--fk-bg-b) 100%);
	border: 1px solid var(--fk-border);
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Motyw jasny ---------- */
.fk-bar.fk-light {
	--fk-bg-a: #faf4ec;
	--fk-bg-b: #f0e6d8;
	--fk-text: #3a2a20;
	--fk-text-soft: #8a6f59;
	--fk-border: rgba(194, 112, 61, 0.32);
	--fk-chip-bg: rgba(194, 112, 61, 0.10);
	--fk-chip-border: rgba(194, 112, 61, 0.30);

	--fk-moon-lit: #e7c98f;
	--fk-moon-hi: #fffaf0;
	--fk-moon-dark: #d8cabb;
	--fk-moon-ring: rgba(120, 90, 60, 0.25);
	--fk-moon-glow: var(--fk-accent);

	color: var(--fk-text);
	background:
		radial-gradient(120% 160% at 12% 10%, rgba(194, 112, 61, 0.14) 0%, transparent 55%),
		linear-gradient(135deg, var(--fk-bg-a) 0%, var(--fk-bg-b) 100%);
	border: 1px solid var(--fk-border);
	box-shadow: 0 14px 30px -22px rgba(120, 80, 50, 0.5);
}

/* dekoracyjna linia u góry */
.fk-bar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--fk-accent), transparent);
	opacity: 0.6;
}

/* ---------- Wizualizacja Księżyca ---------- */
.fk-visual {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}

.fk-moon-svg {
	display: block;
	filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
	animation: fk-rise 0.9s ease-out both;
}

@keyframes fk-rise {
	from { opacity: 0; transform: translateY(8px) scale(0.92); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Treść ---------- */
.fk-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fk-eyebrow {
	margin: 0 0 0.25rem;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fk-accent);
}

.fk-phase {
	margin: 0 0 0.55rem;
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	flex-wrap: wrap;
}

.fk-emoji {
	font-size: 1.15rem;
	line-height: 1;
}

.fk-phase-name {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.fk-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
}

.fk-chip {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	color: var(--fk-text-soft);
	background: var(--fk-chip-bg);
	border: 1px solid var(--fk-chip-border);
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	white-space: nowrap;
}

.fk-loc {
	margin: 0.7rem 0 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.74rem;
	color: var(--fk-text-soft);
	opacity: 0.85;
}

/* ---------- Warianty rozmiaru ---------- */
.fk-bar.fk-maly {
	padding: 0.9rem 1.1rem;
	gap: 1rem;
}
.fk-bar.fk-maly .fk-phase-name {
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
}

.fk-bar.fk-duzy {
	padding: 1.6rem 2rem;
	gap: 1.8rem;
}

/* ---------- Responsywność ---------- */
@media (max-width: 540px) {
	.fk-bar {
		flex-direction: column;
		text-align: center;
		gap: 0.9rem;
	}
	.fk-phase,
	.fk-meta {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fk-moon-svg { animation: none; }
}

/* ===================================================================
   MAGICZNY PASEK DNIA  [magiczny_pasek]
   Wąski pasek pod menu, nad sekcją hero.
   =================================================================== */

.mpd-bar {
	--mpd-gold: #c19a4a;
	--mpd-plum: #46233f;
	--mpd-soft: #6f5763;
	box-sizing: border-box;
	width: 100%;
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

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

/* --- motyw "pergamin" (jasny, pod stronę Zapisane w Gwiazdach) --- */
.mpd-bar.mpd-parchment {
	background: linear-gradient(180deg, #eae3d6 0%, #e3dac9 100%);
	color: var(--mpd-soft);
	border-top: 1px solid color-mix(in srgb, var(--mpd-gold) 50%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--mpd-gold) 50%, transparent);
}
/* zapas dla starszych przeglądarek bez color-mix */
.mpd-bar.mpd-parchment {
	border-top-color: rgba(193, 154, 74, 0.5);
	border-bottom-color: rgba(193, 154, 74, 0.5);
}

/* --- motyw ciemny (gdyby pasek miał leżeć na hero) --- */
.mpd-bar.mpd-dark {
	--mpd-soft: #d9c4d2;
	background:
		radial-gradient(120% 220% at 50% 0%, rgba(193, 154, 74, 0.16) 0%, transparent 60%),
		linear-gradient(180deg, #2e1830 0%, #20122a 100%);
	color: var(--mpd-soft);
	border-top: 1px solid rgba(193, 154, 74, 0.40);
	border-bottom: 1px solid rgba(193, 154, 74, 0.40);
}
.mpd-bar.mpd-dark .mpd-seg b { color: #f6ead9; }

/* --- układ --- */
/* --- układ: zwarty, mieści się bez przewijania (zawija na bardzo wąskich) --- */
.mpd-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 1.1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.3rem 0.6rem;
	font-size: 0.74rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

/* ✨ iskra na początku paska */
.mpd-spark {
	font-size: 0.95em;
	line-height: 1;
	flex: 0 0 auto;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	animation: mpd-twinkle 2.6s ease-in-out infinite;
}
@keyframes mpd-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.88); }
}

/* próbnik koloru dnia – kolorowa kropka (kolor wstawiany inline w atrybucie style,
   więc działa nawet bez tego arkusza i nie jest usuwany jak SVG).
   Ostry kontur (4 kierunki) zapewnia widoczność każdego koloru na danym motywie:
   na kremowym ciemny kontur (ratuje złoty/srebrny), na ciemnym biały (ratuje czarny). */
.mpd-swatch {
	font-size: 2.3em;
	line-height: 0;
	vertical-align: middle;
	position: relative;
	top: 0.06em;
	text-shadow:
		1.1px 0 0 rgba(0, 0, 0, 0.6),
		-1.1px 0 0 rgba(0, 0, 0, 0.6),
		0 1.1px 0 rgba(0, 0, 0, 0.6),
		0 -1.1px 0 rgba(0, 0, 0, 0.6);
}
.mpd-bar.mpd-dark .mpd-swatch {
	text-shadow:
		1.1px 0 0 rgba(255, 255, 255, 0.85),
		-1.1px 0 0 rgba(255, 255, 255, 0.85),
		0 1.1px 0 rgba(255, 255, 255, 0.85),
		0 -1.1px 0 rgba(255, 255, 255, 0.85);
}

/* kropka "teraz" przy bieżącej godzinie planetarnej – inline SVG */
.mpd-now {
	width: 0.62em;
	height: 0.62em;
	vertical-align: middle;
	transform: translateY(-0.04em);
}
.mpd-now circle { stroke: rgba(70, 35, 63, 0.5); stroke-width: 1; }
.mpd-bar.mpd-dark .mpd-now circle { stroke: rgba(255, 255, 255, 0.5); }

/* strzałka "najbliższa" */
.mpd-arrow {
	color: var(--mpd-gold);
	font-weight: 700;
}

/* emoji (faza Księżyca, nów) – dopasowane do wielkości tekstu */
.mpd-emoji {
	font-size: 0.98em;
	line-height: 1;
	vertical-align: middle;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Słońce w znaku – glify obok siebie */
.mpd-sun .mpd-gly { margin-right: 0.05em; }

.mpd-seg {
	display: inline-flex;
	align-items: baseline;
	gap: 0.34em;
	white-space: nowrap;
}

.mpd-seg b {
	font-weight: 600;
	color: var(--mpd-plum);
	letter-spacing: 0.015em;
}

.mpd-gly {
	color: var(--mpd-gold);
	font-size: 1.02em;
	line-height: 1;
	transform: translateY(0.06em);
}

.mpd-zod {
	color: var(--mpd-gold);
	font-size: 1.02em;
}

.mpd-time {
	font-variant-numeric: tabular-nums;
	opacity: 0.92;
	font-size: 0.95em;
}

.mpd-dot {
	color: var(--mpd-gold);
	opacity: 0.8;
	padding: 0 0.05em;
}

.mpd-diamond {
	color: var(--mpd-gold);
	font-size: 0.6rem;
	opacity: 0.75;
	transform: translateY(-0.08em);
}

/* na wąskich ekranach lekko mniejsza czcionka; treść zawija się (bez przewijania) */
@media (max-width: 720px) {
	.mpd-inner {
		font-size: 0.78rem;
		gap: 0.25rem 0.55rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpd-spark { animation: none; }
}

/* --- tryb wersalików: pasek jak strip kategorii (UPPERCASE + spacing) --- */
.mpd-bar.mpd-caps .mpd-inner {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.74rem;
}
.mpd-bar.mpd-caps .mpd-seg b { font-weight: 600; }
.mpd-bar.mpd-caps .mpd-time { letter-spacing: 0.06em; }
.mpd-bar.mpd-caps .mpd-gly,
.mpd-bar.mpd-caps .mpd-zod { font-size: 1.1em; }

/* --- wybór miejscowości na pasku (rozwijana lista) --- */
.mpd-loc { gap: 0.25em; }
.mpd-pin { font-size: 0.95em; line-height: 1; }
select.mpd-city {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(193, 154, 74, 0.6);
	border-radius: 0;
	padding: 0 0.1em 1px;
	max-width: 9.5em;
	outline: none;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
select.mpd-city:focus { border-bottom-color: var(--mpd-gold); }
select.mpd-city option { color: #46233f; background: #f4ecd8; }
.mpd-bar.mpd-dark select.mpd-city { border-bottom-color: rgba(255, 255, 255, 0.4); }
.mpd-bar.mpd-dark select.mpd-city:focus { border-bottom-color: var(--mpd-gold); }
.mpd-bar.mpd-dark select.mpd-city option { color: #f0e6d8; background: #2b1b2e; }