/* ═══════════════════════════════════════════════════
   PATRONS TAB — the supporter wall inside Maple Maker (js/maker/patrons.js).
   The stage fills the pane above the copy; supporter-sim.js sizes its canvas
   to the host (pixel-locked) and centres it. Brand colours appear only on the
   Patreon/Discord icons, so the buttons follow the theme in light and dark.
   ═══════════════════════════════════════════════════ */

.maker .tab-patrons .patrons-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  overflow-y: auto;
}

/* The sim host. `.supporters-sim` (homepage.css) gives it position:relative
   for the hover card; the canvas is centred in whatever room is left. */
.maker .tab-patrons .patrons-stage {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 240px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maker .tab-patrons .patrons-stage[hidden] { display: none; }
/* The canvas covers the whole stage (the art is centred inside it at 1×), out
   of the flow so it never props the pane open when the window shrinks. */
.maker .tab-patrons .patrons-stage .supporters-sim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Static fallback: thumbnails + names, when the sim can't run. */
.maker .tab-patrons .patrons-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  max-width: 760px;
}
.maker .tab-patrons .patrons-static[hidden] { display: none; }
.maker .tab-patrons .patrons-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.maker .tab-patrons .patrons-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}
.maker .tab-patrons .patrons-card figcaption { font-size: var(--fs-3); color: var(--text-mid); }

/* ── Copy ── */
.maker .tab-patrons .patrons-copy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}
.maker .tab-patrons .patrons-copy p { margin: 0; }
.maker .tab-patrons .patrons-thanks { font-size: 15px; font-weight: 700; color: var(--text); }
.maker .tab-patrons .patrons-how { font-size: var(--fs-4); color: var(--text-mid); }
.maker .tab-patrons .patrons-how a { color: var(--accent-text); font-weight: 600; text-decoration: none; margin-left: 2px; }
.maker .tab-patrons .patrons-how a:hover { text-decoration: underline; }
.maker .tab-patrons .patrons-join { margin-top: var(--sp-3); font-size: var(--fs-4); font-weight: 600; color: var(--text); }

.maker .tab-patrons .patrons-buttons { display: flex; gap: var(--sp-3); }
.maker .tab-patrons .patrons-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--chrome-hi);
  color: var(--text);
  font-size: var(--fs-4);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.12s, border-color 0.12s;
}
.maker .tab-patrons .patrons-btn:hover { transform: translateY(-1px); }
.maker .tab-patrons .patrons-btn-patreon svg { color: #f14653; }   /* brand */
.maker .tab-patrons .patrons-btn-discord svg { color: #5865f2; }   /* brand */
.maker .tab-patrons .patrons-btn-patreon:hover { border-color: #f14653; }
.maker .tab-patrons .patrons-btn-discord:hover { border-color: #5865f2; }