/*
 * Solar Explorer V2 — Base Stylesheet
 * Design tokens, reset, loading, badge toasts, quiz, utilities.
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */

.se-game-wrapper {
	--se-bg-deep:        #020812;
	--se-bg-panel:       #0a1628;
	--se-bg-panel-2:     #0d1e35;
	--se-border:         rgba(77,184,255,.14);
	--se-accent:         #4db8ff;
	--se-accent-dim:     rgba(77,184,255,.5);
	--se-text-primary:   #e8f4fd;
	--se-text-secondary: #8ab4cc;
	--se-text-muted:     #2a4a6a;
	--se-success:        #4caf82;
	--se-warning:        #f5a623;
	--se-danger:         #e05252;
	--se-font-display:   'Courier New', Courier, monospace;
	--se-font-body:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--se-radius:         4px;
	--se-radius-lg:      8px;
	--se-game-height:    560px;
	--se-anim-fast:      0.15s;
	--se-anim-med:       0.28s;
	--se-anim-slow:      0.5s;
}

.se-game-wrapper[data-theme="light"] {
	--se-bg-deep:        #e8f4fd;
	--se-bg-panel:       #f0f8ff;
	--se-bg-panel-2:     #ddeeff;
	--se-border:         rgba(0,80,160,.18);
	--se-accent:         #005aa0;
	--se-accent-dim:     rgba(0,90,160,.5);
	--se-text-primary:   #0a2040;
	--se-text-secondary: #1a4a7a;
	--se-text-muted:     #5a8ab0;
}

.se-game-wrapper[data-theme="midnight"] {
	--se-bg-deep:        #000004;
	--se-bg-panel:       #04080f;
	--se-bg-panel-2:     #060c18;
	--se-border:         rgba(77,184,255,.08);
	--se-text-muted:     #1a2a3a;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

.se-game-wrapper *, .se-game-wrapper *::before, .se-game-wrapper *::after {
	box-sizing: border-box; margin: 0; padding: 0;
}

.se-game-wrapper {
	position:    relative;
	width:       100%;
	height:      var(--se-game-height);
	min-height:  400px;
	overflow:    hidden;
	background:  var(--se-bg-deep);
	color:       var(--se-text-primary);
	font-family: var(--se-font-body);
	font-size:   14px;
	line-height: 1.5;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select:  none;
}

.se-game-wrapper:focus         { outline: 2px solid var(--se-accent); outline-offset: -2px; }
.se-game-wrapper:focus:not(:focus-visible) { outline: none; }

/* ── Loading screen ──────────────────────────────────────────────────────── */

.se-loading {
	position: absolute; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center;
	background: var(--se-bg-deep);
	transition: opacity var(--se-anim-slow);
}
.se-loading.se-hidden { opacity: 0; pointer-events: none; }

.se-loading__inner { text-align: center; padding: 24px; }
.se-loading__icon  { font-size: 40px; margin-bottom: 14px; animation: se-float 2.2s ease-in-out infinite; }
.se-loading__title { font-family: var(--se-font-display); font-size: 18px; letter-spacing: .1em; color: var(--se-accent); margin-bottom: 8px; }
.se-loading__text  { font-size: 12px; color: var(--se-text-muted); letter-spacing: .06em; margin-bottom: 18px; }
.se-loading__bar   { width: 180px; height: 2px; background: var(--se-bg-panel-2); border-radius: 1px; margin: 0 auto; overflow: hidden; }
.se-loading__bar-fill { height: 100%; background: var(--se-accent); animation: se-loadbar 1.8s ease-in-out infinite; }

@keyframes se-float   { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-8px)} }
@keyframes se-loadbar { 0%{width:0%;margin-left:0} 50%{width:70%;margin-left:0} 100%{width:0%;margin-left:100%} }

/* ── Game container ──────────────────────────────────────────────────────── */

