/* =====================================================================
   Million Beers Club: the crowd release. Jules, 2026-10-30. Plain CSS, no build step.
   Gen Pop (a beer with no club), the photo rule, the live line and the number's pop,
   the crowd line, world moments (a name only by choice), the drinker's cheers, and the
   World Board switch's wider reach.
   Load after r2.css, before the event files:
     styles.css > v3.css > v3-bob.css > r2.css > crowd.css > events.css > event-<name>.css

   Same vocabulary as v1 to release 2: stout outlines, cream labels with a dashed inner
   line, green buttons with a stout rim, stout sheets, Ultra for anything that should feel
   like a pub sign, Figtree for everything small.

   Event safe: every color is a token from styles.css or v3.css, or an event slot with
   today's value as its fallback, so every event dresses these parts too. Nothing here needs
   an inline style or script (the page's security policy). Every block names its README
   section. The one-off post pictures live in posts.css, not here.
   ===================================================================== */

/* ---------- Tokens added by the crowd release: translucent gold and cream, following the event ---------- */
:root {
  --gold-40: rgba(255, 201, 60, .4);
  --gold-55: rgba(255, 201, 60, .55);
  --cream-38: rgba(255, 244, 223, .38);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root, html[data-event] {
    --gold-40: color-mix(in srgb, var(--gold) 40%, transparent);
    --gold-55: color-mix(in srgb, var(--gold) 55%, transparent);
    --cream-38: color-mix(in srgb, var(--cream) 38%, transparent);
  }
}

/* =====================================================================
   1.7 THE GEN POP MARK: a club cap whose face is a small crowd.
   Built on .ccap so it sizes, rims and lines up exactly like a club's cap
   (xs 28, sm 42, md 56, lg 104, xl 136). Gold skirt (the world's color),
   cream face, a dashed inner ring, three people. Markup: README 1.7.
   ===================================================================== */
.ccap--gp { --cap-c: var(--gold); }
.ccap--gp .ccap__face { background: var(--cream); }
.ccap--gp .ccap__face::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  border: max(1.5px, calc(var(--cs) * .03)) dashed var(--ink-22);
}
.gp__crowd { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: hidden; }
.gp__back { fill: var(--beer-4); }
.gp__front { fill: var(--stout); stroke: var(--cream); stroke-width: 5; paint-order: stroke; stroke-linejoin: round; }

/* =====================================================================
   3. THE LIVE LINE (the pulse), on the World Board and the main screen.
   One stout pill under the world number: pause on the left, one line at a
   time in the middle, Cheers on the right. Lines are never read out (3.8).
   ===================================================================== */
