/*
 * Shark Atlas front-end styles.
 * Inherits the theme's fonts. One signature element: beach warning flags for danger levels.
 * Everything else stays quiet so it sits well inside any theme.
 */

:root {
	--sa-ink: #14262e;
	--sa-sea: #0f4c5c;
	--sa-sea-deep: #0a3440;
	--sa-foam: #eef5f6;
	--sa-line: #cfdde1;
	--sa-muted: #5e717a;
	--sa-flag-green: #2b8a3e;
	--sa-flag-yellow: #f2c12e;
	--sa-flag-red: #c92a2a;
	--sa-flag-purple: #6741a6;
	--sa-radius: 6px;
	--sa-gap: 1.25rem;
}

/* ------------------------------------------------------------ Shared */

.sa-muted { color: var(--sa-muted); }
.sa-nowrap { white-space: nowrap; }
.sa-num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sa-note {
	padding: .75rem 1rem;
	border-left: 3px solid var(--sa-flag-yellow);
	background: #fdf8e6;
	color: var(--sa-ink);
	font-size: .95em;
}

.sa-dot {
	display: inline-block;
	width: .7em; height: .7em;
	margin-right: .4em;
	border-radius: 50%;
	background: var(--sa-dot, var(--sa-muted));
	vertical-align: baseline;
	box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px color-mix(in srgb, var(--sa-dot, #000) 35%, transparent);
}

/* ------------------------------------------------------------ Beach-flag danger badge */

.sa-flag {
	--sa-flag: var(--sa-muted);
	--sa-flag-text: #fff;
	display: inline-flex;
	align-items: center;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	padding: 4px 0;
}
.sa-flag__pole {
	align-self: stretch;
	width: 3px;
	margin: -4px 1px -4px 0;
	border-radius: 2px 2px 0 0;
	background: var(--sa-ink);
}
.sa-flag__cloth {
	padding: .38em 1.15em .38em .6em;
	background: var(--sa-flag);
	color: var(--sa-flag-text);
	clip-path: polygon(0 0, 100% 0, calc(100% - .55em) 50%, 100% 100%, 0 100%);
}
.sa-flag--green  { --sa-flag: var(--sa-flag-green); }
.sa-flag--yellow { --sa-flag: var(--sa-flag-yellow); --sa-flag-text: var(--sa-ink); }
.sa-flag--red    { --sa-flag: var(--sa-flag-red); }
.sa-flag--purple { --sa-flag: var(--sa-flag-purple); }

/* ------------------------------------------------------------ Facts list */

.sa-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1rem 1.5rem;
	margin: 0 0 var(--sa-gap);
	padding: 1rem 0;
	border-top: 1px solid var(--sa-line);
	border-bottom: 1px solid var(--sa-line);
}
.sa-facts > div { min-width: 0; }
.sa-facts dt {
	margin: 0 0 .2rem;
	font-size: .85em;
	color: var(--sa-muted);
}
.sa-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Location answer box */

.sa-answer {
	margin: 0 0 calc(var(--sa-gap) * 1.5);
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border-radius: var(--sa-radius);
	background: var(--sa-sea);
	color: #fff;
}
.sa-answer a { color: #fff; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.sa-answer__lead {
	margin: 0 0 1.1rem;
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	line-height: 1.35;
	font-weight: 600;
	max-width: 40ch;
}
.sa-answer__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: .75rem 1.25rem;
	margin: 0 0 1rem;
}
.sa-answer__stats > div { border-top: 1px solid rgba(255, 255, 255, .28); padding-top: .55rem; }
.sa-answer__stats dt { font-size: .85rem; opacity: .85; margin: 0; }
.sa-answer__stats dd {
	margin: .15rem 0 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.sa-answer__context { margin: 0 0 .5rem; max-width: 60ch; }
.sa-answer__updated { margin: 0; font-size: .85rem; opacity: .8; }
.sa-answer .sa-muted { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------------ Species */

.sa-species-list {
	list-style: none;
	margin: 0 0 var(--sa-gap);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: .75rem;
}
.sa-species-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .45rem;
	padding: .9rem 1rem;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
}
.sa-species-card > a { font-weight: 700; }
.sa-species-card__sci { font-style: italic; color: var(--sa-muted); font-size: .9em; }
.sa-species-card__count { font-size: .85em; color: var(--sa-muted); }

.sa-species__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.sa-species__sci { font-style: italic; color: var(--sa-muted); }
.sa-features li { margin-bottom: .35rem; }

.sa-model { margin: 0 0 var(--sa-gap); }
.sa-model model-viewer {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	min-height: 260px;
	background: linear-gradient(180deg, var(--sa-foam), #dce9ec);
	border-radius: var(--sa-radius);
	--poster-color: transparent;
}
.sa-model figcaption { font-size: .85em; color: var(--sa-muted); margin-top: .4rem; }
.sa-hotspot {
	display: block;
	width: 16px; height: 16px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--sa-flag-yellow);
	box-shadow: 0 0 0 1px rgba(10, 52, 64, .45);
	cursor: pointer;
	position: relative;
}
.sa-hotspot:not([data-visible]) { opacity: .2; }
.sa-hotspot:not([data-visible]) .sa-hotspot__label { display: none; }
model-viewer:not(:defined) .sa-hotspot { display: none; }
.sa-hotspot__label {
	position: absolute;
	left: 20px; top: 50%;
	transform: translateY(-50%);
	max-width: 11rem;
	width: max-content;
	padding: .3rem .55rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, .95);
	color: var(--sa-ink);
	font-size: .78rem;
	line-height: 1.25;
	text-align: left;
	box-shadow: 0 1px 3px rgba(10, 52, 64, .25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
.sa-hotspot:hover .sa-hotspot__label,
.sa-hotspot:focus .sa-hotspot__label,
.sa-model:has(.sa-model__toggle input:checked) .sa-hotspot[data-visible] .sa-hotspot__label { opacity: 1; }
.sa-hotspot--left .sa-hotspot__label { left: auto; right: 20px; text-align: right; }
.sa-model figcaption { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.sa-model__toggle { color: var(--sa-ink); white-space: nowrap; }
.sa-model.is-placeholder model-viewer { outline: 1px dashed var(--sa-line); outline-offset: -1px; }

/* ------------------------------------------------------------ Risk list, sources, review */

.sa-risks { padding-left: 1.2em; }
.sa-risks li::marker { color: var(--sa-flag-red); }
.sa-sources { font-size: .95em; overflow-wrap: anywhere; }
.sa-review {
	padding: .6rem .9rem;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	font-size: .95em;
}
.sa-safety {
	margin-top: calc(var(--sa-gap) * 1.5);
	padding-top: 1rem;
	border-top: 3px solid var(--sa-ink);
}
.sa-faq h3 { margin-bottom: .3rem; }
.sa-faq p { margin-top: 0; }

/* ------------------------------------------------------------ Charts */

.sa-charts { display: grid; gap: var(--sa-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sa-chart { margin: 0; }
.sa-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.sa-chart__bar { fill: color-mix(in srgb, var(--sa-sea) 55%, #fff); }
.sa-chart__bar.is-max { fill: var(--sa-sea); }
.sa-chart__axis { stroke: var(--sa-line); stroke-width: 1; }
.sa-chart__value { font-size: 12px; fill: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-chart__label { font-size: 11.5px; fill: var(--sa-muted); }
.sa-chart figcaption { margin-top: .4rem; font-weight: 600; font-size: .95em; }
.sa-chart__note { display: block; font-weight: 400; color: var(--sa-muted); font-size: .9em; }

/* ------------------------------------------------------------ Tables */

.sa-table-scroll { overflow-x: auto; margin: 0 0 var(--sa-gap); -webkit-overflow-scrolling: touch; }
.sa-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .95em; font-variant-numeric: tabular-nums; }
.sa-table caption { text-align: left; font-weight: 600; padding: 0 0 .5rem; }
.sa-table th, .sa-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--sa-line); text-align: left; vertical-align: top; }
.sa-table thead th { font-size: .85em; color: var(--sa-muted); font-weight: 600; border-bottom-width: 2px; }
.sa-table .sa-num { text-align: right; }

/* ------------------------------------------------------------ Map */

.sa-map { margin: 0 0 var(--sa-gap); }
.sa-block-map.alignwide .sa-map__canvas, .sa-block-map.alignfull .sa-map__canvas { border-radius: 0; }
.sa-map__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .6rem 1rem;
	margin-bottom: .75rem;
	font-size: .9rem;
}
.sa-map__controls label { display: flex; flex-direction: column; gap: .2rem; color: var(--sa-muted); }
.sa-map__controls input[type="number"] { width: 6.5em; }
.sa-map__controls input, .sa-map__controls select {
	font: inherit;
	color: var(--sa-ink);
	padding: .35rem .45rem;
	border: 1px solid var(--sa-line);
	border-radius: 4px;
	background: #fff;
}
.sa-map__controls .sa-map__toggle { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .4rem; color: var(--sa-ink); }
.sa-map__canvas {
	width: 100%;
	border-radius: var(--sa-radius);
	background: #cfe0e4;
	z-index: 0;
}
.sa-map__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: .5rem; font-size: .9rem; }
.sa-map__status { margin: 0; color: var(--sa-muted); }
.sa-map__legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0; padding: 0; }
.sa-popup p { margin: 0 0 .35rem; }
.sa-popup p:last-child { margin-bottom: 0; }

.sa-map .marker-cluster-small,
.sa-map .marker-cluster-medium,
.sa-map .marker-cluster-large { background-color: color-mix(in srgb, var(--sa-sea) 30%, transparent); }
.sa-map .marker-cluster-small div { background-color: color-mix(in srgb, var(--sa-sea) 70%, #fff); }
.sa-map .marker-cluster-medium div { background-color: color-mix(in srgb, var(--sa-sea) 85%, #fff); }
.sa-map .marker-cluster-large div { background-color: var(--sa-sea-deep); }
.sa-map .marker-cluster div { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-map .marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
}
.sa-map .marker-cluster div {
	width: 30px; height: 30px;
	margin-left: 5px; margin-top: 5px;
	text-align: center;
	border-radius: 15px;
	font: 700 12px/30px system-ui, sans-serif;
}

/* ------------------------------------------------------------ Games */

.sa-game { margin: 0 0 var(--sa-gap); }
.sa-game__stage { min-height: 16rem; }

.sa-btn {
	font: inherit;
	font-weight: 600;
	padding: .7rem 1.3rem;
	border: 2px solid var(--sa-ink);
	border-radius: var(--sa-radius);
	background: #fff;
	color: var(--sa-ink);
	cursor: pointer;
	min-height: 44px;
}
.sa-btn:hover:not(:disabled) { background: var(--sa-foam); }
.sa-btn:disabled { cursor: default; opacity: .55; }
.sa-btn[aria-pressed="true"] { opacity: 1; }
.sa-btn--primary { background: var(--sa-sea); border-color: var(--sa-sea); color: #fff; }
.sa-btn--primary:hover:not(:disabled) { background: var(--sa-sea-deep); }
.sa-btn--myth { border-color: var(--sa-flag-red); color: var(--sa-flag-red); }
.sa-btn--fact { border-color: var(--sa-flag-green); color: var(--sa-flag-green); }
.sa-btn--myth, .sa-btn--fact { flex: 1 1 0; font-size: 1.1rem; }
.sa-btn--next { margin-top: .5rem; background: var(--sa-sea); border-color: var(--sa-sea); color: #fff; }
.sa-btn--next:hover:not(:disabled) { background: var(--sa-sea-deep); }
.sa-odds__ratio { color: var(--sa-muted); }

.sa-card {
	position: relative;
	max-width: 36rem;
	margin: 0 auto;
	padding: clamp(1.2rem, 4vw, 2rem);
	border: 1px solid var(--sa-line);
	border-top: 6px solid var(--sa-ink);
	border-radius: var(--sa-radius);
	background: #fff;
	touch-action: pan-y;
	user-select: none;
	transition: border-color .2s;
}
.sa-card:focus { outline: none; }
.sa-card[data-lean="myth"] { border-top-color: var(--sa-flag-red); }
.sa-card[data-lean="fact"] { border-top-color: var(--sa-flag-green); }
.sa-card.is-myth { border-top-color: var(--sa-flag-red); }
.sa-card.is-fact { border-top-color: var(--sa-flag-green); }
.sa-card__progress { margin: 0 0 .75rem; font-size: .85rem; color: var(--sa-muted); font-variant-numeric: tabular-nums; }
.sa-card__statement { margin: 0 0 1.4rem; font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.3; font-weight: 700; user-select: text; }
.sa-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sa-card__hint { margin: .9rem 0 0; font-size: .85rem; color: var(--sa-muted); }
.sa-card__result { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sa-line); user-select: text; }
.sa-card__verdict { margin: 0 0 .5rem; font-size: 1.1rem; }
.sa-card__verdict:focus { outline: none; }
.sa-card.is-right .sa-card__verdict strong { color: var(--sa-flag-green); }
.sa-card.is-wrong .sa-card__verdict strong { color: var(--sa-flag-red); }
.sa-card__explain p { margin: 0 0 .6rem; }
.sa-source { font-size: .85rem; color: var(--sa-muted); }
.sa-draft {
	display: inline-block;
	margin: 0 0 .6rem;
	padding: .15rem .45rem;
	border-radius: 3px;
	background: #fdf1c7;
	color: #5c4700;
	font-size: .75rem;
	font-weight: 600;
}
.sa-card--end { text-align: center; }
.sa-card--end .sa-card__actions { justify-content: center; }
.sa-card__score { margin: 0 0 .5rem; }
.sa-bignum { font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sa-bignum__of { font-size: 1.4rem; color: var(--sa-muted); margin-left: .25rem; }

.sa-odds__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.sa-odds__q { margin: 0; font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 700; flex: 1 1 18rem; }
.sa-odds__score { margin: 0; display: flex; gap: 1rem; font-variant-numeric: tabular-nums; color: var(--sa-muted); }
.sa-odds__score strong { color: var(--sa-ink); }
.sa-odds__switch select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--sa-line); border-radius: 4px; }
.sa-odds__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .75rem; }
.sa-odds__or { align-self: center; color: var(--sa-muted); font-weight: 600; }
.sa-choice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	min-height: 9rem;
	padding: 1.1rem;
	font: inherit;
	text-align: left;
	color: var(--sa-ink);
	background: #fff;
	border: 2px solid var(--sa-line);
	border-radius: var(--sa-radius);
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.sa-choice:hover:not(:disabled) { border-color: var(--sa-sea); background: var(--sa-foam); }
.sa-choice:disabled { cursor: default; }
.sa-choice__label { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.sa-choice__value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sa-choice__meta { font-size: .8rem; color: var(--sa-muted); }
.sa-choice.is-higher { border-color: var(--sa-sea); }
.sa-choice.is-right { border-color: var(--sa-flag-green); background: color-mix(in srgb, var(--sa-flag-green) 8%, #fff); }
.sa-choice.is-wrong { border-color: var(--sa-flag-red); background: color-mix(in srgb, var(--sa-flag-red) 7%, #fff); }
.sa-odds__result { margin-top: 1rem; min-height: 3.5rem; }
.sa-odds__result p { margin: 0 0 .6rem; }

.sa-answers { margin: 0 0 var(--sa-gap); border-top: 1px solid var(--sa-line); padding-top: .75rem; }
.sa-answers > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.sa-answers__item { padding: .75rem 0; border-bottom: 1px solid var(--sa-line); }
.sa-answers__item h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.sa-verdict { margin: 0 0 .35rem; font-weight: 700; }
.sa-verdict--myth { color: var(--sa-flag-red); }
.sa-verdict--fact { color: var(--sa-flag-green); }

/* ------------------------------------------------------------ Identification quiz */

.sa-quiz__card { max-width: 46rem; }
.sa-quiz__viewer { position: relative; margin: 0 0 1rem; }
.sa-quiz__viewer model-viewer {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 240px;
	background: linear-gradient(180deg, var(--sa-foam), #d6e6ea);
	border-radius: var(--sa-radius);
}
.sa-quiz__status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--sa-muted);
	pointer-events: none;
}
.sa-quiz__status[hidden] { display: none; }
.sa-quiz__prompt { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 700; }
.sa-quiz__prompt:focus { outline: none; }
.sa-quiz__prompt .sa-muted { font-size: .85rem; font-weight: 400; }
.sa-quiz__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem; }
.sa-quiz__option {
	display: flex;
	align-items: center;
	gap: .6rem;
	text-align: left;
	border-width: 2px;
	border-color: var(--sa-line);
}
.sa-quiz__option:disabled { opacity: 1; }
.sa-quiz__option:disabled:not(.is-right):not(.is-wrong) { color: var(--sa-muted); }
.sa-quiz__option.is-right { border-color: var(--sa-flag-green); background: color-mix(in srgb, var(--sa-flag-green) 9%, #fff); }
.sa-quiz__option.is-wrong { border-color: var(--sa-flag-red); background: color-mix(in srgb, var(--sa-flag-red) 8%, #fff); }
.sa-quiz__option--high:not(:disabled) { border-color: var(--sa-flag-red); }
.sa-quiz__option--low:not(:disabled) { border-color: var(--sa-flag-green); }
.sa-quiz__key {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.5rem; height: 1.5rem;
	border-radius: 50%;
	background: var(--sa-foam);
	color: var(--sa-muted);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}
.sa-quiz__feedback { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sa-line); }
.sa-quiz__verdict { margin: 0 0 .6rem; line-height: 1.5; }
.sa-quiz__verdict:focus { outline: none; }
.sa-quiz__verdict .is-right { color: var(--sa-flag-green); }
.sa-quiz__verdict .is-wrong { color: var(--sa-flag-red); }
.sa-quiz__compare { margin: 0 0 .6rem; }
.sa-quiz__look { margin: 0 0 .25rem; font-weight: 600; }
.sa-quiz__features { margin: 0 0 .8rem; padding-left: 1.2em; }
.sa-quiz__guide { align-self: center; }
.sa-quiz:not(.is-revealed) .sa-hotspot { display: none; }
/* The camera centres on the decisive feature, so its label sits centred under the dot. */
.sa-quiz .sa-hotspot__label,
.sa-quiz .sa-hotspot--left .sa-hotspot__label { left: 50%; right: auto; top: 22px; transform: translateX(-50%); text-align: center; }
.sa-quiz.is-revealed .sa-hotspot[data-visible] .sa-hotspot__label { opacity: 1; }
.sa-quiz__end { text-align: center; }
.sa-quiz__end .sa-card__actions { justify-content: center; }
.sa-quiz__review-title { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.sa-quiz__review { display: inline-block; margin: 0; padding-left: 1.4em; text-align: left; }
.sa-quiz__review li { margin: .2rem 0; }
.sa-quiz__mark { font-size: .8rem; font-weight: 700; }
.sa-quiz__review .is-right .sa-quiz__mark { color: var(--sa-flag-green); }
.sa-quiz__review .is-wrong .sa-quiz__mark { color: var(--sa-flag-red); }

/* ------------------------------------------------------------ Homepage globe */

.sa-globe {
	--g-ink: #eef4f7;
	--g-soft: #a9bfca;
	--g-glass: rgba(6, 20, 29, .72);
	--g-line: rgba(150, 200, 215, .18);
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: clamp(520px, 80vh, 860px);
	overflow: hidden;
	color: var(--g-ink);
	background: radial-gradient(1200px 800px at 55% 45%, #0f2c3a 0%, #081822 55%, #040b10 100%);
	isolation: isolate;
}
.sa-globe a { color: #ffd79a; }
.sa-globe__stage { position: absolute; inset: 0; z-index: 0; -webkit-user-select: none; user-select: none; }
.sa-globe__stage canvas { position: relative; z-index: 1; display: block; cursor: grab; }
.sa-globe__stage canvas:active { cursor: grabbing; }
.sa-globe__poster {
	position: absolute; inset: 0;
	pointer-events: none;
	background: url('../img/globe-poster.webp') center / contain no-repeat;
	transition: opacity .8s;
}
.sa-globe.is-ready .sa-globe__poster { opacity: 0; }
.sa-globe__top {
	position: absolute; z-index: 2;
	top: clamp(16px, 4vh, 40px); left: clamp(16px, 4vw, 56px);
	max-width: min(560px, calc(100% - 32px));
	pointer-events: none;
}
.sa-globe__top > * { pointer-events: auto; }
.sa-globe__title { margin: 0 0 .4rem; font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.02em; color: var(--g-ink); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.sa-globe__sub { margin: 0 0 1rem; color: var(--g-soft); font-size: clamp(.95rem, 1.6vw, 1.1rem); max-width: 34rem; }
.sa-globe__periods { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.sa-globe__chip, .sa-globe__key, .sa-globe__zoom button {
	font: inherit; font-size: .85rem; color: var(--g-ink);
	background: var(--g-glass); border: 1px solid var(--g-line); border-radius: 999px;
	padding: .42rem .85rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sa-globe__chip[aria-pressed="true"] { background: #eef4f7; color: #0a2230; border-color: #eef4f7; font-weight: 600; }
.sa-globe__count { margin: 0; color: var(--g-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.sa-globe__legend { position: absolute; z-index: 2; left: clamp(16px, 4vw, 56px); bottom: clamp(16px, 3vh, 32px); display: flex; flex-wrap: wrap; gap: .35rem; max-width: 60%; }
.sa-globe__key { display: inline-flex; align-items: center; gap: .1rem; padding: .32rem .7rem; font-size: .8rem; }
.sa-globe__key[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.sa-globe__key .sa-dot { box-shadow: none; }
.sa-globe__pin { width: .75em; height: .75em; margin-right: .4em; border-radius: 50%; border: 2px solid #ffdb99; display: inline-block; }
.sa-globe__zoom { position: absolute; z-index: 2; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 32px); display: flex; flex-direction: column; gap: .35rem; }
.sa-globe__zoom button { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.sa-globe__latest {
	position: absolute; z-index: 2;
	top: clamp(16px, 4vh, 40px); right: clamp(16px, 3vw, 40px);
	width: 290px; max-height: calc(100% - 140px); overflow: auto;
	background: var(--g-glass); border: 1px solid var(--g-line); border-radius: 12px;
	padding: .8rem .9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sa-globe__latest-h { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--g-soft); }
.sa-globe__list { list-style: none; margin: 0; padding: 0; }
.sa-globe__list li { border-top: 1px solid var(--g-line); }
.sa-globe__list li:first-child { border-top: 0; }
.sa-globe__list a { display: grid; grid-template-columns: auto 1fr; gap: .1rem .4rem; padding: .5rem 0; color: var(--g-ink); text-decoration: none; font-size: .88rem; line-height: 1.3; }
.sa-globe__list a:hover .sa-globe__li-place { text-decoration: underline; }
.sa-globe__list .sa-dot { margin-top: .3em; box-shadow: none; }
.sa-globe__list time { grid-column: 2; color: var(--g-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.sa-globe__card {
	position: absolute; z-index: 3; width: 310px;
	background: rgba(8, 24, 34, .94); border: 1px solid var(--g-line); border-radius: 12px;
	padding: .9rem 1rem; box-shadow: 0 18px 40px rgba(0,0,0,.45); font-size: .9rem;
}
.sa-globe__card p { margin: 0 0 .45rem; color: var(--g-soft); }
.sa-globe__card-meta { font-size: .8rem; }
.sa-globe__card-meta .sa-dot { box-shadow: none; }
.sa-globe__card-title { font-size: 1rem; font-weight: 600; }
.sa-globe__card-title a { color: var(--g-ink); text-decoration: none; }
.sa-globe__card-links { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem !important; }
.sa-globe__close { position: absolute; top: .3rem; right: .45rem; width: 32px; height: 32px; border: 0; background: none; color: var(--g-soft); font-size: 1.4rem; cursor: pointer; }
.sa-globe__hint { position: absolute; z-index: 1; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; font-size: .72rem; color: rgba(169,191,202,.7); white-space: nowrap; pointer-events: none; }
.sa-globe__nowebgl { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); max-width: 80%; text-align: center; color: var(--g-soft); }
.sa-globe .sa-globe__chip:focus-visible, .sa-globe .sa-globe__key:focus-visible, .sa-globe__zoom button:focus-visible, .sa-globe a:focus-visible { outline: 3px solid var(--sa-flag-yellow); outline-offset: 2px; }

@media (max-width: 719px) {
	.sa-globe { height: auto; display: flex; flex-direction: column; }
	.sa-globe__stage { position: relative; order: 2; height: 62vh; min-height: 360px; }
	.sa-globe__top { position: relative; order: 1; top: auto; left: auto; max-width: none; padding: 20px 16px 0; }
	.sa-globe__periods { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
	.sa-globe__chip { white-space: nowrap; }
	.sa-globe__legend { position: relative; order: 3; left: auto; bottom: auto; max-width: none; padding: 10px 16px 0; }
	.sa-globe__zoom { top: calc(62vh - 90px); bottom: auto; }
	.sa-globe__latest { position: relative; order: 4; top: auto; right: auto; width: auto; max-height: none; margin: 12px 16px 20px; }
	.sa-globe__card { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; z-index: 50; }
	.sa-globe__hint { display: none; }
}

/* ------------------------------------------------------------ Focus, motion, small screens */

.sa-btn:focus-visible,
.sa-choice:focus-visible,
.sa-quiz__guide:focus-visible,
.sa-map__controls :focus-visible,
.sa-hotspot:focus-visible,
.sa-answers > summary:focus-visible {
	outline: 3px solid var(--sa-flag-yellow);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sa-card, .sa-choice { transition: none; }
}

@media (max-width: 560px) {
	.sa-quiz__viewer model-viewer { aspect-ratio: 4 / 3; }
	/* Quiz: only the decisive feature is labelled; tap the others. */
	.sa-quiz.is-revealed .sa-hotspot[data-visible] .sa-hotspot__label { opacity: 0; }
	.sa-quiz.is-revealed .sa-hotspot[data-visible]:first-of-type .sa-hotspot__label,
	.sa-quiz.is-revealed .sa-hotspot[data-visible]:hover .sa-hotspot__label,
	.sa-quiz.is-revealed .sa-hotspot[data-visible]:focus .sa-hotspot__label { opacity: 1; }
	/* Small screens: labels open on tap instead of all at once. */
	.sa-model__toggle { display: none; }
	.sa-model:has(.sa-model__toggle input:checked) .sa-hotspot[data-visible] .sa-hotspot__label { opacity: 0; }
	.sa-model:has(.sa-model__toggle input:checked) .sa-hotspot[data-visible]:focus .sa-hotspot__label,
	.sa-model:has(.sa-model__toggle input:checked) .sa-hotspot[data-visible]:hover .sa-hotspot__label { opacity: 1; }
	.sa-odds__pair { grid-template-columns: 1fr; }
	.sa-odds__or { justify-self: center; }
	.sa-choice { min-height: 6.5rem; }
	.sa-table { font-size: .9em; }
}