/* Atlas / game hub — page-specific layer.
   Loads after atlas-core.css, which supplies the tokens and primitives.

   This page's atmosphere comes from the game's banner rather than a single
   render, so each hub feels like its own place. */

/* Repeated from core on purpose; see the note there. Guarded per file by
   tests/smoke/design-system-hidden-guard.test.mjs. */
[hidden],
.hidden { display: none !important; }

/* --------------------------------------------------------------- ambient */
.am-ambient { height: 60vh; }

/* The hub's colour is the game's, and a hub is a long scroll of cards, so the
   floor carries that colour past the point the banner's atmosphere ends. */
body.am { --am-floor: .75; }

.am-ambient__img {
  background-position: center 35%;
  filter: blur(90px) saturate(2) brightness(.6);
}

/* Darkest at the very top so the bar and title keep contrast, opening up
   behind the hero, then closing before the grid starts. */
.am-ambient__veil {
  background:
    radial-gradient(100% 60% at 50% 30%, transparent 0%, rgba(6, 8, 11, .55) 72%, rgba(6, 8, 11, .85) 100%),
    linear-gradient(180deg,
      rgba(6, 8, 11, .74) 0%,
      rgba(6, 8, 11, .5) 20%,
      rgba(6, 8, 11, .62) 62%,
      var(--am-void) 97%);
}

/* ------------------------------------------------------------------ hero */
.am-hero { padding-block: 1rem 1.6rem; }

.am-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--am-ink-3);
  margin-bottom: .7rem;
}

.am-hero__eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color .18s var(--am-ease);
}

.am-hero__eyebrow a:hover { color: var(--am-accent); }

#pageTitle {
  margin: 0;
  font-family: var(--am-display);
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--am-ink);
  text-shadow: 0 2px 40px rgba(6, 8, 11, .8);
}

/* Redundant beside the title, which the server already fills with the game
   name. Kept in the DOM because the server rewriter targets it. */
#pageSubtitle { display: none; }

/* ----------------------------------------------------- category discovery */
.am-category-browse {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem .35rem .15rem;
  border-top: 1px solid var(--am-line);
  text-align: center;
}

.am-category-browse:empty { display: none; }

.am-category-browse__label {
  flex: 0 0 auto;
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}

.am-category-browse__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem 1rem;
}

.am-category-browse__links a {
  color: var(--am-ink-2);
  font-size: .78rem;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: color .18s var(--am-ease);
}

.am-category-browse__links a:hover,
.am-category-browse__links a[aria-current="page"] {
  color: var(--am-accent);
}

.am-category-browse__links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .24rem;
}

@media (max-width: 640px) {
  .am-category-browse {
    justify-content: flex-start;
    align-items: center;
    gap: .8rem;
    overflow-x: auto;
    padding-inline: .1rem;
    scrollbar-width: none;
  }

  .am-category-browse::-webkit-scrollbar { display: none; }
  .am-category-browse__label { display: none; }
  .am-category-browse__links { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
}

/* -------------------------------------------------------- hub highlights */
#hubHighlightsShell { padding-bottom: 1.1rem; }

#hubHighlightsToggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .9rem;
  padding: 0 0 .55rem;
  border: 0;
  border-bottom: 1px solid var(--am-line-soft);
  background: none;
  text-align: left;
  cursor: pointer;
}

#hubHighlightsCollapsedLabel {
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--am-ink-3);
  white-space: nowrap;
  transition: color .18s var(--am-ease);
}
#hubHighlightsToggle:hover #hubHighlightsCollapsedLabel { color: var(--am-ink-2); }

#hubHighlightsToggleText {
  margin-left: auto;
  font-family: var(--am-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--am-accent);
}

#hubHighlightsPanel { padding-top: 1.4rem; }

#hubHighlightsEyebrow {
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--am-accent);
}
#hubHighlightsTitle {
  margin-top: .5rem;
  font-family: var(--am-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
#hubHighlightsCopy {
  margin-top: .55rem;
  max-width: 62ch;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--am-ink-2);
}
#hubHighlightsMeta {
  margin-top: .7rem;
  font-family: var(--am-mono);
  font-size: .6875rem;
  color: var(--am-ink-3);
}

