body {
			padding: 0;
			margin: 0;
		}

#xall {
			--accent-color: #ffcc00;
			--text-color: #111;
			--control-color: #1c3380;
			--control-radius: 8px;
			--shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
			font-family: "Fira Sans", Roboto, Arial, sans-serif;
			margin-top: 0;
			padding-bottom: 0;
			font-size: 22px;
			line-height: 1.4;
			color: var(--text-color);
			
			font-weight: 400;
			--round-size: 190px;
			accent-color: var(--control-color);
			width: 100%;
			min-width: 0;
		}

		#campaign-teaser {
			--accent-color: #ffcc00;
			--ink: #1b3380;
			box-sizing: border-box;
			font-family: "Fira Sans", Roboto, Arial, sans-serif;
			font-size: 24px;
			line-height: 1.4;
			letter-spacing: 0;
			color: var(--ink);
			background: var(--accent-color);
			overflow: hidden;
			margin-top: 0;
			width: min(1320px, 100%);
		}

		#campaign-teaser *,
		#campaign-teaser *::before,
		#campaign-teaser *::after {
			box-sizing: border-box;
		}

		.teaser-hero {
			display: none;
			width: 100%;
			background: var(--accent-color);
		}

		.teaser-hero picture,
		.teaser-hero img {
			display: block;
			width: 100%;
			height: auto;
		}

		.teaser-inner {
			width: 100%;
			padding: 14px 0 29px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: var(--accent-color);
		}

		.teaser-content {
			width: min(1180px, 100%);
			text-align: center;
		}

		.teaser-heading {
			width: min(940px, 80vw);
			min-height: 78px;
			margin: 5px auto 10px;
			padding:  20px;
			border: 2px solid #fff;
			border-radius: 11px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: transparent;
		}

		.teaser-heading.is-running {
			width: min(940px, calc(100vw - 60px));
			min-height: 112px;
			padding: 16px 48px;
			border-width: 3px;
			border-radius: 16px;
			box-shadow: 0 0 12px 3px rgba(31, 170, 41, 0.8);
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 28px;
		}

		#campaign-teaser .teaser-heading.is-running .teaser-title {
			flex: 0 0 auto;
			margin: 0;
			font-size: 30px;
			white-space: nowrap;
			background: url(/r/zolta-pinezka-final/img/mazy-1.png) center / 100% 100% no-repeat;
			padding:10px 40px;
		}

		.teaser-live-indicator {
			display: none;
			width: 22px;
			height: 22px;
			margin-right: 8px;
			border-radius: 50%;
			background: #55b51f;
			animation: teaser-live-pulse 1.5s ease-out infinite;
			vertical-align: 2px;
		}

		@keyframes teaser-live-pulse {
			0%,
			100% {
				box-shadow: 0 0 0 0 rgba(85, 181, 31, 0.55);
			}

			50% {
				box-shadow: 0 0 0 8px rgba(85, 181, 31, 0);
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.teaser-live-indicator {
				animation: none;
			}
		}

		.teaser-heading.is-running .teaser-live-indicator {
			display: inline-block;
		}

		.teaser-running-countdown {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 12px;
			min-width: 0;
			color: var(--ink);
			font-size: 20px;
			font-weight: 700;
			line-height: 1.1;
			text-align: right;
		}

		.teaser-running-countdown[hidden] {
			display: none;
		}

		.teaser-countdown-label {
			max-width: 250px;
		}

		.teaser-countdown-clock {
			display: grid;
			grid-template-columns: 62px 12px 62px;
			align-items: start;
			gap: 4px;
			text-align: center;
		}

		.teaser-countdown-unit {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 3px;
		}

		.teaser-countdown-value {
			display: block;
			width: 62px;
			padding: 4px 0;
			border-radius: 6px;
			background: var(--ink);
			color: #fff;
			font-size: 24px;
			line-height: 1.15;
		}

		.teaser-countdown-unit small {
			font-size: 10px;
			font-weight: 500;
			line-height: 1;
		}

		.teaser-countdown-separator {
			padding-top: 4px;
			font-size: 24px;
			line-height: 1.15;
		}

		#campaign-teaser .teaser-title {
			
    margin: 0 auto;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
}
	

		.teaser-title-highlight {
			position: relative;
			isolation: isolate;
			white-space: nowrap;
		}

		.teaser-title-highlight::before {
			content: '';
			position: absolute;
			z-index: -1;
			inset: -3px -7px;
			background: url('/r/zolta-pinezka-final/img/mazy-1.png') center / 100% 100% no-repeat;
		}

		#campaign-teaser .teaser-lead {
			margin: 2px auto 0;
			font-size: 20px;
			line-height: 1.25;
			font-weight: 400;
			text-align: center;
		}

		#campaign-teaser .teaser-rules {
			margin: 50px auto 50px;
			font-size: 25px;
			line-height: 1.15;
			font-weight: 700;
			text-align: center;
		}

		.teaser-prize {
			padding: 1px 5px;
			border-radius: 4px;
			background: var(--ink);
			color: #fff;
			white-space: nowrap;
		}

		.teaser-step-description {
			font-size: 15px;
			line-height: 1.15;
			display: block;
			font-weight: 500;
		}

		.teaser-checklist {
			--step-gap: 20px;
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: var(--step-gap);
			
			margin: 0 auto;
			padding: 0;
			list-style: none;
			font-size: 12px;
			line-height: 1.2;
			font-weight: 400;
			margin-bottom: 50px;
		}

		.teaser-checklist li {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 0 4px;
		}

		.teaser-checklist li:not(:last-child)::after {
			content: '';
    position: absolute;
    top: 134px;
    left: calc(50% + 42px);
    width: calc(100% + var(--step-gap) - 84px);
    border-top: 2px dashed var(--ink);
    pointer-events: none;
		}

		.teaser-step-icon {
			display: block;
    width: 135px;
    height: 165px;
    object-fit: contain;
    margin: 0 auto 20px;
		}

		.teaser-checklist img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
			margin: 0;
		}

		.teaser-step-number {
			position: absolute;
			bottom: -15px;
			left: 50%;
			width: 32px;
			height: 32px;
			transform: translateX(-50%);
			border: 3px solid var(--accent-color);
			border-radius: 50%;
			background: var(--ink);
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			line-height: 26px;
			display: none;
		}

		#campaign-teaser .teaser-step-title {
			display: block;
			margin: 0 0 4px;
			font-size: 20px;
			line-height: 1.2;
			font-weight: 700;
			text-transform: uppercase;
		}

		.teaser-step-link {
			color: inherit;
			text-decoration: none;
		}

		.teaser-step-link:hover .teaser-step-title {
			text-decoration: underline;
		}

		.teaser-step-link:focus-visible {
			outline: 3px solid var(--ink);
			outline-offset: 6px;
		}

		#campaign-teaser .teaser-final {
			width: min(620px, 100%);
			margin: 30px auto 0;
			padding: 20px 32px 20px;
			font-size: 25px;
			line-height: 1.15;
			font-weight: 500;
			text-align: center;
			background: url('/r/zolta-pinezka-final/img/mazy-2.png') center / 100% 100% no-repeat;
		}

		.teaser-final-note {
			display: block;
			width: min(420px, 82%);
			height: auto;
			position: absolute;
			right:90px;
			bottom:20px;
		}

		#campaign-live {
			display: none;
			width: 100%;
			min-width: 0;
		}

		body.campaign-live #campaign-live {
			display: block;
		}

		@media (max-width: 540px) {
			.teaser-hero {
				display: block;
			}

			.teaser-inner {
				padding: 10px 10px 18px;
			}

			.teaser-heading {
				width: 100%;
				min-height: 66px;
				margin-bottom: 8px;
				padding: 8px 12px;
			}

			.teaser-heading.is-running {
				width: 100%;
				min-height: 0;
				padding: 8px 10px 10px;
				flex-direction: column;
				gap: 4px;
			}

			#campaign-teaser .teaser-heading.is-running .teaser-title {
				padding: 7px 24px;
				font-size: 22px;
			}

			.teaser-live-indicator {
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}

			.teaser-running-countdown {
				width: 100%;
				flex-direction: column;
				justify-content: center;
				gap: 5px;
				font-size: 15px;
				text-align: center;
			}

			.teaser-countdown-label {
				max-width: none;
			}

			.teaser-countdown-clock {
				grid-template-columns: 64px 12px 64px;
				gap: 4px;
			}

			.teaser-countdown-value {
				width: 64px;
				padding: 3px 0;
				font-size: 22px;
			}

			.teaser-countdown-separator {
				padding-top: 3px;
				font-size: 22px;
			}

			#campaign-teaser .teaser-title {
				font-size: 19px;
			}

			.teaser-title-highlight::before {
				background-image: url('/r/zolta-pinezka-final/img/mazy-1-mobile.png');
			}

			#campaign-teaser .teaser-lead {
				font-size: 12px;
			}

			#campaign-teaser .teaser-rules {
				margin: 30px auto 42px;
				font-size: 20px;
				line-height: 1.12;
			}

			.teaser-checklist {
				--step-gap: 8px;
				width: calc(100% - 24px);
				grid-template-columns: repeat(2, minmax(0, 1fr));
				max-width: 460px;
				row-gap: 50px;
				font-size: 14px;
			}

			.teaser-checklist li:not(:last-child)::after {
				display: none;
			}

			.teaser-checklist li:nth-child(odd)::after {
				display: none;
			}

			.teaser-step-icon {
				position: relative;
				z-index: 1;
				width: 108px;
				height: 108px;
				margin: 0 auto 36px;
			}

			.teaser-step-number {
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: -18px;
				width: 42px;
				height: 42px;
				border: 4px solid #c8c8c8;
				background: #1c3580;
				font-size: 16px;
				line-height: 1;
				display: none;
			}

			#campaign-teaser .teaser-step-title {
				margin: 0 0 12px;
				font-size: 16px;
				line-height: 1.15;
			}

			.teaser-step-description {
				font-size: 14px;
				line-height: 1.2;
			}

			#campaign-teaser .teaser-final {
				width: min(420px, 100%);
				margin-top: 16px;
				padding: 10px 18px 7px;
				font-size: 14px;
				background-image: url('/r/zolta-pinezka-final/img/mazy-2-mobile.png');
			}

			

			#round-live-status {
				margin: 12px auto;
			}

			#round-live-status p {
				font-size: 14px;
			}
		}

		#xall :focus {
			outline: none;
		}
	

		@media (max-width:540px) {
			#xall {
				font-size: 19px;
			}

			#xall #map-container {
				display: flex;
				flex-direction: column;
				gap: 8px;
				height: min(70vh, 700px);
				min-height: 0;
				border-radius: 12px;
				padding: 0px 0 8px;
			}

			#xall #map-container.pin-form-open {
				height: min(70vh, 700px);
				min-height: 440px;
			}

			#xall #map {
				position: relative;
				top: 75px;
				bottom: auto;
				flex: 0 0 auto;
				height: min(70vh, 500px);
				min-height: 200px;
			}

			#map-toolbar {
				min-height: 40px;
				padding: 3px 20px;
				justify-content: center;
			}

			#xall #view-mode-toggle {
				position: absolute;
				top: auto;
				right: auto;
				bottom: 30px;
				left: auto;
				align-self: center;
				flex-direction: column;
				gap: 6px;
				width: min(220px, 100%);
				transform: none;
				background: transparent;
				box-shadow: none;
				overflow: visible;
			}

			#xall #view-mode-toggle button {
				width: 100%;
				font-size: 12px;
				
			}

			#xall #view-mode-toggle #today-view-button {
				margin-right: 0;
			}

			#pin-start {
				
				font-size: 12px;
			}
			#map-toolbar{justify-content: center !important;}
		}

		#map-container {
			position: relative;
			width: 100%;
			max-width: 1320px;
			margin: 0 auto;
			height: min(150vh, 720px);
			min-height: 300px;
			border: 2px solid #fff;
			border-radius: 14px;
			box-sizing: border-box;
			overflow: hidden;
			background: var(--accent-color, #ffcc00);
		}

		#map-container.pin-form-open {
			height: min(150vh, 720px);
			min-height: 440px;
		}

		#map {
			position: absolute;
			top: 86px;
			bottom: 0;
			width: 100%;
		}

		#map-toolbar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1001;
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 44px;
			padding: 20px;
			background: transparent;
		}

		#geo-status {
			position: absolute;
			top: calc(50% + 23px);
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1001;
			border-radius: 50%;
			background: #fff;
			color: #111;
			font-weight: 700;
			text-align: center;
			width: var(--round-size);
			height: var(--round-size);
			padding: 12px;
			box-shadow: var(--shadow);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease;
			animation: geo-spin 3s linear infinite;
		}

		#geo-status.visible {
			opacity: 0.75;
		}

		@keyframes geo-spin {
			from {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}

		#pin-start {
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			z-index: auto;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			background: #1B3380;
			color: #fff;
			border: 2px solid transparent;
			font-weight: 500;
			font-size: 15px;
			
			padding: 8px 40px;
			box-shadow: none;
			display: block;
			text-align: center;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease;
			z-index: 1;
		}

		#pin-start.visible {
			opacity: 1;
			pointer-events: auto;
		}

		#pin-start:hover {
			transform: none;
			box-shadow: none;
		}

		#pin-start:disabled {
			background: #d6ac00;
			color: rgba(255, 255, 255, 0.75);
			cursor: default;
		}

		#map-style-toggle {
			position: relative;
			top: auto;
			left: auto;
			z-index: auto;
			display: none;
			width: 40px;
			height: 40px;
			padding: 0;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			background: #fff;
			color: var(--text-color);
			box-shadow: var(--shadow);
		}

		#map-style-toggle .map-style-icon {
			position: relative;
			display: block;
			width: 19px;
			height: 19px;
			margin: 0 auto;
			border: 2px solid currentColor;
			border-radius: 50%;
		}

		#map-style-toggle .map-style-icon::before {
			content: '';
			position: absolute;
			top: -2px;
			left: 4px;
			width: 7px;
			height: 19px;
			border: 2px solid currentColor;
			border-top: 0;
			border-bottom: 0;
			border-radius: 50%;
		}

		#map-style-toggle .map-style-icon::after {
			content: '';
			position: absolute;
			top: 7px;
			left: -2px;
			width: 19px;
			height: 2px;
			background: currentColor;
		}

		#view-mode-toggle {
			position: absolute;
			top: 20px;
			right: 12px;
			z-index: 1002;
			display: flex;
			align-items: center;
			overflow: hidden;
		}

		#view-mode-toggle[hidden] {
			display: none;
		}

		#view-mode-toggle button {
			border: none;
			cursor: pointer;
			background: #F89113;
			color: #fff;
			font: inherit;
			font-size: 15px;
			padding: 8px 40px;
			border: 2px solid #F89113;
			border-radius: 4px;
		}
		#today-view-button{margin-right: 15px;}

		#view-mode-toggle button[aria-pressed="true"] {
			
			border: 2px solid var(--control-color);
			color: #fff;
			
		}

		#view-mode-toggle button:disabled {
			opacity: 0.6;
			cursor: default;
		}

		.pin-form {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 9px;
			font-size: 14px;
			width: 100%;
			min-width: 0;
			padding: 20px 18px 16px;
			border-radius: 22px;
			background: #ffcc00;
			box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
			font-family: "Fira Sans", Roboto, Arial, sans-serif;
		}

		.pin-form-popup .maplibregl-popup-content {
			width: min(380px, calc(100vw - 90px));
			max-width: none;
			max-height: calc(100% - 24px);
			padding: 0;
			background: transparent;
			box-shadow: none;
			overflow: visible;
		}

		.pin-form-popup .maplibregl-popup-tip {
			border-top-color: #ffcc00;
			border-bottom-color: #ffcc00;
		}

		.pin-form label {
			display: flex;
			flex-direction: column;
			gap: 4px;
			font-weight: 600;
		}

		.pin-form .pin-form-field input {
			box-sizing: border-box;
			width: 100%;
			height: 48px;
			font: inherit;
			padding: 10px 16px;
			border: 0;
			border-radius: 8px;
			background: #fff;
			font-size: 16px;
		}

		.pin-form .pin-form-field input::placeholder {
			color: #999;
			opacity: 1;
		}

		.pin-form-field > span {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		.pin-form input[type="file"] {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			padding: 0;
			opacity: 0;
			cursor: pointer;
		}

		.pin-form-upload {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			min-height: 48px;
			border-radius: 9px;
			background: #f89113;
			color: #fff;
			font-size: 17px;
			font-weight: 700;
			text-transform: lowercase;
		}

		.pin-form-upload:focus-within {
			outline: 2px solid #1c3380;
			outline-offset: 2px;
		}

		.pin-form-upload-status {
			margin-top: -5px;
			font-size: 12px;
			overflow-wrap: anywhere;
		}

		.pin-form input.invalid {
			border-color: #b00020;
			outline: none;
		}

		.pin-form-checkbox.invalid {
			color: #b00020;
		}

		.pin-form-checkbox.invalid input {
			outline: 2px solid #b00020;
		}

		.pin-form .pin-form-checkbox {
			flex-direction: row;
			align-items: center;
			font-weight: 400;
		}

		.pin-form .pin-form-agreements .pin-form-checkbox {
			align-items: flex-start;
		}

		.pin-form .pin-form-checkbox input {
			width: auto;
			padding: 0;
		}

		.pin-form .pin-form-agreements .pin-form-checkbox input {
			flex-shrink: 0;
			margin-top: 3px;
		}
		.pin-form .pin-form-agreements .pin-form-checkbox span {
			flex: 1;
			min-width: 0;
			
		}
		.pin-form .pin-form-agreements  {
			flex: 1;
			min-width: 0;
			max-height: 100px;
			overflow-y: auto;
		}

		.pin-form button {
			min-height: 48px;
			margin-top: 0;
			border: none;
			border-radius: 9px;
			cursor: pointer;
			background: #1c3580;
			color: #fff;
			font-weight: 700;
			font-size: 17px;
			padding: 8px 14px;
			text-transform: lowercase;
		}

		.pin-form button:disabled {
			opacity: 0.7;
			cursor: wait;
		}

		.pin-form-error {
			color: #b00020;
			font-size: 13px;
			display: none;
		}

		#thank-you {
			position: absolute;
			top: calc(50% + 23px);
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			border-radius: 50%;
			background: #fff;
			color: #111;
			font-weight: 700;
			text-align: center;
			width: var(--round-size);
			height: var(--round-size);
			padding: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease;
		}

		#thank-you.visible {
			opacity: 1;
		}

		.result-popup .maplibregl-popup-content {
			border-radius: 16px;
			padding: 25px 25px;
			font-size: 18px;
			text-align: center;
			font-family: "Fira Sans", Roboto, Arial, sans-serif;
			background: #ffcc00 !important;
			color: #1b3380 !important;
		}

		.result-winner-photo {
			display: block;
			width: min(180px, 60vw);
			max-height: 180px;
			margin: 0 auto 8px;
			border-radius: 6px;
			object-fit: contain;
		}

		#info-section {
			width: 90vw;
			max-width: 1000px;
			margin: 0 auto;
			padding: 2em 0;
			background: var(--accent-color);
		}

		#xall h1 {
			font-size: 2em;
			font-weight: 900;
			text-align: center;
			margin-bottom: 16px;
		}

		#round-live-status {
			margin: 24px auto;
			text-align: center;
		}

		#round-live-status h2,
		#round-live-status p {
			margin: 0;
		}

		#round-live-status p {
			font-size: 20px;
			font-weight: 700;
		}
		.content-wrapper {
			box-sizing: border-box;
			width: 100%;
			padding:  30px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #ffcc00 url('/r/zolta-pinezka-final/img/back-1.png') center bottom / 100% auto no-repeat;
		}
		.hero {
			width: 100%;
			height: auto;
			position: relative;
			overflow: hidden;
			text-align: center;
			background: #ffcc00;
		}

		.hero picture {
			display: block;
			width: 100%;
		}

		.hero img {
			display: block;
			width: 100%;
			max-width: 100%;
			height: auto;
		}
		.slucha{
			flex: 0 0 auto;
			margin: 0;
			font-size: 60px;
			white-space: nowrap;
			background: #ffcc00 url(/r/zolta-pinezka-final/img/slucha.png) center / 100% 100% no-repeat;
			padding:40px;
			text-align: center;
		color: #1b3380;
		font-weight: 900;
		}
		@media (max-width: 700px), (pointer: coarse) {
			#xall #map-container,
			#xall #map-container.pin-form-open {
				display: flex;
				flex-direction: column;
				gap: 8px;
				height: auto;
				min-height: 0;
				overflow: visible;
				padding: 0 0 8px;
			}

			#xall #map {
				position: relative;
				top: auto;
				bottom: auto;
				flex: 0 0 auto;
				width: 100%;
				height: min(70vh, 500px);
				min-height: 200px;
				margin-top: 75px;
			}

			#xall #view-mode-toggle {
				position: relative;
				top: auto;
				right: auto;
				bottom: auto;
				left: auto;
				align-self: center;
				flex-direction: column;
				gap: 6px;
				width: min(220px, calc(100% - 24px));
				margin: 0 auto 8px;
				transform: none;
				background: transparent;
				box-shadow: none;
				overflow: visible;
				z-index: 1;
			}

			#xall #view-mode-toggle button {
				width: 100%;
			}

			.slucha {
				font-size: 30px;
				padding: 20px;
				background: #ffcc00 url(/r/zolta-pinezka-final/img/slucha-mobile.png) center / 100% 100% no-repeat;
			}
			.text-mobile-right{text-align: right;}
			.text-mobile-left{text-align: left;}
			.align-right{align-items: flex-end !important;}
			.align-left{align-items: flex-start !important;}
			.teaser-final-note {
				right: 20px;
				bottom: 30px;
			}
    
		}
.maplibregl-popup{max-width:400px !important;}
.maplibregl-popup-close-button{font-size: 30px !important;
    padding: 4px 7px !important;}