/* /community page — supplementary styles on top of collection.css.
 * Reuses .game-grid + .game-card visuals so the community view mirrors
 * the personal gallery view. Adds only what's specific to this page:
 * the intro header, the contributor line under each card, the
 * lightbox, and empty-state. */

.community-page {
  min-height: 100vh;
}

/* Page title lives in the nav bar next to the brand — mirrors the
 * personal collection layout (no separate hero header). Inherits its
 * color from `.main-nav`'s --header-fg so it stays legible on the
 * dark header band across every theme (using `--text` directly gave
 * a dark-on-dark title on the dark BoxArts themes, because --text is
 * the PAGE foreground while the nav band uses its own --header-fg). */
.community-nav-title {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0 18px;
  padding: 0;
  color: inherit;
  white-space: nowrap;
}

/* Left-align the toolbar to match the personal collection layout —
 * game-count → filters → sort, no centering. Inherits .toolbar
 * padding + sticky from collection.css. */
.community-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}

/* Feelies modal — two-column: left list of manuals + a CP button,
 * right sandboxed iframe viewer that swaps its src as items are
 * clicked. Fixed-height so PDF pagination scrolls inside the pane
 * rather than pushing the modal off-screen. */
.community-feelies-panel {
  width: min(96vw, 1100px);
  height: min(92vh, 720px);
  display: flex;
  flex-direction: column;
}
.community-feelies-body {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 0;
}
.community-feelies-list {
  border-right: 1px solid var(--border);
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.community-feelies-manual {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.community-feelies-manual:hover { border-color: var(--mid); }
.community-feelies-manual.active,
.community-feelies-cp.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(0, 149, 114, 0.15);
}
.community-feelies-manual-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-feelies-cp {
  margin-top: 8px;
  font-size: 13px;
}
.community-feelies-viewer {
  position: relative;
  min-height: 0;
  background: #f3f3f0;
}
.community-feelies-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.community-feelies-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
  padding: 20px;
  text-align: center;
}

/* Inline 3D preview inside the Card modal cover area. Rendered
 * on modal open when box_faces is complete; the img sibling hides
 * so the 3D view fills the cover slot. */
.community-card-3d-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--white);
}
.community-card-3d-preview.hidden { display: none; }
.community-card-3d-stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 200px;
  cursor: grab;
}
.community-card-3d-stage.dragging { cursor: grabbing; }
.community-card-3d-stage .box3d-box {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotateX(var(--rx, -15deg)) rotateY(var(--ry, 25deg));
}
.community-card-cover-wrap.showing-3d #community-card-cover,
.community-card-cover-wrap.showing-3d .community-card-cover-nav,
.community-card-cover-wrap.showing-3d .community-card-cover-idx {
  display: none;
}

/* Uniform fullscreen affordance on the cover slot — small pill in
 * the top-right. Works for both the 3D preview (opens the box3d
 * lightbox) and the image carousel (opens the image lightbox).
 * Same icon in both cases so users learn one visual grammar. */
.community-card-fullscreen {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s;
}
.community-card-fullscreen:hover {
  opacity: 1;
  border-color: var(--mid);
}
/* Copy Protection tile in the Feelies list — same visual footprint
 * as a manual thumbnail, previewed with the CP artefact's own
 * image (image / pdf kinds) or a wheel glyph fallback. */
.community-feelies-cp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  height: auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.community-feelies-cp:hover { border-color: var(--mid); }
.community-feelies-cp-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #e9e7de;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 22px;
  font-weight: 700;
}
.community-feelies-cp-name {
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Feelies viewer — fullscreen button pinned to the top-right of
 * the viewer pane. z-index sits above the iframe so a fullscreen
 * request works even while a PDF is loading. */
.community-feelies-fs {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s;
}
.community-feelies-fs:hover { opacity: 1; border-color: var(--mid); }
/* Thumbstrip 3D chip — same shape as an image thumb but with a
 * cube glyph. Active state uses the standard .active border-tint. */
.community-card-thumb.thumb-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--off);
}

