.wp80s-weather-widget {
	--wp80s-bg-top: #0b1e6e;
	--wp80s-bg-bottom: #1747b8;
	--wp80s-accent: #ffcc00;
	--wp80s-text: #ffffff;
	--wp80s-border: #4d7cff;

	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 0 0 4px #05082a, 0 0 30px rgba(0,0,0,0.6);
	background: radial-gradient(ellipse at top, var(--wp80s-bg-bottom), var(--wp80s-bg-top) 70%);
	color: var(--wp80s-text);
	font-family: 'VT323', monospace;
	display: flex;
	flex-direction: column;
}

.wp80s-theme-green {
	--wp80s-bg-top: #012b0e;
	--wp80s-bg-bottom: #04570f;
	--wp80s-accent: #b6ff00;
	--wp80s-border: #3fbf5f;
}

.wp80s-theme-sunset {
	--wp80s-bg-top: #2b0b45;
	--wp80s-bg-bottom: #7b1e6e;
	--wp80s-accent: #ff9f45;
	--wp80s-border: #c94fd6;
}

.wp80s-scanlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.05) 0px,
		rgba(255, 255, 255, 0.05) 1px,
		transparent 2px,
		transparent 3px
	);
	mix-blend-mode: overlay;
	z-index: 5;
}

/* Header */
.wp80s-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px;
	background: linear-gradient(to bottom, #000a3a, #06144f);
	border-bottom: 3px solid var(--wp80s-border);
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	flex-wrap: wrap;
}

.wp80s-logo {
	color: var(--wp80s-accent);
	text-shadow: 0 0 6px var(--wp80s-accent);
}

.wp80s-location {
	flex: 1;
	text-align: center;
	color: #fff;
	letter-spacing: 1px;
}

.wp80s-clock {
	color: var(--wp80s-accent);
}

.wp80s-slide-title {
	display: none;
}

.wp80s-noaa-header-logo {
	display: none;
}

.wp80s-classic-plus,
.wp80s-classic-only-inline {
	display: none;
}

.wp80s-clock-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.3;
}

.wp80s-date {
	display: none;
}

.wp80s-logo-slot {
	display: flex;
	align-items: center;
}

.wp80s-custom-logo {
	max-height: 32px;
	max-width: 110px;
	object-fit: contain;
}

.wp80s-audio-toggle {
	background: rgba(255,255,255,0.1);
	border: 2px solid var(--wp80s-border);
	border-radius: 4px;
	padding: 6px 8px;
	cursor: pointer;
	margin-left: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp80s-audio-toggle:hover {
	background: rgba(255,255,255,0.2);
}

.wp80s-audio-toggle svg {
	display: block;
}

/* Pages / rotation */
.wp80s-pages {
	position: relative;
	flex: 1;
	z-index: 2;
	min-height: 260px;
}

.wp80s-page {
	position: absolute;
	inset: 0;
	padding: 22px 28px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	display: flex;
	flex-direction: column;
}

.wp80s-page.active {
	opacity: 1;
	visibility: visible;
	position: relative;
}

.wp80s-page-title {
	font-family: 'Press Start 2P', monospace;
	font-size: 14px;
	color: var(--wp80s-accent);
	text-shadow: 0 0 6px var(--wp80s-accent);
	margin: 0 0 16px;
	text-align: center;
}

/* Current conditions */
.wp80s-main {
	flex: 1;
	display: flex;
	gap: 20px;
}

.wp80s-current {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-right: 2px dashed rgba(255,255,255,0.25);
	padding-right: 20px;
}

.wp80s-icon {
	font-size: 64px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(255,255,255,0.5);
	display: inline-block;
}

.wp80s-icon-sun {
	animation: wp80s-icon-spin 12s linear infinite;
}

.wp80s-icon-cloud {
	animation: wp80s-icon-drift 4s ease-in-out infinite;
}

.wp80s-icon-rain {
	animation: wp80s-icon-bob 1.4s ease-in-out infinite;
}

.wp80s-icon-snow {
	animation: wp80s-icon-fall 3s ease-in-out infinite;
}

.wp80s-icon-storm {
	animation: wp80s-icon-flicker 2.6s ease-in-out infinite;
}

.wp80s-icon-fog {
	animation: wp80s-icon-drift 6s ease-in-out infinite;
	opacity: 0.85;
}

@keyframes wp80s-icon-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes wp80s-icon-drift {
	0%, 100% { transform: translateX(-4px); }
	50% { transform: translateX(4px); }
}

@keyframes wp80s-icon-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@keyframes wp80s-icon-fall {
	0% { transform: translateY(-3px) rotate(0deg); }
	50% { transform: translateY(3px) rotate(8deg); }
	100% { transform: translateY(-3px) rotate(0deg); }
}

@keyframes wp80s-icon-flicker {
	0%, 100% { opacity: 1; }
	85% { opacity: 1; }
	88% { opacity: 0.3; }
	91% { opacity: 1; }
	94% { opacity: 0.3; }
	97% { opacity: 1; }
}

.wp80s-temp {
	font-family: 'Press Start 2P', monospace;
	font-size: 48px;
	color: var(--wp80s-accent);
	text-shadow: 0 0 10px var(--wp80s-accent);
	margin: 10px 0;
}

.wp80s-condition {
	font-size: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.wp80s-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	font-size: 22px;
}

.wp80s-detail-row {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255,255,255,0.15);
	padding-bottom: 6px;
}

