[hidden]{
	display:none!important
	}
:root{
	color-scheme:dark;
	--bg:#06101e;
	--panel:rgba(7,24,43,.91);
	--border:rgba(159,212,236,.24);
	--white:#f5f7ee;
	--muted:#a6bfcd;
	--accent:#6bf5cf;
	--gold:#ffd375;
	--coral:#ff866e
	}
*{box-sizing:border-box
	}
body{
	margin:0;
	background:#060d1d;
	color:var(--white);
	font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
	}
button{
	font:inherit}#app{height:100svh;
	min-height:570px;
	position:relative;
	overflow:hidden;
	background:radial-gradient(ellipse at 62% 50%,
	#173b69 2%,
	#081b34 40%,
	#020814 76%)
	}
#cosmos{
	position:absolute;
	inset:0;
	pointer-events:none;
	background-image:radial-gradient(1px 1px at 12% 16%,
	#cfebff 95%,transparent),radial-gradient(1px 1px at 56% 11%,
	#cfebff 95%,transparent),radial-gradient(1px 1px at 87% 81%,
	#cfebff 95%,transparent),radial-gradient(1px 1px at 23% 70%,
	#cfebff 95%,transparent);
	background-size:270px 220px;
	opacity:.55
	}
#earth,#flight-overlay{
	display:block;
	position:absolute;
	inset:0;
	width:100%;
	height:100%
	}
#earth{
	touch-action:none;
	cursor:grab
	}
#earth:active{
	cursor:grabbing
	}
#flight-overlay{
	pointer-events:none
	}
.topbar{
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:83px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding:16px 29px;
	z-index:8;
	background:linear-gradient(to bottom,rgba(1,11,25,.85),rgba(1,11,25,0));
	pointer-events:none
	}
.topbar>*{
	pointer-events:auto
	}
.logo{
	display:flex;
	align-items:center;
	gap:10px;
	white-space:nowrap
	}
.logo>span{
	background:#e66d5b;
	padding:9px;
	border-radius:12px;
	font-size:23px
	}
.logo strong{
	font-size:21px;
	letter-spacing:-1px
	}
.logo strong span{
	color:var(--accent)
}
.logo small{
	align-self:flex-end;
	margin:0 0 4px 2px;
	color:#89a7be;
	font-size:9px;
	font-weight:800;
	letter-spacing:1px
	}
.hud{
	display:flex;gap:17px;
	align-items:center
}
.hud-progress{
	display:flex;
	align-items:
	center;
	gap:12px
	}
.hud-progress>span{
	font-size:10px;
	letter-spacing:1.2px;
	color:#d1e3f0;
	font-weight:800
	}
.hud-progress>b{
	font-size:16px
	}
.track{
	height:8px;
	width:150px;
	border-radius:6px;
	background:#314a61;
	overflow:hidden
	}