/* 3D lightbox panel — the base .box3d-lightbox-panel from
 * collection.css uses position:fixed + top/left 50% + transform
 * translate(-50%,-50%) which competes with the .modal wrapper's
 * grid centering and lands the panel off-centre in some layouts.
 * Reset positioning inside the community modal so grid centering
 * on the outer .modal drives the placement. */
#community-box3d-lightbox .box3d-lightbox-panel {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

/* Manual thumbnail tiles in the Feelies list — mirror the personal
 * gallery's thumbnail styling: an actual image (server-rendered
 * first page of the PDF) sits above the name so viewers pick the
 * right manual at a glance instead of scanning text. */
.community-feelies-manual {
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  height: auto;
  text-align: center;
}
.community-feelies-manual-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #e9e7de;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 22px;
  font-weight: 700;
}
.community-feelies-manual-name {
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.community-feelies-list {
  gap: 10px;
}

/* Community cards reuse the personal-gallery visuals wholesale — see
 * collection.css. Cover art only; hover reveals the game name as a
 * banner via .game-card::after + data-name. */

#communityGrid.game-grid {
  padding: 8px 24px 48px;
}

.community-card {
  cursor: pointer;
}

/* Empty state ------------------------------------------------------------ */

.community-empty {
  max-width: 480px;
  margin: 60px auto;
  padding: 40px 24px;
  text-align: center;
  border-radius: 12px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
}

.community-empty.hidden { display: none; }

.community-empty h2 {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 22px;
  margin: 0 0 12px;
}

.community-empty p {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  opacity: 0.72;
  line-height: 1.5;
  margin: 0;
}

/* Lightbox --------------------------------------------------------------- */

.community-lightbox {
  position: fixed;
  inset: 0;
  /* Above the Community Card modal (.modal is z-index 50 in
   * collection.css), so opening the lightbox from the modal
   * cover-image layers ON TOP; closing the lightbox reveals the
   * modal underneath, preserving the browse context. */
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-lightbox.hidden { display: none; }

.community-lightbox img {
  max-width: 92vw;
  max-height: 82vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* 3D slot inside the lightbox — sits in the same central area as
 * the image slot; the box3d-face CSS from collection.css does the
 * heavy lifting (transforms + face styling). Drag rotates, double-
 * click resets. */
.community-lightbox-3d-stage {
  position: relative;
  width: 60vw;
  max-width: 720px;
  height: 68vh;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}
.community-lightbox-3d-stage.dragging { cursor: grabbing; }
.community-lightbox-3d-stage.hidden { display: none; }
.community-lightbox-3d-stage .box3d-box {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -15deg)) rotateY(var(--ry, 25deg));
  transition: transform 0.05s linear;
}

.community-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
}

.community-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.community-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 4px;
}

.community-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.18);
}

.community-lightbox-nav.prev { left: 24px; }
.community-lightbox-nav.next { right: 24px; }

.community-lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  opacity: 0.85;
}

.community-nav-home {
  /* Distinctive back-to-your-collection link visually consistent with
   * the cross-nav wordmark buttons in the personal collection view. */
}

/* --- The COMMUNITY pill in the collection.html header --- */
/*    Sits in .nav-right on collection.html + box3d.html + editor.
 *    Uses a bright accent so it reads as an entry to a distinct space,
 *    not just another cross-nav button. */
.community-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e 0%, #059669 100%);
  color: #fff;
  font-family: "Inter", "Gabarito", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.community-nav-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

.community-nav-pill:active {
  transform: translateY(0);
}

.community-nav-pill .community-nav-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

/* Viewer-mode hides the community pill on shared collection pages —
 * the visitor is looking at someone's shared collection, not their own,
 * so directing them elsewhere breaks the read. */
html.viewer-mode .community-nav-pill { display: none; }


/* --- Personal-card community indicator (Phase 12.10) ---
 * Small green dot in the top-right corner of any personal gallery
 * card that's currently shared to the Community Library. Hidden in
 * viewer-mode — a share-link visitor shouldn't see the owner's
 * community affordances. */
.card-community-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(34, 197, 94, 0.55);
  z-index: 3;
  pointer-events: none;
}
html.viewer-mode .card-community-badge { display: none; }


/* --- Card-modal "Share to Community" panel (Phase 12) ---
 *
 * Sizes explicitly tied to the surrounding modal conventions so the
 * section matches the visual weight of Name / Year / Notes:
 *
 *   .section-title  — 12px 700 uppercase mid   (matches "IMAGES", etc.)
 *   .field-label    — 12px 600 mid             (matches "Name", "Year")
 *   input text      — 14px .field-input        (matches text-field values)
 *
 * Checkbox / radio LABEL text uses 14px (matching field-input size)
 * because it's the user-facing value of a control, same visual role as
 * text inside an <input>. */

.community-share-section.hidden { display: none; }

.community-share-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}

.community-share-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}

.community-share-details {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-alt, rgba(255, 255, 255, 0.04));
  border-left: 3px solid #22c55e;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-share-details.hidden { display: none; }

/* Radio row — .field-label above (12px 600 mid, from collection.css),
 * options match field-input text (14px). */
.community-share-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}

.community-share-choices label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

.community-share-choices input[type="radio"] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

#community-shared-since {
  margin: 2px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

/* --- ToS acceptance modal — compact form --- */

.community-tos-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.community-tos-agree input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Modal intro copy in the ToS modal — match the 14px field-input
 * scale so it doesn't dominate the small dialog. */
#community-tos-modal .modal-body p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--text);
}

/* --- Contributor moderation notice (Card modal) --- */
/* Shown only when a moderator has hidden the contributor's shared
 * card. Kept prominent (red border) so the reason isn't buried. */
.community-mod-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.5);
  font-size: 13px;
}
.community-mod-notice.hidden { display: none; }
.community-mod-notice strong { display: block; margin-bottom: 4px; }
.community-mod-notice p { margin: 4px 0; }

/* --- Community Card modal (Phase 12.6) --------------------------------- */