.wp80s-classic-only,
.wp80s-location-inline,
.wp80s-wind-block {
	display: none;
}

.wp80s-detail-row span:first-child {
	color: rgba(255,255,255,0.7);
	letter-spacing: 1px;
	font-size: 16px;
	align-self: center;
}

.wp80s-detail-row span:last-child {
	color: var(--wp80s-accent);
	font-family: 'Press Start 2P', monospace;
	font-size: 14px;
}

/* 5 Day outlook */
.wp80s-outlook-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.wp80s-outlook-day {
	background: rgba(0,10,60,0.4);
	border: 1px solid var(--wp80s-border);
	border-radius: 6px;
	padding: 10px 6px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.wp80s-outlook-day .wp80s-outlook-label {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: var(--wp80s-accent);
}

.wp80s-outlook-day .wp80s-outlook-icon {
	font-size: 30px;
}

.wp80s-outlook-day .wp80s-outlook-hi {
	color: #fff;
	font-size: 22px;
}

.wp80s-outlook-day .wp80s-outlook-lo {
	color: rgba(255,255,255,0.6);
	font-size: 18px;
}

/* Text forecast */
.wp80s-text-forecast {
	font-size: 22px;
	line-height: 1.4;
	flex: 1;
	overflow-y: auto;
}

/* Map: real basemap image with projected city/temp/icon overlay */
.wp80s-page-map {
	padding-bottom: 12px;
}

.wp80s-map {
	flex: 1;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid var(--wp80s-border);
	min-height: 180px;
	background: #253a2b;
}

.wp80s-map-inner {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 5 / 3;
	background: linear-gradient(160deg, #35502f 0%, #1c2e1e 100%);
}

.wp80s-map-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wp80s-map-noimg {
	background: linear-gradient(160deg, #35502f 0%, #1c2e1e 100%);
}

.wp80s-map-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	white-space: nowrap;
	z-index: 2;
}

.wp80s-map-marker-label {
	font-family: 'VT323', monospace;
	font-size: 15px;
	color: #fff;
	text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
	line-height: 1.1;
}

.wp80s-map-marker-row {
	display: flex;
	align-items: center;
	gap: 3px;
}

.wp80s-map-marker-temp {
	font-family: 'Press Start 2P', monospace;
	font-size: 16px;
	color: #ffcc00;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-map-marker-icon {
	font-size: 20px;
	display: inline-block;
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.8));
}

.wp80s-map-marker-center {
	z-index: 3;
}

.wp80s-map-marker-center .wp80s-map-marker-label {
	font-weight: bold;
	font-size: 17px;
	color: #ffe700;
}

.wp80s-map-marker-center .wp80s-map-marker-temp {
	font-size: 20px;
}

.wp80s-map-marker-center .wp80s-map-marker-icon {
	font-size: 26px;
}

/* Sponsor slide */
.wp80s-sponsor-slide {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
}

.wp80s-sponsor-tagline {
	font-size: 24px;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.85);
	margin: 0;
}

.wp80s-sponsor-big-link {
	display: inline-block;
}

.wp80s-sponsor-big-logo {
	max-width: 280px;
	max-height: 160px;
	object-fit: contain;
	filter: drop-shadow(0 0 12px rgba(255,255,255,0.35));
}

