/* The page-background picker and the last golden «35» (egg 35-41): css/mwf-eggs.css until 2026-10-26, its own
   file since, with js/mwf-ground-picker.js. */
/* ---- 35-41: the four grounds of /history-35/, one after another — the owner's drawing on a solid wine ground ---
   The script draws it: the outlines traced (stroke dashes), the ink filling in (fill-opacity), then the 35 in gold.
   Over everything, the header and the menu included; a click anywhere ends it. */
.mwf-c35 {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vh, 2rem);
	padding: 4vh 3vw;
	background: #3d0e17;
	color: #f3e7cf;
	cursor: pointer;
	opacity: 0;
}
.mwf-c35[hidden] { display: none; }
.mwf-c35-fig { width: min(94vw, calc((100vh - 9rem) * 1.969), 1500px); }
.mwf-c35-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mwf-c35-art { fill: currentColor; fill-opacity: 0; }
.mwf-c35-art-trace path { fill: none; stroke: currentColor; stroke-width: .32; stroke-linecap: round; stroke-linejoin: round; }
.mwf-c35-num { fill: url(#mwf-c35-gold); fill-opacity: 0; }
.mwf-c35-num-trace path { fill: none; stroke: #e2c574; stroke-width: .5; stroke-linecap: round; stroke-linejoin: round; }
.mwf-c35.is-lit .mwf-c35-num { filter: drop-shadow(0 0 1.4px rgba(252, 233, 168, .6)); }
.mwf-c35-line {
	margin: 0;
	max-width: 40ch;
	text-align: center;
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-style: italic;
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	line-height: 1.35;
	color: #e9d9b4;
	opacity: 0;
}

/* ---- the page-background picker (the user, 2026-10-26; on every page that can take a background) -----
   Full screen under the reward (10001) and over the menu's button row; the page steps aside (opacity, then
   visibility: never the html's overflow) so the ground behind fills the screen — the grounds engine's layers
   (.mwf-ground, and .mwf-ground-wine under it, the .mwfe root's first children), or the page's own ground on
   the root and its ::before, which stay. The medallions: «MWF 2026»
   (the page's own colour this year), the four grounds (grey and sealed till found), then Cosmos; «Salva»
   neutral. */
/* the chain from the ground's host up to body is marked .mwf-gp-keep by the script (js/mwf-ground-picker.js
   keep()): every other child along it steps aside — the page's content, the header, the footer, and what lies
   outside the .mwfe root, as the homepage's hero (section#hero, a child of body) */
html.mwf-gp-on .mwf-gp-keep > :not(.mwf-gp-keep):not(.mwf-ground):not(.mwf-ground-wine):not(.mwf-gp):not(.mwf-c35):not(.mwf-gold-rain):not(script):not(style):not(link) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .45s ease, visibility 0s linear .45s !important;
}
html.mwf-gp-off .mwf-gp-keep > :not(.mwf-gp-keep):not(.mwf-ground):not(.mwf-ground-wine):not(.mwf-gp):not(.mwf-c35):not(.mwf-gold-rain):not(script):not(style):not(link) { transition: opacity .45s ease !important; }
/* the header's place: on most pages the page's own ground (custom-css/mwf.css .mwfe, fixed on a computer)
   begins under the header, so the body shows there — the same ground on the body, fixed, joins it without a
   seam; on a phone the page's ground scrolls, so it is fixed too while the picker is up (nothing scrolls then) */
html.mwf-gp-on body { background: var(--mwfe-bg-deep, #28191b) url('/core/bg/mwfe-ground-wine.webp') center top / cover no-repeat fixed; }
html.mwf-gp-on .mwfe { background-attachment: fixed; }
@media (max-width: 900px) {
	html.mwf-gp-on body { background-image: url('/core/bg/mwfe-ground-wine-m.webp'); }
}
.mwf-gp {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(4.5rem, 9vh, 6rem) 4vw clamp(2rem, 5vh, 3.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		radial-gradient(ellipse at 50% 46%, rgba(12, 6, 8, .18) 0%, rgba(12, 6, 8, .5) 72%, rgba(12, 6, 8, .66) 100%);
	color: #f3e7cf;
	opacity: 0;
}
.mwf-gp[hidden] { display: none; }
.mwf-gp-box {
	width: min(100%, 74rem);
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.mwf-gp-k {
	margin: 0 0 .6rem;
	font-family: var(--mwfe-sans, 'Raleway', sans-serif);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #e2c574;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.mwf-gp-t {
	margin: 0 0 clamp(1.6rem, 4.5vh, 3rem);
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	line-height: 1.12;
	color: #f6ecd8;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.mwf-gp-row {
	--d: clamp(5.6rem, 9.6vw, 8.8rem);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 2.6vw, 2.6rem);
}
.mwf-gp-li { margin: 0; padding: 0; }
.mwf-gp-m {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	width: calc(var(--d) + 1.5rem);
	margin: 0;
	padding: .5rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.mwf-gp-disc {
	position: relative;
	display: block;
	width: var(--d);
	height: var(--d);
	padding: 5px;
	border-radius: 50%;
	background: linear-gradient(145deg, #fbeab0 0%, #d9b25a 30%, #8f6a26 55%, #e6c86d 78%, #fbeab0 100%);
	box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 240, 200, .25);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.mwf-gp-disc::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(70, 45, 10, .6), inset 0 .5rem 1rem rgba(0, 0, 0, .3);
	pointer-events: none;
}
.mwf-gp-disc img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.mwf-gp-n {
	max-width: 100%;
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-style: italic;
	font-size: clamp(.98rem, 1.25vw, 1.12rem);
	line-height: 1.2;
	color: #f6ecd8;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.mwf-gp-y {
	font-family: var(--mwfe-sans, 'Raleway', sans-serif);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .24em;
	color: #e2c574;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.mwf-gp-m:hover .mwf-gp-disc, .mwf-gp-m:focus-visible .mwf-gp-disc { transform: translateY(-4px); }
.mwf-gp-m:focus-visible { outline: none; }
.mwf-gp-m:focus-visible .mwf-gp-disc { box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .5), 0 0 0 3px rgba(246, 236, 216, .75); }
.mwf-gp-m.is-on .mwf-gp-disc {
	transform: translateY(-7px) scale(1.06);
	box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, .55), 0 0 0 2px rgba(251, 234, 176, .95), 0 0 2.2rem rgba(226, 197, 116, .55);
}
/* still to be found: a grey medal, sealed */
.mwf-gp-m.is-sealed { cursor: default; }
.mwf-gp-m.is-sealed .mwf-gp-disc {
	background: linear-gradient(145deg, #b9b9b9 0%, #7d7d7d 35%, #3f3f3f 60%, #8e8e8e 85%, #c4c4c4 100%);
	box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .45);
	transform: none;
}
.mwf-gp-q {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #4a4a4a 0%, #2a2a2a 60%, #1c1c1c 100%);
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: calc(var(--d) * .42);
	line-height: 1;
	color: #8d8d8d;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .12);
}
.mwf-gp-m.is-sealed .mwf-gp-n { color: rgba(246, 236, 216, .55); font-size: .92rem; }
.mwf-gp-m.is-sealed .mwf-gp-y { color: rgba(205, 205, 205, .55); }
/* Cosmos: a night of its own in the disc */
.mwf-gp-stars {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background:
		radial-gradient(circle at 70% 28%, rgba(120, 110, 200, .35) 0%, rgba(120, 110, 200, 0) 38%),
		radial-gradient(circle at 26% 72%, rgba(200, 150, 80, .22) 0%, rgba(200, 150, 80, 0) 34%),
		#04050b;
}
.mwf-gp-stars::before, .mwf-gp-stars::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.4px 1.4px at 18% 22%, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 42% 14%, #fcf0c4 50%, transparent 52%),
		radial-gradient(1.6px 1.6px at 66% 38%, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 84% 62%, #d6dcff 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 30% 54%, #fcf0c4 50%, transparent 52%),
		radial-gradient(1px 1px at 52% 80%, #fff 50%, transparent 52%),
		radial-gradient(1.4px 1.4px at 74% 86%, #d6dcff 50%, transparent 52%),
		radial-gradient(1px 1px at 12% 70%, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 58% 58%, #e2c574 50%, transparent 52%);
}
.mwf-gp-stars::after {
	transform: rotate(140deg) scale(.86);
	opacity: .7;
	animation: mwf-gp-twinkle 5s ease-in-out infinite alternate;
}
@keyframes mwf-gp-twinkle { from { opacity: .2; } to { opacity: .85; } }
.mwf-gp-note {
	min-height: 1.4em;
	margin: clamp(.6rem, 2vh, 1.2rem) 0 0;
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-style: italic;
	font-size: 1.08rem;
	color: #f0dca4;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.mwf-gp-foot {
	position: sticky; /* a tall picker (a phone, six medallions): the note and «Salva» stay in reach */
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: .4rem 1rem clamp(.9rem, 2.4vh, 1.4rem);
}
.mwf-gp-save {
	min-width: 11rem;
	padding: .95rem 2.6rem;
	border: 1px solid rgba(246, 236, 216, .55);
	border-radius: 999px;
	background: rgba(20, 12, 14, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #f6ecd8;
	font-family: var(--mwfe-sans, 'Raleway', sans-serif);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
.mwf-gp-save:hover:not(:disabled), .mwf-gp-save:focus-visible { background: rgba(246, 236, 216, .14); border-color: rgba(246, 236, 216, .9); outline: none; }
.mwf-gp-save:disabled { opacity: .38; cursor: default; }
.mwf-gp-x {
	position: fixed;
	top: clamp(.9rem, 2.4vh, 1.6rem);
	right: clamp(.9rem, 2.4vw, 1.8rem);
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 1px solid rgba(246, 236, 216, .5);
	border-radius: 50%;
	background: rgba(20, 12, 14, .35);
	color: #f6ecd8;
	cursor: pointer;
}
.mwf-gp-x svg { display: block; width: 1.1rem; height: 1.1rem; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mwf-gp-x:hover, .mwf-gp-x:focus-visible { background: rgba(246, 236, 216, .14); outline: none; }
@media (max-width: 640px) {
	.mwf-gp-row { --d: 7.2rem; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 1.2rem; row-gap: 1rem; }
	.mwf-gp-row .mwf-gp-li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
	.mwf-gp-t { font-size: 1.6rem; margin-bottom: 1.4rem; }
	.mwf-gp-foot { align-self: stretch; margin: 0 -4vw; padding-top: 1.4rem; background: linear-gradient(to top, rgba(12, 6, 8, .88) 55%, rgba(12, 6, 8, 0)); }
}
@media (max-width: 640px) and (max-height: 860px) {
	.mwf-gp-row { --d: 6.4rem; row-gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.mwf-gp-disc { transition: none; }
	.mwf-gp-stars::after { animation: none; }
}