.track i{
	display:block;
	background:linear-gradient(90deg,#32be9f,#a0ffe4);
	height:100%;
	width:0%;
	border-radius:7px;
	transition:width .3s
	}
.small-stat{
	background:rgba(19,43,68,.73);
	border:1px solid rgba(255,255,255,.1);
	padding:8px 12px;
	border-radius:12px;
	display:flex;
	flex-direction:column;
	min-width:72px
	}
.small-stat span{
	font-size:8px;
	letter-spacing:1px;
	color:#9db7c7;
	font-weight:800
	}
.small-stat b{
	font-size:17px
	}
.sound-btn{
	cursor:pointer;
	min-width:45px;
	height:45px;
	border-radius:14px;
	border:1px solid var(--border);
	color:var(--white);
	background:#10283d
	}
.where{
	position:absolute;
	top:100px;
	left:27px;
	display:flex;
	flex-direction:column;
	border-left:3px solid var(--accent);
	padding-left:15px;
	z-index:3;
	text-shadow:0 1px 10px #051324
	}
.where>span{
	color:var(--accent);
	font-size:9px;
	letter-spacing:1.4px;font-weight:800
	}
.where strong{
	font-size:22px;
	margin:7px 0
	}
.where small{
	color:#bbd4dd;
	font-size:10px;
	font-weight:800;
	letter-spacing:1.6px
	}
.checkpoint{
	position:absolute;
	left:50%;
	bottom:21px;
	transform:translateX(-50%);
	font-size:9px;
	letter-spacing:1.3px;
	font-weight:800;
	color:#b0c6d7;
	text-shadow:0 1px 5px #001c2f;
	white-space:nowrap;z-index:5}
.globe-credit{
	position:absolute;
	bottom:19px;
	right:25px;
	font-size:8px;
	letter-spacing:1px;
	color:#839cae;
	z-index:2
	}
.cockpit{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:2;
	opacity:0;
	transition:opacity 1.1s
	}
.cockpit.active{
	opacity:1
	}
.canopy{
	position:absolute;
	inset:0;
	border:clamp(12px,3vw,46px) solid rgba(8,25,41,.7);
	border-bottom:0;
	border-top-left-radius:48% 16%;
	border-top-right-radius:48% 16%;
	box-shadow:inset 0 25px 40px rgba(4,15,28,.8)}
.wing{
	position:absolute;
	bottom:0;
	width:36%;
	height:19%;
	background:linear-gradient(180deg,#4f7188,#182e42 45%,#071522 90%);
	border-top:3px solid #87a2ac}
.wing-left{
	left:-4%;
	clip-path:polygon(0 25%,100% 0,80% 100%,0 100%)
	}
.wing-right{
	right:-4%;
	clip-path:polygon(0 0,100% 25%,100% 100%,20% 100%)
	}
.dashboard{
	position:absolute;
	bottom:-20px;
	left:50%;
	transform:translateX(-50%);
	min-width:310px;
	width:38%;
	height:90px;
	display:flex;
	align-items:flex-start;
	justify-content:space-evenly;
	padding:22px 24px 0;
	gap:12px;
	background:linear-gradient(#3b5164,#102536);
	border-radius:60% 60% 0 0;
	border:2px solid #64859a;
	box-shadow:0 0 35px #000
	}
.dashboard span{
	font-size:9px;
	color:#c4dae7;
	letter-spacing:.8px
	}
.radar{
	border:2px solid #75eccf;
	background:#0e3650;
	width:60px;
	height:60px;
	margin-top:-12px;
	border-radius:50%;
	display:grid;
	place-items:center;
	box-shadow:inset 0 0 15px #0a7565
	}
.radar i{
	width:25px;
	height:25px;
	border:1px solid #79d8cb;
	border-radius:50%;
	box-shadow:0 0 9px #3af1ca
	}
#dynamic-ui{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:6
	}
.dialog{
	pointer-events:auto;
	position:absolute;
	top:50%;
	right:clamp(16px,5vw,82px);
	transform:translateY(-50%);
	width:min(405px,calc(100vw - 38px));
	padding:27px;
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:22px;
	box-shadow:0 17px 65px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08);
	backdrop-filter:blur(18px)
	}
.dialog.intro,.dialog.big-result{
	right:auto;
	left:clamp(24px,7vw,105px);
	width:min(530px,calc(100vw - 42px));
	background:linear-gradient(140deg,rgba(6,25,46,.95),rgba(8,27,44,.76))
	}
.eyebrow{
	font-size:10px;
	letter-spacing:1.65px;
	color:var(--accent);
	font-weight:850;
	line-height:1.5
	}
.intro h1,.big-result h1{
	font-size:clamp(46px,5vw,69px);
	line-height:1.04;
	letter-spacing:-3px;
	margin:19px 0 17px
	}
.intro h1 em,.big-result h1 em{
	font-style:normal;
	color:var(--gold)
	}
.dialog p{
	color:#c2d1db;
	font-size:14px;
	line-height:1.7
	}
.rules{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:24px 0
	}
.rules span{
	padding:9px 11px;
	font-size:11px;
	border:1px solid rgba(120,181,207,.3);
	background:rgba(22,53,75,.65);
	border-radius:9px;
	color:#ecf9fd;
	font-weight:700
	}
.main-btn{
	display:block;
	padding:16px 20px;
	border:0;
	background:linear-gradient(115deg,#ff846e,#e55b53);
	border-radius:13px;
	color:white;
	font-size:13px;
	font-weight:850;
	cursor:pointer;
	width:100%;
	letter-spacing:.4px;
	box-shadow:0 9px 25px rgba(234,94,87,.24)
	}
.main-btn:hover{
	filter:brightness(1.12);
	transform:translateY(-1px)
	}
.micro{
	margin-top:19px;
	color:#94adbe;
	font-size:9px;
	letter-spacing:.9px;
	line-height:1.4
	}
.quiz{
	background:rgba(235,244,246,.96);
	color:#19344c;
	right:clamp(14px,5.5vw,85px);
	padding:25px}
.quiz .eyebrow{
	color:#258570
	}
.difficulty{
	display:inline-block;
	margin:16px 0 6px;
	border-radius:9px;
	background:#d7f1e9;
	color:#287b65;
	padding:8px 10px;
	font-size:10px;
	font-weight:900;
	letter-spacing:1.2px
	}
.difficulty span{
	font-weight:600;
	letter-spacing:0;
	color:#68887d
	}
.quiz h2{
	font-size:21px;
	line-height:1.36;
	margin:12px 0 18px;
	letter-spacing:-.4px
	}
.answers{
	display:grid;
	gap:9px
	}
.option{
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:11px;
	text-align:left;
	border:1px solid #d0dce2;
	border-radius:11px;
	background:white;
	color:#183247;
	padding:9px 12px;
	min-height:51px;
	font-weight:730;
	font-size:13px;
	transition:transform .13s,background .13s
	}
.option:hover{
	background:#e9fff6;
	border-color:#5dc5a6;
	transform:translateX(-3px)
	}
.option b{
	background:#e6eced;
	padding:7px 10px;
	border-radius:7px;
	font-size:12px
	}
.option span{
	flex:1
	}
.option small{
	color:#8b9da7
	}
.answer-feedback{
	font-size:12px;
	color:#b24d3d;
	font-weight:700;line-height:1.5;margin:12px 0}
.answer-feedback:empty{
	display:none
	}
.small-caption{
	margin-top:15px;
	font-size:11px;
	color:#607789;
	line-height:1.5}
.result h2,.flight h2,.danger h2{
	font-size:30px;
	line-height:1.16;
	letter-spacing:-1px;
	margin:14px 0
	}
.answer-stats{
	display:flex;
	gap:12px;
	margin:19px 0 23px
	}
.answer-stats>span{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:8px;
	font-size:11px;
	color:#b5c7d4
	}
.answer-stats strong{
	font-size:17px;
	color:#fff
	}
.dialog.flight{
	top:auto;
	bottom:43px;
	left:50%;
	right:auto;
	transform:translateX(-50%);
	width:min(520px,calc(100% - 30px));
	padding:18px 25px;
	text-align:center
	}
.flight h2{
	font-size:20px;
	margin:5px
}
.flight p{
	margin:3px;font-size:11px
}
.dialog.danger{
	border-color:#fa7975;
	background:rgba(64,21,32,.93)
}
.big-result h1{
	font-size:clamp(44px,5vw,65px)
}
.big-result .rules{
	margin:20px 0
}
.big-result strong{
	color:#fff
}
.globe-credit{
	pointer-events:none
}

@media(max-width:1000px){
	.logo small{
		display:none
	}
	.track{
		width:85px
	}
	.hud{
		gap:6px
	}
	.hud-progress>span{
		display:none
	}
	.small-stat{
		min-width:65px
	}
	.intro{
		max-width:420px
	}
	.globe-credit{
		display:none
	}
}
@media(max-width:680px){
	#app{
	min-height:550px
	}
	.topbar{
		height:68px;padding:11px 14px;gap:6px
	}
	.logo>span{
		font-size:17px;padding:7px
	}
	.logo strong{
		font-size:17px
	}
	.hud-progress{
		gap:5px
	}
	.track{
		width:48px
	}
	.hud-progress>b{
		font-size:12px
	}
	.small-stat{
		display:none
	}
	.sound-btn{
		height:40px;
	min-width:40px
	}
	.where{
		top:72px;
	left:15px;
	padding-left:8px
	}
	.where strong{
		font-size:15px
	}
	.where>span{
		font-size:7px
	}
	.where small{
		font-size:8px
	}
	.dialog{
		top:auto;
	bottom:48px;
	left:12px!important;
	right:12px!important;
	transform:none;
	width:auto!important;
	max-width:none!important;
	padding:17px;
	border-radius:17px
	}
	.dialog.intro{
		bottom:57px
	}
	.intro h1,.big-result h1{
		font-size:37px;
	letter-spacing:-2px;
	margin:12px 0
	}
	.dialog p{
		font-size:12px;line-height:1.45
	}
	.rules{
		gap:5px;margin:13px 0
	}
	.rules span{
		font-size:9px;padding:7px
	}
	.main-btn{
		padding:13px
	}
	.quiz h2{
		font-size:16px;
	margin:9px 0 11px
	}
	.quiz .eyebrow{
		font-size:8px
	}
	.difficulty{
		margin:9px 0 1px;
	padding:5px 7px;
	font-size:8px
	}
	.answers{
		gap:6px
	}
	.option{
		min-height:43px;
	padding:6px 8px;
	font-size:11px
	}
	.option b{
		padding:6px 8px
	}
	.small-caption{
		margin-top:8px;
	font-size:10px
	}
	.dialog.flight{
		left:12px;
	right:12px;
	bottom:46px;
	transform:none
	}
	.answer-stats{
		margin:12px 0
	}
	.result h2{
		font-size:24px
	}
	.checkpoint{
		bottom:14px;
	font-size:8px;
	white-space:normal;
	text-align:center;
	width:90%
	}
	.dashboard{
		width:75%;
	min-width:0;
	height:64px
	}
	.dashboard span{
		font-size:6px
	}
	.radar{
		height:40px;width:40px
	}
	.canopy{
		border-top-left-radius:40% 9%;
	border-top-right-radius:40% 9%
	}
}

@media(max-height:700px) and (min-width:681px){
	.dialog{
		max-height:calc(100vh - 95px);
		overflow-y:auto}
	.intro h1{
		font-size:48px
		}
	.intro p{
		font-size:12px
		}
	.intro .rules{
		margin:12px 0
		}
	.quiz{
		padding:17px
		}
	.quiz h2{
		font-size:18px
		}
	.option{
		min-height:42px
	}
}

.secondary-btn{
	background:rgba(18,58,76,.82);
	color:#d8fff0;
	border:1px solid rgba(107,245,207,.38);
	width:100%;
	margin:9px 0;
	padding:14px;border-radius:12px;
	font-weight:800;
	cursor:pointer
}
.secondary-btn:hover{
	background:rgba(25,83,93,.92)
}

@media(max-width:680px){
	.topbar{
		gap:4px
	}
	.sound-btn{
		min-width:36px;
		height:36px
	}
}

@media(max-width:680px){
	.dialog.quiz{
		max-height:calc(100svh - 165px);
		overflow-y:auto
	}
}

/* Edition branding; shared engine and geographic data remain the same. */
body
	.edition-usa { 
	--accent:#7ac7f8; 
	--gold:#ffe0aa; 
	--coral:#b71931; 
}
body
	.edition-usa 
	.logo>span {
		background:#af182b
}
body
	.edition-usa 
	.logo strong span {
		color:#e65b65
}
body
	.edition-usa 
	.main-btn {
		background:linear-gradient(110deg,#af182b,#e05362);
		box-shadow:0 9px 24px rgba(175,24,43,.3)
}
body
	.edition-usa 
	.track i {
		background:linear-gradient(90deg,#4183cc,#ef6c79)
	}
body
	.edition-canada { 
		--accent:#ffafae; 
		--gold:#fff4d6; 
		--coral:#c81935; 
}
body
	.edition-canada #app {
		background:radial-gradient(ellipse at 64% 50%,#273969 4%,#151b3b 40%,#090b1a 78%)
	}
body
	.edition-canada 
	.logo>span {
		background:#b91e36
}
body
	.edition-canada 
	.logo strong span {
		color:#f596a2
}
body
	.edition-canada 
	.main-btn {
		background:linear-gradient(110deg,#af1d38,#ed586d);
		box-shadow:0 9px 24px rgba(199,24,46,.36)
}
body
	.edition-canada 
	.track i {
		background:linear-gradient(90deg,#b51c40,#ff8592)
}
body
	.edition-canada 
	.where {
		border-left-color:#ed667b
}
body
	.edition-canada 
	.quiz 
	.eyebrow {
		color:#a92549
}
body
	.edition-canada 
	.quiz 
	.difficulty {
		background:#ffe9e8;
		color:#b31f39
}
body
	.edition-canada 
	.quiz 
	.option:hover {
		background:#fff0f0;
		border-color:#ed7988
}

@media (max-width: 680px) { 
	.logo small {
		display:none
	} 
}


/* ===============================================================
   ROCKET HOP — CINEMATIC SPACEPORT OPENING
   Artwork: /images/spaceport.jpg (swap for your own 16:9 image)
   This is a foreground layer, not the globe texture or coordinates.
   =============================================================== */

#app .launch-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(90deg, rgba(1, 9, 22, .55), rgba(3, 14, 30, .08) 66%), url("./images/spaceport.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.75s ease-in, transform 3.3s ease-out;
    will-change: opacity, transform;
}

#app .launch-scene.is-visible {
    opacity: 1;
    transform: scale(1);
}

#app .launch-site-tag {
    position: absolute;
    left: 28px;
    bottom: 112px;
    padding: 9px 13px;
    border-left: 3px solid var(--accent);
    background: rgba(3, 16, 30, .52);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-shadow: 0 2px 7px #00111e;
}

#app .launch-ignition {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(ellipse at 65% 73%, rgba(255, 243, 177, .7), rgba(255, 137, 50, .22) 32%, transparent 65%);
    mix-blend-mode: screen;
}

#app.launching .launch-ignition {
    animation: rocket-ignition-flash 1.35s ease-out both;
}

@keyframes rocket-ignition-flash {
    0% { opacity: 0; }
    14% { opacity: .95; }
    55% { opacity: .5; }
    100% { opacity: 0; }
}

@media (max-width: 680px) {
    #app .launch-scene {
        background-position: 67% center;
    }

    #app .launch-site-tag {
        left: 14px;
        bottom: 91px;
        max-width: 70%;
        font-size: 9px;
        letter-spacing: .7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .launch-scene {
        transition: none;
    }

    #app.launching .launch-ignition {
        animation: none;
    }
}