/* Reader-facing experience. Branded via CSS custom properties set on body:
   --brand-primary, --brand-accent, --brand-background, --brand-text,
   --brand-on-accent, --brand-on-primary, --brand-surface, --brand-on-surface.
   Cards sit on --brand-surface (computed server-side to stay readable on
   light or dark backgrounds), never on hardcoded white. Mobile-first. */

body.player {
  background: var(--brand-background, var(--paper));
  color: var(--brand-text, var(--ink));
}

.player-main {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.player-head { text-align: center; margin-bottom: 1.1rem; }
.player-logo { max-height: 3.2rem; max-width: 14rem; object-fit: contain; margin-bottom: .6rem; }
.player-pubname {
  font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--brand-primary, var(--ink));
}

/* Receipt: the arrival moment. Confirms the claim, shows where it landed,
   advances the meter, credits the sponsor. */
.receipt {
  background: var(--brand-surface, var(--card));
  color: var(--brand-on-surface, var(--ink));
  border: 1px solid rgba(127, 127, 127, .25);
  border-radius: 16px;
  padding: 1.15rem 1.1rem 1.2rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  margin-bottom: 1.5rem;
}
.receipt-eyebrow {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  color: var(--brand-primary, var(--ink));
}
.receipt-word {
  font-size: 1.85rem; font-weight: 800; letter-spacing: .03em;
  margin: .35rem 0 .55rem;
  color: var(--brand-on-surface, var(--ink));
}
.receipt-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 700; color: var(--brand-primary, var(--ink));
}
.receipt-status.off-card { opacity: .7; }
.checkring {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--brand-accent, var(--ink));
  color: var(--brand-on-accent, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800;
}
.arrive .checkring { animation: check-pop .45s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
@keyframes check-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* One tick per word in the game; today's tick in the primary color. */
.meter {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px;
  margin-top: .85rem;
}
.meter i {
  display: block; height: 7px; border-radius: 4px;
  background: rgba(127, 127, 127, .25);
}
.meter i.on { background: var(--brand-accent, var(--ink)); transform-origin: left center; }
.meter i.today { background: var(--brand-primary, var(--ink)); }
.arrive .meter i.on { animation: tick-in .3s ease-out both; }
@keyframes tick-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.meter-label {
  display: flex; justify-content: space-between;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  opacity: .65; margin-top: .4rem; font-variant-numeric: tabular-nums;
}

.receipt-story {
  border-top: 1px solid rgba(127, 127, 127, .2);
  margin-top: .9rem; padding-top: .55rem; text-align: left;
}
.receipt-story .today-desc { margin: .3rem 0; }
.sponsor-line { font-size: .74rem; opacity: .7; margin: .8rem 0 0; }
.sponsor-line b { font-weight: 700; }
.receipt-sub { font-size: .8rem; opacity: .65; margin: .5rem 0 0; }

.today-desc { font-size: .92rem; margin: .8rem 0 .3rem; }
.today-link {
  display: inline-block; margin-top: .5rem;
  font-weight: 700; color: var(--brand-accent, var(--ink));
}
.prize-flag { font-size: 1rem; }

/* Board */
.board-section { text-align: center; }
.board-eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  color: var(--brand-primary, var(--ink)); margin-bottom: .25rem;
}
.board-progress { font-size: .85rem; opacity: .75; margin-bottom: .9rem; }

.bingo-header {
  display: grid; grid-template-columns: repeat(var(--board-cols, 5), 1fr); gap: 6px;
  margin-bottom: 6px;
}
.bingo-header span {
  font-weight: 800; font-size: 1rem; letter-spacing: .05em;
  color: var(--brand-primary, var(--ink)); opacity: .85;
}

