/* THE CLUB CHROME — one look for every BrainJong room on the web.
   Mirrors the app: emerald felt, 24K gold, ivory bone, navy; the unified
   rail pill (Capsule, 44pt, serif black label) that SOUND/Coach/END wear. */
:root{--felt:#0a3527;--felt-deep:#04140d;--gold:#d69c21;--gold-hi:#fcdb73;--gold-deep:#996b14;--ivory:#fffbed;--navy:#1a2645;--brick:#b3362e;--green:#2f9e57;--ink:#101418}
#clubBar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 8px 4px;width:100%;max-width:560px;margin:0 auto}
#clubBar img{width:44px;height:44px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.clubPill{display:inline-flex;align-items:center;gap:5px;height:44px;padding:0 14px;border-radius:999px;
  font-family:Georgia,serif;font-weight:900;font-size:12.5px;letter-spacing:.4px;color:#fff;border:1px solid rgba(255,255,255,.35);
  cursor:pointer;user-select:none;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.clubPill:active{transform:translateY(1px)}
.clubPill.sound{background:var(--green)}
.clubPill.sound.muted{background:var(--brick)}
.clubPill.coach{background:rgba(16,20,24,.82)}
.clubPill.coach .dot{width:15px;height:15px;border-radius:50%;background:#3fa9f5;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 8px rgba(63,169,245,.6)}
.clubPill.coach.talking .dot{background:#2f9e57;box-shadow:0 0 10px rgba(47,158,87,.8)}
.clubPill.end{background:var(--brick)}
#clubTitle{width:100%;text-align:center;margin:2px 0 0}
#clubTitle h1{font-family:Georgia,serif;font-size:24px;font-weight:900;letter-spacing:1.5px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.bjChipRow{display:flex;gap:8px;justify-content:center;margin:6px 0;flex-wrap:wrap}
.bjChip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(214,156,33,.5);font-family:Georgia,serif;font-size:11px;
  font-weight:900;letter-spacing:1px;color:rgba(255,255,255,.65)}
.bjChip b{font-size:14px;color:var(--gold-hi);letter-spacing:0;text-shadow:0 0 8px rgba(252,219,115,.45)}
.bjBanner{min-height:30px;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:6px auto;max-width:520px;padding:5px 16px;border-radius:999px;
  background:rgba(0,0,0,.45);border:1px solid rgba(214,156,33,.55);
  font-family:Georgia,serif;font-weight:900;font-size:13.5px;color:var(--ivory)}
.bjBanner.gold{color:var(--gold-hi);text-shadow:0 0 10px rgba(252,219,115,.55);border-color:var(--gold-hi)}
.bjCoin{position:fixed;top:-40px;font-size:22px;z-index:99;pointer-events:none;
  animation:bjFall linear forwards;text-shadow:0 0 8px rgba(252,219,115,.8)}
@keyframes bjFall{to{transform:translateY(110vh) rotate(720deg)}}