/**
 * StarBoss Squadron — landing page styles
 *
 * Chrome only: this file loads on index.php, never on the game. Every colour
 * here is a --fw-* token or a color-mix() of one, so both themes work. The
 * arcade palette lives in game.css and stays inside the playfield.
 *
 * Cards, tables, buttons, alerts, dividers and the empty state are frikwork's,
 * untouched. What is below is layout plus the three things frikwork has no
 * component for: the hero, the key caps and the board's number columns.
 */

.starboss-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--fw-space-lg);
  align-items: start;
}

.starboss-landing__main,
.starboss-landing__side {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
  min-width: 0;
}

/* --- Hero -------------------------------------------------------------------
   Deliberately not an .fw-card: in the lively tier every card breathes and
   gains a rotating brand ring, which reads as noise behind a deep-space
   gradient. The gradient itself is mixed from --fw-brand and --fw-bg-2, so it
   is dark navy on the dark theme and a pale wash on the light one without
   naming a single literal colour. */

.starboss-hero {
  position: relative;
  overflow: hidden;
  padding: var(--fw-space-xl) var(--fw-space-lg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -10%,
      color-mix(in srgb, var(--fw-brand) 34%, var(--fw-bg-2)) 0%,
      var(--fw-bg-2) 72%);
}

.starboss-hero__title {
  margin: 0 0 var(--fw-space-sm);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fw-text);
  text-shadow: 0 0 22px color-mix(in srgb, var(--fw-brand) 60%, transparent);
}

.starboss-hero__lead {
  max-width: 42rem;
  margin: 0 auto var(--fw-space-lg);
  color: var(--fw-text-2);
}

.starboss-hero__play {
  border-radius: var(--fw-radius-pill);
  padding-inline: var(--fw-space-xl);
  box-shadow: 0 0 24px color-mix(in srgb, var(--fw-brand) 45%, transparent);
}

/* --- How to play ------------------------------------------------------------ */

.starboss-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fw-space-lg);
}

.starboss-controls__head {
  margin: 0 0 var(--fw-space-sm);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fw-brand-text);
}

.starboss-controls__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
  color: var(--fw-text-2);
}

/* Key caps. The legacy page used Bootstrap badges for these; frikwork has no
   kbd component, and .fw-chip is a removable-token affordance rather than a
   keyboard key, so this is the app shell's .app-kbd shape reused locally. */
.starboss-key {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--fw-border);
  border-bottom-width: 2px;
  border-radius: var(--fw-radius-sm);
  background: var(--fw-bg-2);
  color: var(--fw-text);
  font-family: var(--fw-font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* --- Personal best ---------------------------------------------------------- */

.starboss-pb {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
}

.starboss-pb__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fw-space-md);
  padding: var(--fw-space-xs) 0;
}

.starboss-pb__item + .starboss-pb__item { border-top: 1px solid var(--fw-border); }

.starboss-pb dt {
  color: var(--fw-text-2);
  font-size: 0.9rem;
}

.starboss-pb dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fw-brand-text);
}

.starboss-pb__date {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--fw-text-muted) !important;
}

.starboss-pb__note { display: block; margin: var(--fw-space-md) 0; }

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

.starboss-board__rank {
  width: 2.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--fw-text-muted);
}

.starboss-board__num { text-align: right; }

.starboss-board__initials {
  font-family: var(--fw-font-mono);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--fw-text);
  /* Server-side validation caps initials at three characters, but a cell that
     cannot be widened by its content is one less way a bad row breaks the
     table. */
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starboss-board tbody tr:first-child .starboss-board__rank,
.starboss-board tbody tr:first-child .starboss-board__initials {
  color: var(--fw-warning);
}

.starboss-board__note { display: block; margin-top: var(--fw-space-md); }

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 960px) {
  .starboss-landing { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .starboss-hero { padding: var(--fw-space-lg) var(--fw-space-md); }
  .starboss-pb dd { font-size: 1.15rem; }
}

/* Nothing here animates on its own — the entrance drop and the card breathe are
   frikwork's, and it already switches both off under reduced motion. The
   transitions below are the only motion this file owns, so they are the only
   thing it has to withdraw. */
@media (prefers-reduced-motion: reduce) {
  .starboss-hero,
  .starboss-hero__play { transition: none; }
}