.pulse {
  position: relative; display: flex; align-items: center; gap: 6px;
  width: min(calc(100% - 32px), 400px); min-height: 52px; margin: 12px auto 0;
  padding: 4px; border-radius: 26px;
  background: var(--stout); color: var(--cream);
  box-shadow: 0 4px 0 var(--ink-22);
  transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.wb .pulse { width: 100%; margin: 0; }

/* the pause control (WCAG 2.2.2): a 44 px target, a 32 px drawn circle */
.pulse__pause {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream);
}
.pulse__pause svg { width: 32px; height: 32px; overflow: visible; }
.pulse__ring { fill: var(--cream-12, rgba(255, 244, 223, .12)); stroke: var(--cream-68, rgba(255, 244, 223, .68)); stroke-width: 1.5; }
.pulse__bars { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.pulse__play { fill: currentColor; display: none; }
.pulse__pause[aria-pressed="true"] .pulse__bars { display: none; }
.pulse__pause[aria-pressed="true"] .pulse__play { display: block; }
.pulse__pause:active { transform: scale(.92); }

/* the stage: the old line and the new one share one grid cell, so the pill grows to the taller one */
.pulse__stage { flex: 1; min-width: 0; display: grid; align-items: center; min-height: 44px; overflow: hidden; }
.pulse__line {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0;
  padding: 3px 2px 3px 0;
}
.pulse__line.is-in { animation: pulse-in .38s var(--ease-out) both; }
.pulse__line.is-out { animation: pulse-out .32s var(--ease-out) forwards; pointer-events: none; }
@keyframes pulse-in { from { transform: translateY(75%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse-out { to { transform: translateY(-75%); opacity: 0; } }
.pulse__mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.pulse__mark .ccap { --cs: 28px; --cap-sw: 7; }
.pulse__mark .ccap__skirt path { stroke: var(--cream-82, rgba(255, 244, 223, .9)); }
.pulse__glyph { width: 24px; height: 24px; overflow: visible; }
.pulse__glyph .gl-fill { fill: var(--cream); }
.pulse__glyph .gl-beer { fill: var(--gold); }
.pulse__glyph .gl-line { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pulse__text {
  min-width: 0; font: 700 14.5px/1.22 var(--font-body); color: var(--cream);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pulse__text b { font-weight: 800; color: var(--gold); }

/* Cheers on a single beer's line: the beer wall's Cheers, as a round 44 px button (icon only, named for
   screen readers). After a tap it stays pressed: one cheer per beer per viewer. */
.cheers--pulse {
  position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%;
  border-width: 2.5px;
}
.cheers--pulse svg { width: 27px; height: 27px; }
.cheers--pulse[aria-pressed="true"] { background: var(--tap); }
.cheers--pulse[aria-pressed="true"] .clink-foam { fill: var(--cream); }
/* the word that floats up after a cheer (README 3.5; Mary's CR-L11) */
.pulse__cheered {
  position: absolute; right: 54px; top: 50%; margin-top: -13px; z-index: 2; padding: 6px 11px; border-radius: 999px;
  background: var(--tap); color: var(--cream); border: 2px solid var(--cream);
  font: 800 12.5px/1 var(--font-body); white-space: nowrap; pointer-events: none;
  opacity: 0;
}
.pulse__cheered.is-on { animation: cheered-pop 1.1s var(--ease-out) both; }
@keyframes cheered-pop { 0% { opacity: 0; transform: scale(.7); } 16% { opacity: 1; transform: scale(1.06); } 26%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* line kinds */
.pulse--roundup .cheers--pulse, .pulse--yours .cheers--pulse, .pulse--quiet .cheers--pulse, .pulse--paused .cheers--pulse { display: none; }
.pulse--yours { box-shadow: inset 0 0 0 2.5px var(--gold), 0 4px 0 var(--ink-22); }
.pulse--quiet {
  background: var(--cream-38, rgba(255, 244, 223, .38)); color: var(--stout);
  box-shadow: inset 0 0 0 2.5px var(--stout);
}
.pulse--quiet .pulse__text { color: var(--stout); font-weight: 700; }
.pulse--quiet .pulse__ring { fill: var(--ink-10); stroke: var(--stout); }
.pulse--quiet .pulse__pause { color: var(--stout); }
.pulse--quiet .pulse__glyph .gl-line { stroke: var(--stout); }
.pulse--paused .pulse__text { color: var(--cream-82, rgba(255, 244, 223, .82)); font-weight: 600; }
.pulse--paused { box-shadow: inset 0 0 0 1.5px var(--cream-12, rgba(255, 244, 223, .12)), 0 4px 0 var(--ink-22); }

/* 3.2 the number's pop: each line played ticks the world number up by one (a round-up by its count). The odometer
   rolls as today, the number gives a short spring, and the live dot fires one gold ring. Nothing covers a word. */
.odo--total.is-tick { animation: odo-tick .34s var(--ease-spring); }
@keyframes odo-tick { 45% { transform: scale(1.04); } }
.live-dot.is-tick::after { animation: live-burst .7s var(--ease-out); border-color: var(--gold); }
@keyframes live-burst { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(2.3); opacity: 0; } }

/* =====================================================================
   4. THE CROWD LINE: people and clubs that poured this week, under
   "of 1,000,000 beers". The server sends it only above 25 people and 3
   clubs (it hides again below 20), so the empty state is no line at all.
   ===================================================================== */
.crowd {
  display: block; margin: 8px auto 0; max-width: calc(100% - 32px);
  font: 700 14px/1.3 var(--font-body); color: var(--stout); text-align: center; text-wrap: balance;
}
.crowd b { font-weight: 800; font-variant-numeric: tabular-nums; }
.crowd svg { display: inline-block; width: 19px; height: 19px; margin: 0 6px 0 0; vertical-align: -4px; fill: var(--stout); }
.wb .crowd { max-width: 100%; }

/* =====================================================================
   1.4 GEN POP ON THE MAIN SCREEN: the card where a club's row would sit.
   The team, its beers this week, a line, then Start a club (outlined, so
   the +1 cap stays the one green thing) and Got a code? (a link).
   ===================================================================== */
.clubs--gp { padding: 13px 14px 14px; }
.gpc__kicker { margin: 0 2px 8px; }
.gpc__head { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.gpc__titles { flex: 1; min-width: 0; }
.gpc__name { margin: 0; font: 400 20px/1.08 var(--font-display); overflow-wrap: anywhere; }
.gpc__n { flex: 0 1 auto; max-width: 34%; text-align: right; }
.gpc__n b { display: block; font: 400 27px/1 var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
.gpc__n span { display: block; margin-top: 4px; font: 800 10.5px/1.15 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-78); }
.clubs--gp .clubs__text { margin: 10px 2px 0; font: 600 14px/1.4 var(--font-body); }
.gpc__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 12px; }
.gpc__actions .crow-invite { width: auto; flex: 1 1 auto; margin: 0; }
.gpc__actions .clubs__code { flex: none; min-height: 44px; }

/* =====================================================================
   1.5 GEN POP ON THE WORLD BOARD: a team row among this week's clubs.
   Sorted by its beers this week like any club, but never ranked (no number),
   with the Gen Pop mark, a dashed gold edge and a small line saying who it is.
   ===================================================================== */
.tcrow--gp {
  background: var(--cream-08, rgba(255, 244, 223, .08));
  box-shadow: inset 0 0 0 1.5px var(--gold-40, rgba(255, 201, 60, .4));
  outline: 1.5px dashed var(--gold-55, rgba(255, 201, 60, .55)); outline-offset: -5px;
}
.tcrow--gp + .tcrow, .tcrow + .tcrow--gp { box-shadow: inset 0 0 0 1.5px var(--gold-40, rgba(255, 201, 60, .4)); }
.tcrow + .tcrow--gp + .tcrow { box-shadow: none; }
.tcrow--gp .tcrow__rank { visibility: hidden; }
.tcrow__name small { display: block; margin-top: 2px; font: 600 12px/1.2 var(--font-body); color: var(--cream-68, rgba(255, 244, 223, .68)); white-space: normal; }
.tcrow--gp .tcrow__name { white-space: normal; }
.topclubs__list + .topclubs__empty { margin-top: 6px; }

/* =====================================================================
   1.2 THE GEN POP DOOR: "Add your beer" on the World Board, for a screen
   with no club. A stout sheet: who you will pour with, an optional first
   name, the photo heads-up for a first beer, then the button.
   ===================================================================== */
.gpdoor .sheet__body { padding: 2px 16px calc(var(--safe-bottom) + 20px); }
.gpdoor__team {
  display: flex; align-items: center; gap: 12px; margin: 2px 0 0; padding: 10px 14px 10px 10px;
  border-radius: 18px; background: var(--cream-08, rgba(255, 244, 223, .08)); box-shadow: inset 0 0 0 1.5px var(--cream-12, rgba(255, 244, 223, .12));
}
.gpdoor__team .ccap { --cs: 56px; }
.gpdoor__team p { min-width: 0; margin: 0; font: 600 14px/1.35 var(--font-body); color: var(--cream-82, rgba(255, 244, 223, .82)); }
.gpdoor__team b { display: block; margin-top: 3px; font: 400 19px/1.1 var(--font-display); color: var(--cream); overflow-wrap: anywhere; }
.gpdoor__form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.gpdoor__form .field { height: 58px; font-size: 20px; }
.gpdoor__form .field::placeholder { font-size: 17px; font-weight: 700; }
.gpdoor__note { font: 600 13px/1.4 var(--font-body); color: var(--cream-68, rgba(255, 244, 223, .68)); padding: 0 4px; }
.gpdoor__photo, .gpdoor__note { margin: 0; }
.gpdoor__photo {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--cream-08, rgba(255, 244, 223, .08)); font: 700 14px/1.35 var(--font-body); color: var(--cream);
}
.gpdoor__photo svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: var(--gold); }
.gpdoor__go { margin-top: 4px; }
.gpdoor .wb__links { margin-top: 14px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--cream-12, rgba(255, 244, 223, .12)); }

/* 1.3 the in-app warning for Gen Pop: the Gen Pop mark where a club's cap would be */
.inapp--gp .join__kicker { margin-top: 10px; }

/* 1.6 joining or starting a club from Gen Pop: one note, so the move is never a surprise */
.join__gp {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-top: 14px; padding: 10px 12px; text-align: left;
  border-radius: 14px; background: var(--cream-82, rgba(255, 244, 223, .82)); box-shadow: inset 0 0 0 2px var(--stout);
  font: 700 14px/1.38 var(--font-body); color: var(--stout);
}
.join__gp .ccap { --cs: 32px; --cap-sw: 6.5; margin-top: 1px; }

/* =====================================================================
   2. THE PHOTO RULE: the first beer ever and the first beer of each day
   (a day starts at 6 AM local) need a live photo. Random checks stay.
   ===================================================================== */
/* 2.1 before the tap: a camera badge on the +1 cap, and a tag above it */
.cap__badge {
  position: absolute; right: 2px; top: 4px; z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--stout); box-shadow: 0 3px 0 var(--ink-22);
  pointer-events: none;
}
.cap__badge svg { width: 25px; height: 25px; fill: var(--stout); }
.cap.needs-photo .cap__badge { animation: badge-nudge 3.2s var(--ease-out) 1.2s infinite; }
@keyframes badge-nudge { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-12deg) scale(1.06); } 92% { transform: rotate(9deg) scale(1.06); } }
.phototag {
  position: relative; z-index: 2; margin: 0 auto 10px;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px);
  padding: 9px 16px 9px 11px; border-radius: 999px;
  background: var(--stout); color: var(--cream); box-shadow: 0 4px 0 var(--ink-22);
  font: 700 14.5px/1.25 var(--font-body);
}
.phototag svg { flex: none; width: 22px; height: 22px; fill: var(--gold); }
.has-toast .phototag { visibility: hidden; }

