/* Currents and Critters: Clan Season Grand Prize banner.
 *
 * "$100 towards a board game of your choice, shipped, to the clan that finishes
 * #1 this season." Loaded by BOTH hosts, exactly like css/game-night.css: the
 * marketing site gets it through Vercel's /css/:file rewrite and the game loads
 * it directly, so one file styles the banner everywhere it appears.
 *
 * Everything is scoped under .ccPrize and every colour carries its own fallback,
 * the marketing site defines the brand tokens and Player Home does not.
 *
 * THE PREFIX IS .ccPrize AND MUST NEVER GO BACK TO .ccCP
 * It was .ccCP, and so is the Critter Pass page, which the game loads on the
 * same document. The collision was not a shape one: this file's `.ccCP` block
 * set --cp-ink to cream, and because the pass's own dark --cp-ink is declared
 * one level up on #cc-critter-pass-root, a custom property set on the closer
 * element wins by inheritance no matter how specific the outer selector is.
 * Every word on the Critter Pass that reads var(--cp-ink) came out cream on a
 * cream card: 1.05:1, invisible. This file also loads last, so its .ccCP-title
 * quietly took the pass's title font and size too. Hence both halves of the
 * fix: a prefix nothing else uses, and tokens named --pz-* rather than the
 * --cp-* the pass had first.
 *
 * WHY IT IS GOLD AND NOT TEAL
 * On the marketing page this band sits a few hundred pixels from the Game Night
 * band, which is the same shape (icon, headline, status pills, gold CTA) in
 * deep teal. Two teal gradient bands that close together read as one repeated
 * element and the second one stops being read. Treasure-gold on deep water
 * keeps the shape (so it is obviously the same KIND of thing: an announcement)
 * while being unmistakably a different announcement.
 */

#cc-clan-prize { display: block; }

/* Self-contained box model, for the same reason game-night.css declares one:
   this renders on two hosts with two different CSS resets, and a `width:100%`
   button plus padding overflows its card on whichever host is not border-box. */
.ccPrize, .ccPrize *, .ccPrize *::before, .ccPrize *::after { box-sizing: border-box; }

.ccPrize {
  --pz-ink:    #fff6e2;
  --pz-gold:   #ffc861;
  --pz-gold-d: #e09a24;
  --pz-deep:   #2a1a04;
  --pz-mint:   var(--brand-mint, #2ac88f);
  margin: 0 0 18px;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ccPrize-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 22px;
  color: var(--pz-ink);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 233, 176, .22) 0%, rgba(255, 233, 176, 0) 55%),
    linear-gradient(120deg, #3b2408 0%, #7a5312 44%, #b8862a 100%);
  border: 1px solid rgba(255, 213, 128, .38);
  box-shadow: 0 10px 28px rgba(58, 36, 4, .32);
  position: relative;
  overflow: hidden;
}
/* The same slow sheen as the Game Night band, so the two read as a matched
   pair of announcements. Decorative, behind the text, off with reduced motion. */
.ccPrize-inner::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 240, 200, .13) 50%, transparent 58%);
  /* Two passes, then rest, like the Game Night band (battery). */
  animation: ccPrize-sheen 9s linear 2 forwards;
  pointer-events: none;
}
@keyframes ccPrize-sheen { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

.ccPrize-body { flex: 1 1 auto; min-width: 0; }

.ccPrize-title {
  font-family: "Luckiest Guy", "Nunito", sans-serif;
  font-size: 1.5rem;
  letter-spacing: .5px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .34);
}
/* The money. Big enough to be the thing the eye lands on first, because the
   amount IS the announcement. */
.ccPrize-title .amt { color: var(--pz-gold); }

