/* The permanent game-mode hosting pages: /story-mode/, /trial-grounds/,
   /nether-realm/ and /cake-towers/. One stylesheet for all of them, because
   they are the same page with different content — a fifth mode should be a
   route, a registry entry, and here only its two accent lines.

   WHAT THIS FILE DOES NOT DO. The build cards are
   assets/css/community-team-list.css; the card itself is
   assets/css/team-build-card.css; the panel/surface tokens are
   assets/css/team-surface.css. This file only frames them, exactly like the
   Cookie Alliance page's own stylesheet does — and for the same reason it
   declares `.accent-story` / `.accent-trial` here rather than in
   feature-page.css, which 42 pages reference and editing forces an events
   rebake.

   Per-mode colour lives on the ROUTE, matching the category tone each mode
   stores under (assets/css/team-surface.css). Retune one and retune the other. */

body.game-mode-page {
  /* The same near-black gradient /team-builder/ and the four hubs paint.
     Without it the page inherits feature-page.css's magenta-and-cyan wash. */
  background: var(--tcb-page-backdrop);
}

body[data-route="story-mode"] {
  --gm-accent: #4ade80;
  --gm-line: rgba(74, 222, 128, 0.4);
}

body[data-route="trial-grounds"] {
  --gm-accent: #ff6b4a;
  --gm-line: rgba(255, 107, 74, 0.4);
}

body[data-route="nether-realm"] {
  --gm-accent: #7c7cf5;
  --gm-line: rgba(124, 124, 245, 0.4);
}

body[data-route="cake-towers"] {
  --gm-accent: #b574ff;
  --gm-line: rgba(181, 116, 255, 0.4);
}

.accent-story,
.accent-trial,
.accent-nether,
.accent-cake {
  border-color: var(--gm-line);
}

/* ---- Hero art ---------------------------------------------------------
   .tcb-hero is deliberately `overflow: visible` so the cookie can break the
   frame edge — that IS the look, site-wide. But the default art is
   min(31rem, 46%) anchored at the vertical middle, which on a hero this short
   hangs well past the bottom edge and printed straight through the panel
   below. The dials exist for exactly this, so it is tuned rather than clipped
   (clipping would flatten the break-out on every one of these pages).

   The panels below then claim their own stacking context, so even at a width
   where the art still reaches them it passes BEHIND rather than over. Both
   halves are needed: the tuning keeps it looking right, the z-index keeps it
   legible if a future mode uses taller art. */
body.game-mode-page .gm-hero {
  --tcb-hero-art-width: min(21rem, 34%);
  --tcb-hero-art-top: -1.25rem;
  --tcb-hero-art-right: -0.75rem;
  --tcb-hero-art-shift-y: 0%;
}

body.game-mode-page .gm-overview,
body.game-mode-page .gm-teams,
body.game-mode-page .community-team-pages {
  position: relative;
  z-index: 2;
}

/* ---- Panels ----------------------------------------------------------
   Every section is a .premium-glass, and what it wears is the Team Builder's
   .tb-panel off the shared --tbs-* tokens. feature-page.css's own glass (a
   magenta gradient, a 1.25rem radius, a 24px blur) is what every hosting page
   overrides the same way. The hero is excluded — it keeps the shared tcb-hero
   frame, the one thing these pages share with the rest of the site. */
body.game-mode-page .premium-glass:not(.gm-hero) {
  border: 1px solid var(--tbs-panel-line);
  border-radius: var(--tbs-panel-radius);
  background: var(--tbs-panel-bg);
  box-shadow: var(--tbs-panel-shadow);
  padding: var(--tbs-panel-pad);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* feature-page.css sets every h2 to clamp(1.8rem, 3vw, 2.8rem) — a page-title
   size, which on a panel head reads as a second page title. */
body.game-mode-page .gm-overview h2,
body.game-mode-page .gm-section-head h2 {
  margin: 0;
  font-family: var(--tbs-panel-title-font);
  font-size: var(--tbs-panel-title-size);
  color: var(--tcb-ink);
}

.gm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

/* ---- The mode overview ------------------------------------------------
   Ported from /cookie-alliance/'s .ca-overview, which is the pattern all the
   hosting pages follow now: a lead, a few collapsible sections on how the mode
   works, then one collapsed "Full breakdown" disclosure holding the reference
   detail. Written here rather than in each route's own file because these four
   pages share one stylesheet.

   TWO DIFFERENCES FROM ALLIANCE, both deliberate:

     · a <ul>, not an <ol>, and no step number. Alliance's numbering is
       load-bearing there — its steps are the screens in the order a player
       meets them. These modes have no such order (Cake Towers' two towers are
       climbed in either order), and numbering them would assert a sequence
       that does not exist.

     · no screenshot styles yet. The sections are text-only for now; adding
       captures later means a .gm-shot rule here and figures in the markup,
       nothing structural.

   Everything is static HTML and native <details>, which is the whole point:
   this is the page's indexable body copy, so it must render with no JS and no
   Supabase, and a crawler reads a closed <details>. */
.gm-overview {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  /* LOAD-BEARING, same as Alliance's: this section is a GRID ITEM of
     main.route-main, whose automatic minimum size is its content's min-content
     width — so without this the section cannot shrink below the widest thing
     inside it, and one long unbroken term in a bullet stretches the panel past
     a phone's viewport. */
  min-width: 0;
}

.gm-overview-head {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.gm-overview-lead {
  margin: 0;
  max-width: 62rem;
  color: var(--tcb-ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}

.gm-overview-lead strong,
.gm-fact strong,
.gm-detail-block strong {
  color: var(--tcb-ink);
  font-weight: 800;
}

.gm-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Each card is its own height, so a collapsed one beside an open one is not
     stretched into a title bar over a card's worth of empty space. */
  align-items: start;
}

.gm-fact {
  min-width: 0;
  /* No padding: the disclosure inside owns it, so the summary is clickable edge
     to edge rather than only across the card's content box. */
  border: 1px solid var(--tbs-panel-line);
  border-radius: 0.9rem;
  background: var(--tcb-surface);
  /* The mode's colour as an edge rather than a fill, the way a category tone
     sits on a build card. */
  border-left: 3px solid var(--gm-accent);
}

.gm-fact-disclosure > summary h3 {
  /* Takes the space the caret does not; without min-width: 0 a long section
     name pushes the caret off the card instead of wrapping. */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--tcb-ink);
}

.gm-fact-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem 0.9rem;
  min-width: 0;
}