.am-hub__cols { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 60rem) { .am-hub__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.am-hub__col {
  border: 1px solid var(--am-line-soft);
  border-radius: var(--am-r);
  background: var(--am-panel);
  padding: .95rem;
}
.am-hub__col h3 {
  margin: 0;
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}

/* --------------------------------------------------------------- toolbar */
/* The toolbar, search, card grid, card and pager now live in atlas-core.css
   (T-02) — the creator profile lists mods too. Only the hub's own controls
   remain here. */

/* Lives inside the panel so active filters keep the panel background rather
   than sitting on top of scrolling cards. Collapses fully when empty. */
#filterTagChips { display: flex; flex-wrap: wrap; gap: .35rem; }
#filterTagChips:empty { display: none; }

@media (max-width: 63.99rem) {
  #price { flex: 1 1 5rem; }
  #openSubmit, #activityOpen { flex: 0 0 auto; }
}

@media (max-width: 39.99rem) {
  #openSubmit { width: 2.2rem; padding-inline: 0; }
  #openSubmit .am-btn__label { display: none; }
}

/* ------------------------------------------------------------- skeletons */
.sk-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--am-line-soft);
  border-radius: var(--am-r);
  background: var(--am-panel);
  padding: 0 0 .7rem;
}
.sk-img { aspect-ratio: 4/3; background: rgba(255, 255, 255, .035); margin-bottom: .65rem; }
.sk-bar { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .05); margin-inline: .65rem; }
.sk-chips { display: flex; gap: .4rem; margin: .5rem .65rem 0; }
.sk-chip { height: 8px; width: 40px; border-radius: 2px; background: rgba(255, 255, 255, .04); border: 0; }
.shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
  transform: translateX(-100%);
  animation: am-shimmer 1.4s infinite;
}
@keyframes am-shimmer { to { transform: translateX(100%); } }

/* ==========================================================================
   Submit panel

   Was one 839px form with ten fields, a Ctrl+click multi-select and two raw
   native file inputs. Now four steps, because the fields genuinely group that
   way and each group is short enough to finish.

   The controls that changed shape — categories, price, download mode — are
   rendered here but still write to the original hidden `select` elements.
   Those remain the single source of truth, so buildAndValidateIndexSubmit and
   the resumable upload pipeline are untouched.
   ========================================================================== */

#submitModal { width: min(94vw, 44rem); }

/* ------------------------------------------------------------- step rail */
.am-subm__rail {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--am-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.am-subm__rail::-webkit-scrollbar { display: none; }

.am-subm__step {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--am-ink-3);
  cursor: default;
  transition: color .18s var(--am-ease);
}

/* Completed steps become clickable so a reviewer can jump back. */
.am-subm__step.is-done { color: var(--am-ink-2); cursor: pointer; }
.am-subm__step.is-done:hover { color: var(--am-ink); }
.am-subm__step.is-active { color: var(--am-accent); }

.am-subm__num {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .5rem;
  line-height: 1;
}
.am-subm__step.is-active .am-subm__num {
  background: rgba(var(--am-glow), .16);
}

.am-subm__sep {
  flex: 1 1 auto;
  min-width: .6rem;
  height: 1px;
  background: var(--am-line-soft);
}

/* Four labelled steps do not fit a phone. The rail scrolls, but a step name
   half off the edge with no hint that it scrolls just looks broken - so on
   narrow screens only the step you are on is named, and all four numbers stay
   in view. */
@media (max-width: 30rem) {
  .am-subm__step:not(.is-active) .am-subm__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------- panels */
.am-subm__body { padding: 1.1rem; max-height: min(64vh, 34rem); overflow-y: auto; }

.am-subm__panel { display: grid; gap: .9rem; }
.am-subm__panel[hidden] { display: none; }

@media (min-width: 34rem) {
  .am-subm__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .am-subm__row.is-creator { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- chip picker */
/* Replaces `<select multiple size=7>` and its "Ctrl+click to choose more than
   one" instruction — unusable on touch, and this same dialog already had a
   chip input for tags directly below it. */
.am-pick {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .4rem;
}

.am-pick__opt {
  height: 1.8rem;
  padding-inline: .65rem;
  border: 1px solid var(--am-line-soft);
  border-radius: var(--am-r);
  background: transparent;
  color: var(--am-ink-2);
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s var(--am-ease), border-color .18s var(--am-ease), background .18s var(--am-ease);
}
.am-pick__opt:hover { color: var(--am-ink); border-color: var(--am-line); }
.am-pick__opt[aria-pressed="true"] {
  border-color: rgba(var(--am-glow), .55);
  background: rgba(var(--am-glow), .1);
  color: var(--am-accent);
}

.am-release-editions {
  display: grid;
  gap: .7rem;
  margin-top: .75rem;
}

.am-release-edition {
  display: grid;
  gap: .45rem;
  padding-left: .75rem;
  border-left: 2px solid var(--am-line);
}

.am-release-edition__game {
  color: var(--am-ink-2);
  font-family: var(--am-mono);
  font-size: .625rem;
  text-transform: uppercase;
}

.am-pick__opt[aria-disabled="true"] {
  cursor: default;
}

/* --------------------------------------------------------- drop zones */
.am-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: .35rem;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--am-line);
  border-radius: var(--am-r);
  background: var(--am-panel);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s var(--am-ease), background .18s var(--am-ease);
}
.am-drop:hover { border-color: rgba(var(--am-glow), .45); }
.am-drop.is-over {
  border-color: var(--am-accent);
  border-style: solid;
  background: rgba(var(--am-glow), .07);
}

.am-drop__title {
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--am-ink-2);
}
.am-drop__hint { font-size: .6875rem; color: var(--am-ink-3); }
.am-drop svg { width: 18px; height: 18px; color: var(--am-ink-3); }

