/* 🪙 coin-badge.css — the coin count at the top right of Blakeit and Mind Match is exactly the portal's coin badge (Nate 2026-11-06:
   one look across the whole site; the 👥 Friends button next to it is further down). Loaded by index.html and mindmatch.html after their own styles.
   Copied value for value from the portal (`.acct .bal` in portal/portal.css + `html.themed .acct .bal` and the theme variables in
   portal/themes.css); keep the two in step. Tapping it opens the 🪙 wallet pop-up (portal/wallet.js). */
html .token-pill { display: inline-block; flex: none; gap: 0; padding: 8px 14px; border-radius: 12px; font: normal 700 16px/normal Nunito, system-ui, sans-serif;
  letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; text-shadow: none;
  color: #f5ff3b; background: rgba(245,255,59,.08); border: 1px solid #f5ff3b; box-shadow: 0 0 10px rgba(245,255,59,.25); }
html .token-pill .tok { margin-right: .35em; vertical-align: -.14em; font-style: normal; }
html .token-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html[data-theme="pixel"] .token-pill { font-family: Nunito, system-ui, sans-serif; color: #ffe600; background: #000; border: 3px solid #ffe600; border-radius: 0; box-shadow: none; }
html[data-theme="jackpot"] .token-pill { color: #ffe680; background: rgba(70,8,22,.85); border: 2px solid #ffe680; border-radius: 16px; box-shadow: none; }
html[data-theme="vector"] .token-pill { font-family: 'Share Tech Mono', monospace; font-weight: 400; color: #ffb000; background: rgba(0,20,6,.8); border: 1px solid #ffb000; border-radius: 2px; box-shadow: none; text-shadow: 0 0 6px rgba(255,176,0,.6); }
html[data-theme="bubble"] .token-pill { color: #e09a00; background: #fff4fa; border: 2px solid #e09a00; border-radius: 22px; box-shadow: none; }
html[data-theme="bubble"][data-dark] .token-pill { color: #ffcf3f; background: #2a1530; border-color: #ffcf3f; }
html[data-theme="cosmic"] .token-pill { color: #ffd76a; background: rgba(20,14,60,.85); border: 1px solid #ffd76a; border-radius: 14px; box-shadow: none; }
html[data-theme="comic"] .token-pill { color: #111; background: #fff; border: 3px solid #111; border-radius: 6px; box-shadow: none; }
html[data-theme="comic"][data-dark] .token-pill { color: #ffe14d; background: #1c1c24; border-color: #ffe14d; }
html[data-theme="forge"] .token-pill { color: #ffd23f; background: rgba(40,28,22,.9); border: 2px solid #ffd23f; border-radius: 6px; box-shadow: none; }
@media (max-width: 560px) { html .token-pill { font-size: 13px; padding: 7px 10px; } } /* the portal's phone size */

/* 👥 The Friends button next to the coins (Nate 2026-11-06: it replaced the little 💬 bubble at the bottom right; chat.js adds it).
   Exactly the portal's 👥 button (`.acct button.fr` in portal/portal.css + `html.themed .acct button` in portal/themes.css), measured
   per theme on the portal hub: normal, hover, open (`.on`) and its red count. Tapping it opens the Friends pop-up below. */
html .bk-fr { display: grid; place-items: center; flex: none; position: relative; overflow: visible; width: 40px; height: 40px; margin: 0; padding: 0;
  font-size: 18px; font-style: normal; line-height: normal; letter-spacing: normal; text-transform: none; cursor: pointer; transform: none; filter: none; transition: none; }
html .bk-fr:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html .bk-fr .ft-badge { position: absolute; top: -6px; right: -6px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0; padding: 0 5px;
  box-sizing: border-box; border-radius: 10px; color: #fff; font: normal 800 11px/1 Nunito, sans-serif; letter-spacing: normal; text-shadow: none; }
html .bk-fr { border: 1px solid rgba(0, 240, 255, 0.35); background: rgba(0, 240, 255, 0.07); border-radius: 50%; color: rgb(207, 233, 255); box-shadow: none; font-family: Nunito, system-ui, sans-serif; font-weight: 700; text-shadow: none; }
html .bk-fr:hover { background: rgba(0, 240, 255, 0.16); }
html .bk-fr.on { border-color: rgb(245, 255, 59); color: rgb(207, 233, 255); background: rgb(245, 255, 59); box-shadow: rgba(245, 255, 59, 0.5) 0px 0px 14px 0px; }
html .bk-fr .ft-badge { background: rgb(255, 43, 214); }
html[data-theme="pixel"] .bk-fr { border: 3px solid rgb(255, 255, 255); background: rgb(0, 0, 0); border-radius: 0px; color: rgb(255, 255, 255); }
html[data-theme="pixel"] .bk-fr:hover { background: rgb(27, 27, 58); }
html[data-theme="pixel"] .bk-fr.on { border-color: rgb(255, 230, 0); color: rgb(0, 0, 0); background: rgb(255, 230, 0); box-shadow: rgb(255, 48, 48) 4px 4px 0px 0px; }
html[data-theme="pixel"] .bk-fr .ft-badge { background: rgb(255, 48, 48); }
html[data-theme="jackpot"] .bk-fr { border: 2px solid rgb(255, 201, 52); background: rgba(70, 8, 22, 0.85); color: rgb(255, 241, 214); }
html[data-theme="jackpot"] .bk-fr:hover { background: rgb(106, 15, 36); }
html[data-theme="jackpot"] .bk-fr.on { color: rgb(58, 6, 16); background: rgb(255, 201, 52); box-shadow: rgba(255, 201, 52, 0.6) 0px 0px 16px 0px; }
html[data-theme="jackpot"] .bk-fr .ft-badge { background: rgb(255, 58, 79); }
html[data-theme="vector"] .bk-fr { border: 1px solid rgba(57, 255, 106, 0.6); background: rgba(0, 20, 6, 0.8); border-radius: 2px; color: rgb(196, 255, 210); font-family: "Share Tech Mono", monospace; font-weight: 400; }
html[data-theme="vector"] .bk-fr:hover { background: rgba(57, 255, 106, 0.16); }
html[data-theme="vector"] .bk-fr.on { border-color: rgb(57, 255, 106); color: rgb(0, 26, 7); background: rgb(57, 255, 106); box-shadow: rgba(57, 255, 106, 0.7) 0px 0px 14px 0px; }
html[data-theme="vector"] .bk-fr .ft-badge { background: rgb(255, 77, 77); }
html[data-theme="bubble"] .bk-fr { border: 2px solid rgb(255, 179, 220); background: rgb(255, 244, 250); color: rgb(122, 42, 104); }
html[data-theme="bubble"] .bk-fr:hover { background: rgb(255, 224, 240); }
html[data-theme="bubble"] .bk-fr.on { border-color: rgb(255, 122, 192); color: rgb(255, 255, 255); background: rgb(255, 122, 192); box-shadow: rgb(194, 51, 127) 0px 4px 0px 0px, rgba(255, 122, 192, 0.45) 0px 0px 16px 0px; }
html[data-theme="bubble"] .bk-fr .ft-badge { background: rgb(255, 122, 192); }
html[data-theme="bubble"][data-dark] .bk-fr { border: 2px solid rgb(106, 58, 102); background: rgb(42, 21, 48); color: rgb(255, 214, 236); }
html[data-theme="bubble"][data-dark] .bk-fr:hover { background: rgb(62, 32, 68); }
html[data-theme="bubble"][data-dark] .bk-fr.on { border-color: rgb(255, 122, 192); color: rgb(255, 255, 255); background: rgb(255, 122, 192); box-shadow: rgb(138, 32, 96) 0px 4px 0px 0px, rgba(255, 122, 192, 0.35) 0px 0px 16px 0px; }
html[data-theme="bubble"][data-dark] .bk-fr .ft-badge { background: rgb(255, 122, 192); }
html[data-theme="cosmic"] .bk-fr { border: 1px solid rgba(127, 233, 255, 0.55); background: rgba(20, 14, 60, 0.85); color: rgb(232, 236, 255); }
html[data-theme="cosmic"] .bk-fr:hover { background: rgba(127, 233, 255, 0.14); }
html[data-theme="cosmic"] .bk-fr.on { border-color: rgb(155, 92, 255); color: rgb(255, 255, 255); background: rgb(155, 92, 255); box-shadow: rgba(155, 92, 255, 0.75) 0px 0px 18px 0px; }
html[data-theme="cosmic"] .bk-fr .ft-badge { background: rgb(255, 122, 224); }
html[data-theme="comic"] .bk-fr { border: 3px solid rgb(17, 17, 17); background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
html[data-theme="comic"] .bk-fr:hover { background: rgb(255, 225, 77); }
html[data-theme="comic"] .bk-fr.on { border-color: rgb(255, 59, 59); color: rgb(255, 255, 255); background: rgb(255, 59, 59); box-shadow: rgb(17, 17, 17) 4px 4px 0px 0px; }
html[data-theme="comic"] .bk-fr .ft-badge { background: rgb(255, 59, 59); }
html[data-theme="comic"][data-dark] .bk-fr { border: 3px solid rgb(232, 232, 240); background: rgb(28, 28, 36); color: rgb(236, 236, 244); }
html[data-theme="comic"][data-dark] .bk-fr:hover { background: rgb(58, 52, 32); }
html[data-theme="comic"][data-dark] .bk-fr.on { border-color: rgb(255, 59, 59); color: rgb(255, 255, 255); background: rgb(255, 59, 59); box-shadow: rgb(0, 0, 0) 4px 4px 0px 0px; }
html[data-theme="comic"][data-dark] .bk-fr .ft-badge { background: rgb(255, 59, 59); }
html[data-theme="forge"] .bk-fr { border: 2px solid rgb(138, 74, 28); background: rgba(40, 28, 22, 0.9); border-radius: 8px; color: rgb(251, 233, 216); }
html[data-theme="forge"] .bk-fr:hover { background: rgb(62, 42, 30); }
html[data-theme="forge"] .bk-fr.on { border-color: rgb(255, 138, 28); color: rgb(26, 10, 0); background: rgb(255, 138, 28); box-shadow: rgba(255, 138, 28, 0.6) 0px 0px 18px 0px; }
html[data-theme="forge"] .bk-fr .ft-badge { background: rgb(255, 90, 26); }
@media (max-width: 560px) { html .bk-fr { width: 36px; height: 36px; font-size: 16px; } } /* the portal's phone size */

/* the Friends pop-up: the portal's Friends tab (portal/friends.html) in a frame, so it wears the portal theme */
#frp { position: fixed; inset: 0; z-index: 390; display: grid; place-items: center; padding: 20px; background: rgba(5,1,12,.6); animation: frpin .18s ease-out; }
#frp .frp-box { width: min(1000px, 100%); height: min(880px, calc(100vh - 40px)); border-radius: 18px; overflow: hidden; background: #0b0218;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); }
#frp iframe { display: block; width: 100%; height: 100%; border: 0; }
@keyframes frpin { from { opacity: 0; } }
@media (max-width: 560px) { #frp { padding: 0; } #frp .frp-box { width: 100%; height: 100%; border-radius: 0; } }