/* ==========================================================================
   Planet Clicker - buttons, cards, the clicker, modals, leaderboard.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 650;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: linear-gradient(135deg, var(--energy) 0%, var(--violet) 100%);
  color: #04121a;
  box-shadow: 0 8px 26px rgba(56, 225, 208, 0.26);
}

.btn--primary:hover:not(:disabled) {
  box-shadow: 0 12px 34px rgba(56, 225, 208, 0.36);
}

.btn--outline {
  border-color: var(--line);
  background: rgba(21, 27, 53, 0.75);
  color: var(--text);
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--energy-dim);
  background: var(--surface-2);
}

.btn--ghost {
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 12px;
}

.btn--ghost:hover:not(:disabled) { color: var(--text-muted); }

.btn--danger {
  border-color: rgba(242, 96, 107, 0.4);
  background: rgba(242, 96, 107, 0.1);
  color: var(--danger);
}

.btn--danger:hover:not(:disabled) { background: rgba(242, 96, 107, 0.18); }

.btn--sm { padding: 8px 13px; font-size: 0.84rem; }
.btn--lg { padding: 13px 30px; font-size: 1rem; }
.btn--xl {
  padding: 17px 56px;
  font-size: 1.12rem;
  border-radius: var(--r-lg);
}

.btn--full { width: 100%; }
.btn__icon { font-size: 1em; line-height: 1; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(21, 27, 53, 0.75);
  font-size: 1.05rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  flex-shrink: 0;
}

.icon-btn:hover { background: var(--surface-2); border-color: var(--energy-dim); }
.icon-btn[aria-pressed="true"] { border-color: var(--energy); color: var(--energy); }

/* --------------------------------------------------------------------------
   Player chip and connection dot
   -------------------------------------------------------------------------- */

.player-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(21, 27, 53, 0.75);
  transition: border-color var(--dur) var(--ease);
  max-width: 190px;
}

.player-chip:hover { border-color: var(--energy-dim); }

.player-chip__avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--energy));
  color: #06121c;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  text-transform: uppercase;
}

.player-chip__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.25;
}

