/*
 * Visual cohesion pass
 *
 * This file intentionally loads last. It gives the accumulated feature modules
 * one shared hierarchy without changing their behaviour or removing the
 * established Sprite Tracker identity.
 */

:root {
  --cohesion-radius-panel: 16px;
  --cohesion-radius-control: 11px;
  --cohesion-shadow: 0 1px 2px rgba(8, 15, 12, .08), 0 12px 30px rgba(8, 15, 12, .045);
  --cohesion-rule: color-mix(in srgb, var(--st-border) 76%, transparent);
}

/* Keep the application frame quiet so Sprite artwork remains the focus. */
.content {
  padding-top: clamp(24px, 3vw, 42px);
}

.page {
  max-width: 1500px;
  margin-inline: auto;
}

.page > .hero {
  margin: 0 0 24px;
  padding: 0 2px 22px;
  border-bottom: 1px solid var(--cohesion-rule);
}

.page > .hero h2 {
  max-width: 24ch;
  margin: 7px 0 0;
  font-size: clamp(2.15rem, 4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.page > .hero p {
  max-width: 68ch;
  margin: 16px 0 0;
  line-height: 1.6;
  text-wrap: pretty;
}

.page > .hero .eyebrow,
.panel > .eyebrow,
.panel .eyebrow {
  letter-spacing: .12em;
}

/* Repeated feature cards should feel like one family, not separate themes. */
.panel,
.cosmic-surface,
.achievement-card,
.ranking-row {
  border-radius: var(--cohesion-radius-panel);
  box-shadow: var(--cohesion-shadow);
}

.panel,
.cosmic-surface {
  border-color: var(--cohesion-rule);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel + .panel,
.list > .panel + .panel {
  margin-top: 14px;
}

.panel h3 {
  line-height: 1.16;
  letter-spacing: -.018em;
}

.panel p,
.panel .muted {
  line-height: 1.58;
}

.btn,
.input,
select,
textarea,
.pill {
  border-radius: var(--cohesion-radius-control);
}

.btn {
  box-shadow: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: none;
}

/* Calm the persistent navigation without making it anonymous. */
.side {
  border-right-color: var(--cohesion-rule);
}

.nav-section {
  margin-block: 0;
  padding-block: 8px;
}

.nav-section + .nav-section {
  border-top: 1px solid var(--cohesion-rule);
}

.nav-section > summary {
  min-height: 34px;
  letter-spacing: .08em;
}

.nav-section [data-page] {
  min-height: 44px;
  border-radius: 11px;
}

.nav-section [data-page].active {
  box-shadow: inset 3px 0 0 currentColor;
}

.sidefoot .clock,
.sidefoot .clock-format {
  box-shadow: none;
}

/* The brand remains ornamental; utility controls stay deliberately simple. */
.top {
  border-bottom-color: var(--cohesion-rule);
  box-shadow: 0 1px 0 rgba(8, 15, 12, .035);
}

.header-sprite-quote {
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(8, 15, 12, .07);
}

.header-sprite-quote strong {
  letter-spacing: -.01em;
}

.actions .btn,
.actions .account-menu-trigger,
.actions .pill {
  min-height: 42px;
  box-shadow: none;
}

/* Empty rankings should look intentional even before authentication resolves. */
#rankingsContent:empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  padding: 32px;
  border: 1px dashed var(--cohesion-rule);
  border-radius: var(--cohesion-radius-panel);
  background: color-mix(in srgb, var(--st-panel) 72%, transparent);
}

#rankingsContent:empty::before {
  content: "Rankings appear here after players choose to join.";
  max-width: 34ch;
  color: var(--st-muted);
  text-align: center;
  line-height: 1.55;
}

.rankings-board-head h3,
.achievement-v2-head h3,
.profile-content h3 {
  text-wrap: balance;
}

/* Console stays playful, but now shares the app's spacing and card language. */
.console-page-intro {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cohesion-rule);
}

.console-page-intro h2 {
  margin-block: 6px 4px;
  font-size: clamp(2.15rem, 4vw, 3.5rem);
  line-height: 1.04;
}

.fortnite-command-console {
  overflow: hidden;
  border-radius: var(--cohesion-radius-panel);
  box-shadow: var(--cohesion-shadow);
}

.console-prompt,
.console-toolbar {
  border-radius: 11px;
}

.console-code {
  border-radius: 10px;
}

.console-code-heading {
  letter-spacing: .015em;
}

/* Light mode needs firmer separation than the earlier translucent layers. */
html[data-theme="light"] {
  background: #f1f2e9;
}

html[data-theme="light"] .main {
  background: color-mix(in srgb, #eef1e6 90%, var(--st-surface));
}

html[data-theme="light"] .panel,
html[data-theme="light"] .cosmic-surface,
html[data-theme="light"] .achievement-card,
html[data-theme="light"] .ranking-row {
  background-color: color-mix(in srgb, #fffdf8 94%, var(--st-panel));
  border-color: color-mix(in srgb, var(--st-border) 86%, #526257);
}

html[data-theme="light"] .muted,
html[data-theme="light"] .sub,
html[data-theme="light"] .panel p {
  color: color-mix(in srgb, var(--st-text) 68%, #26372e);
}

html[data-theme="light"] .input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #fffef9;
  border-color: color-mix(in srgb, var(--st-border) 80%, #526257);
}

/* A little less ceremony on work-heavy pages. */
#events > .hero h2,
#accountPage > .hero h2,
#appearance > .hero h2,
#profile > .hero h2,
#trades > .hero h2,
#parties > .hero h2,
#rankings > .hero h2 {
  font-size: clamp(2.05rem, 3.45vw, 3.35rem);
}

@media (max-width: 900px) {
  .content {
    padding-top: 22px;
  }

  .page > .hero {
    margin-bottom: 18px;
    padding-bottom: 17px;
  }

  .page > .hero h2,
  #events > .hero h2,
  #accountPage > .hero h2,
  #appearance > .hero h2,
  #profile > .hero h2,
  #trades > .hero h2,
  #parties > .hero h2,
  #rankings > .hero h2 {
    max-width: 100%;
    font-size: clamp(2rem, 7.4vw, 3rem);
  }

  .header-sprite-quote {
    box-shadow: none;
  }

  .panel,
  .cosmic-surface,
  .achievement-card,
  .ranking-row {
    border-radius: 14px;
  }
}

@media (max-width: 560px) {
  :root {
    --cohesion-radius-panel: 13px;
    --cohesion-radius-control: 10px;
    --cohesion-shadow: 0 1px 2px rgba(8, 15, 12, .07);
  }

  .content {
    padding-top: 18px;
  }

  .page > .hero h2,
  #events > .hero h2,
  #accountPage > .hero h2,
  #appearance > .hero h2,
  #profile > .hero h2,
  #trades > .hero h2,
  #parties > .hero h2,
  #rankings > .hero h2 {
    font-size: clamp(1.9rem, 10.2vw, 2.55rem);
    line-height: 1.05;
  }

  .page > .hero p {
    margin-top: 12px;
  }

  #rankingsContent:empty {
    min-height: 190px;
    padding: 24px 18px;
  }

  .console-code {
    border-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active {
    transform: none;
  }
}