.ccPrize-what {
  margin-top: 3px;
  font-size: 1rem;
  color: rgba(255, 246, 226, .96);
}
.ccPrize-what b { font-weight: 800; color: #fff; }

.ccPrize-status {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
/* Before the server answers there is neither a leader nor a countdown, so the
   whole status row is empty and would otherwise leave a 7px gap floating
   between two paragraphs. */
.ccPrize-status:empty { display: none; }
.ccPrize-count,
.ccPrize-lead,
.ccPrize-final {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  background: rgba(255, 244, 219, .16);
  border: 1px solid rgba(255, 226, 168, .34);
  max-width: 100%;
}
/* Who is winning right now. The one pill that changes between page loads, so
   it is the one that has to survive a long clan name without pushing the
   countdown off the row. */
.ccPrize-lead {
  min-width: 0;
  background: linear-gradient(180deg, var(--pz-gold) 0%, var(--pz-gold-d) 100%);
  color: var(--pz-deep);
  border-color: rgba(255, 255, 255, .5);
}
.ccPrize-lead .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ccPrize-lead img {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .85);
  flex: 0 0 auto;
}
/* The last stretch of the season: the pill turns urgent rather than just
   counting down, because this is when a clan can still overtake. */
.ccPrize-final {
  background: var(--pz-mint);
  color: #06301f;
  border-color: rgba(255, 255, 255, .5);
  animation: ccPrize-pulse 2.2s ease-in-out infinite;
}
@keyframes ccPrize-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 200, 143, .55); }
  50%      { box-shadow: 0 0 0 9px rgba(42, 200, 143, 0); }
}

/* The claim terms. Quiet, but never absent: a real-world prize with no stated
   way to collect it is the sentence people ask about instead of playing. */
.ccPrize-note {
  margin-top: 7px;
  font-size: .86rem;
  color: rgba(255, 243, 219, .8);
  line-height: 1.35;
}

.ccPrize-cta { flex: 0 0 auto; }
.ccPrize-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pz-gold) 0%, var(--pz-gold-d) 100%);
  color: #3d2600;
  font-weight: 900;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .3);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
.ccPrize-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .36);
}
.ccPrize-btn:active { transform: translateY(0); }
.ccPrize-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Narrow screens ─────────────────────────────────────────────────────
   Stacks rather than shrinking, same as the Game Night band: at 380px a
   3-column layout turns the CTA into an untappable sliver. */
@media (max-width: 720px) {
  .ccPrize-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
  }
  .ccPrize-title { font-size: 1.3rem; }
  .ccPrize-what { font-size: .94rem; }
  /* Column direction + align-items:flex-start sizes each child to fit-content,
     and `flex:1 1 auto` on the body only governs the main axis, which is now
     vertical. fit-content never goes below MIN-content, and the leader pill's
     clan name is `white-space:nowrap` (it has to be, it ellipsizes), so a long
     clan name makes the body's min-content wider than the phone and the whole
     banner overflows. Because .ccPrize-inner clips its overflow the failure is
     silent: no sideways scroll to notice, just every line cut off at the right
     edge. Forcing the width lets the name ellipsize instead, which is what the
     nowrap was for. Measured, not assumed: a 50-character clan name took the
     body to 476px in 424px of room. */
  .ccPrize-body { width: 100%; }
  .ccPrize-cta { width: 100%; }
  .ccPrize-btn { display: block; text-align: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ccPrize-inner::after { animation: none; }
  .ccPrize-final { animation: none; }
  .ccPrize-btn { transition: none; }
}

/* ── Inside the Clans tab ───────────────────────────────────────────────
   The tab's cards have their own 16px gutter and the banner is inserted
   between the tab strip and the season block, so it takes the gutter rather
   than the page-level margin it uses on the two Home screens. */
#cc-clans-root .ccPrize { margin: 10px 16px 0; }
#cc-clans-root .ccPrize-inner { border-radius: 16px; padding: 15px 18px; }
#cc-clans-root .ccPrize-title { font-size: 1.28rem; }

/* ══════════════════════════════════════════════════════════════════════
   MARKETING SITE BAND
   Matches .game-night-inner's measure so the two announcement bands line up
   with each other and with the section above them.
   ══════════════════════════════════════════════════════════════════════ */
.clan-prize-band { padding: 10px 24px; }
.clan-prize-inner { max-width: 1180px; margin: 0 auto; }
.clan-prize-band .ccPrize { margin-bottom: 0; }

@media (max-width: 720px) {
  .clan-prize-band { padding: 8px 16px; }
}