/* ======================================================================================================
   Bercha shell: "Emerald lounge" (the owner's choice, 2026-10-07)
   The app shell around the games: top bar, Home (balance card, promo strip, game tiles, wins), the floating
   dock with the Play button and its game chooser, Promotions, Support, Wallet, the info pages, sheets, toasts
   and sign-up. Loaded after style.css. Page colours apply under body.shell (every page except the games,
   set by showTab in app.js); sheets, popups and toasts are emerald everywhere. The games keep their own looks
   (Keno navy, Bingo and Hi-Lo restyled separately). Don't use the template golds here (lib/brand.js fillCss).
   ====================================================================================================== */
:root {
  --em-bg: #04251C; --em-bg2: #062E23; --em-deep: #021A13;
  --em-glass: rgba(8,52,39,.82); --em-edge: rgba(167,243,208,.18);
  --cream: #FFF8E7; --cream2: #F4EBD3; --ink: #0B2A1F; --ink-soft: #4E6B5E;
  --amber: #F59E0B; --amber-l: #FCD34D; --amber-d: #D97706; --amber-ink: #3B2300;
  --mint: #34D399; --mint-l: #A7F3D0; --mint-d: #047857;
  --nav-h: 80px;
}

/* The emerald colours for everything that uses the page variables (cards, tickets, lists, inputs …) */
body.shell, .overlay, .toast, .live-pill {
  --bg: #04251C; --bg2: #073326; --card: #0A3A2B; --card2: #0F4633; --line: #1D5C47;
  --text: #F1FBF6; --muted: #9CC8B5; --pick: #34D399; --pick2: #10B981;
}
/* Cream surfaces: the same variables, light */
.hb-card, body.shell .pc-code, body.shell .pc-welcome, body.shell .pc-happy, body.shell .chat, body.shell .faq details, #join .join-card {
  --card: #FFF8E7; --card2: #F4EBD3; --bg2: #FFFDF6; --line: #E2D4B0; --text: #0B2A1F; --muted: #56715F; --pick: #047857; --pick2: #065F46;
  color: var(--text);
}
body.shell {
  background:
    radial-gradient(700px 420px at 0% -10%, rgba(52,211,153,.20), transparent 60%),
    radial-gradient(600px 420px at 110% 18%, rgba(245,158,11,.11), transparent 60%),
    linear-gradient(180deg, #062E23, #04251C 45%, #031D16);
  background-attachment: fixed;
}
body { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px); }

