/*
 * Solar Explorer V2 — HUD & Panel Stylesheet
 * HUD bar, fuel gauge, planet selector bar, nav map, planet panel,
 * info/sound/nav buttons.
 *
 * LESSON FROM V1: The planet panel close button was a 28px circle
 * nobody could find on mobile. It is now a full-width 44px bar.
 */

/* ── HUD bar ─────────────────────────────────────────────────────────────── */

.se-hud {
	flex-shrink:     0;
	height:          48px;
	display:         flex;
	align-items:     center;
	gap:             2px;
	background:      var(--se-bg-deep);
	border-bottom:   1px solid var(--se-border);
	padding:         0 8px;
	z-index:         15;
	overflow:        hidden;
}

.se-hud--hidden { display: none; }

.se-hud__panel {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         0 10px;
	border-right:    1px solid var(--se-border);
	height:          100%;
	min-width:       70px;
}

.se-hud__panel--fuel { min-width: 86px; }
.se-hud__panel--speed { min-width: 80px; }

.se-hud__label {
	font-family:    var(--se-font-display);
	font-size:      8px;
	letter-spacing: .12em;
	color:          var(--se-text-muted);
	text-transform: uppercase;
}

.se-hud__value {
	font-family:    var(--se-font-display);
	font-size:      15px;
	letter-spacing: .04em;
	color:          var(--se-accent);
	line-height:    1.1;
}

.se-hud__value--warning { color: var(--se-warning); }
.se-hud__value--danger  { color: var(--se-danger); animation: se-blink .9s ease-in-out infinite; }

@keyframes se-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Fuel bar */
.se-hud__fuel-bar {
	width:         56px;
	height:        3px;
	background:    rgba(77,184,255,.12);
	border-radius: 1.5px;
	margin-top:    3px;
	overflow:      hidden;
}

.se-hud__fuel-fill {
	height:           100%;
	background:       var(--se-accent);
	border-radius:    1.5px;
	transition:       width .4s ease, background .3s;
	max-width:        100%;
}

.se-hud__fuel-fill--warning { background: var(--se-warning); }
.se-hud__fuel-fill--danger  { background: var(--se-danger);  }

/* HUD controls (nav/info/sound buttons) */
.se-hud__controls {
	display:     flex;
	align-items: center;
	gap:         4px;
	margin-left: auto;
	padding-left:8px;
}

.se-hud__btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	background:      none;
	border:          1px solid var(--se-border);
	border-radius:   var(--se-radius);
	color:           var(--se-text-secondary);
	cursor:          pointer;
	transition:      border-color var(--se-anim-fast), color var(--se-anim-fast), background var(--se-anim-fast);
}

.se-hud__btn:hover, .se-hud__btn:focus {
	border-color: var(--se-accent);
	color:        var(--se-accent);
	background:   rgba(77,184,255,.06);
	outline:      none;
}

.se-hud__btn:active { transform: scale(.94); }

/* ── Planet selector bar ─────────────────────────────────────────────────── */

.se-planet-selector {
	flex-shrink:  0;
	display:      flex;
	align-items:  center;
	gap:          8px;
	padding:      5px 10px;
	background:   var(--se-bg-panel);
	border-bottom:1px solid var(--se-border);
	z-index:      14;
	overflow-x:   auto;
	scrollbar-width: none;
}

.se-planet-selector::-webkit-scrollbar { display: none; }

.se-planet-selector__label {
	display:        flex;
	align-items:    center;
	gap:            5px;
	font-family:    var(--se-font-display);
	font-size:      8px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--se-text-muted);
	white-space:    nowrap;
	flex-shrink:    0;
}

.se-planet-selector__btns {
	display:      flex;
	gap:          4px;
	flex-wrap:    nowrap;
}

.se-planet-selector__btn {
	display:        flex;
	align-items:    center;
	gap:            5px;
	padding:        4px 9px;
	background:     var(--se-bg-panel-2);
	border:         1px solid var(--se-border);
	border-radius:  var(--se-radius);
	color:          var(--se-text-secondary);
	font-family:    var(--se-font-display);
	font-size:      10px;
	letter-spacing: .04em;
	cursor:         pointer;
	white-space:    nowrap;
	min-height:     30px;
	transition:     border-color var(--se-anim-fast), color var(--se-anim-fast), background var(--se-anim-fast);
}

.se-planet-selector__btn:hover:not(:disabled) {
	border-color: var(--planet-colour, var(--se-accent));
	color:        var(--planet-colour, var(--se-accent));
	background:   rgba(77,184,255,.06);
}

.se-planet-selector__btn:active:not(:disabled) { transform: scale(.96); }

.se-planet-selector__btn--current {
	border-color: var(--planet-colour, var(--se-accent));
	color:        var(--planet-colour, var(--se-accent));
	background:   rgba(77,184,255,.07);
	opacity:      .75;
	cursor:       default;
}

.se-planet-selector__dot {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    var(--planet-colour, var(--se-accent));
	flex-shrink:   0;
}

/* ── Navigation map ──────────────────────────────────────────────────────── */

