/* ==========================================================================
   pages/custom.css: player-made boards (/s/:code and /s/:code/p/:id)
   Owner: the builder lane. The strip over a player-made board is drawn inside
   the board page (.pg-board), so those rules are scoped under .cu-head, which
   only exists on a player-made board. The result page is scoped under .pg-custom.
   The sheets (top crews, report) are scoped under .cu-sheet.
   ========================================================================== */

/* ---- the strip over a player-made board --------------------------------- */
.cu-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  border: 1px solid var(--mode-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--mode-rgb), .08), rgba(var(--mode-rgb), .02));
}
.cu-head-main { min-width: 0; flex: 1 1 240px; }
.cu-head-k { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.cu-kind {
  font: 600 var(--fs-xs)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--mode-highlight);
}
.cu-head-by { margin-top: 6px; color: var(--text-2); font-size: var(--fs-sm); }
.cu-head-by b { color: var(--text); font-weight: 600; }
.cu-dot { color: var(--text-muted); padding: 0 2px; }
.cu-head-acts { display: flex; align-items: center; gap: var(--s-2); }
.cu-top-btn .btn-title { gap: 6px; }
.cu-top-btn .i { width: 16px; height: 16px; color: var(--gold-strong); }
.cu-preview {
  flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start;
  color: var(--text-2); font-size: var(--fs-sm); border-top: 1px solid var(--border); padding-top: var(--s-3);
}
.cu-preview .i { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--mode-highlight); }
.cu-preview a { color: var(--mode-highlight); text-decoration: underline; text-underline-offset: 3px; }

/* The upvote: a pill with an arrow pointing up and the count. */
.cu-vote {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: 700 var(--fs-sm)/1 var(--font-ui); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cu-vote:hover { border-color: var(--mode-line); background: var(--hover); }
.cu-vote .cu-up { width: 16px; height: 16px; transform: rotate(-90deg); color: var(--mode-primary); }
.cu-vote.is-on { border-color: var(--mode-primary); background: rgba(var(--mode-rgb), .14); box-shadow: 0 0 18px -6px rgba(var(--mode-rgb), .8); }
.cu-vote:disabled { opacity: .6; cursor: wait; }

/* ---- sheets ------------------------------------------------------------ */
.cu-sheet { padding-bottom: var(--s-2); }
.cu-sheet-h { font: 800 var(--fs-xl)/1.1 var(--font-ui); }
.cu-sheet-sub { color: var(--text-2); font-size: var(--fs-sm); margin: 6px 0 var(--s-4); }
.cu-reasons .cu-reason { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }

/* The board's own leaderboard (sheet and result page). */
.cu-lb .cu-lb-row { gap: var(--s-3); padding: 10px var(--s-3); }
.cu-lb-rank { width: 28px; flex: 0 0 28px; text-align: center; font: 700 var(--fs-md)/1 var(--font-ui); color: var(--text-2); }
.cu-lb-crew { display: block; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cu-lb-row.is-1 { background: linear-gradient(90deg, rgba(245,181,61,.14), transparent); border-color: rgba(245,181,61,.45); }
.cu-lb-row.is-2 { background: linear-gradient(90deg, rgba(148,163,184,.12), transparent); border-color: rgba(148,163,184,.4); }
.cu-lb-row.is-3 { background: linear-gradient(90deg, rgba(var(--mode-rgb), .12), transparent); border-color: var(--mode-line); }
.cu-lb-row.is-me { box-shadow: inset 0 0 0 1px var(--mode-primary); }
.cu-lb-score { flex: 0 0 auto; }
.cu-you { font: 600 var(--fs-xs)/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-left: 6px; }
.cu-note { color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--s-3); }

/* ---- the result page ----------------------------------------------------- */
.pg-custom .cu { padding-top: var(--s-6); padding-bottom: var(--s-10); }
.pg-custom .cu-err { padding-top: var(--s-10); }
.pg-custom .cu-card {
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface);
  padding: var(--s-5); box-shadow: 0 20px 60px -30px rgba(var(--mode-rgb), .45);
}
.pg-custom .cu-by-sm { color: var(--text-2); font-size: var(--fs-sm); }
.pg-custom .cu-title { font: 800 var(--fs-2xl)/1.08 var(--font-ui); letter-spacing: -.02em; margin-top: var(--s-3); overflow-wrap: anywhere; }
.pg-custom .cu-blurb { color: var(--text-2); margin-top: var(--s-2); font-size: var(--fs-sm); line-height: 1.5; }

.pg-custom .cu-score { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.pg-custom .cu-num { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 var(--s-3); }
.pg-custom .cu-n { font: 800 72px/1 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.pg-custom .cu-of { font: 600 var(--fs-xl)/1 var(--font-display); color: var(--text-muted); }
.pg-custom .cu-stand { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-3); }
.pg-custom .cu-stand .i { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--mode-highlight); }

.pg-custom .cu-crew { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-custom .cu-crew-row {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3);
  border: 1px solid var(--border); border-left: 3px solid var(--tone); border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(var(--tone-rgb), .08), transparent 60%);
}
.pg-custom .cu-crew-row.is-mvp { border-color: rgba(var(--tone-rgb), .5); box-shadow: 0 0 22px -12px rgba(var(--tone-rgb), .9); }
.pg-custom .cu-crew-row.is-void { opacity: .72; }
.pg-custom .cu-crew-face .portrait-chip { width: 48px; height: 48px; margin: 0; }
.pg-custom .cu-crew-txt { min-width: 0; flex: 1; }
.pg-custom .cu-crew-role {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font: 600 var(--fs-xs)/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--tone);
}
.pg-custom .cu-crew-name { font: 600 var(--fs-xl)/1.15 var(--font-serif); margin-top: 4px; overflow-wrap: anywhere; }
.pg-custom .cu-crew-who { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }
.pg-custom .cu-crew-txt .fact { margin-top: var(--s-2); font-size: var(--fs-sm); }
.pg-custom .cu-credits:empty { display: none; }
.pg-custom .cu-credits { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-xs); }

.pg-custom .cu-go { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 640px) { .pg-custom .cu-go { grid-template-columns: 1fr 1.4fr; } }

.pg-custom .cu-sec { margin-top: var(--s-8); }
.pg-custom .cu-vote-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5); }
.pg-custom .cu-vote-h { font: 700 var(--fs-lg)/1.2 var(--font-ui); }
.pg-custom .cu-vote-txt p, .pg-custom .cu-make-txt p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }
.pg-custom .cu-vote-acts { display: flex; align-items: center; gap: var(--s-3); }
.pg-custom .cu-make {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-5);
  border: 1px dashed var(--mode-line); border-radius: var(--r-lg);
}
.pg-custom .cu-make-txt { flex: 1 1 220px; min-width: 0; }