.se-game {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.se-game[aria-hidden="true"] { visibility: hidden; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.se-footer {
	flex-shrink: 0; height: 28px;
	display: flex; align-items: center; justify-content: center;
	background: var(--se-bg-deep); border-top: 1px solid var(--se-border); z-index: 10;
}
.se-footer__text {
	font-family: var(--se-font-display); font-size: 9px;
	letter-spacing: .18em; color: #ffffff; text-transform: uppercase;
}

/* ── Badge toast notifications ───────────────────────────────────────────── */

.se-badges {
	position: absolute; bottom: 40px; left: 12px; z-index: 60;
	display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}

.se-badge-toast { pointer-events: auto; animation: se-badge-in var(--se-anim-med) ease forwards; }
.se-badge-toast--out { animation: se-badge-out var(--se-anim-slow) ease forwards; }

.se-badge-toast__inner {
	display: flex; align-items: center; gap: 10px;
	background: var(--se-bg-panel); border: 1px solid var(--se-border);
	border-left: 3px solid var(--se-accent); border-radius: var(--se-radius);
	padding: 10px 14px; min-width: 220px; max-width: 280px;
	box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.se-badge-toast__icon  { font-size: 22px; flex-shrink: 0; }
.se-badge-toast__label { font-family: var(--se-font-display); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.se-badge-toast__name  { font-size: 13px; font-weight: 600; color: var(--se-text-primary); margin-bottom: 2px; }
.se-badge-toast__desc  { font-size: 11px; color: #ffffff; }
.se-badge-toast__pts   { font-family: var(--se-font-display); font-size: 10px; color: var(--se-success); margin-top: 3px; }

@keyframes se-badge-in  { from{transform:translateX(-110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes se-badge-out { from{transform:translateX(0);opacity:1}     to{transform:translateX(-110%);opacity:0} }

/* ── Quiz overlay ────────────────────────────────────────────────────────── */

.se-quiz {
	position: absolute; inset: 0; z-index: 50;
	display: flex; align-items: flex-end; justify-content: center;
	padding: 0 12px 12px;
	pointer-events: none;
	background: linear-gradient(to top, rgba(2,8,18,.82) 0%, transparent 60%);
}
.se-quiz--visible { pointer-events: auto; }
.se-quiz--hiding  { animation: se-quiz-out .32s ease forwards; }

.se-quiz__card {
	background: var(--se-bg-panel); border: 1px solid var(--se-border);
	border-radius: var(--se-radius-lg); padding: 16px;
	width: 100%; max-width: 460px;
	box-shadow: 0 -4px 40px rgba(0,0,0,.5);
	animation: se-quiz-in .32s ease forwards;
}

.se-quiz__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.se-quiz__meta   { display: flex; align-items: center; gap: 8px; }
.se-quiz__planet { font-family: var(--se-font-display); font-size: 10px; letter-spacing: .1em; color: var(--se-accent); text-transform: uppercase; }
.se-quiz__diff   { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; border-radius: var(--se-radius); opacity: .85; }
.se-quiz__streak { font-family: var(--se-font-display); font-size: 10px; color: var(--se-warning); letter-spacing: .06em; }
.se-quiz__skip   { background: none; border: none; color: var(--se-text-muted); font-size: 11px; cursor: pointer; padding: 4px 6px; transition: color var(--se-anim-fast); }
.se-quiz__skip:hover { color: var(--se-text-secondary); }

.se-quiz__question { font-size: 14px; line-height: 1.55; color: #ffffff; margin-bottom: 12px; }

.se-quiz__options  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.se-quiz__option {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: var(--se-bg-panel-2); border: 1px solid var(--se-border);
	border-radius: var(--se-radius); padding: 9px 12px;
	color: #ffffff; font-size: 13px; text-align: left;
	cursor: pointer; min-height: 44px;
	transition: border-color var(--se-anim-fast), background var(--se-anim-fast), color var(--se-anim-fast);
}
.se-quiz__option:hover:not(:disabled) { border-color: var(--se-accent); color: var(--se-text-primary); background: rgba(77,184,255,.06); }
.se-quiz__option--correct { border-color: var(--se-success) !important; background: rgba(76,175,130,.12) !important; color: var(--se-success) !important; }
.se-quiz__option--wrong   { border-color: var(--se-danger)  !important; background: rgba(224,82,82,.1)    !important; color: var(--se-danger)  !important; }
.se-quiz__option:disabled { cursor: default; }
.se-quiz__opt-num  { font-family: var(--se-font-display); font-size: 10px; color: var(--se-text-muted); width: 18px; flex-shrink: 0; }
.se-quiz__opt-text { flex: 1; line-height: 1.4; }

.se-quiz__explanation { font-size: 12.5px; line-height: 1.6; color: #ffffff; margin-top: 8px; }
.se-quiz__result      { font-weight: 700; margin-right: 4px; }
.se-quiz__result--ok  { color: var(--se-success); }
.se-quiz__result--no  { color: var(--se-danger); }

.se-quiz__footer   { margin-top: 10px; display: flex; justify-content: flex-end; }
.se-quiz__continue {
	background: var(--se-accent); color: var(--se-bg-deep); border: none;
	border-radius: var(--se-radius); padding: 9px 20px;
	font-family: var(--se-font-display); font-size: 11px; letter-spacing: .1em;
	cursor: pointer; font-weight: bold; min-height: 40px;
}
.se-quiz__continue--hidden { display: none; }
.se-quiz__continue:hover   { opacity: .88; }

@keyframes se-quiz-in  { from{transform:translateY(18px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes se-quiz-out { from{transform:translateY(0);opacity:1}    to{transform:translateY(18px);opacity:0} }

/* ── Utility & shared components ─────────────────────────────────────────── */

.se-hidden { display: none !important; }

.se-section-heading {
	font-family: var(--se-font-display); font-size: 9px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--se-accent); opacity: .75; margin-bottom: 6px;
}

.se-stat {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 5px 0; border-bottom: 1px solid rgba(77,184,255,.06); font-size: 12.5px;
}
.se-stat__label { color: #ffffff; flex-shrink: 0; margin-right: 8px; }
.se-stat__value { color: #ffffff; text-align: right; }

.se-log-entry {
	margin-top: 16px; padding: 12px;
	background: rgba(77,184,255,.03);
	border-left: 2px solid var(--se-accent-dim);
	border-radius: 0 var(--se-radius) var(--se-radius) 0;
	font-size: 12px; line-height: 1.7;
	color: #ffffff; font-style: italic;
}

.se-moon-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }

.se-moon-item {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px; background: var(--se-bg-panel-2);
	border: 1px solid var(--se-border); border-radius: var(--se-radius);
	cursor: pointer; min-height: 44px;
	transition: border-color var(--se-anim-fast), background var(--se-anim-fast);
}
.se-moon-item:hover, .se-moon-item:focus {
	border-color: var(--se-accent); background: rgba(77,184,255,.05); outline: none;
}
.se-moon-item__icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--se-text-muted); opacity: .6; }
.se-moon-item__name { font-size: 13px; color: #ffffff; font-weight: 600; }
.se-moon-item__desc { font-size: 11px; color: #ffffff; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) { .se-game-wrapper *, .se-game-wrapper *::before, .se-game-wrapper *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
[data-reduced-motion="true"] * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }