/* Board Parlor platform kit. Loaded by every page under /games/, games included, so every
   selector here is scoped to #bp-toasts, .bp-acct, body.bp-page or a bp- class, and can't touch a game. */

/* ---------------------------------------------------------------- toasts (all pages) */
#bp-toasts {
  all: unset;
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 2147483000; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 12px; pointer-events: none;
}
#bp-toasts .bp-toast, #bp-toasts .bp-toast * { all: unset; box-sizing: border-box; }
#bp-toasts .bp-toast {
  display: block; max-width: min(100%, 440px); padding: 8px 14px; border-radius: 18px;
  background: #1f1a17; color: #f1e9e1; border: 1px solid #3a302a;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  font: 500 13.5px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-align: center; -webkit-font-smoothing: antialiased;
  pointer-events: none; animation: bp-in .22s ease-out both;
}
#bp-toasts .bp-toast.bp-out { animation: bp-out .22s ease-in both; }
#bp-toasts .bp-toast-text { display: inline; }
#bp-toasts .bp-toast-link {
  display: inline; margin-left: .3em; color: #e0a96d; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; pointer-events: auto; padding: 4px 0;
}
#bp-toasts .bp-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
  border-radius: 16px; padding: 10px 12px; pointer-events: auto; border-color: #e0a96d; font-size: 15px;
}
#bp-toasts .bp-invite .bp-toast-text { display: block; font-weight: 600; }
#bp-toasts .bp-acts { display: flex; gap: 8px; }
#bp-toasts .bp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 76px;
  padding: 0 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px;
  background: #2a231f; color: #f1e9e1; border: 1px solid #3a302a; -webkit-tap-highlight-color: transparent;
}
#bp-toasts .bp-btn.bp-yes { background: #e0a96d; color: #14110f; border-color: #e0a96d; }
#bp-toasts .bp-btn:disabled { opacity: .6; cursor: default; }
#bp-toasts .bp-btn[hidden] { display: none; }
#bp-toasts .bp-btn:focus-visible, #bp-toasts .bp-toast-link:focus-visible { outline: 2px solid #e0a96d; outline-offset: 2px; }
@keyframes bp-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes bp-out { to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { #bp-toasts .bp-toast, #bp-toasts .bp-toast.bp-out { animation-duration: .01s; } }

/* ---------------------------------------------------------------- account area (hub + platform pages) */
.bp-acct { position: relative; display: inline-flex; align-items: center; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bp-acct[hidden], .bp-acct [hidden] { display: none !important; }
.bp-acct .bp-signin {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #3a302a; background: #1f1a17; color: #f1e9e1; text-decoration: none; font-weight: 600;
}
.bp-acct .bp-signin:hover, .bp-acct .bp-signin:focus-visible { border-color: #e0a96d; outline: none; }
.bp-acct .bp-me {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 200px;
  padding: 3px 14px 3px 3px; border-radius: 999px; border: 1px solid #3a302a; background: #1f1a17;
  color: #f1e9e1; font: inherit; font-weight: 600; cursor: pointer;
}
.bp-acct .bp-me:hover, .bp-acct .bp-me:focus-visible, .bp-acct .bp-me[aria-expanded="true"] { border-color: #e0a96d; outline: none; }
.bp-acct .bp-me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-acct .bp-dot { position: absolute; top: 1px; left: 26px; width: 11px; height: 11px; border-radius: 50%; background: #e0a96d; border: 2px solid #1f1a17; }
.bp-acct .bp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 190px; padding: 6px;
  background: #1f1a17; border: 1px solid #3a302a; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column;
}
.bp-acct .bp-menu a, .bp-acct .bp-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: #f1e9e1; text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.bp-acct .bp-menu a:hover, .bp-acct .bp-menu button:hover, .bp-acct .bp-menu a:focus-visible, .bp-acct .bp-menu button:focus-visible { background: #2a231f; outline: none; }
.bp-acct .bp-menu button { color: #a8998c; }
.bp-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e0a96d; color: #14110f; font-size: 13px; font-weight: 700; }

/* chip: the level number sits on the avatar's lower right */
.bp-acct .bp-me-av { position: relative; display: inline-flex; flex: none; }
.bp-acct .bp-me-lv {
  position: absolute; right: -6px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: #14110f; color: #f0c48f; border: 1.5px solid #e0a96d; box-sizing: border-box;
  font: 700 10.5px/15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; font-variant-numeric: tabular-nums;
}
.bp-acct .bp-me-lv.bp-me-lv3 { right: -10px; height: 16px; padding: 0 2px; font-size: 9px; line-height: 13px; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- avatars, level badge, looks (platform pages only) */
.bp-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 32px; height: 32px; border-radius: 50%; color: #14110f; background: #f28b6e; font-weight: 700; font-size: 15px; line-height: 1;
}
.bp-av-big { width: 56px; height: 56px; font-size: 24px; }
.bp-av svg { display: block; width: 64%; height: 64%; }
.bp-av.bp-c-coral { background: #f28b6e; }
.bp-av.bp-c-teal { background: #4dbdae; }
.bp-av.bp-c-gold { background: #e8c35a; }
.bp-av.bp-c-violet { background: #b59ce0; }
.bp-av.bp-c-sky { background: #6db6ec; }
.bp-av.bp-c-leaf { background: #8fca6b; }
.bp-av.bp-c-rose { background: #f08fb5; }
.bp-av.bp-c-ink { background: #2c3858; color: #eef1fa; box-shadow: inset 0 0 0 1.5px #5b6f9c; }
.bp-av.bp-c-sunset { background: linear-gradient(140deg, #f7cf5c 0%, #f0845c 52%, #c9557f 100%); }
.bp-av.bp-c-aurora { background: linear-gradient(140deg, #62e3b0 0%, #58b4e6 50%, #a47be8 100%); }
.bp-av.bp-c-obsidian { background: radial-gradient(circle at 32% 26%, #5d5775 0%, #25212f 55%, #0e0c13 100%); color: #ece6ff; box-shadow: inset 0 0 0 1.5px #6e668f; }
.bp-av.bp-c-prism { background: linear-gradient(135deg, #ff8a8a 0%, #ffc56e 20%, #f3ec78 40%, #86e39a 60%, #74c6f6 80%, #b890f2 100%); }

.bp-lv {
  display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: 999px; box-sizing: border-box;
  background: rgba(224, 169, 109, .13); color: #f0c48f; border: 1px solid rgba(224, 169, 109, .38);
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* banners: the pattern is a ::before layer tinted with --bp-c (the avatar colour) */
.bp-bnbg { position: relative; isolation: isolate; --bp-c: #f28b6e; }
.bp-bnbg::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.bp-bnbg.bp-bn-plain::before { background: linear-gradient(115deg, var(--bp-c) 0%, transparent 92%); opacity: .42; }
.bp-bnbg.bp-bn-stripes::before { background: repeating-linear-gradient(-45deg, var(--bp-c) 0 9px, transparent 9px 21px); opacity: .24; }
.bp-bnbg.bp-bn-checks::before {
  background: conic-gradient(var(--bp-c) 25%, transparent 0 50%, var(--bp-c) 0 75%, transparent 0) 0 0 / 30px 30px; opacity: .24;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .25) 20%, #000 90%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, .25) 20%, #000 90%);
}
.bp-bnbg.bp-bn-stars::before {
  background:
    radial-gradient(circle at 30% 40%, #fff6e0 0 1.3px, transparent 2.2px) 0 0 / 71px 53px,
    radial-gradient(circle at 70% 80%, #fff6e0 0 .9px, transparent 1.6px) 17px 9px / 43px 61px,
    radial-gradient(circle at 50% 50%, #ffe7b0 0 1.9px, transparent 3px) 29px 21px / 97px 79px,
    radial-gradient(ellipse 75% 130% at 100% 0%, var(--bp-c), transparent 70%);
  opacity: .55;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .15) 30%, #000 85%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, .15) 30%, #000 85%);
}
.bp-bnbg.bp-bn-aurora::before {
  background:
    radial-gradient(ellipse 55% 110% at 12% 0%, #3fd6a5, transparent 70%),
    radial-gradient(ellipse 60% 110% at 55% 100%, #4f8fe8, transparent 70%),
    radial-gradient(ellipse 50% 110% at 95% 10%, #b070e8, transparent 70%);
  opacity: .5;
}

.bp-bnbg.bp-bn-galaxy::before {
  background:
    radial-gradient(circle at 30% 40%, #fff6e0 0 1.1px, transparent 1.9px) 0 0 / 53px 41px,
    radial-gradient(circle at 60% 70%, #d9d0ff 0 .8px, transparent 1.5px) 13px 5px / 37px 47px,
    radial-gradient(ellipse 45% 35% at 72% 45%, rgba(255, 236, 214, .5), transparent 70%),
    radial-gradient(ellipse 70% 90% at 75% 40%, #7a4fe0, transparent 70%),
    radial-gradient(ellipse 60% 110% at 25% 100%, #2c63d6, transparent 70%),
    radial-gradient(ellipse 50% 80% at 100% 100%, #d0469c, transparent 70%);
  opacity: .62;
}
.bp-hero.bp-bn-gilded { border-color: #b98c3e; }
.bp-bn-sw.bp-bn-gilded { box-shadow: inset 0 0 0 1px #b98c3e; }
.bp-bnbg.bp-bn-gilded::before {
  background: linear-gradient(115deg, #7a5418 0%, #e6bf62 22%, #8d6420 42%, #f1d58a 66%, #a47628 86%, #6d4a14 100%);
  opacity: .42; box-shadow: inset 0 0 0 3px rgba(241, 213, 138, .35);
}

/* profile header */
.bp-hero {
  display: flex; align-items: center; gap: 16px; margin: 20px 0 0; min-width: 0; color: #f1e9e1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.bp-hero:not(.bp-bn-none) { padding: 20px 18px; border-radius: 18px; background: #1f1a17; border: 1px solid #3a302a; overflow: hidden; }
.bp-hero .bp-av-big { width: 64px; height: 64px; font-size: 27px; box-shadow: 0 0 0 3px rgba(20, 17, 15, .55); }
.bp-hero .bp-av-big.bp-c-ink { box-shadow: inset 0 0 0 2px #5b6f9c, 0 0 0 3px rgba(20, 17, 15, .55); }
.bp-hero-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bp-hero-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.bp-hero-h { margin: 0; font-size: clamp(24px, 7vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
.bp-hero .bp-title { display: block; margin-top: 2px; color: #f0c48f; font-weight: 600; font-size: 15px; }
.bp-hero-sub { display: block; font-size: 14px; color: #b3a497; margin-top: 2px; }
.bp-hero:not(.bp-bn-none) .bp-hero-sub { color: #c8bbaf; }

/* XP bar */
.bp-xp { display: block; min-width: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bp-xp-label { display: block; font-size: 14px; color: #a8998c; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.bp-xp-track { display: block; height: 8px; border-radius: 4px; background: #2a231f; box-shadow: inset 0 0 0 1px #3a302a; overflow: hidden; }
.bp-xp-fill { display: block; height: 100%; min-width: 4px; border-radius: 4px; background: linear-gradient(90deg, #d7985a, #f0c48f); }
.bp-xp-max .bp-xp-label { color: #f0c48f; font-weight: 600; }
.bp-xp-max .bp-xp-fill { background: linear-gradient(90deg, #b98c3e, #f3d98f 50%, #b98c3e); }

/* level-up banner (hub and platform pages) */
.bp-lvup {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin: 0 0 22px; padding: 14px 48px 14px 14px;
  border-radius: 16px; border: 1px solid #e0a96d; color: #f1e9e1; box-sizing: border-box;
  background: linear-gradient(120deg, rgba(224, 169, 109, .2), rgba(224, 169, 109, .04) 70%), #1f1a17;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; animation: bp-in .3s ease-out both;
}
.bp-lvup-medal {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8dcb6, #e0a96d 58%, #b77f47); color: #14110f; font-weight: 800; font-size: 19px;
  box-shadow: 0 0 0 3px rgba(224, 169, 109, .22); font-variant-numeric: tabular-nums;
}
.bp-lvup-medal.bp-lvup-medal3 { font-size: 14px; letter-spacing: -.02em; }
.bp-lvup-text { flex: 1 1 200px; min-width: 0; }
.bp-lvup-text strong { font-size: 17px; }
.bp-lvup .bp-lvup-go {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #e0a96d;
  background: #e0a96d; color: #14110f; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bp-lvup .bp-lvup-go:hover, .bp-lvup .bp-lvup-go:focus-visible { filter: brightness(1.07); outline: 2px solid #f0c48f; outline-offset: 2px; }
.bp-lvup .bp-lvup-x {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none;
  color: #a8998c; font: 22px/1 system-ui, sans-serif; cursor: pointer;
}
.bp-lvup .bp-lvup-x:hover, .bp-lvup .bp-lvup-x:focus-visible { color: #f1e9e1; background: rgba(255, 255, 255, .06); outline: none; }

/* Customise sheet */
html.bp-noscroll, html.bp-noscroll body { overflow: hidden; }
.bp-sheet-back {
  position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 6, 5, .62); animation: bp-fade .18s ease-out both;
}
.bp-sheet {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
  background: #1f1a17; color: #f1e9e1; border: 1px solid #3a302a; border-bottom: 0; border-radius: 20px 20px 0 0;
  padding: 0 16px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); outline: none;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; animation: bp-up .24s ease-out both;
}
.bp-sheet * { box-sizing: border-box; }
@media (min-width: 600px) {
  .bp-sheet-back { align-items: center; padding: 24px; }
  .bp-sheet { border-radius: 20px; border-bottom: 1px solid #3a302a; }
}
.bp-sheet-top { position: sticky; top: 0; z-index: 2; background: #1f1a17; margin: 0 -16px; padding: 14px 16px 10px; }
.bp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.bp-sheet h2.bp-sheet-title { margin: 0; font-size: 20px; font-weight: 700; color: #f1e9e1; }
.bp-sheet .bp-sheet-x {
  width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: #a8998c;
  font: 24px/1 system-ui, sans-serif; cursor: pointer;
}
.bp-sheet .bp-sheet-x:hover, .bp-sheet .bp-sheet-x:focus-visible { color: #f1e9e1; background: #2a231f; outline: none; }
.bp-sheet-preview .bp-hero { margin: 0; padding: 14px; gap: 14px; }
.bp-sheet-preview .bp-hero.bp-bn-none { padding: 14px; border-radius: 18px; border: 1px solid #3a302a; background: #1f1a17; }
.bp-sheet-preview .bp-av-big { width: 56px; height: 56px; font-size: 24px; }
.bp-sheet-preview .bp-hero-h { font-size: 21px; }
.bp-sheet-level { margin: 10px 0 0; }
.bp-sheet-level .bp-xp-label { font-size: 13px; margin-bottom: 5px; }
.bp-sheet-wait { color: #a8998c; text-align: center; padding: 28px 0; margin: 0; }
.bp-look-row { padding: 6px 0 4px; }
.bp-sheet h3.bp-look-h { margin: 8px 0 8px; font-size: 14px; font-weight: 600; color: #a8998c; }
.bp-look-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-sheet .bp-opt {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; padding: 2px; margin: 0;
  border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bp-sheet .bp-opt .bp-av { width: 40px; height: 40px; font-size: 17px; transition: box-shadow .12s; }
.bp-sheet .bp-opt .bp-av.bp-c-ink { box-shadow: inset 0 0 0 1.5px #5b6f9c; }
.bp-sheet .bp-opt[aria-checked="true"] .bp-av, .bp-sheet .bp-opt[aria-checked="true"] .bp-bn-sw { box-shadow: 0 0 0 2px #1f1a17, 0 0 0 4px #e0a96d; }
.bp-sheet .bp-opt:focus-visible { outline: 2px solid #f0c48f; outline-offset: 1px; }
.bp-sheet .bp-opt-cap { display: block; min-height: 14px; font-size: 11px; line-height: 14px; color: #8f8176; white-space: nowrap; }
.bp-sheet .bp-locked .bp-av, .bp-sheet .bp-locked .bp-bn-sw { opacity: .32; filter: grayscale(.85); }
.bp-sheet .bp-locked { cursor: default; }
.bp-bn-sw {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 40px; border-radius: 10px; overflow: hidden;
  background: #2a231f; box-shadow: inset 0 0 0 1px #3a302a; font-size: 12px; color: #a8998c;
}
.bp-sheet .bp-opt-chip {
  flex-direction: row; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px; background: #2a231f;
  box-shadow: inset 0 0 0 1px #3a302a; font-weight: 600; font-size: 14px;
}
.bp-sheet .bp-opt-chip[aria-checked="true"] { box-shadow: inset 0 0 0 2px #e0a96d; background: rgba(224, 169, 109, .14); }
.bp-sheet .bp-opt-chip.bp-locked { color: #7d7067; background: none; }
.bp-sheet .bp-opt-chip .bp-opt-cap { min-height: 0; font-weight: 500; }
.bp-sheet-foot { position: sticky; bottom: 0; z-index: 2; background: #1f1a17; margin: 8px -16px 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #3a302a; }
.bp-sheet-msg { margin: 0 0 8px; min-height: 0; font-size: 14px; color: #f0c48f; }
.bp-sheet-msg:empty { display: none; }
.bp-sheet-btns { display: flex; gap: 10px; }
.bp-sheet .bp-sheet-btns button {
  flex: 1; min-height: 46px; border-radius: 999px; border: 1px solid #3a302a; background: #2a231f; color: #f1e9e1;
  font: inherit; font-weight: 600; cursor: pointer;
}
.bp-sheet .bp-sheet-btns .bp-sheet-save { background: #e0a96d; border-color: #e0a96d; color: #14110f; }
.bp-sheet .bp-sheet-btns button:disabled { opacity: .5; cursor: default; }
.bp-sheet .bp-sheet-btns button:focus-visible { outline: 2px solid #f0c48f; outline-offset: 2px; }
@keyframes bp-fade { from { opacity: 0; } }
@keyframes bp-up { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .bp-lvup, .bp-sheet-back, .bp-sheet { animation-duration: .01s; } }

/* ---------------------------------------------------------------- platform pages (account, friends, profile) */
body.bp-page {
  --bg: #14110f; --panel: #1f1a17; --panel-2: #2a231f; --line: #3a302a;
  --ink: #f1e9e1; --muted: #a8998c; --accent: #e0a96d; --good: #7fcf87; --bad: #f19a8c;
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; touch-action: manipulation;
}
body.bp-page * { box-sizing: border-box; }
body.bp-page [hidden] { display: none !important; }
.bp-page .bp-wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 64px; }
.bp-page .bp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.bp-page .bp-back { color: var(--muted); text-decoration: none; font-size: 14px; padding: 10px 0; }
.bp-page .bp-back:hover { color: var(--accent); }
.bp-page h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; margin: 20px 0 6px; letter-spacing: -0.01em; }
.bp-page h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 30px 0 10px; }
.bp-page p { margin: 0 0 12px; }
.bp-page .bp-lede { color: var(--muted); margin: 0 0 20px; }
.bp-page .bp-muted { color: var(--muted); }
.bp-page a { color: var(--accent); }
.bp-page .bp-loading { color: var(--muted); padding: 40px 0; text-align: center; }

.bp-page .bp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.bp-page .bp-card + .bp-card { margin-top: 12px; }

/* buttons */
.bp-page .bp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bp-page .bp-button:hover, .bp-page .bp-button:focus-visible { border-color: var(--accent); outline: none; }
.bp-page .bp-button.bp-primary { background: var(--accent); border-color: var(--accent); color: #14110f; }
.bp-page .bp-button.bp-primary:hover { filter: brightness(1.06); }
.bp-page .bp-button.bp-ghost { background: none; }
.bp-page .bp-button.bp-small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.bp-page .bp-button.bp-wide { width: 100%; }
.bp-page .bp-button:disabled { opacity: .55; cursor: default; }
.bp-page .bp-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* forms */
.bp-page .bp-tabs { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 0 0 20px; }
.bp-page .bp-tabs button {
  flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: inherit; font-weight: 600; cursor: pointer;
}
.bp-page .bp-tabs button[aria-selected="true"] { background: var(--panel-2); color: var(--ink); }
.bp-page .bp-field { margin: 0 0 14px; }
.bp-page .bp-field label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.bp-page .bp-field label .bp-opt { color: var(--muted); font-weight: 400; }
.bp-page .bp-input {
  display: block; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.bp-page .bp-input:focus { outline: none; border-color: var(--accent); }
.bp-page .bp-field.bp-invalid .bp-input { border-color: var(--bad); }
.bp-page .bp-hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.bp-page .bp-field.bp-invalid .bp-hint { display: none; }
.bp-page .bp-error { font-size: 14px; color: var(--bad); margin: 6px 0 0; }
.bp-page .bp-form-error {
  background: rgba(241, 154, 140, .1); border: 1px solid rgba(241, 154, 140, .35); color: var(--ink);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 15px;
}
.bp-page .bp-form-error a { font-weight: 600; }
.bp-page .bp-note {
  border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 15px;
}
.bp-page .bp-legal { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.bp-page .bp-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.bp-page .bp-legal a:hover, .bp-page .bp-legal a:focus-visible { color: var(--accent); }
/* Delete account: apart from everything else, at the bottom of the account page */
.bp-page .bp-danger-zone { margin: 48px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.bp-page .bp-danger-zone h2 { margin-top: 0; }
.bp-page .bp-button.bp-danger { color: var(--bad); border-color: rgba(241, 154, 140, .45); background: none; }
.bp-page .bp-button.bp-danger:hover, .bp-page .bp-button.bp-danger:focus-visible { border-color: var(--bad); }
.bp-page .bp-danger-card { border-color: rgba(241, 154, 140, .45); }
.bp-page .bp-danger-text { color: var(--ink); font-weight: 600; }
.bp-page .bp-button.bp-danger-solid { background: #c9574a; border-color: #c9574a; color: #fff; }
.bp-page .bp-button.bp-danger-solid:hover, .bp-page .bp-button.bp-danger-solid:focus-visible { background: #d8665a; border-color: #f19a8c; }
/* The sign-up honeypot: off-screen for people, still a real field for bots. Not display:none. */
.bp-page .bp-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bp-page .bp-inline { display: flex; gap: 8px; }
.bp-page .bp-inline .bp-input { flex: 1; min-width: 0; }

/* lists (friends, requests, games) */
.bp-page .bp-list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bp-page .bp-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; }
.bp-page .bp-item + .bp-item { border-top: 1px solid var(--line); }
.bp-page a.bp-item-main, .bp-page .bp-item-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.bp-page a.bp-item-main:hover .bp-name { color: var(--accent); }
.bp-page .bp-who { position: relative; flex: none; }
.bp-page .bp-who .bp-av { width: 40px; height: 40px; font-size: 17px; }
.bp-page .bp-online-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--good); border: 2px solid var(--panel); }
.bp-page .bp-text { min-width: 0; flex: 1; }
.bp-page .bp-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-page .bp-sub { display: block; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-page .bp-sub.bp-live { color: var(--good); }
.bp-page .bp-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bp-page .bp-name-row .bp-name { min-width: 0; }
.bp-page .bp-sub.bp-mutual { font-size: 13px; }
.bp-page .bp-item-acts { display: flex; gap: 8px; flex: none; }
.bp-page .bp-empty { color: var(--muted); padding: 16px 14px; margin: 0; }
/* Friends: "Invite to play" opens the online games under the friend */
.bp-page .bp-item.bp-has-pick { flex-wrap: wrap; row-gap: 10px; }
.bp-page .bp-game-pick { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-left: 52px; }
.bp-page .bp-game-pick[hidden] { display: none; }
.bp-page .bp-chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 19px;
  background: var(--panel-2, rgba(255, 255, 255, .08)); color: inherit; text-decoration: none; font-weight: 600; font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.bp-page .bp-chip:hover, .bp-page .bp-chip:focus-visible { box-shadow: inset 0 0 0 2px var(--accent, #e0a96d); }
@media (max-width: 480px) {
  /* rows with two buttons: the buttons go under the name on phones */
  .bp-page .bp-item.bp-stack { flex-wrap: wrap; row-gap: 10px; }
  .bp-page .bp-item.bp-stack .bp-item-acts { width: 100%; padding-left: 52px; }
}

.bp-page .bp-link-box { display: flex; align-items: center; gap: 8px; }
.bp-page .bp-link-box code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}

/* profile */
.bp-page .bp-lvup { margin: 16px 0 0; }
.bp-page .bp-xp-row { display: flex; align-items: flex-end; gap: 14px; margin: 14px 0 0; }
.bp-page .bp-xp-row .bp-xp { flex: 1; }
.bp-page .bp-xp-row .bp-button { flex: none; }
.bp-page .bp-person { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; }
.bp-page .bp-person h1 { margin: 0; font-size: clamp(24px, 7vw, 32px); overflow-wrap: anywhere; }
.bp-page .bp-person .bp-sub { white-space: normal; }
.bp-page .bp-big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; }
.bp-page .bp-big div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.bp-page .bp-big strong { display: block; font-size: clamp(40px, 13vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bp-page .bp-big span { display: block; color: var(--muted); margin-top: 6px; font-size: 15px; }
.bp-page .bp-big .bp-wins strong { color: var(--accent); }
.bp-page .bp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.bp-page .bp-modes div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; min-width: 0; }
.bp-page .bp-modes b { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 4px; white-space: nowrap; }
.bp-page .bp-modes span { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.bp-page .bp-count { flex: none; text-align: right; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bp-page .bp-count b { color: var(--ink); font-weight: 600; }
.bp-page .bp-recent { list-style: none; margin: 0; padding: 0; }
.bp-page .bp-recent li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.bp-page .bp-recent li:last-child { border-bottom: 0; }
.bp-page .bp-res { font-weight: 600; }
.bp-page .bp-res.bp-win { color: var(--accent); }
.bp-page .bp-center { text-align: center; padding: 28px 16px; }
.bp-page .bp-center .bp-row-actions { justify-content: center; }
.bp-page .bp-pair { display: flex; justify-content: center; margin: 12px 0 4px; }
.bp-page .bp-pair .bp-av + .bp-av { margin-left: -12px; box-shadow: 0 0 0 3px var(--bg); }
/* Block / Unblock at the bottom of someone's profile */
.bp-page .bp-blockrow { margin: 40px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.bp-page .bp-blockrow .bp-hint { margin: 0 0 10px; font-size: 14px; }
.bp-page .bp-blockrow .bp-block-q { color: var(--ink); }
.bp-page .bp-blockrow .bp-inline { flex-wrap: wrap; }

/* ---------------------------------------------------------------- chat dock (DOCK.md)
   A bubble on every page, games included. Every selector is scoped to .bp-dock, so a game's
   own styles can't reach it and it can't reach the game. Names and text only: no avatars,
   no level badges, no looks (levels never touch games). */
.bp-dock {
  --bp-dock-lift: 62px;   /* how far the bubble rises over a game's tutorial chip (platform.js reads this) */
  position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 2147481000; display: block; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f1e9e1;
}
.bp-dock[hidden], .bp-dock [hidden] { display: none !important; }
/* a game whose room-chat button floats in the same corner: the bubble steps aside */
.bp-dock.bp-dock-shift { right: max(76px, calc(env(safe-area-inset-right, 0px) + 76px)); }
/* a game's first-visit tutorial chip runs along the bottom: the bubble lifts above it */
.bp-dock.bp-dock-lift { bottom: calc(var(--bp-dock-lift) + max(14px, env(safe-area-inset-bottom, 0px))); }
.bp-dock .bp-dock-btn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  margin-left: auto; border-radius: 50%; border: 1px solid #3a302a; background: #1f1a17; color: #f1e9e1;
  font: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .34); -webkit-tap-highlight-color: transparent;
}
.bp-dock .bp-dock-btn:hover, .bp-dock .bp-dock-btn:focus-visible { border-color: #e0a96d; outline: none; }
.bp-dock .bp-dock-ico { font-size: 22px; line-height: 1; }
.bp-dock .bp-dock-count {
  position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: #e0a96d; color: #14110f; border: 2px solid #1f1a17; box-sizing: border-box;
  font: 700 12px/17px system-ui, -apple-system, sans-serif; text-align: center; font-variant-numeric: tabular-nums;
}
.bp-dock .bp-dock-panel {
  position: fixed; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
  height: min(78vh, 620px); box-sizing: border-box; background: #1f1a17; border: 1px solid #3a302a; border-bottom: 0;
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); overflow: hidden;
}
@media (min-width: 600px) {
  .bp-dock .bp-dock-panel { right: 0; left: auto; bottom: 66px; width: 360px; height: 70vh; max-height: 620px; border-radius: 18px; border-bottom: 1px solid #3a302a; }
}
.bp-dock .bp-dock-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid #3a302a; }
.bp-dock .bp-dock-tabs { display: flex; gap: 4px; flex: none; }
.bp-dock .bp-dock-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid transparent; background: none; color: #a8998c; font: inherit; font-weight: 600; cursor: pointer;
}
.bp-dock .bp-dock-tab[aria-selected="true"] { background: #2a231f; color: #f1e9e1; border-color: #3a302a; }
.bp-dock .bp-dock-tab:focus-visible { outline: 2px solid #e0a96d; outline-offset: 1px; }
.bp-dock .bp-dock-tabcount {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #e0a96d; color: #14110f; font-size: 12px; font-weight: 700;
}
.bp-dock .bp-dock-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-align: right; }
.bp-dock .bp-dock-back, .bp-dock .bp-dock-x {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #a8998c;
  font: 20px/1 system-ui, sans-serif; cursor: pointer;
}
.bp-dock .bp-dock-x { font-size: 24px; }
.bp-dock .bp-dock-back:hover, .bp-dock .bp-dock-x:hover, .bp-dock .bp-dock-back:focus-visible, .bp-dock .bp-dock-x:focus-visible { color: #f1e9e1; background: #2a231f; outline: none; }
.bp-dock .bp-dock-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; }
.bp-dock .bp-dock-note { color: #a8998c; text-align: center; padding: 28px 8px; margin: 0; }
.bp-dock .bp-dock-msg { margin: 0 0 10px; max-width: 88%; }
.bp-dock .bp-dock-msg.bp-dock-mine { margin-left: auto; text-align: right; }
.bp-dock .bp-dock-who { display: block; font-size: 12px; color: #a8998c; margin: 0 0 2px; }
.bp-dock .bp-dock-text {
  margin: 0; padding: 7px 11px; border-radius: 14px; background: #2a231f; border: 1px solid #3a302a;
  overflow-wrap: anywhere; display: inline-block; text-align: left;
}
.bp-dock .bp-dock-mine .bp-dock-text { background: rgba(224, 169, 109, .14); border-color: rgba(224, 169, 109, .38); }
.bp-dock .bp-dock-thread {
  position: relative; display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 10px 44px 10px 12px;
  border-radius: 12px; border: 1px solid #3a302a; background: #2a231f; color: inherit; font: inherit; cursor: pointer;
}
.bp-dock .bp-dock-thread:hover, .bp-dock .bp-dock-thread:focus-visible { border-color: #e0a96d; outline: none; }
.bp-dock .bp-dock-tname { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-dock .bp-dock-tlast { display: block; font-size: 14px; color: #a8998c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-dock .bp-dock-tlast.bp-dock-new { color: #f1e9e1; font-weight: 600; }
.bp-dock .bp-dock-tbadge {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center;
  justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e0a96d;
  color: #14110f; font-size: 13px; font-weight: 700;
}
.bp-dock .bp-dock-compose { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #3a302a; }
.bp-dock .bp-dock-row { display: flex; gap: 8px; }
.bp-dock .bp-dock-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #3a302a;
  background: #14110f; color: #f1e9e1; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.bp-dock .bp-dock-input:focus { outline: none; border-color: #e0a96d; }
.bp-dock .bp-dock-send {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #e0a96d;
  background: #e0a96d; color: #14110f; font: inherit; font-weight: 600; cursor: pointer;
}
.bp-dock .bp-dock-send:disabled { opacity: .55; cursor: default; }
.bp-dock .bp-dock-hint { margin: 6px 2px 0; font-size: 13px; color: #a8998c; }
.bp-dock .bp-dock-err { margin: 6px 2px 0; font-size: 14px; color: #f19a8c; }
.bp-dock .bp-dock-gate { margin: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #3a302a; color: #a8998c; font-size: 15px; }
/* On a phone the panel fills the bottom of the screen, so the bubble would sit on top of the
   composer. While the panel is open the bubble steps out of the way; the × in the panel closes it. */
@media (max-width: 599px) { .bp-dock.bp-dock-on .bp-dock-btn { display: none; } }
@media (prefers-reduced-motion: no-preference) { .bp-dock .bp-dock-panel { animation: bp-up .2s ease-out both; } }

/* ---------------------------------------------------------------- ratings (RATINGS.md)
   Your own stars, and only ever your own: no average, no count, no "rated by N" anywhere a player
   can see. The hub's cards are links, so the row sits in a wrapper beside the card, not inside it. */
.bp-rated { display: flex; flex-direction: column; min-width: 0; }
.bp-rated > .card { flex: 1; }
.bp-rate-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px 0; }
.bp-rate-lab { font-size: 12px; color: var(--muted); }
.bp-stars { display: inline-flex; gap: 1px; }
.bp-star {
  min-width: 34px; min-height: 34px; padding: 0 2px; border: 0; background: none;
  font: inherit; font-size: 19px; line-height: 1; color: var(--line); cursor: pointer;
  border-radius: 8px; transition: color .12s, transform .12s;
}
.bp-star:hover { color: var(--accent); }
.bp-star:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--accent); }
.bp-star:active { transform: scale(.92); }
.bp-star-on { color: var(--accent); }
.bp-stars-busy { opacity: .55; pointer-events: none; }
.bp-item .bp-rate-cell { display: inline-flex; align-items: center; }
.bp-item.bp-stack { flex-wrap: wrap; }