/* Landingspagina: de basis met de voertuigen. De basis staat in shared/css/base.css. */

/* Bovenkant: groep en logboek */
.base-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.base-header .player-chip { margin-top: 0; padding-left: 8px; }

.log-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size: 1.25rem;
  font-weight: 700;
}

.base-title {
  margin-top: 28px;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  font-weight: 800;
  text-align: center;
}

.base-name { color: var(--accent); }

.base-intro {
  margin: 8px 0 0;
  font-size: 1.2rem;
  color: var(--muted);
  text-align: center;
}

/* Aan de hemel: een planeet en de maan */
.base-sky {
  position: relative;
  flex: 1;
  min-height: 90px;
}
.base-sky .planet { position: absolute; left: 12%; top: 30%; }
.base-sky .planet.ringed::after { border-width: 3px; }
.moon {
  position: absolute;
  right: 14%;
  top: 8%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset -12px -4px 0 0 #fff3c4;
  transform: rotate(-20deg);
}

/* De grond van de basis, van rand tot rand */
.base-ground {
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) calc(-1 * max(16px, env(safe-area-inset-bottom)))
    calc(-1 * max(16px, env(safe-area-inset-left)));
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
  /* De horizon ligt net boven de voet van de stations */
  --horizon: calc(min(40vw, 190px) * 1.28);
  background:
    radial-gradient(140% 48px at 50% 48px, #2c3170 99%, transparent) 0 calc(var(--horizon) - 48px) / 100% 96px no-repeat,
    linear-gradient(#2c3170, #1d2152) 0 var(--horizon) / 100% 100% no-repeat;
}

/* De stations staan naast elkaar. Komen er meer bij dan er passen, dan
   schuif je de basis opzij. */
.stations {
  list-style: none;
  margin: 0;
  padding: 0 12px 8px;
  display: flex;
  justify-content: safe center;
  gap: 8px;
  scroll-padding: 0 30vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.stations::-webkit-scrollbar { display: none; }

/* Pijltjes naar meer voertuigen */
.stations-wrap { position: relative; }
.scroll-btn {
  position: absolute;
  top: calc(min(40vw, 190px) * 0.62);
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 2px solid var(--card-border);
  border-radius: 50%;
  background: rgba(20, 23, 61, 0.85);
  color: var(--accent);
  font-family: var(--font);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.scroll-btn[hidden] { display: none; }
.scroll-btn.left { left: 6px; }
.scroll-btn.right { right: 6px; }
.scroll-btn:active { transform: translateY(2px); }

.stations li { flex: 0 0 min(40vw, 190px); scroll-snap-align: center; }

.station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.station-art { width: 100%; height: auto; display: block; overflow: visible; }

.station-sign {
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(10, 12, 40, 0.45);
  border: 1px solid var(--card-border);
  width: 100%;
}

.station-name { font-size: clamp(1rem, 4.6vw, 1.25rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.station-sub { font-size: 1rem; color: var(--muted); line-height: 1.2; }

a.station:active .station-art { transform: scale(0.96); }

.station.building .station-art { filter: saturate(0.4) brightness(0.75); }
.station.building .station-name { color: var(--muted); }

/* Kleine details die leven */
.beacon { animation: blink 1.6s steps(2, jump-none) infinite; }
.window { animation: glow 3s ease-in-out infinite alternate; }

@keyframes blink { 50% { opacity: 0.2; } }
@keyframes glow { to { opacity: 0.6; } }

/* Lancering: even trillen en dan omhoog */
.station .flame { opacity: 0; transform-origin: 56px 146px; }
.station.launching .flame { opacity: 1; animation: flicker 0.12s linear infinite alternate; }
.station.launching .rocket { animation: liftoff 1.1s ease-in forwards; }
.station.launching .station-sign { opacity: 0.4; transition: opacity 0.3s; }

@keyframes flicker { to { transform: scaleY(1.3); } }

/* De telescoop zwaait naar de hemel en de ramen gaan aan */
.station .scope { transform-origin: 64px 88px; }
.station.launching .scope { animation: aim 1.1s ease-in-out forwards; }
.station.launching .window { animation: none; fill: #fff6c8; }

@keyframes aim {
  40% { transform: rotate(-40deg); }
  100% { transform: rotate(-22deg); }
}

/* De maanlander komt uit de hangar en vliegt weg */
.station.launching .lander-craft { animation: liftoff 1.1s ease-in forwards; }

@keyframes liftoff {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1.5px, 0); }
  20% { transform: translate(1.5px, 0); }
  30% { transform: translate(-1.5px, -2px); }
  100% { transform: translate(0, -900px); }
}

/* De schotel draait naar de hemel en de golven gaan zenden */
.station .dish { transform-origin: 56px 79px; }
.station .signal-waves { opacity: 0; }
.station.launching .dish { animation: aim 1.1s ease-in-out forwards; }
.station.launching .signal-waves { animation: send 0.4s ease-in-out infinite alternate; }

@keyframes send { to { opacity: 1; } }

/* De rover rijdt weg */
.station.launching .rover-craft { animation: drive 1.1s ease-in forwards; }

@keyframes drive {
  20% { transform: translateX(-4px); }
  100% { transform: translateX(600px); }
}

/* Voor ouders: wat zit er in deze groep? */
.groep-info-btn {
  display: block;
  margin: 14px auto 0;
  padding: 8px 18px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.groep-info-btn:hover, .groep-info-btn:focus-visible { color: var(--text); border-color: var(--accent); }
.info-dialog .groep-list { list-style: none; padding: 0; line-height: 1.3; }
.info-dialog .groep-list li { margin: 6px 0; }
.groep-list b { display: block; color: var(--accent); }

/* De satelliet draait een rondje in zijn baan */
.station .sat-craft { transform-origin: 60px 150px; }
.station.launching .sat-craft { animation: orbit 1.1s ease-in-out forwards; }

@keyframes orbit { to { transform: rotate(-70deg); } }

/* De wijzers van de tijdmachine draaien terug in de tijd */
.station .tm-hands { transform-origin: 60px 112px; }
.station .tm-swirl { transform-origin: 60px 96px; }
.station.launching .tm-hands { animation: rewind 1.1s ease-in forwards; }
.station.launching .tm-swirl { animation: rewind 1.1s linear forwards; }

@keyframes rewind { to { transform: rotate(-1080deg); } }

/* Het ruimtestation draait zijn panelen en zweeft omhoog */
.station .iss-craft { transform-origin: 60px 87px; }
.station.launching .iss-craft { animation: drift 1.1s ease-in forwards; }

/* De boordcomputer: de code knippert en het robotje springt */
.station.launching .bc-code { animation: blink 0.25s steps(2) infinite; }
.station .bc-bot { transform-origin: 99px 150px; }
.station.launching .bc-bot { animation: hop 0.55s ease-in-out 2; }

@keyframes blink { 50% { opacity: 0.2; } }
@keyframes hop { 50% { transform: translateY(-14px); } }

@keyframes drift { to { transform: translate(10px, -60px) rotate(-12deg) scale(0.8); opacity: 0.4; } }

/* Missielogboek */
.log-total {
  margin: 20px 0 16px;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}

.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.log-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 2px solid var(--card-border);
}

.log-art { width: 56px; flex: none; }
.log-label { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.log-name { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.log-sub { font-size: 1rem; color: var(--muted); }
.log-stars { font-size: 1.4rem; font-weight: 800; white-space: nowrap; }

.log-item.building { border-style: dashed; }
.log-item.building .station-art { filter: saturate(0.4) brightness(0.75); }
.log-item.building .log-name { color: var(--muted); }

/* Naam of groep wijzigen: compacter, met een terugknop linksboven */
.start-form { position: relative; }
.start-back { position: absolute; top: 16px; left: 16px; }
.start-icon.small { width: 72px; height: 72px; }

/* Naar de iOS-app (alleen op iPhone en iPad) */
.app-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 30rem;
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
}
.app-card:hover, .app-card:focus-visible { border-color: var(--accent); }
.app-card b { font-size: 1.1rem; }
.app-card-text { flex: 1; color: var(--muted); }
.app-card-text b { color: var(--text); }
.app-card-icon { font-size: 1.8rem; }
.app-card-go { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* "Naam of groep wijzigen" is langer dan "Lanceerbasis": iets kleiner, en hele woorden. */
.start-form .logo { font-size: clamp(1.6rem, 7.5vw, 2.2rem); hyphens: manual; }