/* 2.2 the check: one card, three reasons (data-reason="first" | "day" | "random"). A rule check's kicker is a
   gold label, so "first beer ever" and "first beer today" read as the rule, not bad luck. Random stays green text. */
.check[data-reason="first"] .check__kicker, .check[data-reason="day"] .check__kicker {
  display: inline-block; padding: 6px 11px 5px; border-radius: 999px;
  background: var(--gold); color: var(--stout); box-shadow: inset 0 0 0 2px var(--stout);
}

/* 2.3 the camera: the reason sits over the clock, so nobody wonders why the camera opened */
.cam__why {
  padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--stout);
  box-shadow: inset 0 0 0 2px var(--stout);
  font: 800 12px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase;
}

/* 2.4 too late, on a rule check: the next beer asks again, said plainly under the title */
.check__next {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; text-align: left;
  background: var(--ink-10); font: 700 14px/1.38 var(--font-body); color: var(--stout);
}
.check__next svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: var(--stout); }

/* =====================================================================
   5. MOMENTS: the world's milestones (100, 250, 500 and on) name who
   poured that beer, only by their choice; otherwise a board club, Gen Pop
   or "someone". The party card gains one "who" line with a small mark.
   ===================================================================== */
.party__who {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 11px;
  font: 700 15px/1.3 var(--font-body); text-align: left;
}
.party__who .ccap { --cs: 34px; --cap-sw: 6; }
.party__who b { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.party__who[hidden] { display: none; }
.party__glyph { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--stout); }
.party__glyph svg { width: 22px; height: 22px; overflow: visible; }
.party__glyph .gl-fill { fill: var(--cream); }
.party__glyph .gl-beer { fill: var(--gold); }
.party__glyph .gl-line { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* 5.3 "Want your name on it?": the drinker's private offer after their moment (a small sheet) */
.offer__moment {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: var(--cream-08, rgba(255, 244, 223, .08)); box-shadow: inset 0 0 0 1.5px var(--gold);
}
.offer__badge {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--gold); color: var(--stout); border: 3px solid var(--cream);
  font: 400 14px/1 var(--font-display); text-align: center;
}
.offer__badge svg { width: 26px; height: 26px; fill: none; stroke: var(--stout); stroke-width: 2.2; }
.offer__moment p { margin: 0; font: 600 13.5px/1.35 var(--font-body); color: var(--cream-82, rgba(255, 244, 223, .82)); }
.offer__moment b { display: block; font: 400 18px/1.1 var(--font-display); color: var(--cream); }

