/* ===== Reset & Safety ===== */
*,
*::before,
*::after { box-sizing: border-box; }
:root { --header-h: 64px; }

html { height: 100%; overflow-x: hidden; scrollbar-gutter: stable both-edges; }
body {
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff;
  background: #000;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
a { color: #0ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== Header ===== */
#main-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline: clamp(12px, 4vw, 24px);
  gap:16px; z-index:10; border-bottom:2px solid rgba(0,255,255,.3);
  max-width:100%;
}
#main-header .logo{ width:72px; height:72px; display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
#logo-canvas{ width:64px; height:64px; display:block; }
.header-actions.column{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
#quiz-mode-toggle,#audio-toggle{
  padding:6px 10px;margin: 10px; font-weight:700; background:rgba(0,1,0,.9);
  color:#0ff; border:1px solid rgba(0,255,255,.4); border-radius:10px; cursor:pointer;
}

/* ===== Off-canvas menu ===== */
#side-menu{
  position:fixed; top:0; left:0; bottom:0; width:min(86vw,360px);
  background:rgba(0,0,0,.9); border-right:1px solid rgba(255,255,255,.15);
  transform:translateX(-102%); transition:transform .25s ease; z-index:1100; padding:12px; overflow:auto;
}
#side-menu[aria-hidden="false"]{ transform:translateX(0); }
#side-menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1090; }
#side-menu .menu-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 10px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:8px; }
#side-menu .menu-header span{ font-weight:700; }
#side-menu nav ul{ list-style:none; margin:0; padding:6px 0; display:flex; flex-direction:column; gap:6px; }
#side-menu nav a{ color:#bffcff; padding:8px 6px; border-radius:8px; display:block; }
#side-menu nav a:hover{ background:rgba(255,255,255,.08); }
#menu-close{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:8px; padding:4px 8px; cursor:pointer;
}
#side-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10;
}

/* ===== Breadcrumbs ===== */
.breadcrumbs {
  position: sticky; top: var(--header-h);
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(255,255,255,.15);
  z-index: 5;
  padding: 6px clamp(12px, 5vw, 48px);
  max-width: 100%;
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs li { opacity: .9; overflow-wrap: anywhere; }
.breadcrumbs li+li::before { content: "›"; margin: 0 6px; opacity: .6; }
.breadcrumbs a { color: #9efcff; }

/* ===== Hero ===== */
.hero-section {
  min-height: calc(60vh + var(--header-h));
  padding-top: calc(var(--header-h) + 12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: linear-gradient(180deg, rgba(0,0,0,0.8), transparent);
  padding-inline: clamp(12px, 5vw, 48px);
}
.hero-section h1 { font-size: 2.4em; margin: 0 0 8px; }
.hero-section .tagline { opacity: .85; }

/* ===== Canvas ===== */
#canvas-container { position: fixed; inset: 0; z-index: 0; }
#canvas-container canvas { width: 100%; height: 100%; display: block; }

/* ===== Sections ===== */
section {
  position: relative; min-height: 100vh; text-align: left;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  z-index: 1; padding-inline: clamp(12px, 5vw, 48px);
}
.planet-section {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 24px);
  width: 100%; max-width: 1400px; margin-inline: auto;
}
.planet-section.reverse { flex-direction: row-reverse; }

/* Glow */
.planet-section::before {
  content: ""; position: absolute; inset: 0;
  background: var(--glow, radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), transparent 60%));
  z-index: -1; pointer-events: none; filter: blur(8px);
}
#mercury { --glow: radial-gradient(60% 60% at 20% 50%, rgba(255,165,0,.16), transparent 65%); }
#venus   { --glow: radial-gradient(60% 60% at 80% 50%, rgba(255,235,59,.16), transparent 65%); }
#earth   { --glow: radial-gradient(60% 60% at 20% 50%, rgba(80,180,255,.16), transparent 65%); }
#mars    { --glow: radial-gradient(60% 60% at 80% 50%, rgba(255,90,60,.16), transparent 65%); }
#jupiter { --glow: radial-gradient(60% 60% at 20% 50%, rgba(255,210,150,.16), transparent 65%); }
#saturn  { --glow: radial-gradient(60% 60% at 80% 50%, rgba(200,220,255,.14), transparent 65%); }
#uranus  { --glow: radial-gradient(60% 60% at 20% 50%, rgba(150,240,255,.14), transparent 65%); }
#neptune { --glow: radial-gradient(60% 60% at 80% 50%, rgba(140,170,255,.16), transparent 65%); }

/* Cards + spacer */
.planet-text {
  flex: 0 1 46vw; max-width: min(720px, 90vw);
  padding: clamp(16px, 2.6vw, 24px);
  background: rgba(255,255,255,0.08); border-radius: 12px; backdrop-filter: blur(2px);
  display: flex; flex-direction: column;
}
.planet-text.left  { border-radius: 12px 0 0 12px; }
.planet-text.right { border-radius: 0 12px 12px 0; }
.spacer { flex: 1 1 46vw; min-height: 60vh; border-radius: 12px; background: transparent; pointer-events: none; max-width: 100%; }