/* Sponsor corner badge */
.wp80s-sponsor-corner {
	position: absolute;
	left: 12px;
	bottom: 44px;
	z-index: 6;
	background: rgba(0,10,60,0.7);
	border: 1px solid var(--wp80s-border);
	border-radius: 4px;
	padding: 4px 6px;
	line-height: 0;
}

.wp80s-sponsor-corner img {
	max-height: 34px;
	max-width: 100px;
	object-fit: contain;
	display: block;
}

/* Page dots */
.wp80s-page-dots {
	position: absolute;
	bottom: 44px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	gap: 8px;
}

.wp80s-page-dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	display: block;
	cursor: pointer;
	border: none;
	padding: 0;
	transition: transform 0.15s ease, background 0.15s ease;
}

.wp80s-page-dots button:hover {
	background: rgba(255,255,255,0.6);
	transform: scale(1.2);
}

.wp80s-page-dots button.active {
	background: var(--wp80s-accent);
	box-shadow: 0 0 6px var(--wp80s-accent);
}

/* WeatherStar watermark badge, bottom right, overlaying the ticker */
.wp80s-watermark {
	position: absolute;
	right: 12px;
	bottom: 44px;
	z-index: 6;
	background: rgba(0,10,60,0.7);
	border: 1px solid var(--wp80s-border);
	border-radius: 4px;
	padding: 4px 8px;
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: var(--wp80s-accent);
	text-shadow: 0 0 4px var(--wp80s-accent);
	white-space: nowrap;
	pointer-events: none;
}

/* Ticker */
.wp80s-ticker-wrap {
	background: #000a3a;
	border-top: 3px solid var(--wp80s-border);
	overflow: hidden;
	white-space: nowrap;
	padding: 8px 0;
	z-index: 2;
	display: flex;
	align-items: center;
}

.wp80s-ticker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-left: 100%;
	animation: wp80s-scroll 30s linear infinite;
}

.wp80s-noaa-logo {
	height: 26px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.wp80s-ticker-text {
	font-size: 22px;
	letter-spacing: 1px;
	color: #fff;
	white-space: nowrap;
}

@keyframes wp80s-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@media (max-width: 560px) {
	.wp80s-main {
		flex-direction: column;
	}
	.wp80s-current {
		border-right: none;
		border-bottom: 2px dashed rgba(255,255,255,0.25);
		padding-right: 0;
		padding-bottom: 16px;
	}
	.wp80s-outlook-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 4px;
	}
	.wp80s-outlook-day .wp80s-outlook-icon {
		font-size: 20px;
	}
	.wp80s-sponsor-corner,
	.wp80s-watermark,
	.wp80s-page-dots {
		bottom: 40px;
	}
	.wp80s-watermark {
		font-size: 8px;
		padding: 3px 6px;
	}
}

/* ==================================================================
   WeatherStar Classic display style
   Inspired by vintage 1990s cable-weather displays: diagonal orange/
   blue banner header, bold outlined lettering, and a denser data panel.
   ================================================================== */

