/* ==========================================================================
   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

   Two ad slots with the progress bar between them. No button: the bar runs and
   the game starts on its own.
   -------------------------------------------------------------------------- */

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

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

.loading__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(420px, 100%);
}

/* A small spinning planet, drawn with gradients rather than an image. */
.loading__planet {
  width: clamp(64px, 14vh, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #8fd3ff 0%, #2f7fd6 42%, #0a2d5c 100%);
  box-shadow:
    0 0 46px rgba(56, 225, 208, 0.26),
    inset -12px -12px 28px rgba(0, 0, 0, 0.45);
  animation: loading-bob 2.6s ease-in-out infinite;
}

@keyframes loading-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.03); }
}

.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;
}

/* --------------------------------------------------------------------------
   Ad slots

   Empty by default. Paste your ad network code into .ad-slot__inner in
   index.html. The dashed placeholder only shows while a slot is empty, so it
   disappears by itself once real ads are in.
   -------------------------------------------------------------------------- */

.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.ad-slot__label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.7;
}

.ad-slot__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

/* Reserved heights, so the layout never jumps when an ad loads. */
.ad-slot--banner .ad-slot__inner { min-height: 90px; max-width: 728px; }
.ad-slot--rectangle .ad-slot__inner { min-height: 250px; max-width: 336px; }

.ad-slot__inner:empty {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(21, 27, 53, 0.35);
}

.ad-slot__inner:empty::after {
  content: "Ad slot";
  font-size: 0.72rem;
  color: var(--text-dim);
  opacity: 0.55;
}