.community-card-panel {
  max-width: 640px;
  width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.community-card-title {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.community-card-body {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.4;
}

/* Cover carousel */
.community-card-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 19 / 24;
  max-height: 46vh;
  background: var(--off, #111);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-card-cover {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

.community-card-cover-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.community-card-cover-nav:hover { background: rgba(0, 0, 0, 0.7); }
.community-card-cover-nav.prev { left: 10px; }
.community-card-cover-nav.next { right: 10px; }

.community-card-cover-idx {
  position: absolute;
  bottom: 8px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* Thumbstrip (only when >1 image) */
.community-card-thumbstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.community-card-thumbstrip.hidden { display: none; }

.community-card-thumb {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: var(--off, #111);
  cursor: pointer;
  flex: 0 0 auto;
}
.community-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community-card-thumb.active { border-color: #22c55e; }
.community-card-thumb:hover { border-color: var(--border); }
.community-card-thumb.active:hover { border-color: #22c55e; }

/* Detail rows — label left, value right, quiet spacing */
.community-card-section { margin-top: 20px; }
.community-card-details {
  margin: 0;
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 4px;
  column-gap: 12px;
}
.community-card-detail-row {
  display: contents;
}
.community-card-details dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.community-card-details dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
.community-card-details dd.muted { color: var(--muted); }

.community-card-condition-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.community-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--text);
  border: 1px solid rgba(34, 197, 94, 0.5);
  font-size: 12px;
  font-weight: 600;
}
.community-card-chip.hidden { display: none; }

.community-card-notes {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
}

.community-card-attribution {
  margin: 0;
  font-size: 14px;
}
.community-card-attribution .muted { font-size: 12px; }
#community-card-contributor { font-weight: 600; }

.community-card-footer {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.community-card-footer .footer-spacer { flex: 1; }

.community-card-action {
  font-size: 13px;
}
.community-card-action:disabled { opacity: 0.5; cursor: not-allowed; }

.community-card-report {
  color: var(--mid);
  border-color: var(--border);
}

/* Toast — bottom-centre transient message. Reused for the tier-gated
 * action buttons' "coming soon" flow. */
.community-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s;
}
.community-toast.hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- /community/play page (Phase 12.8b2) ---
 *
 * The page's outer container carries id="dos-player-modal" + class
 * "modal dos-player-modal", which turns on:
 *   * .modal — position:fixed; inset:0; display:grid;
 *              place-items:center; padding:24px  (the shell)
 *   * #dos-player-modal.modal — width/height 100% !important +
 *                               24px padding (overrides for the
 *                               specific player modal)
 *   * #dos-player-modal .dos-player-panel — width min(95vw,1100px);
 *                                           height min(92vh,800px)
 *                                           (the panel size)
 *   * .dos-player-stage — flex:1 with grid centring
 *   * .dos-player-stage > * — width:100% height:100% (js-dos canvas
 *                             gets full fill)
 * Everything else — toolbar buttons, header band colour tied to the
 * active theme, sidebar-hide rules — cascades from collection.css.
 * This block just provides the page-level backdrop and the back-arrow
 * link styling.
 */

.community-play-page {
  min-height: 100vh;
  background: var(--off, #0b0b0b);
  margin: 0;
}

/* Back-to-community link styled like the personal player's close X.
 * .modal-x already handles the visual; this override just makes the
 * <a> render inline-flex so the ✕ centres identically to the
 * <button> version. */
#cplay-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Copy-Protection viewer — bare-minimum overrides on top of
 * collection.css's .cp-viewer class. The iframe fills the panel;
 * the close X uses the existing .cp-viewer-btn look. */
#cplay-cp-viewer { z-index: 1700; }   /* above fullscreen'd stage */
.cp-viewer-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--header-fg, var(--text));
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
}
.cp-viewer-close:hover { background: rgba(0, 0, 0, 0.1); }
.cp-viewer-iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #111;
}

/* --- /community/play landing (Phase 12.8b) --- */

.play-page {
  max-width: 640px;
  margin: 48px auto;
  padding: 0 24px;
  font-family: "Manrope", "Inter", sans-serif;
  text-align: center;
}

.play-page h1, .play-page h2 {
  font-family: "Gabarito", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.play-page h1 { font-size: 30px; }
.play-page h2 { font-size: 22px; }

.play-status, .play-error, .play-ready {
  padding: 40px 24px;
  border-radius: 12px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
}
.play-status .muted { font-size: 15px; opacity: 0.75; }
.play-error.hidden, .play-ready.hidden, .play-status.hidden { display: none; }

.play-diag {
  margin: 24px auto 12px;
  text-align: left;
  max-width: 460px;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 8px;
  column-gap: 14px;
  font-size: 13px;
}
.play-diag-row { display: contents; }
.play-diag dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid);
  align-self: center;
}
.play-diag dd { margin: 0; align-self: center; }
.play-diag-url {
  font-family: "Source Code Pro", monospace;
  font-size: 12px;
  word-break: break-all;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

/* --- Standalone /community/terms page --- */

.terms-page {
  max-width: 720px;
  margin: 40px auto 80px;
  padding: 0 24px;
  font-family: "Manrope", "Inter", sans-serif;
  line-height: 1.6;
}

.terms-page__header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-page__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin: 0 0 8px;
}

.terms-page h1 {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.terms-page__meta {
  font-size: 13px;
  opacity: 0.6;
  margin: 0;
}

.terms-page__body h1 {
  font-size: 28px;
  margin: 32px 0 12px;
  font-family: "Gabarito", "Inter", sans-serif;
}

.terms-page__body h2 {
  font-size: 20px;
  margin: 28px 0 10px;
  font-family: "Gabarito", "Inter", sans-serif;
  font-weight: 700;
}

.terms-page__body h3 {
  font-size: 16px;
  margin: 20px 0 8px;
  font-weight: 700;
}

.terms-page__body p {
  margin: 0 0 14px;
  font-size: 15px;
}

.terms-page__body ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.terms-page__body li {
  margin-bottom: 6px;
}

.terms-page__body a {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-page__body code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: "Source Code Pro", monospace;
  font-size: 13px;
}

.terms-page__body hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 28px 0;
}

.terms-page__footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Dieline variant chooser (Phase 12.7) --- */

.community-variant-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  min-inline-size: 0;   /* fieldset default overrides flex sizing */
}
.community-variant-legend {
  padding: 0;
  margin: 0 0 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.community-variant-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.community-variant-option:hover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}
.community-variant-option input[type="radio"] {
  margin-top: 2px;
  flex: 0 0 auto;
}
.community-variant-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.community-variant-body strong {
  font-size: 14px;
  font-weight: 600;
}
.community-variant-body .small { line-height: 1.4; }

.community-variant-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(244, 197, 66, 0.20);
  border: 1px solid rgba(244, 197, 66, 0.5);
  color: #b8860b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.community-variant-locked {
  opacity: 0.65;
}
.community-variant-locked:hover {
  border-color: var(--border);
  background: transparent;
}