.se-nav-map {
	position:      absolute;
	bottom:        36px;
	right:         10px;
	z-index:       20;
	width:         200px;
	background:    var(--se-bg-panel);
	border:        1px solid var(--se-border);
	border-radius: var(--se-radius-lg);
	overflow:      hidden;
	box-shadow:    0 4px 24px rgba(0,0,0,.4);
	transform:     translateX(calc(100% + 12px));
	opacity:       0;
	transition:    transform var(--se-anim-med) ease, opacity var(--se-anim-med);
}

/* Shown when navMapOpen=true (toggled by JS via class) */
.se-nav-map:not(.se-nav-map--hidden) {
	transform: translateX(0);
	opacity:   1;
}

.se-nav-map--hidden {
	transform: translateX(calc(100% + 12px));
	opacity:   0;
	pointer-events: none;
}

.se-nav-map__title {
	font-family:    var(--se-font-display);
	font-size:      8px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color:          var(--se-text-muted);
	padding:        6px 8px 4px;
	border-bottom:  1px solid var(--se-border);
}

.se-nav-map__svg { display: block; width: 100%; }

/* Planet dot hover */
.se-nav-dot { transition: opacity .15s; }
.se-nav-dot:hover { opacity: .8; }
.se-nav-dot:focus { outline: none; }
.se-nav-dot:focus .se-nav-dot__planet { stroke: var(--se-accent); stroke-width: 1.5px; }

/* ── Planet information panel ─────────────────────────────────────────────── */

.se-planet-panel {
	position:    absolute;
	top:         0;
	right:       0;
	bottom:      28px; /* above footer */
	width:       min(340px, 88%);
	z-index:     30;
	background:  var(--se-bg-panel);
	border-left: 1px solid var(--se-border);
	overflow-y:  auto;
	transform:   translateX(100%);
	opacity:     0;
	transition:  transform var(--se-anim-med) ease, opacity var(--se-anim-med);
	scrollbar-width: thin;
	scrollbar-color: var(--se-border) transparent;
}

.se-planet-panel--open {
	transform: translateX(0);
	opacity:   1;
}

.se-planet-panel::-webkit-scrollbar       { width: 4px; }
.se-planet-panel::-webkit-scrollbar-track { background: transparent; }
.se-planet-panel::-webkit-scrollbar-thumb { background: var(--se-border); border-radius: 2px; }

/* ── Planet panel header ─────────────────────────────────────────────────── */

.se-planet-panel__header {
	padding:    16px 18px 14px;
	border-bottom: 1px solid var(--se-border);
	position:   sticky;
	top:        0;
	background: var(--se-bg-panel);
	z-index:    2;
}

/*
 * LESSON FROM V1: Full-width close bar — 44px minimum height.
 * Old code used a 28px circle hidden in the corner. Nobody could
 * find it on mobile. This bar spans the full width of the panel
 * and is impossible to miss.
 */
.se-planet-panel__close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           calc(100% + 36px);   /* bleed to header edges */
	margin:          -16px -18px 14px;
	padding:         12px 18px;
	min-height:      44px;                /* touch target spec */
	background:      rgba(77,184,255,.04);
	border:          none;
	border-bottom:   1px solid var(--se-border);
	border-radius:   0;
	color:           #ffffff;
	cursor:          pointer;
	font-family:     var(--se-font-display);
	font-size:       10px;
	letter-spacing:  .1em;
	position:        static;
	transition:      background var(--se-anim-fast), color var(--se-anim-fast);
}

.se-planet-panel__close:hover,
.se-planet-panel__close:focus {
	background: rgba(77,184,255,.1);
	color:      var(--se-accent);
	outline:    none;
}

.se-planet-panel__close:active { background: rgba(77,184,255,.18); }

.se-planet-panel__name {
	font-size:      18px;
	font-weight:    700;
	color:          #ffffff;
	letter-spacing: .02em;
	margin-bottom:  2px;
}

.se-planet-panel__type {
	font-family:    var(--se-font-display);
	font-size:      9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--se-accent);
	opacity:        .75;
}

/* ── Planet panel body ───────────────────────────────────────────────────── */

.se-planet-panel__body { padding: 16px 18px 24px; }

/* ── Planet panel: all body text white, accent blue preserved ──────────────── */

.se-planet-panel__body p,
.se-planet-panel__body div:not(.se-section-heading):not(.se-stat__label):not(.se-stat):not(.se-stat__value) {
	color: #ffffff;
}

.se-planet-panel__body .se-section-heading {
	color: var(--se-accent); /* keep headings blue */
}

.se-planet-panel__body .se-stat__label { color: rgba(255,255,255,.7); }
.se-planet-panel__body .se-stat__value { color: #ffffff; }
.se-planet-panel__body .se-log-entry   { color: #ffffff; }

.se-planet-panel__body .se-moon-item__name { color: #ffffff; }
.se-planet-panel__body .se-moon-item__desc { color: rgba(255,255,255,.8); }

/* Back button in moon detail view → accent blue (it's a navigation link) */
.se-planet-panel__body button[id$="-back-btn"] { color: var(--se-accent); }