/* 5.4 the first-name switch, in the Your name sheet: shown live (on or off), with its note */
.momentsw { margin-top: 18px; padding-top: 16px; box-shadow: inset 0 1.5px 0 var(--cream-12, rgba(255, 244, 223, .12)); }
.momentsw__title { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; font: 400 18px/1.15 var(--font-display); color: var(--cream); }
.momentsw__title svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 2.2; }
.momentsw .seg { margin: 0 0 12px; }
.momentsw .field { height: 56px; font-size: 21px; }
.momentsw__note, .offer__note {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; padding: 11px 12px; border-radius: 14px;
  background: var(--cream-08, rgba(255, 244, 223, .08)); font: 600 13.5px/1.42 var(--font-body); color: var(--cream-82, rgba(255, 244, 223, .82));
}
.momentsw__note svg, .offer__note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: var(--gold); }
.momentsw__note b, .offer__note b { color: var(--cream); font-weight: 800; }
.formstack--name { margin-top: 2px; }
.sheet__savebar { margin-top: 16px; }

/* =====================================================================
   6. THE DRINKER'S CHEERS: how many people watching cheered your beer.
   A number, never who. On the You pill for 30 minutes after a beer, on the
   pour's card while it shows, and beside each beer in Your beers.
   ===================================================================== */