.player-chip__name {
  font-size: 0.85rem;
  font-weight: 650;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-chip__rank {
  font-size: 0.66rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}

/* Status is carried by shape+position in the tooltip too, not colour alone. */
.conn-dot--online   { background: var(--success); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.conn-dot--offline  { background: var(--danger); }
.conn-dot--degraded { background: var(--amber); }
.conn-dot--unknown  { background: var(--text-dim); animation: pulse-dot 1.4s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Panels and forms
   -------------------------------------------------------------------------- */

.panel {
  width: min(480px, 100%);
  padding: clamp(24px, 5vw, 40px);
  background: rgba(14, 18, 38, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: intro-rise 500ms var(--ease) both;
}

.panel--centered { text-align: center; }

.panel__title {
  font-size: clamp(1.35rem, 4.4vw, 1.7rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.panel__subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 26px;
}

.name-form { display: flex; flex-direction: column; gap: 12px; }

.field { display: block; text-align: left; }

.field__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.field__input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--deep);
  color: var(--text);
  font-size: 1.05rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__input::placeholder { color: var(--text-dim); }

.field__input:focus {
  border-color: var(--energy);
  box-shadow: 0 0 0 3px rgba(56, 225, 208, 0.16);
}

.field__input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(242, 96, 107, 0.15);
}

.field__help { font-size: 0.78rem; color: var(--text-dim); text-align: left; }

.field__error {
  font-size: 0.82rem;
  color: var(--danger);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}

.field__error::before { content: "⚠"; }

/* --------------------------------------------------------------------------
   The clicker
   -------------------------------------------------------------------------- */

.clicker {
  position: relative;
  display: grid;
  place-items: center;
}

.clicker__button {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(200px, min(38vh, 46vw), 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Big, forgiving touch target with no highlight flash on tap. */
  touch-action: manipulation;
  transition: transform 90ms var(--ease);
}

.clicker__button:hover { transform: scale(1.025); }
.clicker__button:active { transform: scale(0.955); }

.clicker__button.is-punched { animation: planet-punch 260ms var(--ease); }

@keyframes planet-punch {
  0%   { transform: scale(0.94); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.clicker__halo {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 225, 208, 0.2) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.clicker__button:hover .clicker__halo { opacity: 1; }

.clicker__art { display: block; width: 100%; }
.clicker__art .planet-svg { width: 100%; height: auto; }

/* Ripple emitted on each click. */
.click-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(56, 225, 208, 0.55);
  pointer-events: none;
  animation: ring-out 620ms var(--ease) forwards;
}

@keyframes ring-out {
  from { transform: scale(0.86); opacity: 0.85; }
  to   { transform: scale(1.42); opacity: 0; }
}

.clicker__hint {
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: opacity var(--dur) var(--ease);
}

.clicker__hint.is-hidden { opacity: 0; }

/* Floating +energy numbers */

.clicker__floats {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  overflow: hidden;
}

.float-num {
  position: absolute;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  color: var(--energy-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 18px rgba(56, 225, 208, 0.55);
  white-space: nowrap;
  animation: float-up 1100ms var(--ease) forwards;
  will-change: transform, opacity;
}

@keyframes float-up {
  0%   { transform: translate(-50%, 0) scale(0.85); opacity: 0; }
  18%  { transform: translate(-50%, -14px) scale(1.06); opacity: 1; }
  100% { transform: translate(-50%, -104px) scale(0.94); opacity: 0; }
}

.meta-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 18, 38, 0.72);
}

.meta-pill__label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.meta-pill__value {
  font-family: var(--font-num);
  font-size: 0.92rem;
  color: var(--energy);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  padding: 12px clamp(12px, 2vw, 18px) 0;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.tab:hover { color: var(--text-muted); background: rgba(29, 37, 71, 0.4); }

.tab.is-active { color: var(--energy); }

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--energy);
  box-shadow: 0 0 12px var(--energy);
}

.tab__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */

.shop-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.shop-controls__label {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.segmented {
  display: flex;
  padding: 3px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--deep);
}

.segmented__btn {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-dim);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.segmented__btn.is-active { background: var(--surface-3); color: var(--energy); }

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
}

.toggle input { accent-color: var(--energy); width: 15px; height: 15px; cursor: pointer; }

.shop { display: flex; flex-direction: column; gap: 8px; }

.card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(14, 18, 38, 0.66);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  text-align: left;
  width: 100%;
}

.card.is-affordable {
  border-color: rgba(56, 225, 208, 0.32);
  background: rgba(20, 32, 52, 0.72);
}

.card.is-affordable:hover {
  border-color: var(--energy);
  transform: translateX(2px);
}

.card.is-locked { opacity: 0.5; }
.card.is-maxed { border-color: rgba(139, 92, 246, 0.35); }

.card:disabled { cursor: not-allowed; }
.card:not(:disabled) { cursor: pointer; }

.card.is-purchased { animation: card-flash 480ms var(--ease); }

@keyframes card-flash {
  0%   { background: rgba(56, 225, 208, 0.3); }
  100% { background: rgba(20, 32, 52, 0.72); }
}

.card__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--energy);
  flex-shrink: 0;
}

.card.is-affordable .card__icon {
  background: rgba(56, 225, 208, 0.12);
  box-shadow: inset 0 0 0 1px rgba(56, 225, 208, 0.25);
}

.upgrade-icon { width: 21px; height: 21px; }

.card__body { min-width: 0; }

.card__name {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 650;
  margin-bottom: 2px;
}

.card__level {
  font-family: var(--font-num);
  font-size: 0.72rem;
  color: var(--violet-bright);
  font-weight: 700;
  flex-shrink: 0;
}

