/* ============================================================
	 GLOBAL STYLES
	 ============================================================ */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
	 HEADER BAR
	 ============================================================ */
#header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 80px;
	background: #3399cc;
	color: white;
	z-index: 1000;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	box-sizing: border-box;
	transition: background-color 200ms ease;
}
#header h1, #header h2 {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	cursor: pointer;
}
#header.header--past { background: #999; }
#header h1 span, #header h2 span { border-radius: 4px; padding: 0 2px; }
#header.zoomed h1, #header.zoomed h2 {
    font-size: 20px;
}

/* Buttons inside header */
#tenm-btn, #lang-btn, #help-btn, #help-close {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
#tenm-btn {
	position: absolute; left: 10px; top: 15px;
	width: 50px;
	padding: 4px 10px;
	font: 600 12px/1 system-ui, sans-serif;
	color: white;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 4px;
	transition: background 0.2s, box-shadow 0.2s;
}
#tenm-btn.active { background: #ffcc00; color: black; box-shadow: 0 0 6px rgba(255,204,0,0.8); }

#radar-btn {
    position: absolute; left: 10px; top: 45px;
    width: 50px;
    padding: 4px 10px;
    font: 600 12px/1 system-ui, sans-serif;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    transition: background 0.2s, box-shadow 0.2s;
}
#radar-btn.active {
    background: #ffcc00;
    color: black;
    box-shadow: 0 0 6px rgba(255,204,0,0.8);
}

#lang-btn, #help-btn, #help-close {
	width: 32px; height: 32px; border: none; border-radius: 50%;
	background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
#lang-btn { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); }
#help-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
#lang-btn span { font: 600 11px/1 system-ui, sans-serif; color: white; text-shadow: 1px 1px 1px rgba(0,0,0,0.35); }
#help-btn svg, #lang-btn svg, #help-close svg { width: 18px; height: 18px; fill: white; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35)); }

/* One-shot yellow glow that fades out */
@keyframes flashFade {
	0%   { background: #fff3b0; }
	100% { background: transparent; }
}

.flash {
	animation: flashFade 900ms ease-out;
}

/* ============================================================
	 IMAGE CONTAINER
	 ============================================================ */
.image-container {
	height: calc(100dvh - 80px);
	width: 100vw;
	margin-top: 80px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@supports not (height: 100dvh) {
	.image-container { height: calc(100vh - 80px); }
}
img#forecast-image {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	touch-action: none;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}

/* ============================================================
	 LOADER SPINNER
	 ============================================================ */
#loader { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 20; }
#loader[hidden] { display: none; }
.spinner {
	width: 48px; height: 48px;
	border: 4px solid rgba(0,0,0,0.15);
	border-top-color: rgba(0,0,0,0.55);
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
	 HELP OVERLAY & CARD
	 ============================================================ */
#help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: grid; place-items: center; z-index: 2000; }
#help-overlay[hidden] { display: none; }
.help-card {
	background: #fff; color: #222;
	max-width: 360px; width: calc(100% - 32px);
	padding: 16px 16px 12px; border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	font: 400 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	position: relative;
}
.help-card h2 { margin: 0 0 8px 0; font-size: 16px; }
.help-card ul { margin: 8px 0 12px 18px; padding: 0; }
#help-close { position: absolute; top: 8px; right: 8px; }

/* ============================================================
	 HELP ICON STRIP (MOBILE)
	 ============================================================ */
#help-icons-strip {
  display: none; 
  justify-content: center; 
  align-items: center; 
  gap: 8px;
	padding: 5px; background: rgba(255,255,255,0.9);
	position: absolute; bottom: 0; width: 100%;
	transition: transform 0.4s ease, opacity 0.4s ease;
}
/* Only show on touch devices (mobile/tablet) */
@media (pointer: coarse) { 
  #help-icons-strip { 
    display: flex; 
  }
} 
#help-icons-strip img { width: 70px; }
#help-icons-strip.hidden { opacity: 0; transform: translateY(100%); }

/* ============================================================
	 HOTSPOTS (10m mode)
	 ============================================================ */
/* Container handles bouncing */
.hotspot {
	position: absolute;
	transform: translate(-50%, -100%); /* center on point */
	animation: bounce 0.4s infinite alternate;
	cursor: pointer;
	z-index: 50;
}

/* Pin shape inside */
.hotspot .pin {
	width: 20px;
	height: 20px;
	background: #ffcc00;
	border-radius: 50% 50% 50% 0;
	transform-origin: 50% 100%;
	transform: rotate(-45deg) scale(var(--hs-scale, 1));
	position: relative;
}

/* Inner circle */
.hotspot .pin::after {
	content: "";
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 5px;
	left: 5px;
}

/* Pure vertical bounce */
@keyframes bounce {
	from { transform: translate(-50%, -90%); }
	to   { transform: translate(-50%, -110%); }
}