/* Content */
.lead { font-weight: 600; }
.funfact { margin-top: 6px; padding: 6px 10px; background: rgba(0,255,255,0.08); border-left: 3px solid #0ff; font-size: .95em; border-radius: 6px; }
.more { max-width: 80%; margin-top: 10px; line-height: 1.5; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 350ms ease, opacity 250ms ease; }
.more[aria-hidden="false"] { opacity: 1; }
.moral { margin-top: 10px; font-style: italic; color: #ffd27e; }
.toggle { margin-top: 12px; padding: 10px 14px; background: rgba(0,0,0,.6); color: #0ff; border: 1px solid rgba(0,255,255,.4); border-radius: 10px; cursor: pointer; font-weight: 700; align-self: flex-start; }
.toggle:focus { outline: 2px solid #0ff; outline-offset: 2px; }

/* Quiz */
.quiz { margin-top: 14px; background: rgba(0,0,0,.35); padding: 10px; border-radius: 10px; }
.quiz .choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.quiz .choices button { padding: 8px 10px; border-radius: 8px; border: 1px solid #666; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }
.quiz .feedback { margin-top: 8px; min-height: 1.2em; font-weight: 700; }

/* Timeline */
#timeline { position: fixed; left: max(8px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 8px; max-width: 160px; }
#timeline ul { list-style: none; margin: 0; padding: 0; }
#timeline li { padding: 6px 10px; margin: 4px 0; border-radius: 8px; cursor: pointer; font-size: 14px; overflow-wrap: anywhere; }
#timeline li.active { background: rgba(0,255,255,.25); color: #0ff; font-weight: 700; }

/* Facts */
#facts { position: fixed; right: max(10px, env(safe-area-inset-right)); top: calc(var(--header-h) + 16px); z-index: 2; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 8px; width: clamp(220px, 24vw, 280px); max-width: calc(100vw - 24px); }
#facts h3 { margin: 6px 6px 4px; } #facts ul { margin: 0 10px 8px; padding: 0 0 0 16px; }
#facts .only-mobile { display: none; }

/* Scroll-to-top */
#to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.65); color: #0ff; border: 1px solid rgba(0,255,255,.4); font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
#to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Quiz-only mode */
body.quiz-only .lead,
body.quiz-only .funfact,
body.quiz-only .moral,
body.quiz-only .toggle { display: none !important; }
body.quiz-only .more { max-height: none !important; opacity: 1 !important; }
body.quiz-only .planet-text p:not(.lead):not(.funfact):not(.moral) { display: none; }
body.quiz-only .more > * { display: none; }
body.quiz-only .more > .quiz { display: block; }

/* FAQ */
.faq-section { padding: 40px clamp(12px, 5vw, 48px); background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.12); }
.faq-section h2 { margin-top: 0; }
.faq-section details { margin: 10px 0; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 10px 12px; }
.faq-section summary { cursor: pointer; font-weight: 700; }
.faq-section p { margin: 8px 0 0; }

/* Animated title text */
.animated-text { animation: float 3s ease-in-out infinite; font-size: 2em; text-shadow: 0 0 10px rgba(255,255,255,0.8); }
@keyframes float { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
@media (prefers-reduced-motion: reduce) { .animated-text { animation: none } .more { transition: none } }

/* ===== Responsive ===== */
@media (max-width: 1100px) { #facts { width: clamp(220px, 30vw, 260px); } }
@media (max-width: 900px) {
  .planet-section, .planet-section.reverse { flex-direction: column; align-items: center; }
  .planet-text { flex-basis: auto; width: min(90vw, 720px); border-radius: 12px; }
  .more { max-width: 100%; }
  .spacer { display: none; }
  #timeline { display: none; }
  #facts { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); top: auto; width: auto; padding: 0; max-width: none; }
  #facts .only-mobile { display: inline-flex; width: 100%; justify-content: center; padding: 10px; background: rgba(0,0,0,.7); color: #0ff; border: 1px solid rgba(0,255,255,.4); border-radius: 12px; }
  #facts .facts-body { display: none; padding: 10px; }
  #facts[aria-expanded="true"] .facts-body { display: block; }
}
@media (max-width: 480px){
  #main-header .logo{ width:60px; height:60px; }
  #logo-canvas{ width:52px; height:52px; }
  .header-actions.column{ gap:6px; }
}
/* Buton meniu vizibil în header */
#menu-open{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  background: rgba(0,0,0,.6); color:#0ff;
  border:1px solid rgba(0,255,255,.4);
  font-size:20px; cursor:pointer;
}
#menu-open:focus{ outline:2px solid #0ff; outline-offset:2px; }

/* Ajustează spațierea elementelor din header */
#main-header { gap: 10px; }
#main-header .logo{ margin-left: 6px; }
/* Header pe 3 coloane: stânga logo, centru meniu, dreapta acțiuni */
#main-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h,64px);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:12px; padding:0 12px; z-index:10;
  background:rgba(0,0,0,.7); border-bottom:2px solid rgba(0,255,255,.3);
}

/* logo sferă */
#main-header .logo{ width:72px; height:72px; display:grid; place-items:center; cursor:pointer; }
#logo-canvas{ width:64px; height:64px; display:block; }

/* buton meniu centrat perfect */
#menu-open{
  justify-self:center;                       /* centru pe axa X a header-ului */
  width:44px; height:44px; font-size:20px; line-height:1;
  background:rgba(0,0,0,.6); color:#0ff;
  border:1px solid rgba(0,255,255,.4); border-radius:10px; cursor:pointer;
}
#menu-open:focus{ outline:2px solid #0ff; outline-offset:2px; }

/* acțiuni pe coloană în dreapta */
.header-actions.column{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
#quiz-mode-toggle,#audio-toggle{
  padding:6px 10px; font-weight:700;
  background:rgba(0,0,0,.6); color:#0ff;
  border:1px solid rgba(0,255,255,.4); border-radius:10px; cursor:pointer;
}

/* responsive: micșorează logo și buton pe mobil */
@media(max-width:480px){
  #main-header .logo{ width:60px; height:60px; }
  #logo-canvas{ width:52px; height:52px; }
  #menu-open{ width:40px; height:40px; }
}