.card__effect {
  font-size: 0.76rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__payback {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.card__payback strong { color: var(--amber); font-weight: 650; }

.card__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.card__price {
  font-family: var(--font-num);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-dim);
}

.card.is-affordable .card__price { color: var(--energy); }

.card__qty {
  font-size: 0.64rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.card__eta {
  font-size: 0.63rem;
  color: var(--text-dim);
  opacity: 0.8;
}

.shop__empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   Worlds
   -------------------------------------------------------------------------- */

.worlds { display: flex; flex-direction: column; gap: 10px; }

.world {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(14, 18, 38, 0.66);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  text-align: left;
  width: 100%;
}

.world.is-active {
  border-color: var(--energy);
  background: rgba(20, 40, 52, 0.7);
  box-shadow: inset 0 0 0 1px rgba(56, 225, 208, 0.2);
}

.world.is-unlocked:not(.is-active) { cursor: pointer; }
.world.is-unlocked:not(.is-active):hover { border-color: var(--energy-dim); }

.world.is-locked { opacity: 0.72; }
.world.is-affordable {
  border-color: rgba(251, 191, 92, 0.5);
  background: rgba(40, 32, 16, 0.5);
  cursor: pointer;
}

.world.is-affordable:hover { border-color: var(--amber); }

.world__art { width: 62px; }
.world__art .planet-svg { width: 100%; height: auto; }

.world__body { min-width: 0; }

.world__name {
  font-size: 0.96rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}

.world__stats {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.world__stats strong { color: var(--energy); }

.world__cta { text-align: right; flex-shrink: 0; }

.world__price {
  font-family: var(--font-num);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--amber);
  display: block;
}

.world__eta { font-size: 0.63rem; color: var(--text-dim); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge--active { background: rgba(56, 225, 208, 0.16); color: var(--energy); }
.badge--locked { background: var(--surface-2); color: var(--text-dim); }
.badge--ready  { background: rgba(251, 191, 92, 0.16); color: var(--amber); }

/* --------------------------------------------------------------------------
   Stats pane
   -------------------------------------------------------------------------- */

.statlist {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-bottom: 24px;
}

.statlist dt,
.statlist dd {
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.84rem;
}

.statlist dt { color: var(--text-muted); }

.statlist dd {
  font-family: var(--font-num);
  font-weight: 650;
  text-align: right;
  color: var(--text);
}

.danger-zone {
  padding: 15px;
  border: 1px solid rgba(242, 96, 107, 0.24);
  border-radius: var(--r-md);
  background: rgba(242, 96, 107, 0.05);
}

.danger-zone__title { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }

.danger-zone__text {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 10, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 220ms var(--ease);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  position: relative;
  width: min(460px, 100%);
  max-height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: modal-in 300ms var(--ease) both;
}

.modal__panel--wide { width: min(720px, 100%); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.modal__header--simple { border-bottom: none; padding-bottom: 0; justify-content: center; }

.modal__header-actions { display: flex; gap: 8px; flex-shrink: 0; }

.modal__title {
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.modal__subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.modal__body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal__body--center { text-align: center; padding: 22px 26px 28px; }

.modal__footer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: rgba(8, 11, 26, 0.85);
  flex-shrink: 0;
}

.modal__footer[hidden] { display: none; }

.your-rank__label {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.your-rank__position {
  font-family: var(--font-num);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--energy);
}

.your-rank__name {
  font-weight: 650;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.your-rank__score {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--energy);
}

/* --------------------------------------------------------------------------
   Leaderboard
   -------------------------------------------------------------------------- */

.board-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 46px 20px;
  text-align: center;
  color: var(--text-muted);
}

.board-state[hidden] { display: none; }

.board-state__title { font-weight: 700; color: var(--text); font-size: 1rem; }
.board-state__text { font-size: 0.85rem; max-width: 42ch; line-height: 1.55; }

.spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--energy);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
  align-items: end;
}

.podium__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 15px 8px 13px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: center;
  min-width: 0;
  animation: podium-rise 460ms var(--ease) both;
}

.podium__slot:nth-child(1) { animation-delay: 60ms; }
.podium__slot:nth-child(2) { animation-delay: 0ms; }
.podium__slot:nth-child(3) { animation-delay: 120ms; }

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

/* First place is centre and taller, so the ordering reads visually. */
.podium__slot--1 {
  order: 2;
  padding-top: 22px;
  padding-bottom: 18px;
  border-color: rgba(255, 212, 94, 0.5);
  background: linear-gradient(180deg, rgba(255, 212, 94, 0.14), var(--surface-2) 72%);
  box-shadow: 0 0 32px rgba(255, 212, 94, 0.14);
}

.podium__slot--2 { order: 1; border-color: rgba(207, 216, 236, 0.34); }
.podium__slot--3 { order: 3; border-color: rgba(217, 147, 88, 0.34); }

.podium__medal { font-size: 1.7rem; line-height: 1; }
.podium__slot--1 .podium__medal { font-size: 2.1rem; }

.podium__rank {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.podium__name {
  font-weight: 700;
  font-size: 0.88rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium__slot--1 .podium__name { font-size: 1rem; color: var(--gold); }
.podium__slot--2 .podium__name { color: var(--silver); }
.podium__slot--3 .podium__name { color: var(--bronze); }

.podium__score {
  font-family: var(--font-num);
  font-size: 0.8rem;
  color: var(--energy);
  font-weight: 700;
}

.podium__meta { font-size: 0.62rem; color: var(--text-dim); }

.ranks { border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }

.ranks__head,
.ranks__row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
}

.ranks__head {
  background: var(--surface-2);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.ranks__head span:last-child,
.ranks__row .ranks__score { text-align: right; }

.ranks__row {
  border-top: 1px solid var(--line-soft);
  font-size: 0.88rem;
  transition: background-color var(--dur) var(--ease);
}

.ranks__row:hover { background: rgba(29, 37, 71, 0.34); }

.ranks__row.is-you {
  background: rgba(56, 225, 208, 0.09);
  box-shadow: inset 3px 0 0 var(--energy);
}

.ranks__rank {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--text-dim);
}

.ranks__row.is-you .ranks__rank { color: var(--energy); }

.ranks__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ranks__you-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--energy);
  color: #04121a;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ranks__score {
  font-family: var(--font-num);
  font-weight: 650;
  color: var(--energy);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Offline and unlock modals
   -------------------------------------------------------------------------- */