/* ---- The full-breakdown disclosure -------------------------------------
   Collapsed by default: reference detail, and a reader who came for the
   community teams should not have to scroll a rulebook to reach them. */
.gm-details {
  min-width: 0;
  border: 1px solid var(--tbs-panel-line);
  border-radius: 0.9rem;
  background: var(--tcb-surface);
}

/* The caret chrome is shared by BOTH disclosures — the sections and the full
   breakdown — rather than written twice. Only the box around them differs: a
   section is already inside a .gm-fact card, so it brings no border of its
   own. */
.gm-fact-disclosure > summary,
.gm-details > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  color: var(--tcb-ink);
  font-family: var(--tbs-panel-title-font);
  font-size: 0.95rem;
  /* The UA marker is replaced by the caret below so it can rotate with the open
     state. `list-style` covers Firefox, the pseudo-element covers WebKit —
     both are needed. */
  list-style: none;
}

.gm-fact-disclosure > summary::-webkit-details-marker,
.gm-details > summary::-webkit-details-marker {
  display: none;
}

.gm-fact-disclosure > summary::after,
.gm-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform 160ms ease;
}

.gm-fact-disclosure[open] > summary::after,
.gm-details[open] > summary::after {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}

.gm-fact-disclosure > summary:hover,
.gm-fact-disclosure > summary:focus-visible,
.gm-details > summary:hover,
.gm-details > summary:focus-visible {
  color: #fff;
}

.gm-details-label {
  min-width: 0;
}

.gm-details-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1rem 1rem 1rem;
  border-top: 1px solid var(--tbs-panel-line);
}

.gm-detail-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.gm-detail-block h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
  color: var(--tcb-ink);
}

/* One list style for both halves — the sections and the breakdown blocks. */
.gm-fact-body ul,
.gm-detail-block ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--tcb-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.gm-fact-body li + li,
.gm-detail-block li + li {
  margin-top: 0.3rem;
}

.gm-fact-body a,
.gm-detail-block a {
  color: var(--gm-accent);
}

.gm-detail-note {
  margin: 0;
  max-width: 62rem;
  color: var(--tcb-ink-muted, var(--tcb-ink-soft));
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---- Community teams -------------------------------------------------- */
.gm-teams {
  display: grid;
  gap: var(--tbs-panel-gap);
  padding: var(--tbs-panel-pad);
  border: 1px solid var(--tbs-panel-line);
  border-radius: var(--tbs-panel-radius);
  background: var(--tbs-panel-bg);
  box-shadow: var(--tbs-panel-shadow);
}

.gm-section-sub {
  margin: 0.35rem 0 0;
  color: var(--tcb-ink-soft);
  font-size: var(--tbs-panel-note-size);
  line-height: 1.5;
}

/* The baked SEO link list. assets/css/team-surface.css gives it the shared
   panel chrome by class; unlike the events pages this route carries no
   competing .premium-glass rule, so nothing has to be restated. */
body.game-mode-page .community-team-pages {
  margin-top: var(--tbs-panel-gap);
}

@media (max-width: 560px) {
  body.game-mode-page .premium-glass:not(.gm-hero),
  .gm-teams {
    padding: 0.85rem;
  }
}

/* ---- Trial of Glory: the filter chip and the per-card badge -------------
   Both are mode-flag UI rendered by assets/js/community-team-list.js. They
   live here rather than in community-team-list.css because only a mode page
   can show them — the events surfaces never render a flag. */
.event-team-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.event-team-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--tbs-control-line);
  background: var(--tbs-control-bg);
  color: var(--tcb-ink-soft);
  cursor: pointer;
  font: 700 0.78rem "Outfit", sans-serif;
}

.event-team-filter-chip:hover,
.event-team-filter-chip:focus-visible {
  border-color: var(--gm-accent);
  color: var(--tcb-ink);
}

.event-team-filter-chip.is-active {
  border-color: var(--gm-accent);
  background: rgb(255 107 74 / 0.16);
  color: var(--tcb-ink);
}

.event-team-filter-count {
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: var(--tbs-control-line);
  font-size: 0.72rem;
}

/* On the card, beside the "For <trial>" line rather than under it — it
   qualifies that line, it is not a second one. */
.event-team-flag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--gm-accent);
  color: var(--gm-accent);
  font: 700 0.68rem "Outfit", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}