/* ==========================================================================
   Planet Clicker - screens, page structure, responsive behaviour.
   ========================================================================== */

.screen {
  position: relative;
  z-index: 1;
  display: none;
  min-height: 100dvh;
}

.screen.is-active { display: block; }

.screen--loading.is-active,
.screen--name.is-active {
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vh, 32px) 20px;
  /* If the content still will not fit, scroll rather than clip it. */
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Game shell
   -------------------------------------------------------------------------- */

.screen--game.is-active {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(14px, 3vw, 26px);
  background: rgba(8, 11, 26, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  z-index: 10;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.topbar__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--energy-bright), var(--violet) 68%, #16204a);
  box-shadow: var(--glow-energy);
  flex-shrink: 0;
}

.topbar__name-accent { color: var(--energy); }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stat strip -------------------------------------------------------------- */

.stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 30px);
  min-width: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.stat__label {
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.stat__value {
  font-family: var(--font-num);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat--primary .stat__value {
  font-size: 1.5rem;
  color: var(--energy);
  text-shadow: 0 0 22px rgba(56, 225, 208, 0.4);
}

/* The energy figure pulses briefly whenever it jumps. */
.stat--primary .stat__value.is-bumped {
  animation: value-bump 320ms var(--ease);
}

@keyframes value-bump {
  0%   { transform: scale(1); }
  36%  { transform: scale(1.11); }
  100% { transform: scale(1); }
}

/* Main board -------------------------------------------------------------- */

.board {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  min-height: 0;
  overflow: hidden;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(16px, 3vw, 34px);
  min-height: 0;
  overflow-y: auto;
  text-align: center;
}

.stage__planet {
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.stage__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(8, 11, 26, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--line-soft);
}

.pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px clamp(12px, 2vw, 18px) 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.pane.is-active { display: block; }

.pane::-webkit-scrollbar { width: 10px; }
.pane::-webkit-scrollbar-track { background: transparent; }
.pane::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.pane__note {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--energy-dim);
  background: rgba(56, 225, 208, 0.05);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Tablet: sidebar narrows.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Mobile: stack the planet above a bottom sheet, and shrink the top bar into
   two rows so nothing overflows horizontally.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Narrow phones: four stats will not fit side by side at their full width, and
   the top bar clips rather than scrolls. Share the row equally and swap in the
   short labels, which keeps every figure visible down to 320px.
   -------------------------------------------------------------------------- */

/* Short landscape phones: keep the planet from eating the whole viewport. */

/* --------------------------------------------------------------------------
   Loading screen

   A rotating planet with a progress bar beneath it. Nothing else.
   -------------------------------------------------------------------------- */

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vh, 32px);
  width: min(360px, 100%);
  animation: loading-in 420ms var(--ease) both;
}

@keyframes loading-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Holds the same procedurally drawn planet the game uses, so the loading
   screen and the game share one visual identity. */
.loading__planet {
  width: clamp(120px, min(30vh, 46vw), 200px);
}

.loading__planet .planet-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 40px rgba(56, 225, 208, 0.22));
}

.loading__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.loading__fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--energy), var(--violet));
  box-shadow: 0 0 14px rgba(56, 225, 208, 0.5);
  /* Width is set from JS; this keeps the movement smooth between updates. */
  transition: width 180ms linear;
}

.loading__status {
  font-size: 0.86rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}