/* Currents and Critters: Game Night banner.
 *
 * Loaded by BOTH hosts (the marketing site via Vercel's /css/:file rewrite, and
 * the game's Player Home), because js/game-night.js renders the same markup on
 * both. Everything here is scoped under .ccGN, and every colour carries its own
 * fallback, the marketing site defines the brand tokens, Player Home does not,
 * and the banner has to look right either way.
 *
 * It is meant to be the loudest thing on the page it sits on: on Player Home it
 * inserts itself above the challenge strip, and on the marketing site it gets
 * its own full-width band. That is deliberate, the whole point of the feature
 * is that nobody misses when Game Night is.
 */

#cc-game-night { display: block; }

/* Self-contained box model. This banner renders on TWO hosts with two
   different CSS resets, the game's preview.css sets a global border-box, the
   marketing site's styles.css is its own thing, and `width:100%` on the RSVP
   button plus 24px of padding overflowed the card by exactly the padding on
   whichever host did not. Declaring it here means the banner does not care
   what it is dropped into. */
.ccGN, .ccGN *, .ccGN *::before, .ccGN *::after { box-sizing: border-box; }

.ccGN {
  --gn-ink:    #ffffff;
  --gn-deep:   var(--brand-teal-deep, #0a6080);
  --gn-cyan:   var(--brand-cyan, #0ca4cb);
  --gn-gold:   #ffc861;
  --gn-gold-d: #e09a24;
  --gn-mint:   var(--brand-mint, #2ac88f);
  margin: 0 0 18px;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ccGN-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 22px;
  color: var(--gn-ink);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #0a3951 0%, #0d6d92 46%, #0ca4cb 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 28px rgba(8, 52, 77, .28);
  position: relative;
  overflow: hidden;
}
/* A slow sheen so the band reads as "an event", not a notice. Purely
   decorative, behind the text, and switched off with reduced motion. */
.ccGN-inner::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 255, 255, .10) 50%, transparent 58%);
  /* Two passes as the band arrives, then it rests: an endless loop kept the
     GPU drawing frames for as long as Player Home stayed open. */
  animation: ccGN-sheen 9s linear 2 forwards;
  pointer-events: none;
}
@keyframes ccGN-sheen { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

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

.ccGN-title {
  font-family: "Luckiest Guy", "Nunito", sans-serif;
  font-size: 1.5rem;
  letter-spacing: .5px;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

.ccGN-when {
  margin-top: 2px;
  font-size: 1rem;
  color: rgba(255, 255, 255, .95);
}
.ccGN-when b { font-weight: 800; }
.ccGN-local {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: .8rem;
  white-space: nowrap;
}

.ccGN-status {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.ccGN-count,
.ccGN-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
}
.ccGN-count {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .28);
  /* "starts in 2d 2h" must not break across two lines inside its own border on
     a phone. It wraps as a whole unit under the XP chip instead. (The pill also
     names the night, "Wednesday · starts in 2d 2h", whenever Game Night runs on
     more than one, and that is the longer string this has to survive.) */
  white-space: nowrap;
}
.ccGN-live {
  background: var(--gn-mint);
  color: #06301f;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: ccGN-pulse 2.2s ease-in-out infinite;
}
@keyframes ccGN-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 XP chip. It sits beside the countdown/live pill, so the status row is
   "when" + "what you get" on one line; on a narrow screen it wraps under it
   rather than squeezing either pill. Gold when the session is live, because at
   that moment it is an instruction ("play now"), not a schedule note. */
.ccGN-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .28);
  white-space: nowrap;
}
.ccGN-xp.is-live {
  background: linear-gradient(180deg, var(--gn-gold) 0%, var(--gn-gold-d) 100%);
  color: #3d2600;
  border-color: rgba(255, 255, 255, .5);
}

/* What the bonus applies to. Quieter than the schedule, but it must still be
   legible on the gradient: this is the sentence that says the XP covers games,
   challenges and the daily bonus rather than just one of them. */
.ccGN-note {
  margin-top: 7px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .82);
  line-height: 1.35;
}

/* Where the night happens, and the door to it. A line of its own under the XP
   note rather than another clause of it: this is the only thing on the band a
   reader is meant to act on, and in the note it would be the third sentence of
   a paragraph that already wraps to three lines on a phone.

   The link is a pill rather than underlined text because it renders on TWO
   hosts: the marketing site styles every `a` inside its bands and Player Home
   styles none of them, so the colour, weight and underline are all stated here
   and neither host can turn it into body text. */
.ccGN-join {
  margin-top: 7px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .92);
  line-height: 1.45;
}
.ccGN-link {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gn-gold) 0%, var(--gn-gold-d) 100%);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #3d2600;
  font-weight: 800;
  font-size: .84rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ccGN-link:hover,
.ccGN-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .26);
  color: #3d2600;
  text-decoration: none;
}
/* The band sits on a dark gradient, so the default focus ring is nearly
   invisible on it. This one is drawn in the band's own white. */
.ccGN-link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .9);
  outline-offset: 2px;
}

/* ── Narrow screens ──────────────────────────────────────────────────────
   The banner stacks rather than shrinking. It is two columns now, not three:
   the dice and the RSVP button are both gone, so the text has the whole
   width and only has to be kept off the edges. */
@media (max-width: 720px) {
  .ccGN-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
  }
  .ccGN-title { font-size: 1.3rem; }
  .ccGN-when { font-size: .94rem; }
  .ccGN-local { margin-left: 0; margin-top: 4px; }
  /* The band's one tap target. At its inline size it is 27px tall, which is a
     thin thing to hit with a thumb, so on a phone it is given real height
     rather than staying the size of the sentence it sits in. */
  .ccGN-link { padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccGN-inner::after { animation: none; }
  .ccGN-live { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   MARKETING SITE BAND
   The game injects the banner into Player Home's Overview panel, which
   already has its own page padding. The marketing site gives it a real
   section instead: matching .section's 1180px measure but with far less
   vertical padding, because this is an announcement strip between the hero
   and the value props, not a content section of its own.
   ══════════════════════════════════════════════════════════════════════ */
.game-night-band { padding: 34px 24px 10px; }
.game-night-inner { max-width: 1180px; margin: 0 auto; }
.game-night-band .ccGN { margin-bottom: 0; }

@media (max-width: 720px) {
  .game-night-band { padding: 24px 16px 4px; }
}