/* Shared completion-modal + leaderboard styles for the crossword family.
 *
 * Lifted verbatim from public/games/crossword/index.html — the 2026 Figma
 * revamp — and previously duplicated in nine pages. 37 of the 41 selectors
 * were already byte-identical everywhere; the four that had drifted are
 * resolved here to the crossword variant, because that is the revamped one
 * and the other six pages simply never got the update (the same way three of
 * them lost their reveal counts). Three harmless local additions are adopted
 * globally: cursor:pointer on .cwc-join, min-height + transition on .cwc-skip.
 *
 * Visible effect of the merge, on the six non-crossword pages only:
 *   .cwc-head    gains the hairline rule under the header
 *   .cwc-players brown #674329 instead of grey #6f6f6f
 *
 * Page-specific selectors (.cwc-linkrow on thelink, .cwc-secondary) stay in
 * their own page — they are not shared and do not belong here.
 */

.cwc-trophy { display:flex; justify-content:center; padding-top:24px; }
.cwc-trophy .ic { width:48px; height:48px; border-radius:50%; background:#d89866; display:flex; align-items:center; justify-content:center; }
.cwc-trophy svg { width:28px; height:28px; color:#fff; }
.cwc-head { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin:16px 16px 0; padding:0 12px 16px; border-bottom:1px solid #f6f3ed; }
.cwc-title { font-size:24px; line-height:32px; font-weight:800; color:#4c2b08; margin:0; }
.cwc-time { font-size:16px; line-height:25px; font-weight:700; color:#4c2b08; }
.cwc-pb { display:inline-flex; align-items:center; gap:8px; background:#fef8ef; border-radius:39px; padding:8px 12px; }
.cwc-pb svg { width:20px; height:20px; flex:none; }
.cwc-pb span { font-size:14px; line-height:20px; color:#674329; }
.cwc-lb { padding:16px 16px 0; }
.cwc-lb-head { display:flex; align-items:center; gap:4px; padding:0 0 8px; }
.cwc-lb-title { flex:1; min-width:0; font-size:16px; line-height:24px; font-weight:600; color:#4c2b08; }
.cwc-players { flex:none; font-size:14px; line-height:20px; color:#674329; white-space:nowrap; }
.cwc-rows { display:flex; flex-direction:column; gap:4px; max-height:212px; overflow-y:auto; overscroll-behavior:contain; }
.cwc-row { display:flex; align-items:center; gap:8px; padding:12px; border-radius:10px; background:#f7f7f7; }
.cwc-row.me { background:#efe9e0; }
.cwc-medal { flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#59480b; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.cwc-medal.g1 { background:linear-gradient(135deg,#f4cf5a,#d6a015); }
.cwc-medal.g2 { background:linear-gradient(135deg,#e6e6e6,#b4b4b4); }
.cwc-medal.g3 { background:linear-gradient(135deg,#e0a066,#bf7a34); }
.cwc-medal.plain { background:#fff; box-shadow:inset 0 0 0 2px #dedede; }
.cwc-name { flex:1; min-width:0; font-size:14px; line-height:20px; font-weight:600; color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cwc-you { flex:0 0 auto; background:#cb9e4a; border:1px solid #c9c9c9; border-radius:33px; padding:2px 8px; font-size:14px; line-height:20px; font-weight:600; color:#fff; }
.cwc-score { flex:0 0 auto; font-size:14px; line-height:20px; font-weight:700; color:#111; white-space:nowrap; margin-left:auto; }
.cwc-reveals { font-weight:600; font-size:12px; color:#6b6b6b; }
.cwc-actions { display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; }
.cwc-note { font-size:14px; line-height:20px; color:#3b1f09; text-align:center; margin:0 0 8px; }
.cwc-join { display:flex; align-items:center; justify-content:center; gap:6px; height:40px; border-radius:50px; background:#4c2b08; border:1px solid #846a4e; color:#fff; font-size:16px; font-weight:700; text-decoration:none; margin:0; cursor:pointer; }
.cwc-join svg { width:16px; height:16px; }
.cwc-join:hover { background:#3a2006; }
.cwc-skip { display:flex; align-items:center; justify-content:center; height:40px; border-radius:50px; background:#fff; border:none; color:#4c2b08; font-size:16px; font-weight:700; text-decoration:underline; cursor:pointer; font-family:inherit; width:100%; margin:0; padding:0; min-height:40px; transition:background 0.15s; }
.cwc-skip:hover { background:#faf7f2; }
.cwc-streak { background:#fef8ef; padding:15px 16px; display:flex; flex-direction:column; gap:10px; border-radius:0 0 16px 16px; }
.cwc-streak-head { display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; line-height:24px; font-weight:700; color:#3b1f09; }
.cwc-streak-head svg { width:18px; height:18px; }
.cwc-streak-cards { display:flex; gap:8px; }
.cwc-streak-cards a { flex:1 1 0; min-width:0; aspect-ratio:167.5/132; border-radius:8px; background:#e7ddc9 center/cover no-repeat; }

/* Separator before the pinned "You" row when the player is outside the top
   three, and the tap-through to the full board. Both are new with the shared
   component — the nine pages had no visual break and no way to see past
   third place without leaving the screen. */
.cwc-gap { border-top: 1px dashed #dcd3c6; margin: 3px 2px; }
/* Tomorrow hook under the board - the completion screen's one job beyond
   the score is manufacturing the day-2 return. Stays readable on the
   light-card-in-dark-mode surface (see .cwc-fullbtn note below). */
.cwc-comeback { margin-top: 10px; text-align: center; font-size: 13px; color: #7a6a55; line-height: 1.4; }
body.cuppa-dark .cwc-comeback { color: #7a6a55 !important; }
.cwc-fullbtn { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:38px; margin-top:10px; border-radius:50px; background:rgba(107,66,38,.08); border:1px solid rgba(107,66,38,.25); color:#4c2b08; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; transition:background 0.15s; }
.cwc-fullbtn:hover { background:rgba(107,66,38,.14); }
.cwc-fullbtn:focus-visible { outline:3px solid #D4A84B; outline-offset:2px; }

/* The completion card stays a LIGHT card in dark mode, but dark-mode.css has a
   generic `body.cuppa-dark button:not(...)` rule — a five-class :not() chain
   that outweighs any sane page selector, and it links after this file. Without
   this, .cwc-fullbtn rendered cream #E8E0D6 on near-white: measured 1.27:1,
   against the 4.5:1 AA floor. Same trap the crossword page documents for its
   tutorial button; !important is the established escape. */
body.cuppa-dark .cwc-fullbtn {
  background: rgba(107,66,38,.08) !important;
  color: #4c2b08 !important;
  border-color: rgba(107,66,38,.25) !important;
}
/* Same trap, same card, two more controls. .cwc-skip ("Continue") measured
   1.27:1 under the generic dark button rule, and .cwc-join was pulled from a
   designed 12.68:1 down to 4.74:1 by `body.cuppa-dark a{color:#C4956A}`. The
   completion card is deliberately light in dark mode, so all three controls
   pin their designed colours. */
body.cuppa-dark .cwc-skip {
  background: #fff !important;
  color: #4c2b08 !important;
}
body.cuppa-dark .cwc-join {
  background: #4c2b08 !important;
  color: #fff !important;
  border-color: #846a4e !important;
}

/* ── "You have been challenged" arrival banner ──────────────────────────
   Rendered by showChallengeBanner() when a shared ?c= link is opened. Sits
   at the top of the game page so the recipient sees the target before they
   start. Deliberately loud: it is the payoff of the whole share loop. */
.cwc-challenge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 auto 14px;
  /* Inserted as the first child of <main> across 36 game pages with
     different layouts. width+max-width+border-box keeps it predictable
     whether the parent stretches, centres or block-flows its children. */
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  align-self: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: #4c2b08;
  color: #fff8ec;
  box-shadow: 0 4px 14px rgba(76, 43, 8, .22);
  text-align: center;
}
.cwc-challenge strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .8;
}
.cwc-challenge span {
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
  overflow-wrap: break-word;
}
/* The banner supplies its own dark surface, so it needs no dark-mode
   override — but the generic `body.cuppa-dark a/strong` rules elsewhere in
   this file taught us to pin rather than inherit. */
body.cuppa-dark .cwc-challenge {
  background: #4c2b08;
  color: #fff8ec;
}