/* ---------------------------------------------------------------- Top bar */
body.shell .topbar { background: rgba(4,37,28,.84); border-bottom: 1px solid rgba(167,243,208,.12); }
body.shell .topbar .icon-btn { border-radius: 999px; background: rgba(167,243,208,.08); border-color: rgba(167,243,208,.2); color: var(--mint-l); }
body.shell .balance-pill { background: rgba(167,243,208,.08); border-color: rgba(167,243,208,.2); }
body.shell .balance-pill .coin { background: radial-gradient(circle at 35% 30%, #FEF3C7, #F59E0B 55%, #B45309); }
body.home-mode .balance-pill { display: none; } /* Home shows the balance card instead */

/* ---------------------------------------------------------------- Home: balance card */
#tab-home { gap: 14px; }
.hb-card {
  position: relative; overflow: hidden; border-radius: 26px; padding: 18px 18px 16px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(245,158,11,.20), transparent 55%), linear-gradient(160deg, #FFF8E7, #F4EBD3);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.hb-card::after { content: ""; position: absolute; right: -46px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(52,211,153,.14); pointer-events: none; }
.hb-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hb-hi { font-size: 14px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-hi b { color: var(--ink); font-weight: 800; }
.hb-coin { flex: none; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FEF3C7, #F59E0B 55%, #B45309); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 6px 14px rgba(217,119,6,.35); }
.hb-label { display: block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hb-bal { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; }
.hb-bal b { font-size: 40px; line-height: 1.05; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.hb-bal b.bump { animation: hbBump .6s ease; }
@keyframes hbBump { 30% { transform: scale(1.12); color: var(--mint-d); } }
.hb-bal span { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.hb-split { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; position: relative; z-index: 1; }
.hb-split > span { padding: 4px 10px; border-radius: 999px; background: rgba(11,42,31,.07); font-size: 12px; color: var(--ink-soft); }
.hb-split b { color: var(--ink); }
.hb-actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.hb-actions button { flex: 1; border: 0; border-radius: 999px; padding: 12px 14px; font-weight: 900; font-size: 15px; cursor: pointer; transition: transform .1s; }
.hb-actions button:active { transform: scale(.97); }
.hb-dep { background: linear-gradient(180deg, #FCD34D, #F59E0B 55%, #D97706); color: var(--amber-ink); box-shadow: 0 8px 18px rgba(245,158,11,.35); }
.hb-wal { background: linear-gradient(180deg, #0F5A43, #073326); color: var(--cream); box-shadow: 0 8px 18px rgba(4,37,28,.3); }
.hb-wal span::after { content: " ›"; }

/* ---------------------------------------------------------------- Home: promo strip (cards side by side) */
#tab-home .ps-track { gap: 10px; border-radius: 0; box-shadow: none; margin: 0 -12px; padding: 2px 12px 6px; scroll-padding: 0 12px; }
#tab-home .ps-slide {
  flex: 0 0 80%; max-width: 330px; height: 140px; border-radius: 20px; padding: 14px 0 14px 14px;
  grid-template-columns: 1fr 38%; box-shadow: 0 10px 24px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08);
}
#tab-home .ps-custom { grid-template-columns: 1fr; padding-right: 14px; }
#tab-home .ps-text { gap: 4px; }
#tab-home .ps-text b { font-size: 17px; }
#tab-home .ps-text small { font-size: 11.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#tab-home .ps-tag { font-size: 9.5px; padding: 2px 8px; }
#tab-home .ps-cta { font-size: 12px; padding: 5px 12px; margin-top: 2px; }
#tab-home .ps-art .keno-mini { width: 86px; padding: 4px; }
#tab-home .ps-art .keno-mini i { font-size: 8px; }
#tab-home .ps-art .bingo-mini { width: 86px; }
#tab-home .ps-art .bingo-mini b, #tab-home .ps-art .bingo-mini i { font-size: 8px; }
#tab-home .ps-art .hl-mini { width: 84%; }
#tab-home .ps-emoji { font-size: 50px; }
#tab-home .ps-cup { font-size: 48px; }
#tab-home .ps-dots { margin-top: 4px; }
#tab-home .ps-dots i { background: rgba(167,243,208,.25); }
#tab-home .ps-dots i.on { background: var(--mint); }
/* slide colours in the lounge style (the game slides in their games' colours) */
.ps-bingo { background: radial-gradient(circle at 86% 16%, #FFE9A8 0 10%, transparent 11%), linear-gradient(180deg, #8FD8FF 0%, #CBEFFF 58%, #9BE27A 59%, #4CB944 100%); color: var(--ink); }
.ps-bingo .ps-text small { color: rgba(11,42,31,.78); }
.ps-bingo .ps-tag { background: rgba(255,255,255,.6); }
.ps-bingo .ps-cta { background: #FF7A59; color: #fff; }
.ps-hilo { background: radial-gradient(120% 120% at 100% 0%, rgba(244,114,182,.35), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(34,211,238,.25), transparent 60%), #120B2E; border-color: rgba(34,211,238,.35) !important; }
.ps-hilo .ps-cta { background: #22D3EE; color: #071330; }
.ps-hilo .ps-art .hl-mini { box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 8px 18px rgba(0,0,0,.45); }
.ps-free { background: radial-gradient(120% 120% at 100% 0%, rgba(253,230,138,.45), transparent 60%), linear-gradient(135deg, #B45309, #78350F); }
.ps-free .ps-cta { background: var(--cream); color: #78350F; }
.ps-invite { background: radial-gradient(120% 120% at 100% 0%, rgba(167,243,208,.35), transparent 60%), linear-gradient(135deg, #0F766E, #064E3B); }
.ps-invite .ps-cta { background: var(--mint-l); color: #053B2C; }
.ps-happy { background: radial-gradient(120% 120% at 100% 0%, rgba(252,211,77,.5), transparent 60%), linear-gradient(135deg, #EA580C, #9A3412); }
.ps-happy .ps-cta { background: var(--cream); color: #7C2D12; }
.ps-tourn { background: radial-gradient(120% 120% at 100% 0%, rgba(245,158,11,.35), transparent 60%), linear-gradient(135deg, #0F4633, #04251C); }

/* ---------------------------------------------------------------- Section titles */
body.shell .section-title { display: flex; align-items: center; gap: 10px; color: var(--mint-l); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin: 6px 2px -2px; }
body.shell .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(167,243,208,.25), transparent); }

/* ---------------------------------------------------------------- Home: 2-column game tiles */
#homeGames { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#homeGames > .gcard, #homeGames > .g-jp {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  text-align: left; cursor: pointer; position: relative; font: inherit; background: var(--cream); color: var(--ink);
  box-shadow: 0 12px 26px rgba(0,0,0,.32); transition: transform .12s;
}
#homeGames > button:active { transform: scale(.97); }
#homeGames .g-art { width: 100%; height: auto; aspect-ratio: 1 / .8; border-radius: 0; display: grid; place-items: center; padding: 14px; grid-template-columns: 1fr; }
#homeGames .g-info { padding: 10px 12px 12px; gap: 2px; min-width: 0; }
#homeGames .g-info > b { font-size: 17px; color: var(--ink); }
#homeGames .g-info > small { display: none; }
#homeGames .g-status { font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); margin-top: 1px; font-weight: 700; }
#homeGames .g-status b { color: var(--ink); }
#homeGames .g-play { display: none; }
#homeGames .g-label { top: 8px; left: 8px; right: auto; }
/* wide tile: the last one when the count is odd (layoutTiles in app.js) */
#homeGames > .wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
#homeGames > .wide .g-art { width: 42%; flex: none; aspect-ratio: 1 / .78; }
#homeGames > .wide .g-info { flex: 1; padding: 12px 14px; }
#homeGames > .wide .g-info > small { display: block; font-size: 12px; color: var(--ink-soft); }
/* each tile's art keeps its game's identity */
#homeGames .g-keno .g-art { background: radial-gradient(circle at 50% 30%, #243466, #0d1428); padding: 16px; }
#homeGames .g-keno .keno-mini { width: 82%; }
#homeGames .g-bingo .g-art { background: radial-gradient(circle at 84% 14%, #FFE9A8 0 9%, transparent 10%), linear-gradient(180deg, #8FD8FF 0%, #CBEFFF 55%, #9BE27A 56%, #4CB944 100%); padding: 16px; }
#homeGames .g-bingo .bingo-mini { width: 78%; }
#homeGames .g-hilo .g-art { background: #120B2E; padding: 0; }
#homeGames .g-hilo .hl-mini { width: 100%; height: 100%; }
/* Jackpot tile */
#homeGames .g-jp .g-art { background: radial-gradient(circle at 50% 40%, rgba(253,230,138,.9), transparent 55%), linear-gradient(160deg, #F59E0B, #B45309); }
#homeGames .g-jp .jp-coin { font-size: 52px; }
#homeGames .g-jp .jp-main { display: block; }
#homeGames .g-jp .jp-main b { font-size: 22px; font-weight: 900; color: #B45309; font-variant-numeric: tabular-nums; }
#homeGames .g-jp .g-status b { font-size: inherit; }
/* Bingo "Sunny garden" mini card (Home tile, promo card, Play sheet) */
.bingo-mini { background: #FFF8E7; border: 2px solid #2F6B3F; box-shadow: 0 6px 14px rgba(20,60,30,.3); }
.bingo-mini b.bb0, .bingo-mini b.bb2, .bingo-mini b.bb4 { background: #FF7A59; color: #fff; }
.bingo-mini b.bb1, .bingo-mini b.bb3 { background: #14B8A6; color: #fff; }
.bingo-mini i { color: #2F4A3A; border-color: #EADFC2; }
.bingo-mini i.on::after { background: rgba(255,122,89,.85); mix-blend-mode: multiply; }
.bingo-mini i.f { color: #fff; background: #14B8A6; }

/* ---------------------------------------------------------------- Home: recent big wins (one cream list) */
body.shell #winsFeed { gap: 0; padding: 4px 6px; border-radius: 20px; background: var(--cream); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
body.shell #winsFeed .feed-row { grid-template-columns: 40px 1fr auto; background: none; border: 0; border-bottom: 1px solid rgba(11,42,31,.08); border-radius: 0; padding: 9px 6px; color: var(--ink); }
body.shell #winsFeed .feed-row:last-child { border-bottom: 0; }
body.shell #winsFeed .f-main small { color: var(--ink-soft); }
body.shell #winsFeed .f-win { color: var(--mint-d); }
body.shell #winsFeed .empty { border: 0; color: var(--ink-soft); }
.f-av { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: #fff; background: #0F5A43; }
.feed-row.g-keno .f-av { background: linear-gradient(145deg, #2a3c78, #0d1428); }
.feed-row.g-bingo .f-av { background: linear-gradient(145deg, #FF9B80, #FF7A59); }
.feed-row.g-hilo .f-av { background: #120B2E; color: #22D3EE; box-shadow: inset 0 0 0 2px rgba(244,114,182,.7); }
.f-av i { position: absolute; right: -5px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-style: normal; background: var(--cream); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* ---------------------------------------------------------------- Floating dock */
.tabbar.dock {
  left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); max-width: 560px; margin: 0 auto;
  padding: 6px; border-radius: 26px; align-items: flex-end;
  background: rgba(6,46,35,.9); border: 1px solid rgba(167,243,208,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body.keno-mode .tabbar.dock { background: rgba(12,17,32,.92); border-color: rgba(79,124,255,.25); }
.tabbar.dock button { flex: 1; max-width: none; padding: 6px 0 5px; gap: 2px; border-radius: 20px; font-size: 10.5px; color: rgba(209,250,229,.62); }
.tabbar.dock svg { width: 22px; height: 22px; }
.tabbar.dock button.active { color: var(--amber-l); background: rgba(245,158,11,.12); }
.tabbar.dock button.active::before { top: auto; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.tabbar.dock .dock-play { flex: 0 0 72px; background: none; color: var(--amber-l); font-weight: 800; }
.dp-ring {
  width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FDE68A, #F59E0B 55%, #D97706);
  box-shadow: 0 10px 24px rgba(245,158,11,.45), 0 0 0 5px rgba(4,37,28,.96), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .12s;
}
.dock-play:active .dp-ring { transform: scale(.94); }
.tabbar.dock .dp-ring svg { width: 26px; height: 26px; fill: var(--amber-ink); stroke: var(--amber-ink); stroke-width: 1.5; margin-left: 3px; }
.tabbar.dock .badge { background: var(--amber); color: var(--amber-ink); top: 1px; }
.live-pill { bottom: calc(var(--safe-b) + 112px); }
.share-chip { bottom: calc(112px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- Sheets, popups, toasts (emerald everywhere) */
.overlay { background: rgba(2,20,15,.78); }
.overlay .card { background: linear-gradient(180deg, #0F4633, #0A3A2B 45%); border: 1px solid var(--em-edge); border-radius: 24px; color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.overlay .card-head h2 { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--cream); font-weight: 900; }
.overlay .link, body.shell .link { color: var(--mint-l); }
/* sheets come up from the bottom on phones */
@media (max-width: 600px) {
  .overlay:has(> .sheet-card) { place-items: end center; padding: 0; }
  .overlay > .sheet-card { border-radius: 26px 26px 0 0; border-bottom: 0; max-height: 88vh; padding-bottom: calc(16px + var(--safe-b)); animation: sheetUp .28s cubic-bezier(.2,.9,.3,1); }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grip { display: block; width: 42px; height: 4px; border-radius: 4px; background: rgba(167,243,208,.3); margin: -4px auto 10px; }
.toast { background: rgba(6,46,35,.96); border-color: rgba(167,243,208,.3); color: #F1FBF6; border-radius: 16px; }
.win-card { background: radial-gradient(circle at 50% 0%, rgba(245,158,11,.35), transparent 70%), #0F4633; border-color: rgba(245,158,11,.6); }
.win-label { color: var(--amber-l); }
.win-amount { background: linear-gradient(180deg, #FFF8E7, #FCD34D); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons in the shell and in sheets: amber primary, mint secondary */
body.shell .btn.primary, .overlay .btn.primary, body.shell .pc-btn, .overlay .pc-btn, .overlay .pay-go, body.shell .wc-dep {
  background: linear-gradient(180deg, #FCD34D, #F59E0B 55%, #D97706); color: var(--amber-ink); box-shadow: 0 8px 20px rgba(245,158,11,.28);
}
body.shell .btn:not(.primary):not(.tg):not(.share-ch), .overlay .btn:not(.primary):not(.tg):not(.share-ch) { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); color: var(--mint-l); }
.overlay .st-games button { background: var(--mint); color: #022C22; }
body.shell .pc-actions .pc-btn { background: linear-gradient(180deg, #6EE7B7, #34D399 55%, #059669); color: #022C22; box-shadow: 0 8px 18px rgba(52,211,153,.25); }
body.shell .seg { border-radius: 999px; padding: 4px; }
body.shell .seg button { border-radius: 999px; }
body.shell .seg button.on { background: linear-gradient(180deg, #FCD34D, #F59E0B); color: var(--amber-ink); }
body.shell .sub-head button { border-radius: 999px; background: rgba(167,243,208,.1); border-color: rgba(167,243,208,.25); color: var(--mint-l); }

/* ---------------------------------------------------------------- Play sheet (choose a game) */
.play-list { display: flex; flex-direction: column; gap: 10px; }
.pl-row {
  display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 20px; cursor: pointer;
  text-align: left; font: inherit; background: var(--cream); color: var(--ink); border: 2px solid transparent; box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.pl-row:active { transform: scale(.98); }
.pl-row.last { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.18), 0 8px 18px rgba(0,0,0,.25); }
.pl-row.paused { filter: grayscale(.7); opacity: .75; }
.pl-row.paused small::after { content: ' · Paused'; color: #B91C1C; font-weight: 800; }
.pl-art { width: 76px; height: 76px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; padding: 8px; }
.pl-play .pl-art { background: radial-gradient(circle at 50% 30%, #243466, #0d1428); }
.pl-bingo .pl-art { background: linear-gradient(180deg, #8FD8FF 0%, #CBEFFF 55%, #9BE27A 56%, #4CB944 100%); }
.pl-hilo .pl-art { background: #120B2E; padding: 0; }
.pl-art .keno-mini, .pl-art .bingo-mini { width: 100%; }
.pl-art .keno-mini i, .pl-art .bingo-mini b, .pl-art .bingo-mini i { font-size: 7px; }
.pl-art .hl-mini { width: 100%; height: 100%; }
.pl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-info b { font-size: 18px; font-weight: 900; }
.pl-info small { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.pl-info small b { font-size: inherit; color: var(--ink); }
.pl-last { align-self: flex-start; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); }
.pl-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: #0F5A43; color: var(--cream); }

/* ---------------------------------------------------------------- Promotions */
body.shell .promo-card { border-radius: 22px; border-color: rgba(167,243,208,.16); }
body.shell .pc-code, body.shell .pc-welcome, body.shell .pc-happy { border-color: transparent; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
body.shell .pc-code .pc-art { background: rgba(245,158,11,.16); }
body.shell .pc-welcome .pc-art { background: rgba(52,211,153,.2); }
body.shell .pc-happy .pc-art { background: rgba(255,122,89,.18); }
body.shell .pc-code .pc-link button { background: #0F5A43; color: var(--cream); border: 0; }

/* ---------------------------------------------------------------- Support */
body.shell .chat { box-shadow: 0 12px 26px rgba(0,0,0,.28); border-color: transparent; }
body.shell .chat-form textarea { background: #fff; border: 1px solid var(--line); color: var(--ink); }
body.shell .chat-form button { background: linear-gradient(180deg, #FCD34D, #F59E0B); }
body.shell .chat-form svg { fill: var(--amber-ink); }
body.shell .faq details { border-color: transparent; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
body.shell .faq summary::marker { color: var(--amber-d); }

/* ---------------------------------------------------------------- Wallet */
body.shell .wallet-card {
  border-radius: 26px; border: 1px solid rgba(167,243,208,.2);
  background: radial-gradient(120% 120% at 100% 0%, rgba(245,158,11,.22), transparent 55%), linear-gradient(150deg, #0F5A43, #073326);
}
body.shell .wc-bal b { color: var(--cream); }
body.shell .wc-stats { background: rgba(245,158,11,.14); }

/* ---------------------------------------------------------------- Sign-up / log in (cream card) */
#join { background: radial-gradient(600px 400px at 50% 0%, rgba(52,211,153,.22), transparent 60%), rgba(2,26,19,.94); }
#join .join-card { background: linear-gradient(170deg, #FFF8E7, #F4EBD3); border: 0; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
#join .join-link, #join .join-accept a { color: var(--mint-d); }
#join .join-accept input { accent-color: var(--mint-d); }
#join .join-code { color: var(--ink-soft); }
#join .btn.primary { background: linear-gradient(180deg, #FCD34D, #F59E0B 55%, #D97706); color: var(--amber-ink); box-shadow: 0 8px 20px rgba(245,158,11,.3); }

/* ---------------------------------------------------------------- Motion and lighter mode */
@media (prefers-reduced-motion: reduce) { .overlay > .sheet-card { animation: none; } .hb-bal b.bump { animation: none; } }
html.lite .tabbar.dock { background: rgb(6,46,35); }
html.lite body.keno-mode .tabbar.dock { background: rgb(12,17,32); }
html.lite body.shell { background-attachment: scroll; }