.modal__panel--celebrate { text-align: center; padding: 30px 26px 28px; }

.unlock__art {
  width: 130px;
  margin: 0 auto 14px;
  animation: unlock-spin 900ms var(--ease) both;
}

@keyframes unlock-spin {
  from { opacity: 0; transform: scale(0.55) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}

.unlock__eyebrow {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 5px;
}

.unlock__title { font-size: 1.9rem; margin-bottom: 6px; }

.unlock__tagline { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 20px; }

.unlock__stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 24px;
}

.unlock__stat-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}

.unlock__stat-value {
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--energy);
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(400px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(14, 18, 38, 0.96);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.toast.is-visible { opacity: 1; transform: none; }

.toast__icon {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast__content { min-width: 0; }
.toast__title { font-weight: 700; font-size: 0.88rem; }
.toast__body { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.toast--success { border-color: rgba(74, 222, 128, 0.4); }
.toast--success .toast__icon { background: rgba(74, 222, 128, 0.16); color: var(--success); }

.toast--warning { border-color: rgba(251, 191, 92, 0.4); }
.toast--warning .toast__icon { background: rgba(251, 191, 92, 0.16); color: var(--amber); }

.toast--milestone {
  border-color: rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(14, 18, 38, 0.96) 62%);
}

.toast--milestone .toast__icon { background: rgba(139, 92, 246, 0.22); color: var(--violet-bright); }

/* --------------------------------------------------------------------------
   Planet rotation

   The surface and cloud layers are each drawn twice, side by side, inside a
   circular clip. Sliding them by exactly one band width and looping makes the
   seam invisible and reads as a rotating sphere.

   Both are plain transforms on their own layers, so the compositor animates
   them and the main thread does nothing per frame. Clouds move faster than the
   surface, which gives the parallax that sells the curvature.
   -------------------------------------------------------------------------- */

.planet-svg--live .planet-surface {
  animation: planet-spin 48s linear infinite;
  will-change: transform;
}

.planet-svg--live .planet-clouds {
  animation: planet-spin 34s linear infinite;
  will-change: transform;
}

@keyframes planet-spin {
  from { transform: translateX(0); }
  /* -50% of the group's own width is exactly one band, so it wraps seamlessly. */
  to   { transform: translateX(-50%); }
}

/* The loading screen planet is the only thing on that screen and its job is to
   say "something is happening", so it turns fast enough to read as motion at a
   glance. Declared here, next to the rules it overrides, because these two are
   equal in specificity and source order decides the winner. */
.loading__planet .planet-surface { animation-duration: 14s; }
.loading__planet .planet-clouds  { animation-duration: 10s; }

/* Honour both the OS setting and the in-game one: a planet that never stops
   moving is exactly the kind of thing reduced-motion exists for. */
@media (prefers-reduced-motion: reduce) {
  .planet-svg--live .planet-surface,
  .planet-svg--live .planet-clouds { animation: none; }
}

body.reduced-effects .planet-svg--live .planet-surface,
body.reduced-effects .planet-svg--live .planet-clouds { animation: none; }

/* --------------------------------------------------------------------------
   Pause

   The veil sits over the whole game shell. The engine also refuses clicks and
   purchases while paused, so this is presentation rather than the actual
   guard - but it makes the frozen state unmistakable.
   -------------------------------------------------------------------------- */

.icon-btn[aria-pressed="true"]#btn-pause {
  border-color: var(--amber);
  color: var(--amber);
}

.pause-veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 5, 13, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade-in 200ms var(--ease);
}

.pause-veil[hidden] { display: none; }

.pause-veil__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(360px, 100%);
  padding: 30px 26px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  animation: modal-in 260ms var(--ease) both;
}

.pause-veil__icon {
  font-size: 1.6rem;
  color: var(--amber);
  letter-spacing: 2px;
}

.pause-veil__title {
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.pause-veil__text {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}

/* The game shell has to be a positioning context for the veil to cover it. */
.screen--game.is-active { position: relative; }