.board-rows { display: flex; flex-direction: column; gap: 6px; }
.board-row {
  display: grid; grid-template-columns: repeat(var(--board-cols, 5), 1fr); gap: 6px;
}
.square {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  font-size: clamp(.6875rem, 2.6vw, .74rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  border: none;
  font-family: inherit;
  background: var(--brand-surface, var(--card));
  color: var(--brand-on-surface, var(--ink));
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .3);
}
.square.unclaimed { opacity: .55; }
.square.claimed {
  background: var(--brand-accent, var(--ink));
  color: var(--brand-on-accent, #fff);
  box-shadow: none;
  cursor: pointer;
}
.square.free {
  background: var(--brand-primary, var(--ink));
  color: var(--brand-on-primary, #fff);
  box-shadow: none;
  font-size: .6rem; letter-spacing: .12em;
}
.square.in-line { outline: 3px solid var(--brand-primary, var(--ink)); outline-offset: -1px; }
.square.open-sq { outline: 2.5px solid var(--brand-accent, var(--ink)); outline-offset: -1px; }
.square .check {
  position: absolute; top: 3px; right: 5px; font-size: .55rem; opacity: .85;
}
.square .gift { position: absolute; top: 2px; left: 4px; font-size: .8rem; }

/* Today's square lands on the board after the receipt settles. */
.square.just-claimed { z-index: 1; }
.arrive .square.just-claimed {
  animation: square-land 1s cubic-bezier(.2, 1.2, .4, 1) 1.15s both;
}
@keyframes square-land {
  0% { transform: scale(.4); opacity: 0; box-shadow: 0 0 0 0 var(--brand-accent, var(--ink)); }
  55% { transform: scale(1.14); opacity: 1; }
  75% { box-shadow: 0 0 0 9px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* Detail cards open inside the tapped square's row, full width. */
.square-detail {
  grid-column: 1 / -1;
  background: var(--brand-surface, var(--card));
  color: var(--brand-on-surface, var(--ink));
  border: 1.5px solid var(--brand-accent, var(--ink));
  border-radius: 12px;
  padding: .8rem .95rem .85rem;
  margin: 1px 0 2px;
  text-align: left;
}
.square-detail[hidden] { display: none; }
.square-detail h3 { color: var(--brand-primary, var(--ink)); margin-bottom: .15rem; }
.square-detail p { font-size: .85rem; margin: 0 0 .35rem; }

/* Quiet footer: the key line and rules are helper text, not cards. */
.board-help { margin-top: 1.4rem; font-size: .85rem; text-align: center; }
.keyline { font-size: .8rem; opacity: .8; margin: 0 auto .5rem; max-width: 26rem; }
.keyline b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .arrive .checkring,
  .arrive .meter i.on,
  .arrive .square.just-claimed { animation: none; }
}
.board-rules { text-align: left; max-width: 26rem; margin: 0 auto; }
.board-rules summary {
  cursor: pointer; font-weight: 700; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; opacity: .65;
  list-style-position: inside; text-align: center;
}
.board-rules p { margin: .6rem 0 0; font-size: .85rem; opacity: .85; }

/* Celebration */
.celebration {
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.25rem;
  text-align: center;
  background: var(--brand-primary, var(--ink));
  color: var(--brand-on-primary, #fff);
  animation: celebrate-in .5s ease-out both;
}
.celebration.blackout { background: var(--brand-accent, var(--ink)); color: var(--brand-on-accent, #fff); }
.celebration h2 { margin-bottom: .25rem; }
.celebration p { margin: 0; font-size: .92rem; opacity: .92; }
.celebration a { color: inherit; text-decoration: underline; font-weight: 700; }
.celebration .prize-photo {
  display: block; max-width: 100%; max-height: 9rem;
  margin: .6rem auto .35rem; border-radius: 10px;
}
@keyframes celebrate-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .celebration { animation: none; }
}

/* One card for both standing prizes; rows split by a hairline. */
.prize-note {
  background: var(--brand-surface, var(--card));
  color: var(--brand-on-surface, var(--ink));
  border: 1px solid rgba(127, 127, 127, .25);
  border-radius: 12px;
  padding: .25rem 1.1rem;
  margin-top: 1.25rem;
  font-size: .9rem;
  text-align: center;
}
.prize-row { padding: .65rem 0; }
.prize-row + .prize-row { border-top: 1px solid rgba(127, 127, 127, .18); }
.prize-kind {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; opacity: .6;
  margin-right: .35rem;
}
.prize-row a { font-weight: 700; color: var(--brand-accent, var(--ink)); }

.powered-by {
  text-align: center;
  font-size: .72rem;
  opacity: .45;
  padding: 0 0 1.5rem;
  color: var(--brand-text, var(--ink));
}

.unavailable-card {
  background: var(--brand-surface, var(--card));
  color: var(--brand-on-surface, var(--ink));
  border-radius: 16px; padding: 2rem 1.5rem; text-align: center;
  border: 1px solid rgba(127, 127, 127, .25); margin-top: 3rem;
}

/* Soft landing for links that can't claim: explain, never error. */
.claim-notice {
  background: var(--brand-surface, var(--card));
  color: var(--brand-on-surface, var(--ink));
  border: 1px solid rgba(127, 127, 127, .35);
  border-left: 4px solid var(--brand-accent, var(--ink));
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  text-align: left;
}

/* Enter-your-email fallback on the welcome card. */
.board-lookup {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin: 1.1rem 0 .9rem;
}
.board-lookup input[type="email"] {
  flex: 1 1 12rem; min-width: 0;
  font: inherit; font-size: .95rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(127, 127, 127, .45);
  border-radius: 8px;
  background: var(--brand-background, var(--paper));
  color: var(--brand-text, var(--ink));
}
.board-lookup input[type="submit"] {
  font: inherit; font-size: .9rem; font-weight: 700;
  padding: .55rem 1rem;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--brand-accent, var(--ink));
  color: var(--brand-on-accent, #fff);
}

/* Preview banner: Newsletter Bingo speaking to a tester, not part of the
   publication's board, so it wears the product's own dark rather than the
   publisher's palette. Sits in the claim-notice slot at the top of the page. */
.rehearsal {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 12px;
  padding: .95rem 1rem 1rem;
  margin-bottom: 1.15rem;
  text-align: left;
}
.rehearsal-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; color: #fbbf24; }
.rehearsal-eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.rehearsal h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; color: #fff; }
.rehearsal p { font-size: .84rem; line-height: 1.5; margin: 0 0 .85rem; color: #cbd5e1; }
.rehearsal p strong { color: #fff; font-weight: 700; }
.rehearsal .rehearsal-foot { font-size: .8rem; color: #94a3b8; margin-bottom: 0; }