/* The chosen mod file, once picked. */
#modFileInfo {
  font-family: var(--am-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--am-ink-3);
}

/* -------------------------------------------------------- image previews */
/* Tiles at 4:3, the same frame the mod card uses, so what is judged here is
   what the card will show. */
#previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: .45rem;
  margin-top: .6rem;
}
#previews:empty { display: none; }

.am-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--am-line-soft);
  border-radius: var(--am-r);
  background: #0b0f14;
}
.am-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-shot.is-broken { border-color: rgba(244, 120, 140, .5); }

/* The cover is called out because the first image becomes the card, and the
   old panel only mentioned that in a hint nobody could act on. */
.am-shot__tag {
  position: absolute;
  top: .3rem;
  left: .3rem;
  padding: .1rem .35rem;
  border-radius: var(--am-r);
  background: rgba(var(--am-glow), .9);
  color: var(--am-accent-ink);
  font-family: var(--am-mono);
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.am-shot__acts {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: flex;
  gap: .2rem;
  opacity: 0;
  transition: opacity .16s var(--am-ease);
}
.am-shot:hover .am-shot__acts,
.am-shot:focus-within .am-shot__acts { opacity: 1; }

/* No hover on touch, so the controls have to be there from the start. */
@media (hover: none) {
  .am-shot__acts { opacity: 1; }
}

.am-shot__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.3rem;
  width: 1.3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--am-r);
  background: rgba(4, 6, 9, .82);
  color: var(--am-ink);
  cursor: pointer;
  transition: color .16s var(--am-ease), border-color .16s var(--am-ease);
}
.am-shot__act svg { width: 11px; height: 11px; display: block; }
.am-shot__act:hover { border-color: rgba(var(--am-glow), .6); color: var(--am-accent); }
.am-shot__act--del:hover { border-color: rgba(244, 120, 140, .6); color: var(--am-danger); }

/* Sits on the artwork, so it needs its own scrim rather than borrowed contrast. */
.am-shot__meta {
  position: absolute;
  inset: auto 0 0;
  padding: .5rem .4rem .25rem;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 9, .88));
  font-family: var(--am-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--am-ink-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#previewsNote { margin-top: .45rem; }
#previewsNote:empty { display: none; }
#previewsNote.is-warning { color: var(--am-paid); }

/* ------------------------------------------------------------- outcome */
/* The most consequential thing about pressing Submit, and the old form never
   said it: a creator publishes immediately, everyone else goes to review. */
.am-subm__outcome {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem .9rem;
  border: 1px solid var(--am-line-soft);
  border-left: 2px solid var(--am-accent);
  border-radius: var(--am-r);
  background: var(--am-panel);
}
.am-subm__outcome--review { border-left-color: var(--am-paid); }

.am-subm__outcome-title {
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--am-ink);
}
.am-subm__outcome-copy {
  margin-top: .3rem;
  font-size: .75rem;
  line-height: 1.65;
  color: var(--am-ink-2);
}

/* ------------------------------------------------------------- summary */
.am-subm__summary { display: grid; gap: .35rem; }

.am-subm__line {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-block: .3rem;
  border-bottom: 1px solid var(--am-line-soft);
  font-size: .8125rem;
  color: var(--am-ink-2);
}
.am-subm__line:last-child { border-bottom: 0; }

.am-subm__key {
  flex: 0 0 7rem;
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}
.am-subm__val { min-width: 0; overflow-wrap: anywhere; }
.am-subm__val.is-empty { color: var(--am-ink-3); }

/* ---------------------------------------------------------------- footer */
.am-subm__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--am-line-soft);
}
.am-subm__foot .am-subm__spacer { flex: 1 1 auto; }
#submitMsg { font-size: .75rem; color: var(--am-ink-3); }
#submitMsg.is-error { color: var(--am-danger); }

/* The Turnstile widget is injected at runtime immediately before the action
   row, so it needs breathing room rather than shoving the button down. */
[data-modatlas-turnstile] { padding-inline: 1.1rem; }

/* ------------------------------------------------------- community toggle */
#toggleCommunity {
  height: 1.9rem;
  padding-inline: .8rem;
  border: 1px solid var(--am-line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--am-ink-3);
  font-family: var(--am-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
#toggleCommunity:hover { color: var(--am-ink-2); border-color: var(--am-line); }

/* Activity log rows are injected with Tailwind classes; keep the shell tidy. */
#activityList { max-height: 65vh; overflow: auto; padding: 1rem; font-size: .8125rem; }
#activityStatus {
  font-family: var(--am-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}