.me__cheers {
  display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 9px 0 5px; margin-left: -2px;
  border-radius: 999px; background: var(--foam); color: var(--stout); border: 2px solid var(--stout);
  font: 800 14px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.me__cheers svg, .card__cheers svg, .chip--cheers svg { width: 22px; height: 19px; overflow: visible; }
.me__cheers .clink, .card__cheers .clink, .chip--cheers .clink { fill: var(--gold); stroke: var(--stout); stroke-width: 1.6; stroke-linejoin: round; }
.me__cheers .clink-foam, .card__cheers .clink-foam, .chip--cheers .clink-foam { fill: var(--foam); stroke: var(--stout); stroke-width: 1.4; }
.me__cheers.is-new { animation: cheers-new .6s var(--ease-spring); }
@keyframes cheers-new { 40% { transform: scale(1.18); } }
.card__cheers {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 11px 5px 7px; border-radius: 999px;
  background: var(--foam); border: 2px solid var(--stout); font: 800 13px/1 var(--font-body); color: var(--stout);
}
.chip--cheers {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; border-radius: 999px;
  background: var(--foam); color: var(--stout); font: 800 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}

/* =====================================================================
   7. THE WORLD BOARD SWITCH (Starter tools): what anyone can see once a
   starter puts the club on the board, as a short list, then the switch.
   ===================================================================== */
.bshow { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bshow li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 8px 10px; border-radius: 12px; font: 600 14px/1.38 var(--font-body); color: var(--cream-82, rgba(255, 244, 223, .82));
}
.bshow li:nth-child(odd) { background: var(--cream-08, rgba(255, 244, 223, .08)); }
.bshow svg { width: 24px; height: 24px; margin-top: -1px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bshow b { color: var(--cream); font-weight: 800; }
.bshow__never { display: flex; align-items: center; gap: 8px; margin: 10px 4px 12px; font: 800 13.5px/1.3 var(--font-body); color: var(--gold); }
.bshow__never svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* =====================================================================
   RELEASE 1 TOUCH-UP (README 13): in the one-club row a long club name takes a second line instead of
   being cut ("Weekend Cr..." beside a three-figure count at 390 px). Two lines at most.
   ===================================================================== */
.clubs--one .crow__name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* =====================================================================
   SHORTER AND NARROWER PHONES
   ===================================================================== */
@media (max-height: 760px) {
  .pulse { margin-top: 10px; }
  .main .me { margin-top: 10px; }
}
@media (max-height: 700px) {
  /* the main screen keeps the live line; the crowd line steps back to the World Board */
  .main .crowd { display: none; }
  .pulse { min-height: 48px; margin-top: 8px; padding: 2px 4px; }
  .pulse__text { font-size: 14px; }
  .main .me { margin-top: 8px; }
  .clubs--gp { padding: 10px 12px 12px; }
  .clubs--gp .clubs__text { display: none; }
  .gpc__head .ccap { --cs: 44px; }
  .gpc__name { font-size: 18px; }
  .gpc__actions { margin-top: 10px; }
  .gpc__actions .crow-invite { min-height: 42px; }
  .cap__badge { width: 40px; height: 40px; top: 0; }
  .cap__badge svg { width: 22px; height: 22px; }
  .phototag { padding: 7px 14px 7px 10px; font-size: 13.5px; }
}
@media (max-width: 374px) {
  .pulse__text { font-size: 14px; }
  .gpc__name { font-size: 18.5px; }
  .gpc__n b { font-size: 24px; }
  .phototag { font-size: 14px; }
}

/* =====================================================================
   REDUCE MOTION (the phone's setting): nothing new moves. The number
   changes in place, a new line swaps in with a short fade, Cheers and the
   cap badge stay still, the moment arrives without bounce (app.js still()).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pulse__line.is-in { animation: pulse-fade-in .12s linear both; }
  .pulse__line.is-out { animation: pulse-fade-out .12s linear forwards; }
  .odo--total.is-tick, .me__cheers.is-new, .live-dot.is-tick::after { animation: none; }
  .cap.needs-photo .cap__badge { animation: none; }
  .pulse__cheered.is-on { animation: cheered-still 1.1s linear both; }
  .pulse, .pulse__pause { transition-duration: .01ms !important; }
}
@keyframes pulse-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-fade-out { to { opacity: 0; } }
@keyframes cheered-still { 0%, 100% { opacity: 0; } 8%, 80% { opacity: 1; } }