/* --- Report modal (Phase 12.9) --- */

.community-report-signin-warn {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(244, 197, 66, 0.14);
  border: 1px solid rgba(244, 197, 66, 0.4);
  font-size: 13px;
  margin-bottom: 12px;
}
.community-report-signin-warn.hidden { display: none; }

/* --- /community/moderation page --- */

.mod-page {
  max-width: 960px;
  margin: 24px auto 80px;
  padding: 0 24px;
}

.mod-page__header {
  margin-bottom: 24px;
}

.mod-page__header h1 {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.mod-toolbar {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.mod-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.mod-open-count-wrap {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mod-open-count {
  font-family: "Gabarito", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #22c55e;
  line-height: 1;
}

.mod-empty {
  padding: 40px 24px;
  text-align: center;
  border-radius: 12px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
  margin-top: 24px;
}
.mod-empty.hidden { display: none; }
.mod-empty h2 {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 20px;
  margin: 0 0 8px;
}

.mod-signin-warn {
  padding: 40px 24px;
  text-align: center;
  border-radius: 12px;
  background: rgba(244, 197, 66, 0.10);
  border: 1px solid rgba(244, 197, 66, 0.3);
  margin-top: 24px;
}
.mod-signin-warn.hidden { display: none; }
.mod-signin-warn h2 {
  font-family: "Gabarito", "Inter", sans-serif;
  font-size: 20px;
  margin: 0 0 8px;
}

.mod-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mod-report {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
}

.mod-report__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.mod-report__card {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: currentColor;
  text-decoration: none;
}
.mod-report__card:hover { text-decoration: underline; }

.mod-report__meta {
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}

.mod-report__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.mod-category-chip,
.mod-status-chip,
.mod-card-hidden-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
}

.mod-category-chip {
  background: rgba(255, 255, 255, 0.05);
}
.mod-status-chip { border-width: 1px; }
.mod-status-open        { background: rgba(244, 197, 66, 0.20); border-color: rgba(244, 197, 66, 0.6); }
.mod-status-dismissed   { background: rgba(180, 180, 180, 0.14); }
.mod-status-card_hidden { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.55); }
.mod-status-card_unhidden { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.55); }

.mod-card-hidden-badge {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.5);
}

.mod-reason {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--border);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.mod-admin-notes {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.mod-admin-notes strong { color: var(--text); }

.mod-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}