.wp80s-style-weatherstar {
	--ws-orange-1: #d97a2b;
	--ws-orange-2: #a85a1a;
	--ws-navy-1: #0d1442;
	--ws-navy-2: #241a5c;
	--ws-panel: #16215e;
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
	background: linear-gradient(155deg, var(--ws-navy-2) 0%, var(--ws-navy-1) 55%, #2a1854 100%);
}

.wp80s-style-weatherstar .wp80s-scanlines {
	display: none;
}

.wp80s-style-weatherstar .wp80s-header {
	background: linear-gradient(100deg, var(--ws-navy-1) 0%, var(--ws-navy-1) 18%, var(--ws-orange-1) 45%, var(--ws-orange-2) 100%);
	border-bottom: none;
	padding: 10px 18px;
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
}

.wp80s-style-weatherstar .wp80s-logo {
	background: #1657c9;
	border: 3px solid #dfeaff;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
	color: #fff;
	text-shadow: none;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.wp80s-style-weatherstar .wp80s-classic-only-inline {
	display: block;
}

.wp80s-style-weatherstar .wp80s-classic-plus {
	display: inline;
	color: #ffe98a;
}

.wp80s-style-weatherstar .wp80s-slide-title {
	display: block;
	flex: 1;
	text-align: center;
	font-family: 'Segoe UI', 'Trebuchet MS', sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: 26px;
	color: #ffe700;
	-webkit-text-stroke: 1.5px #000;
	text-stroke: 1.5px #000;
	text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-location {
	display: none;
}

.wp80s-style-weatherstar .wp80s-noaa-header-logo {
	display: block;
	height: 38px;
	width: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
}

.wp80s-style-weatherstar .wp80s-clock-wrap {
	font-family: 'Consolas', 'Courier New', monospace;
	color: #fff;
}

.wp80s-style-weatherstar .wp80s-clock {
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-date {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-page-title {
	display: none;
}

.wp80s-style-weatherstar .wp80s-pages {
	padding: 14px;
}

.wp80s-style-weatherstar .wp80s-page {
	background: var(--ws-panel);
	border-radius: 10px;
	margin: 0;
}

.wp80s-style-weatherstar .wp80s-current,
.wp80s-style-weatherstar .wp80s-outlook-day,
.wp80s-style-weatherstar .wp80s-text-forecast,
.wp80s-style-weatherstar .wp80s-sponsor-slide {
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
}

.wp80s-style-weatherstar .wp80s-current {
	border-right: 2px solid rgba(255,255,255,0.15);
}

.wp80s-style-weatherstar .wp80s-icon {
	order: 3;
	font-size: 52px;
	margin-top: 6px;
}

.wp80s-style-weatherstar .wp80s-temp {
	order: 1;
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
	font-weight: 900;
	font-size: 56px;
	color: #fff;
	-webkit-text-stroke: 1.5px #000;
	text-shadow: 2px 2px 0 #000;
}

.wp80s-style-weatherstar .wp80s-condition {
	order: 2;
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
	font-weight: 700;
	font-size: 24px;
	text-transform: none;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-wind-block.wp80s-classic-only {
	order: 4;
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-gusts {
	font-size: 16px;
	opacity: 0.9;
}

.wp80s-style-weatherstar .wp80s-classic-only {
	display: flex;
}

.wp80s-style-weatherstar .wp80s-location-inline {
	display: block;
	font-weight: 900;
	font-style: italic;
	font-size: 26px;
	color: #ffe700;
	text-shadow: 1px 1px 0 #000;
	margin-bottom: 8px;
}

.wp80s-style-weatherstar .wp80s-modern-only {
	display: none;
}

.wp80s-style-weatherstar .wp80s-detail-row {
	border-bottom: 1px solid rgba(255,255,255,0.12);
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
}

.wp80s-style-weatherstar .wp80s-detail-row span:first-child {
	color: #fff;
	font-size: 18px;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-detail-row span:last-child {
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-outlook-day {
	background: rgba(0,0,0,0.2);
	border-color: rgba(255,255,255,0.25);
}

.wp80s-style-weatherstar .wp80s-outlook-label,
.wp80s-style-weatherstar .wp80s-outlook-hi,
.wp80s-style-weatherstar .wp80s-outlook-lo {
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
	text-shadow: 1px 1px 0 #000;
}

.wp80s-style-weatherstar .wp80s-text-forecast {
	font-size: 19px;
	color: #fff;
}

.wp80s-style-weatherstar .wp80s-ticker-wrap {
	background: var(--ws-navy-1);
	border-top: none;
}

.wp80s-style-weatherstar .wp80s-ticker-text {
	font-family: 'Verdana', 'Trebuchet MS', sans-serif;
	font-size: 19px;
	font-weight: 700;
	text-shadow: 1px 1px 0 #000;
}

/* ==================================================================
   Severe weather alert banner
   ================================================================== */

.wp80s-alert-ticker-wrap {
	background: #7a0d0d;
	border-top: 3px solid #ff4d4d;
	overflow: hidden;
	white-space: nowrap;
	padding: 8px 0;
	z-index: 3;
	align-items: center;
	gap: 10px;
}

.wp80s-alert-icon {
	flex-shrink: 0;
	font-size: 22px;
	padding: 0 12px;
	animation: wp80s-alert-blink 1s step-start infinite;
}

@keyframes wp80s-alert-blink {
	50% { opacity: 0.3; }
}

.wp80s-alert-ticker {
	display: inline-block;
	padding-left: 100%;
	animation: wp80s-scroll 22s linear infinite;
}

.wp80s-alert-ticker-text {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fff;
	white-space: nowrap;
	text-shadow: 1px 1px 0 #000;
}