/* ===================== BOING SOCIAL — shared look =====================
   The site-wide top bar, phone tabs and menu (every page but the games), plus the look of the
   feed, messages, groups, profile, planner, market and mod pages. */
:root{--bg:#0b1018;--bg2:#0f1621;--card:#131c29;--card2:#172234;--line:#22304a;--line2:#2a3a55;--ink:#e9f2ec;--muted:#93a9bd;--dim:#6b7f95;
 --frog:#58c96e;--frog2:#7bed9f;--frogbg:#14311f;--gold:#ffd873;--red:#ff6b81;--blue:#5aa9e6;--r:16px;}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.bs{background:var(--bg);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;min-height:100vh;font-size:15px;line-height:1.5;}
body.bs h1,body.bs h2,body.bs h3,.bs-display{font-family:'Baloo 2',cursive;line-height:1.1;}
body.bs a{text-decoration:none;}body.bs a:where(:not(.bs-btn)){color:inherit;}
body.bs button{font-family:inherit;cursor:pointer;}
.bs-hide{display:none!important;}
.bs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---- top bar ----
   The bar, tabs, menus and dialogs carry their own colours, so they look the same on pages that
   define different ones (the landing page is light). */
.bs-nav,.bs-tabs,.bs-drop,.bs-menu,.bs-modal,.bs-toasts,.bs-pop{--bg:#0b1018;--card:#131c29;--card2:#172234;--line:#22304a;--line2:#2a3a55;--ink:#e9f2ec;
 --muted:#93a9bd;--dim:#6b7f95;--frog:#58c96e;--frog2:#7bed9f;--frogbg:#14311f;--gold:#ffd873;--red:#ff6b81;--blue:#5aa9e6;
 font-family:'Work Sans',system-ui,sans-serif;color:var(--ink);line-height:1.5;}
.bs-nav a,.bs-tabs a,.bs-drop a{color:inherit;text-decoration:none;}
.bs-nav button,.bs-drop button{font-family:inherit;cursor:pointer;}
.bs-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:calc(62px + env(safe-area-inset-top,0px));
 padding:env(safe-area-inset-top,0px) max(clamp(12px,3vw,32px),env(safe-area-inset-right,0px)) 0 max(clamp(12px,3vw,32px),env(safe-area-inset-left,0px));
 background:rgba(11,16,24,.97);border-bottom:1px solid var(--line);view-transition-name:bs-nav;}
/* Added to the iPhone home screen, BOING runs full screen under the status bar ("black-translucent"), so the bar starts below
   the clock and the camera (safe-area-inset-top). No backdrop blur on the bars: re-blurring the page under a sticky bar on
   every scroll frame is what made scrolling stutter on iPhones. */
.bs-brand{display:flex;align-items:center;gap:9px;font-family:'Baloo 2',cursive;font-weight:800;font-size:20px;letter-spacing:.02em;flex:none;color:#fff;}
.bs-brand img{width:32px;height:32px;border-radius:50%;}
.bs-brand svg{width:39px;height:32px;flex:none;overflow:visible;}
.bs-links{display:flex;align-items:center;gap:2px;margin-left:10px;flex:1;min-width:0;}
.bs-links a,.bs-navmore{padding:7px 12px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:600;white-space:nowrap;position:relative;background:none;border:0;
 display:inline-flex;align-items:center;gap:4px;}
.bs-links a:hover,.bs-navmore:hover{color:#fff;background:#141d2b;}
.bs-links a.on,.bs-navmore.on{color:#fff;background:#16233a;}
.bs-links a.on:after{content:'';position:absolute;left:12px;right:12px;bottom:-12px;height:3px;border-radius:3px 3px 0 0;background:var(--frog);}
.bs-navmore svg{width:15px;height:15px;opacity:.8;}
.bs-navmore[aria-expanded=true] svg{transform:rotate(180deg);}
.bs-links a .bs-badge{position:static;margin-left:5px;vertical-align:1px;}
.bs-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none;}
.bs-ico{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#101826;color:#cfdcea;display:flex;align-items:center;justify-content:center;position:relative;}
.bs-ico:hover{border-color:var(--line2);color:#fff;}
.bs-ico.on{border-color:#2f7a47;color:var(--frog2);}
.bs-ico svg{width:20px;height:20px;}
.bs-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;
 font-size:11px;font-weight:800;line-height:19px;text-align:center;border:2px solid var(--bg);}
.bs-me{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink);background:var(--frogbg);border:1px solid #2f7a47;padding:3px 10px 3px 3px;border-radius:100px;max-width:210px;}
.bs-me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bs-me svg{width:15px;height:15px;flex:none;opacity:.8;}
.bs-me[aria-expanded=true] svg{transform:rotate(180deg);}
.bs-me:hover{border-color:var(--frog);}
.bs-signin{font-weight:700;font-size:14px;color:#dbe7f3;padding:8px 10px;white-space:nowrap;}
.bs-signin:hover{color:#fff;text-decoration:underline;}
.bs-join{display:inline-block;background:var(--frog);color:#0f2a17!important;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;
 border:2px solid #0f2a17;box-shadow:3px 3px 0 rgba(123,237,159,.35);white-space:nowrap;}
.bs-join:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(123,237,159,.5);}
.bs-narrow{display:none;}
/* the menu (More, the avatar, or ☰ on phones) */
.bs-drop{position:fixed;z-index:85;width:300px;max-height:calc(100vh - 80px);overflow:auto;background:#141e2e;border:1px solid var(--line2);border-radius:16px;
 padding:6px;box-shadow:0 22px 60px rgba(0,0,0,.55);animation:bsDrop .14s ease-out;}
@keyframes bsDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bs-drop-t{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:10px 12px 4px;}
.bs-drop-i{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:9px 12px;border-radius:11px;}
.bs-drop-i:hover,.bs-drop-i:focus-visible{background:#1d2a40;outline:none;}
.bs-drop-i.on{background:#16233a;}
.bs-drop-i svg{width:20px;height:20px;flex:none;color:var(--frog2);}
.bs-drop-i b{display:block;font-size:14.5px;font-weight:700;}
.bs-drop-i small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;}
.bs-drop-head{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;margin-bottom:2px;border-bottom:1px solid var(--line);}
.bs-drop-head b{display:block;font-size:16px;}
.bs-drop-head small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:2px;}
.bs-drop-head:hover b{text-decoration:underline;}
.bs-drop-join{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:10px 12px 8px;border-top:1px solid var(--line);margin-top:6px;text-align:center;}
.bs-drop-join small{color:var(--dim);font-size:12px;line-height:1.4;}
.bs-drop.sheet{left:8px;right:8px;top:calc(62px + env(safe-area-inset-top,0px));width:auto;max-height:calc(100dvh - 140px - env(safe-area-inset-top,0px));border-radius:18px;}
/* bottom tabs on phones */
.bs-tabs{display:none;}
@media(max-width:860px){
 .bs-links{display:none;}
 .bs-nav{height:calc(56px + env(safe-area-inset-top,0px));gap:10px;}
 .bs-wide{display:none;}
 .bs-narrow{display:flex;}
 .bs-right .bs-signin{display:none;}
 .bs-drop.sheet{top:calc(60px + env(safe-area-inset-top,0px));}
 .bs-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(11,16,24,.98);view-transition-name:bs-tabs;
  border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left,0px));}
 .bs-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--dim);position:relative;padding:3px 0;}
 .bs-tabs a svg{width:22px;height:22px;}
 .bs-tabs a.on{color:var(--frog2);}
 .bs-tabs a.on:before{content:'';position:absolute;top:-7px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--frog);}
 .bs-tabs .bs-badge{top:-3px;right:calc(50% - 22px);}
 body.bs,body.bs-tabbed{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
 .bs-me span{display:none;}.bs-me{padding:3px 6px 3px 3px;}
 .bs-join{padding:8px 12px;font-size:12px;}
}
@media(max-width:360px){.bs-brand span{display:none;}}

/* ---- layout ---- */
.bs-wrap{max-width:1180px;margin:0 auto;padding:22px clamp(12px,3vw,28px) 60px;}
.bs-3col{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:22px;align-items:start;}
.bs-2col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;}
.bs-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px;}
@media(max-width:1100px){.bs-3col{grid-template-columns:minmax(0,1fr) 300px;}.bs-3col>.bs-left{display:none;}}
@media(max-width:860px){.bs-3col,.bs-2col{grid-template-columns:minmax(0,1fr);}.bs-3col>.bs-right-col,.bs-2col>.bs-right-col{display:none;}
 .bs-wrap{padding-top:14px;}}
.bs-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);}
.bs-pad{padding:18px;}
.bs-h{font-size:22px;}
.bs-sub{color:var(--muted);font-size:14px;}
.bs-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.bs-title h2{font-size:18px;}
.bs-title a,.bs-link{color:var(--frog2);font-size:13px;font-weight:600;}
.bs-empty{text-align:center;color:var(--dim);font-size:14px;padding:26px 14px;line-height:1.6;}
.bs-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px;}
.bs-row{display:flex;align-items:center;gap:10px;}
.bs-grow{flex:1;min-width:0;}
.bs-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bs-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:100px;background:#1c283b;border:1px solid var(--line);color:#9fb6cc;}
.bs-chip.g{background:var(--frogbg);border-color:#2f7a47;color:#9ff0b5;}
.bs-chip.y{background:#2b2414;border-color:#6b5a2a;color:var(--gold);}
.bs-chip svg{width:12px;height:12px;}

/* ---- buttons & inputs ---- */
.bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid transparent;border-radius:11px;padding:9px 16px;font-size:14px;font-weight:700;
 background:var(--frog);color:#0f2a17;white-space:nowrap;transition:filter .12s,transform .12s;}
.bs-btn:hover{filter:brightness(1.08);}
.bs-btn:active{transform:translateY(1px);}
.bs-btn:disabled{opacity:.5;cursor:default;filter:none;transform:none;}
.bs-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2);}
.bs-btn.ghost:hover{background:#16213280;}
.bs-btn.soft{background:#1a2638;color:#dbe7f3;}
.bs-btn.danger{background:transparent;color:var(--red);border-color:#5a2a36;}
.bs-btn.sm{padding:6px 11px;font-size:13px;border-radius:9px;}
.bs-btn.big{padding:13px 22px;font-size:15px;}
.bs-btn svg{width:16px;height:16px;}
.bs-in{width:100%;background:var(--bg2);border:1.5px solid #2a3548;border-radius:12px;color:#fff;font:inherit;font-size:15px;padding:10px 13px;}
.bs-in:focus{outline:none;border-color:var(--frog);}
textarea.bs-in{resize:none;line-height:1.5;display:block;}
select.bs-in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#93a9bd 50%),linear-gradient(135deg,#93a9bd 50%,transparent 50%);
 background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px;}
.bs-label{display:block;font-size:13px;font-weight:600;color:#c3d2e4;margin:14px 0 6px;}
.bs-help{font-size:12.5px;color:var(--dim);margin-top:5px;line-height:1.5;}
.bs-err{color:#ff8fa3;font-size:13.5px;min-height:18px;margin-top:8px;}
.bs-seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;}
.bs-seg button{border:none;background:none;color:var(--muted);font-weight:700;font-size:13.5px;padding:7px 14px;border-radius:9px;position:relative;}
.bs-seg button.on{background:#1d2a40;color:#fff;}
.bs-seg .bs-badge{position:static;display:inline-block;margin-left:5px;border:none;height:17px;line-height:17px;min-width:17px;font-size:10.5px;}
.bs-radio{display:flex;flex-direction:column;gap:8px;}
.bs-radio label{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--bg2);}
.bs-radio label:has(input:checked){border-color:var(--frog);background:#10231a;}
.bs-radio input{margin-top:3px;accent-color:var(--frog);}
.bs-radio b{display:block;font-size:14px;}
.bs-radio small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;}
.bs-switch{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;}
.bs-switch input{width:18px;height:18px;accent-color:var(--frog);}

/* ---- people ---- */
.bs-av{border-radius:50%;background:#182131;flex:none;display:block;object-fit:cover;}
.bs-av.q{display:flex;align-items:center;justify-content:center;color:#4a5b70;font-weight:800;}
.bs-user{display:flex;align-items:center;gap:10px;min-width:0;}
.bs-user b{font-weight:700;}
.bs-user:hover b{text-decoration:underline;}
.bs-person{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:12px;}
.bs-person>.bs-user{flex:1;min-width:0;}
.bs-person+.bs-person{border-top:1px solid #1a2436;}
.bs-person .bs-grow b{display:block;font-size:14.5px;}
.bs-person .bs-grow small{display:block;color:var(--dim);font-size:12.5px;}

/* ---- posts ---- */
.bs-compose{padding:14px 16px;}
.bs-compose textarea{min-height:54px;background:transparent;border:none;padding:6px 2px;font-size:16px;}
.bs-compose textarea:focus{border:none;}
.bs-compose .bs-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px;}
.bs-count{font-size:12px;color:var(--dim);}
.bs-count.over{color:var(--red);}
.bs-post{padding:16px 18px 10px;}
.bs-posts{display:flex;flex-direction:column;gap:14px;}
.bs-post-head{display:flex;align-items:center;gap:11px;}
.bs-post-head .bs-grow{line-height:1.25;}
.bs-post-head small{color:var(--dim);font-size:12.5px;}
.bs-body{white-space:pre-wrap;word-break:break-word;font-size:15.5px;line-height:1.55;margin:10px 0 4px;}
.bs-acts{display:flex;align-items:center;gap:4px;margin:4px -8px 0;}
.bs-act{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;padding:7px 9px;border-radius:9px;}
.bs-act:hover{background:#18233480;color:#fff;}
.bs-act svg{width:18px;height:18px;}
.bs-act.liked{color:var(--red);}
.bs-act.liked svg{fill:var(--red);}
.bs-more{margin-left:auto;}
.bs-comments{border-top:1px solid var(--line);margin:8px -18px 0;padding:10px 18px 4px;background:#111a27;border-radius:0 0 var(--r) var(--r);}
.bs-cmt{display:flex;gap:9px;padding:6px 0;}
.bs-cmt .bs-bub{background:#1a2536;border-radius:12px;padding:7px 11px;min-width:0;}
.bs-cmt .bs-bub b{font-size:13px;}
.bs-cmt .bs-bub div{white-space:pre-wrap;word-break:break-word;font-size:14px;}
.bs-cmt small{display:block;color:var(--dim);font-size:11.5px;margin:2px 0 0 11px;}
.bs-cmt small button{background:none;border:none;color:var(--dim);font-size:11.5px;margin-left:8px;}
.bs-cmt small button:hover{color:#fff;}
.bs-cmt-form{display:flex;gap:8px;padding:8px 0 10px;}
.bs-cmt-form input{border-radius:100px;padding:8px 14px;font-size:14px;}
/* replies (29 Oct 2026): indented under their comment, with a thin line on the left */
.bs-replies{margin-left:39px;padding-left:10px;border-left:2px solid var(--line);}
.bs-replies:empty{display:none;}
.bs-replies.folded>.bs-cmt{display:none;}
.bs-cmt.reply{padding:4px 0;}
.bs-cmt.reply .bs-bub div{font-size:13.5px;}
.bs-cmt.gone{padding-left:39px;}
.bs-cmt.gone .bs-bub{font-style:italic;color:var(--dim);font-size:13px;background:none;border:1px dashed var(--line2);}
.bs-fold{display:block;background:none;border:0;color:var(--blue);font-weight:700;font-size:12.5px;margin:0 0 4px 49px;padding:2px 0;cursor:pointer;}
.bs-fold:hover{text-decoration:underline;}
.bs-cmt-form.reply{padding:4px 0 8px;align-items:center;}
.bs-cmt-form.reply input{padding:6px 12px;font-size:13.5px;}
.bs-cmt-x{padding:6px;}
.bs-cmt-x svg{width:16px;height:16px;}
/* reactions (29 Oct 2026): the button shows yours, the bar above it has all seven, the count on the right shows the top three */
.bs-acts{position:relative;}
.bs-react{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.bs-react .bs-remo{font-size:17px;line-height:1;}
.bs-react.on{color:var(--blue);}
.bs-react.on.r-love,.bs-react.on.r-sad{color:var(--red);}
.bs-react.on.r-boing,.bs-react.on.r-strong{color:var(--frog2);}
.bs-react.on.r-haha,.bs-react.on.r-wow{color:#e0a400;}
.bs-react.pop .bs-remo{animation:bsPop .38s cubic-bezier(.2,1.8,.4,1);}
@keyframes bsPop{0%{transform:scale(.4);}60%{transform:scale(1.35);}100%{transform:scale(1);}}
.bs-rsum{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;padding:6px 8px;border-radius:9px;cursor:pointer;}
.bs-rsum:hover{background:#18233480;color:#fff;}
.bs-rsum-e{display:inline-flex;}
.bs-rsum-e i{font-style:normal;font-size:14px;line-height:1;width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--card2);box-shadow:0 0 0 2px var(--card);}
.bs-rsum-e i+i{margin-left:-5px;}
.bs-rbar{position:absolute;bottom:calc(100% + 4px);z-index:20;display:flex;gap:2px;padding:5px;background:var(--card2);border:1px solid var(--line2);border-radius:100px;
  box-shadow:0 14px 36px rgba(0,0,0,.35);animation:bsIn .14s ease-out;}
.bs-rb{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:50%;cursor:pointer;
  font-size:27px;line-height:1;animation:bsRb .26s cubic-bezier(.2,1.6,.4,1) both;transition:transform .12s;}
.bs-rb span{display:block;transition:transform .12s;}
.bs-rb:hover span,.bs-rb:focus-visible span{transform:scale(1.3) translateY(-3px);}
.bs-rb:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.bs-rb.on{background:color-mix(in srgb,var(--blue) 22%,transparent);}
@keyframes bsRb{from{transform:translateY(10px) scale(.5);opacity:0;}to{transform:none;opacity:1;}}
@media(max-width:400px){.bs-rb{width:37px;height:37px;font-size:24px;}}
.bs-rtabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 6px;}
.bs-rtabs button{background:var(--card2);border:1px solid var(--line2);color:var(--muted);border-radius:100px;padding:5px 11px;font-weight:700;font-size:13px;cursor:pointer;}
.bs-rtabs button.on{color:var(--ink);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.bs-rlist{max-height:min(420px,60vh);overflow:auto;}
.bs-rlist .bs-person .bs-remo{font-size:20px;}

/* ---- chat ---- */
.bs-chat{display:flex;flex-direction:column;min-height:0;}
.bs-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain;}
.bs-day{text-align:center;color:var(--dim);font-size:12px;font-weight:600;margin:12px 0 6px;}
.bs-msg{display:flex;gap:8px;align-items:flex-end;max-width:80%;position:relative;}
.bs-msg.mine{align-self:flex-end;flex-direction:row-reverse;}
.bs-msg .bs-bub{background:#1b2738;border-radius:16px 16px 16px 5px;padding:8px 12px;white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.45;min-width:0;}
.bs-msg.mine .bs-bub{background:#1d5a33;border-radius:16px 16px 5px 16px;color:#effff3;}
.bs-msg .bs-who{font-size:12px;font-weight:700;margin-bottom:1px;}
.bs-msg .bs-t{font-size:10.5px;color:var(--dim);margin:0 4px 3px;white-space:nowrap;opacity:0;transition:opacity .15s;}
.bs-msg.mine .bs-t{color:#8fbf9d;}
.bs-msg:hover .bs-t,.bs-msg.tap .bs-t{opacity:1;}
.bs-msg .bs-flag{background:none;border:none;color:#4a5b70;padding:4px;opacity:0;transition:opacity .15s;align-self:center;}
.bs-msg:hover .bs-flag,.bs-msg.tap .bs-flag{opacity:1;}
.bs-msg .bs-flag:hover{color:var(--red);}
.bs-msg .bs-flag svg{width:15px;height:15px;}
.bs-msg.gap{margin-top:9px;}
/* touch screens: the time and the report button take no room until the message is tapped */
@media(hover:none){.bs-msg{max-width:88%;}.bs-msg .bs-t,.bs-msg .bs-flag{display:none;}
 .bs-msg.tap .bs-t,.bs-msg.tap .bs-flag{display:inline-flex;opacity:1;}}
.bs-msg .bs-avs{width:28px;flex:none;}
.bs-send{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--line);}
.bs-send textarea{border-radius:18px;padding:10px 15px;max-height:140px;min-height:44px;}
.bs-send .bs-btn{border-radius:50%;width:44px;height:44px;padding:0;flex:none;}
.bs-note{font-size:12.5px;color:var(--muted);background:#111a27;border:1px dashed var(--line2);border-radius:12px;padding:10px 12px;line-height:1.5;margin:6px auto 12px;max-width:520px;text-align:center;}

/* ---- menus, dialogs, toasts ---- */
.bs-menu{position:fixed;z-index:80;background:#162033;border:1px solid var(--line2);border-radius:13px;padding:5px;min-width:190px;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.bs-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--ink);padding:9px 11px;border-radius:9px;font-size:14px;}
.bs-menu button:hover{background:#1f2c44;}
.bs-menu button.danger{color:#ff8fa3;}
.bs-menu svg{width:16px;height:16px;flex:none;}
.bs-modal{position:fixed;inset:0;z-index:90;background:rgba(5,9,14,.82);display:flex;align-items:center;justify-content:center;
 padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));animation:bsIn .15s ease-out;}
.bs-modal .bs-box{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--frog);border-radius:18px;width:100%;max-width:440px;
 max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:bsPop .18s ease-out;}
@keyframes bsPop{from{opacity:.4;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.bs-modal h3{font-size:22px;margin-bottom:4px;}
.bs-modal .bs-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
@keyframes bsIn{from{opacity:0}to{opacity:1}}
/* New to Web3? (walletGuide in boing-social.js) */
.bs-modal.bs-top{z-index:10050;}
.bs-modal .bs-box.bs-w3{max-width:560px;}
.bs-w3k{font:800 11.5px 'Work Sans',system-ui,sans-serif;letter-spacing:.16em;color:var(--frog2);margin-bottom:4px;}
.bs-w3s{list-style:none;counter-reset:w3;margin:14px 0 10px;padding:0;display:flex;flex-direction:column;gap:9px;}
.bs-w3s li{counter-increment:w3;position:relative;padding:11px 12px 11px 50px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);}
.bs-w3s li:before{content:counter(w3);position:absolute;left:12px;top:11px;width:27px;height:27px;border-radius:9px;background:var(--gold);color:#3a2a0a;
  font:800 15px/27px 'Baloo 2',cursive;text-align:center;}
.bs-w3s li.warn{border-color:rgba(255,107,129,.5);}
.bs-w3s li.warn:before{background:var(--red);color:#fff;}
.bs-w3s b{display:block;font-size:15px;}
.bs-w3s span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:2px;}
.bs-w3n{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:6px;}
.bs-w3n b{color:var(--ink);}
html[dir=rtl] .bs-w3s li{padding:11px 50px 11px 12px;}html[dir=rtl] .bs-w3s li:before{left:auto;right:12px;}
html[data-theme=light] .bs-w3k{color:#1d8a3a;}
html[data-theme=light] .bs-w3s li.warn{background:#fff3f5;}
.bs-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:95;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px,calc(100vw - 24px));}
@media(max-width:860px){.bs-toasts{bottom:calc(80px + env(safe-area-inset-bottom));}}
.bs-toast{pointer-events:auto;background:#1a283d;border:1px solid var(--line2);border-left:3px solid var(--frog);color:#fff;border-radius:12px;padding:11px 14px;font-size:14px;
 box-shadow:0 12px 34px rgba(0,0,0,.45);display:flex;gap:10px;align-items:center;animation:bsUp .2s ease-out;width:100%;}
.bs-toast.err{border-left-color:var(--red);}
.bs-toast a{color:var(--frog2);font-weight:700;margin-left:auto;white-space:nowrap;}
@keyframes bsUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bs-pop{position:absolute;right:0;top:48px;width:min(380px,calc(100vw - 20px));max-height:min(520px,calc(100vh - 90px));overflow:auto;background:#141e2e;border:1px solid var(--line2);border-radius:16px;
 box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:60;padding:8px;}
.bs-pop h4{font-family:'Baloo 2',cursive;font-size:18px;padding:6px 10px 8px;}
.bs-note-row{display:flex;gap:11px;padding:10px;border-radius:12px;align-items:flex-start;font-size:14px;line-height:1.4;}
.bs-note-row.new{background:#152337;}
.bs-note-row small{display:block;color:var(--dim);font-size:12px;margin-top:2px;}
.bs-note-row .bs-row{margin-top:7px;}
.bs-gate{max-width:560px;margin:40px auto;text-align:center;padding:34px 26px;}
.bs-gate h1{font-size:34px;margin:12px 0 8px;}
.bs-gate p{color:var(--muted);line-height:1.65;}
.bs-gate .bs-btn{margin-top:20px;}
.bs-spin{width:22px;height:22px;border:3px solid #22304a;border-top-color:var(--frog);border-radius:50%;animation:bsSpin .8s linear infinite;margin:30px auto;}
@keyframes bsSpin{to{transform:rotate(360deg)}}
.bs-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);}
.bs-live i{width:8px;height:8px;border-radius:50%;background:#4a5b70;}
.bs-live.on i{background:var(--frog);box-shadow:0 0 0 3px rgba(88,201,110,.2);}

/* ---- photos ---- */
.bs-av.pic{object-fit:cover;}
.bs-addpic{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid transparent;color:var(--frog2);font-weight:700;font-size:13.5px;padding:6px 10px;border-radius:10px;flex:none;}
.bs-addpic:hover{background:#14311f80;border-color:#2f7a47;}
.bs-addpic svg{width:19px;height:19px;}
.bs-addpic.full{opacity:.45;}
.bs-shots{display:none;gap:8px;flex-wrap:wrap;padding:8px 0 4px;}
.bs-shots.on{display:flex;}
.bs-shot{position:relative;width:92px;height:92px;border-radius:12px;overflow:hidden;background:#0f1621;border:1px solid var(--line);flex:none;animation:bsIn .2s ease-out;}
.bs-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.bs-shot-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(8,13,20,.62);color:#e9f2ec;
 font-size:11.5px;font-weight:700;text-align:center;padding:4px;}
.bs-shot-cover .bs-spin{display:block;width:18px;height:18px;border-width:2.5px;margin:0;}
.bs-shot.bad{border-color:#7a2f3d;}
.bs-shot.bad .bs-shot-cover{background:rgba(58,29,38,.9);color:#ff8fa3;}
.bs-shot-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(5,9,14,.78);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;z-index:2;}
.bs-shot-x svg{width:14px;height:14px;}
.bs-shot-x:hover{background:var(--red);}
.bs-foot-l{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;}
/* photos in a post: one big, or a grid of 2 to 4 */
.bs-media{display:grid;gap:3px;border-radius:14px;overflow:hidden;margin:10px 0 4px;background:#0c121b;max-height:560px;}
.bs-media.n1{grid-template-columns:minmax(0,1fr);}
.bs-media.n2{grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:2/1.1;}
.bs-media.n3{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;aspect-ratio:3/2;}
.bs-media.n3 .bs-mi:first-child{grid-row:1/3;}
.bs-media.n4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;aspect-ratio:4/3;}
.bs-mi{position:relative;display:block;padding:0;border:0;background:#0f1621;cursor:zoom-in;overflow:hidden;min-height:0;min-width:0;}
.bs-mi img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.bs-mi:hover img{transform:scale(1.025);}
.bs-mi:focus-visible{outline:3px solid var(--frog);outline-offset:-3px;}
.bs-mi.gone{cursor:default;}
.bs-mi.gone img{visibility:hidden;}
.bs-mi.gone:after{content:'Photo removed';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:13px;}
/* the photo viewer */
.bs-viewer{position:fixed;inset:0;z-index:120;background:rgba(4,7,11,.95);display:flex;align-items:center;justify-content:center;animation:bsIn .15s ease-out;}
.bs-viewer img{max-width:94vw;max-height:88vh;max-height:88dvh;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none;}
.bs-vbtn{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,30,46,.82);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;}
.bs-vbtn:hover{background:#1f2c44;}
.bs-vbtn:focus-visible{outline:3px solid var(--frog);outline-offset:2px;}
.bs-vbtn svg{width:22px;height:22px;}
.bs-vx{top:16px;right:16px;}
.bs-vprev,.bs-vnext{top:50%;margin-top:-23px;}
.bs-vprev{left:16px;}
.bs-vnext{right:16px;}
.bs-vnext svg{transform:rotate(180deg);}
.bs-vcount{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#dbe7f3;font-size:13px;font-weight:700;background:rgba(20,30,46,.82);padding:5px 12px;border-radius:100px;}
html.bs-noscroll{overflow:hidden;}
@media(max-width:640px){.bs-vprev,.bs-vnext{display:none;}.bs-viewer img{max-width:100vw;border-radius:0;}}
/* framing a profile picture or a banner */
.bs-modal .bs-box.bs-cropbox{max-width:480px;}
.bs-modal .bs-box.bs-cropbox.wide{max-width:700px;}
.bs-crop{position:relative;overflow:hidden;background:#0b1018;margin:14px auto 10px;cursor:grab;touch-action:none;border-radius:14px;}
.bs-crop.grab{cursor:grabbing;}
.bs-crop:focus-visible{outline:3px solid var(--frog);outline-offset:3px;}
.bs-crop.round{width:min(320px,100%);aspect-ratio:1;}
.bs-crop.round:after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(5,9,14,.62);border:2px solid rgba(123,237,159,.85);pointer-events:none;}
.bs-crop.wide{width:100%;aspect-ratio:3/1;}
.bs-crop.wide.adpic{aspect-ratio:1.91;}
.bs-crop.wide.square{width:min(360px,100%);aspect-ratio:1;}
.bs-crop.wide:after{content:'';position:absolute;inset:0;border:2px solid rgba(123,237,159,.85);border-radius:14px;pointer-events:none;}
.bs-crop img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.bs-zoomrow{display:flex;align-items:center;gap:10px;color:var(--muted);}
.bs-zoomrow svg{width:18px;height:18px;flex:none;}
.bs-zoom{flex:1;accent-color:var(--frog);}
.bs-spin.sm{display:inline-block;width:14px;height:14px;border-width:2px;margin:0 7px 0 0;vertical-align:-2px;}

/* ---- the scroll bar: green, glossy, with a little grip (Chrome, Edge, Safari; Firefox gets plain green) ---- */
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#0b1018;}
::-webkit-scrollbar-thumb{border-radius:10px;border:2.5px solid #0b1018;box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M1.5 2h5M1.5 5h5M1.5 8h5' stroke='%230f2a17' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat,
  linear-gradient(180deg,#9ff0b5 0%,#58c96e 45%,#2f8a4a 100%);}
::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 10px rgba(123,237,159,.55);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M1.5 2h5M1.5 5h5M1.5 8h5' stroke='%230f2a17' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat,
  linear-gradient(180deg,#c6ffd6 0%,#7bed9f 45%,#3fae5a 100%);}
::-webkit-scrollbar-thumb:active{background:#7bed9f;}
::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(90deg,#9ff0b5 0%,#58c96e 45%,#2f8a4a 100%);}
::-webkit-scrollbar-corner{background:#0b1018;}
html::-webkit-scrollbar{width:15px;}
html::-webkit-scrollbar-thumb{border-width:3px;min-height:48px;}
@supports not selector(::-webkit-scrollbar){html{scrollbar-color:#58c96e #0b1018;}}
/* ---- sponsored cards (ads) ---- */
.bs-ad{border-color:#2f5a44;}
.bs-ad-head{display:flex;align-items:center;gap:10px;}
.bs-ad-head .bs-sub{font-size:13px;}
.bs-ad-head .bs-sub a{color:#fff;font-weight:700;}
.bs-ad-tag{background:#2b2414;border-color:#6b5a2a;color:var(--gold);letter-spacing:.04em;}
.bs-ad-pic{margin:12px -18px 0;aspect-ratio:1.91;background:#0f1621;overflow:hidden;}
.bs-ad-pic img{display:block;width:100%;height:100%;object-fit:cover;}
.bs-ad-title{font-size:18px;line-height:1.3;margin-top:12px;word-break:break-word;}
.bs-ad .bs-body{margin-top:6px;color:#d7e3ef;}
.bs-ad-go{margin:12px 0 4px;}
.bs-ad-go svg{width:16px;height:16px;}
.bs-ad-foot{font-size:12px;color:var(--dim);padding:6px 0 4px;}
.bs-note-ic{width:38px;height:38px;border-radius:50%;background:var(--frogbg);color:var(--frog2);display:flex;align-items:center;justify-content:center;flex:none;}
.bs-note-ic svg{width:20px;height:20px;}

/* ---- feel (Oct 2026, owner: "make it very smooth, like Telegram") ----
   Pages slide into each other instead of flashing white (cross-page view transitions, Safari 18.2+ and Chrome 126+; the top
   bar and the phone tabs stay put while the page underneath changes). Taps answer at once: no grey flash, no double-tap zoom
   wait, and buttons press in. Long lists and dialogs scroll on their own without dragging the page. */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s;}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none;}}
html{-webkit-tap-highlight-color:transparent;}
body.bs a,body.bs button,body.bs label,body.bs input,body.bs select,body.bs textarea,.bs-nav a,.bs-nav button,.bs-tabs a,.bs-drop button,.bs-menu button{touch-action:manipulation;}
@media(hover:none){
 .bs-btn,.bs-act,.bs-ico,.bs-me,.bs-tabs a,.bs-drop-i,.bs-menu button,.bs-card[href],a.bs-card{transition:transform .08s ease-out,background-color .12s;}
 .bs-btn:active,.bs-ico:active,.bs-me:active,.bs-card[href]:active,a.bs-card:active{transform:scale(.97);}
 .bs-act:active,.bs-tabs a:active{transform:scale(.9);}
 .bs-drop-i:active,.bs-menu button:active{background:#1d2a40;}
}
.bs-pop,.bs-drop,.bs-menu{overscroll-behavior:contain;}
/* the notifications panel on phones: full width under the top bar (it hung off the left edge, anchored to the bell) */
@media(max-width:860px){.bs-pop{position:fixed;left:8px;right:8px;top:calc(60px + env(safe-area-inset-top,0px));width:auto;
 max-height:calc(100dvh - 150px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));}}
img{-webkit-user-drag:none;}

/* ---- the look and language picker in the menu (Oct 2026) ---- */
.bs-prefs{border-top:1px solid var(--line);margin-top:6px;padding:4px 6px 8px;}
.bs-prefs .bs-drop-t{padding:8px 6px 6px;}
.bs-pseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px;}
.bs-pseg.lang{grid-template-columns:repeat(2,minmax(0,1fr));}
.bs-pseg button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;color:var(--muted);font:700 13px 'Work Sans',system-ui,sans-serif;padding:8px 6px;border-radius:9px;min-width:0;}
.bs-pseg button[lang=ar]{font-family:'IBM Plex Sans Arabic','Work Sans',system-ui,sans-serif;}
.bs-pseg button svg{width:16px;height:16px;flex:none;}
.bs-pseg button:hover{color:var(--ink);}
.bs-pseg button.on{background:var(--card2);color:var(--ink);box-shadow:0 0 0 1px var(--line2);}
.bs-pseg button.on svg{color:var(--frog2);}

/* ---- light look (Oct 2026, owner: "switch between bright and dark mode") ----
   html[data-theme=light] is set by boing-prefs.js before the page shows; dark stays the default. The colours above are the
   dark ones; here, the same parts in light. Pages add their own light rules at the end of their styles. */
html[data-theme=light]{color-scheme:light;}
html[data-theme=light],html[data-theme=light] .bs-nav,html[data-theme=light] .bs-tabs,html[data-theme=light] .bs-drop,html[data-theme=light] .bs-menu,
html[data-theme=light] .bs-modal,html[data-theme=light] .bs-toasts,html[data-theme=light] .bs-pop{
 --bg:#f3f6f4;--bg2:#edf2ef;--card:#ffffff;--card2:#f5f8f6;--line:#dfe7e2;--line2:#cbd7d0;--ink:#16212b;--muted:#566878;--dim:#7c8a96;
 --frog:#4cbf62;--frog2:#1d8a3a;--frogbg:#e3f5e7;--gold:#966a00;--red:#d4334f;--blue:#2477bb;}
html[data-theme=light] .bs-card{box-shadow:0 1px 2px rgba(20,40,30,.05);}
html[data-theme=light] .bs-nav{background:#fff;}
html[data-theme=light] .bs-brand{color:#16212b;}
html[data-theme=light] .bs-links a:hover,html[data-theme=light] .bs-navmore:hover{color:#16212b;background:#eef3f0;}
html[data-theme=light] .bs-links a.on,html[data-theme=light] .bs-navmore.on{color:#16212b;background:#e4efe8;}
html[data-theme=light] .bs-ico{background:#fff;color:#3c4c5a;}
html[data-theme=light] .bs-ico:hover{color:#16212b;}
html[data-theme=light] .bs-ico.on,html[data-theme=light] .bs-me{border-color:#9fd6ad;}
html[data-theme=light] .bs-signin{color:#2a3a48;}
html[data-theme=light] .bs-signin:hover{color:#16212b;}
html[data-theme=light] .bs-join{box-shadow:3px 3px 0 rgba(29,138,58,.28);}
html[data-theme=light] .bs-join:hover{box-shadow:4px 4px 0 rgba(29,138,58,.4);}
html[data-theme=light] .bs-drop,html[data-theme=light] .bs-pop{background:#fff;box-shadow:0 22px 60px rgba(20,40,30,.18);}
html[data-theme=light] .bs-drop-i:hover,html[data-theme=light] .bs-drop-i:focus-visible{background:#eef3f0;}
html[data-theme=light] .bs-drop-i.on{background:#e4efe8;}
html[data-theme=light] .bs-tabs{background:rgba(255,255,255,.98);}
html[data-theme=light] .bs-chip{background:#eef2f0;color:#4e5f6e;}
html[data-theme=light] .bs-chip.g{background:var(--frogbg);border-color:#a6dab3;color:#1b7a35;}
html[data-theme=light] .bs-chip.y,html[data-theme=light] .bs-ad-tag{background:#fff5d8;border-color:#e6cc85;color:#875f00;}
html[data-theme=light] .bs-btn.ghost:hover{background:#eef3f0;}
html[data-theme=light] .bs-btn.soft{background:#e8efeb;color:#24313d;}
html[data-theme=light] .bs-btn.danger{border-color:#efb5c0;}
html[data-theme=light] .bs-in{background:#fff;border-color:#cfdad4;color:#16212b;}
html[data-theme=light] .bs-in::placeholder{color:#8a97a2;}
html[data-theme=light] .bs-compose textarea{background:transparent;}
html[data-theme=light] .bs-label{color:#384856;}
html[data-theme=light] .bs-err{color:#c22b46;}
html[data-theme=light] .bs-seg button.on{background:#fff;color:#16212b;box-shadow:0 1px 2px rgba(20,40,30,.12);}
html[data-theme=light] .bs-radio label{background:#fff;}
html[data-theme=light] .bs-radio label:has(input:checked){background:#ecf8ef;}
html[data-theme=light] .bs-av{background:#e6ede9;}
html[data-theme=light] .bs-av.q{color:#9aa7b2;}
html[data-theme=light] .bs-person+.bs-person{border-top-color:#edf1ef;}
html[data-theme=light] .bs-act:hover{background:#eef3f0;color:#16212b;}
html[data-theme=light] .bs-comments{background:#f6f9f7;}
html[data-theme=light] .bs-cmt .bs-bub{background:#edf2ef;}
html[data-theme=light] .bs-cmt small button:hover{color:#16212b;}
html[data-theme=light] .bs-msg .bs-bub{background:#eef2f0;}
html[data-theme=light] .bs-msg.mine .bs-bub{background:#d3f2da;color:#0f2c18;}
html[data-theme=light] .bs-msg.mine .bs-t{color:#3d8452;}
html[data-theme=light] .bs-msg .bs-flag{color:#9aa7b2;}
html[data-theme=light] .bs-note{background:#f6f9f7;}
html[data-theme=light] .bs-menu{background:#fff;box-shadow:0 18px 50px rgba(20,40,30,.16);}
html[data-theme=light] .bs-menu button:hover{background:#eef3f0;}
html[data-theme=light] .bs-menu button.danger{color:#c22b46;}
html[data-theme=light] .bs-modal{background:rgba(22,33,43,.42);}
html[data-theme=light] .bs-modal .bs-box{box-shadow:0 30px 80px rgba(20,40,30,.22);}
html[data-theme=light] .bs-toast{background:#fff;color:#16212b;box-shadow:0 12px 34px rgba(20,40,30,.18);}
html[data-theme=light] .bs-note-row.new{background:#ecf7ef;}
html[data-theme=light] .bs-spin{border-color:#dfe7e2;border-top-color:var(--frog);}
html[data-theme=light] .bs-live i{background:#b6c2cb;}
html[data-theme=light] .bs-addpic:hover{background:#e3f5e7;border-color:#a6dab3;}
html[data-theme=light] .bs-shot,html[data-theme=light] .bs-media,html[data-theme=light] .bs-mi,html[data-theme=light] .bs-ad-pic{background:#edf2ef;}
html[data-theme=light] .bs-shot.bad{border-color:#efb5c0;}
html[data-theme=light] .bs-ad{border-color:#a6dab3;}
html[data-theme=light] .bs-ad-head .bs-sub a{color:#16212b;}
html[data-theme=light] .bs-ad .bs-body{color:#24313d;}
html[data-theme=light] ::-webkit-scrollbar-track,html[data-theme=light] ::-webkit-scrollbar-corner{background:#edf2ef;}
html[data-theme=light] ::-webkit-scrollbar-thumb{border-color:#edf2ef;}
@supports not selector(::-webkit-scrollbar){html[data-theme=light]{scrollbar-color:#4cbf62 #edf2ef;}}
@media(hover:none){html[data-theme=light] .bs-drop-i:active,html[data-theme=light] .bs-menu button:active{background:#eef3f0;}}

/* ---- Arabic, right to left (Oct 2026). boing-prefs.js sets <html lang="ar" dir="rtl"> and loads the Arabic fonts; Latin
   letters keep the site's fonts and Arabic ones use IBM Plex Sans Arabic (text) and Baloo Bhaijaan 2 (titles, Baloo's Arabic
   sister). Spaced-out capitals would break Arabic's joined letters, so letter spacing is off. ---- */
html[lang=ar] body,html[lang=ar] body *:not(h1):not(h2):not(h3):not(h4):not(.bs-display):not(.bs-brand):not(code):not(.wa){font-family:'Work Sans','IBM Plex Sans Arabic',system-ui,sans-serif;}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,html[lang=ar] .bs-display{font-family:'Baloo 2','Baloo Bhaijaan 2',cursive;}
html[lang=ar] *{letter-spacing:0!important;}
html[dir=rtl] .bs-links{margin-left:0;margin-right:10px;}
html[dir=rtl] .bs-right,html[dir=rtl] .bs-more,html[dir=rtl] .bs-toast a{margin-left:0;margin-right:auto;}
html[dir=rtl] .bs-me{padding:3px 3px 3px 10px;}
html[dir=rtl] .bs-drop-i,html[dir=rtl] .bs-menu button{text-align:right;}
html[dir=rtl] .bs-toast{border-left:1px solid var(--line2);border-right:3px solid var(--frog);}
html[dir=rtl] .bs-toast.err{border-right-color:var(--red);}
html[dir=rtl] .bs-seg .bs-badge,html[dir=rtl] .bs-links a .bs-badge{margin-left:0;margin-right:5px;}
html[dir=rtl] .bs-badge{right:auto;left:-5px;}
html[dir=rtl] .bs-tabs .bs-badge{left:auto;right:calc(50% - 22px);}
html[dir=rtl] .bs-msg .bs-bub{border-radius:16px 16px 5px 16px;}
html[dir=rtl] .bs-msg.mine .bs-bub{border-radius:16px 16px 16px 5px;}
html[dir=rtl] .bs-cmt small{margin:2px 11px 0 0;}
html[dir=rtl] .bs-cmt small button{margin-left:0;margin-right:8px;}
html[dir=rtl] select.bs-in{background-position:17px 55%,12px 55%;padding-right:13px;padding-left:32px;}
html[dir=rtl] .bs-shot-x{right:auto;left:4px;}
/* arrows and "back" chevrons point the other way */
html[dir=rtl] svg.bs-flip{transform:scaleX(-1);}
html[dir=rtl] .bs-vbtn svg.bs-flip{transform:none;}
html[dir=rtl] .bs-vnext svg.bs-flip{transform:rotate(180deg);}
/* the photo viewer and the photo framer keep left-to-right: they are pictures, not text */
html[dir=rtl] .bs-viewer,html[dir=rtl] .bs-crop{direction:ltr;}

/* ===================== Lively look (22 Oct 2026, owner: "things look messy and not organised, and the theme is dark: make it
   lively") =====================
   Every section has its colour, set on <html data-sec> by boing-prefs.js: Play green, Feed blue, Groups purple, Planner orange,
   Shop pink, Market amber, Messages teal, Players emerald, Profile sky, Quiz magenta, Advertise gold. --sec and --sec2 make each
   page's header (.bs-hero, built by B.hero()), --sec-soft and --sec-ink the active tab and small accents. Buttons press in like
   game buttons ("candy" buttons: a darker edge under them). Works in both looks: Bright (the default) and Dark. */
html{--sec:#16a34a;--sec2:#4ade80;--sec-soft:#dcfce7;--sec-ink:#166534;}
html[data-sec=feed]{--sec:#2563eb;--sec2:#38bdf8;--sec-soft:#dbeafe;--sec-ink:#1e40af;}
html[data-sec=groups]{--sec:#7c3aed;--sec2:#c084fc;--sec-soft:#ede9fe;--sec-ink:#5b21b6;}
html[data-sec=planner]{--sec:#ea580c;--sec2:#fbbf24;--sec-soft:#ffedd5;--sec-ink:#9a3412;}
html[data-sec=study]{--sec:#4f46e5;--sec2:#22d3ee;--sec-soft:#e0e7ff;--sec-ink:#3730a3;}
html[data-sec=shop]{--sec:#db2777;--sec2:#f472b6;--sec-soft:#fce7f3;--sec-ink:#9d174d;}
html[data-sec=market]{--sec:#d97706;--sec2:#fbbf24;--sec-soft:#fef3c7;--sec-ink:#92400e;}
html[data-sec=messages]{--sec:#0d9488;--sec2:#2dd4bf;--sec-soft:#ccfbf1;--sec-ink:#115e59;}
html[data-sec=players]{--sec:#059669;--sec2:#34d399;--sec-soft:#d1fae5;--sec-ink:#065f46;}
html[data-sec=profile]{--sec:#0284c7;--sec2:#38bdf8;--sec-soft:#e0f2fe;--sec-ink:#075985;}
html[data-sec=quiz]{--sec:#9333ea;--sec2:#e879f9;--sec-soft:#fae8ff;--sec-ink:#86198f;}
html[data-sec=advertise]{--sec:#b45309;--sec2:#f59e0b;--sec-soft:#fef3c7;--sec-ink:#92400e;}
html:not([data-theme=light]){--sec-soft:color-mix(in srgb,var(--sec) 22%,#0e1822);--sec-ink:color-mix(in srgb,var(--sec2) 75%,#fff);}

/* the page's backdrop: soft colour clouds in the section's colour, at the top of the page */
body.bs{background:radial-gradient(900px 420px at 8% -120px,color-mix(in srgb,var(--sec) 16%,transparent),transparent 70%),
  radial-gradient(800px 380px at 96% -60px,color-mix(in srgb,var(--sec2) 14%,transparent),transparent 70%),var(--bg);background-repeat:no-repeat;}
/* Dark, livelier: a deep pond night instead of near-black */
html:not([data-theme=light]){--bg:#0c1620;}
html:not([data-theme=light]) body.bs{--card:#132232;--card2:#182a3d;--line:#21354b;--line2:#2a4260;}

/* ---- the page header: a big colourful card with the page's name, a line about it, and a frog peeking in ---- */
.bs-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:24px 26px 22px;margin:0 0 18px;color:#fff;
  background:linear-gradient(125deg,var(--sec) 0%,var(--sec2) 100%);box-shadow:0 12px 30px -12px color-mix(in srgb,var(--sec) 70%,transparent);}
.bs-hero:before,.bs-hero:after{content:'';position:absolute;border-radius:50%;z-index:-1;background:rgba(255,255,255,.13);}
.bs-hero:before{width:260px;height:260px;right:-60px;top:-110px;}
.bs-hero:after{width:150px;height:150px;right:150px;bottom:-95px;background:rgba(255,255,255,.09);}
.bs-hero h1{font-family:'Baloo 2',cursive;font-size:clamp(28px,4.4vw,40px);line-height:1.05;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.12);max-width:calc(100% - 120px);}
.bs-hero p{margin-top:6px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.94);max-width:min(60ch,calc(100% - 120px));font-weight:500;}
.bs-hero .bs-hero-k{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.2);border-radius:100px;padding:4px 11px;margin-bottom:8px;}
.bs-hero .bs-hero-k svg{width:14px;height:14px;}
.bs-hero .bs-hero-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;position:relative;}
.bs-hero .bs-hero-acts .bs-btn{background:#fff;color:var(--sec-ink);box-shadow:0 3px 0 rgba(0,0,0,.16);}
.bs-hero .bs-hero-acts .bs-btn.ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none;}
.bs-hero canvas.bs-hero-frog{position:absolute;right:16px;bottom:-10px;width:118px;height:118px;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));}
/* a member's own character with their frog buddy, peeking up from the bottom right (people are not frogs, Oct 2026) */
.bs-hero canvas.bs-hero-me{position:absolute;right:10px;bottom:0;width:190px;height:140px;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.2));}
html[dir=rtl] .bs-hero canvas.bs-hero-me{right:auto;left:10px;transform:scaleX(-1);}
@media(max-width:560px){.bs-hero canvas.bs-hero-me{width:122px;height:90px;right:2px;}}
.bs-hero:has(.bs-hero-me) h1{max-width:calc(100% - 180px);}.bs-hero:has(.bs-hero-me) p{max-width:min(60ch,calc(100% - 190px));}
@media(max-width:560px){.bs-hero:has(.bs-hero-me) h1{max-width:calc(100% - 96px);}.bs-hero:has(.bs-hero-me) p{max-width:calc(100% - 100px);}}
@media(max-width:560px){.bs-hero{padding:20px 18px 18px;border-radius:20px;}.bs-hero canvas.bs-hero-frog{width:84px;height:84px;right:6px;bottom:-8px;}
 .bs-hero h1{max-width:calc(100% - 78px);}.bs-hero p{max-width:calc(100% - 70px);font-size:14px;}}
html[dir=rtl] .bs-hero canvas.bs-hero-frog{right:auto;left:16px;}
html[dir=rtl] .bs-hero:before{right:auto;left:-60px;}

/* ---- the top bar: each main place has its colour ---- */
.bs-links a[data-k=game]{--c:#16a34a;}.bs-links a[data-k=feed]{--c:#2563eb;}.bs-links a[data-k=users]{--c:#7c3aed;}
.bs-links a[data-k=cal]{--c:#ea580c;}.bs-links a[data-k=book]{--c:#4f46e5;}.bs-links a[data-k=bag]{--c:#db2777;}
.bs-tabs a[data-k=game]{--c:#16a34a;}.bs-tabs a[data-k=feed]{--c:#2563eb;}.bs-tabs a[data-k=users]{--c:#7c3aed;}
.bs-tabs a[data-k=cal]{--c:#ea580c;}.bs-tabs a[data-k=chat]{--c:#0d9488;}
.bs-links a.on{color:var(--c,var(--frog))!important;background:color-mix(in srgb,var(--c,var(--frog)) 14%,transparent)!important;}
.bs-links a.on:after{background:var(--c,var(--frog));}
.bs-tabs a.on{color:var(--c,var(--frog2));}
.bs-tabs a.on:before{background:var(--c,var(--frog));}
.bs-tabs a.on svg{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--c,var(--frog)) 45%,transparent));}
html:not([data-theme=light]) .bs-links a.on,html:not([data-theme=light]) .bs-tabs a.on{color:color-mix(in srgb,var(--c,var(--frog)) 55%,#fff)!important;}

/* ---- buttons: rounder, and they press in ---- */
.bs-btn{border-radius:14px;box-shadow:0 3px 0 #1d7a35;}
.bs-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1d7a35;}
.bs-btn.ghost{box-shadow:0 2px 0 var(--line2);}
.bs-btn.ghost:active{box-shadow:0 0 0 var(--line2);}
.bs-btn.soft{box-shadow:0 2px 0 var(--line2);}
.bs-btn.danger{box-shadow:none;}
.bs-btn.sm{border-radius:11px;}
.bs-send .bs-btn{box-shadow:0 3px 0 #1d7a35;}
.bs-btn:disabled{box-shadow:none;}

/* ---- cards: rounder and softer; little headings get the section colour ---- */
.bs-card{border-radius:20px;}
html[data-theme=light] .bs-card{border-color:#e4ece7;box-shadow:0 1px 0 rgba(20,40,30,.03),0 8px 24px -14px rgba(20,60,40,.18);}
.bs-seg button.on{color:var(--sec-ink);}
html[data-theme=light] .bs-seg{background:#eaf0ec;}
.bs-chip.g{background:var(--sec-soft);border-color:transparent;color:var(--sec-ink);}
.bs-empty b{font-family:'Baloo 2',cursive;font-size:19px;}
/* chips inside a page header (Planner's "done today", the Market's numbers) */
.bs-hero .pchips,.bs-hero .mchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;max-width:calc(100% - 110px);}
.bs-hero .bs-chip{background:rgba(255,255,255,.2)!important;border-color:transparent!important;color:#fff!important;}

/* ---- Pond World (boing-pond.js): the living pond at the top of the Play page ---- */
.pw{position:relative;overflow:hidden;border-radius:26px;margin:4px 0 22px;background:#5fc4f5;user-select:none;-webkit-user-select:none;
  box-shadow:0 18px 40px -18px rgba(20,60,90,.55),0 0 0 1px rgba(0,0,0,.04);touch-action:manipulation;}
.pw-cv{position:absolute;left:0;top:0;display:block;cursor:pointer;}
.pw-top{position:absolute;left:18px;top:14px;right:18px;pointer-events:none;}
.pw-k{display:inline-block;font:800 11.5px 'Work Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0f3d2a;
  background:rgba(255,255,255,.85);border-radius:100px;padding:5px 11px;box-shadow:0 2px 0 rgba(0,0,0,.08);}
.pw-top h2{font-family:'Baloo 2',cursive;font-size:clamp(24px,3.6vw,38px);line-height:1.05;color:#fff;margin-top:8px;text-shadow:0 2px 0 rgba(0,0,0,.18),0 4px 18px rgba(0,0,0,.18);}
.pw-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(255,255,255,.94);color:#16202a;border-radius:100px;padding:8px 15px;
  font:700 13px 'Work Sans',system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap;pointer-events:none;animation:pwHint 2.4s ease-in-out infinite;transition:opacity .3s;}
.pw-hint.gone{opacity:0;animation:none;}
@keyframes pwHint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
.pw-isl{position:absolute;transform:translate(-50%,0);display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.95);border:0;border-radius:100px;
  padding:5px 12px 5px 8px;font:800 12.5px 'Work Sans',system-ui,sans-serif;color:#16202a;box-shadow:0 3px 0 rgba(0,0,0,.2);cursor:pointer;white-space:nowrap;z-index:2;transition:transform .15s;}
.pw-isl i{width:11px;height:11px;border-radius:50%;background:var(--gc);box-shadow:0 0 0 2px rgba(0,0,0,.1);flex:none;}
.pw-isl:hover,.pw-isl:focus-visible{transform:translate(-50%,-3px);outline:none;box-shadow:0 5px 0 rgba(0,0,0,.2),0 0 0 3px var(--gc);}
.pw-tag{position:absolute;transform:translate(-50%,-100%);background:rgba(15,23,42,.72);color:#fff!important;font:700 11px 'Work Sans',system-ui,sans-serif;
  padding:2px 8px;border-radius:100px;white-space:nowrap;z-index:1;}
.pw-card{position:absolute;left:50%;bottom:16px;transform:translate(-50%,24px);opacity:0;transition:transform .28s cubic-bezier(.2,1.3,.4,1),opacity .2s;z-index:3;
  width:min(360px,calc(100% - 24px));background:#fff;color:#16202a;border-radius:22px;padding:14px 16px 16px;box-shadow:0 18px 44px rgba(0,0,0,.28);border-top:6px solid var(--gc);}
.pw-card.on{transform:translate(-50%,0);opacity:1;}
.pw-card b{display:block;font-family:'Baloo 2',cursive;font-size:23px;line-height:1.1;padding-right:24px;}
.pw-st{display:inline-block;font-size:12px;font-weight:700;background:#dcfce7;color:#166534;border-radius:100px;padding:3px 10px;margin-top:4px;}
.pw-st.lock{background:#ffedd5;color:#9a3412;}
.pw-card p{font-size:14px;line-height:1.45;color:#475569;margin:8px 0 12px;}
.pw-play{display:flex;justify-content:center;background:#4cbf62;color:#0f2a17!important;font-weight:800;font-size:15px;border-radius:14px;padding:11px;box-shadow:0 3px 0 #1d7a35;}
.pw-play:active{transform:translateY(2px);box-shadow:0 1px 0 #1d7a35;}
.pw-play.soft{background:#e2e8f0;color:#334155!important;box-shadow:0 3px 0 #94a3b8;}
.pw-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:24px;line-height:1;color:#94a3b8;cursor:pointer;padding:4px;}
@media(max-width:560px){.pw{border-radius:22px;}.pw-isl{font-size:11.5px;padding:4px 10px 4px 7px;}.pw-top{left:14px;top:12px;}}
html[dir=rtl] .pw-top{text-align:right;}
.pw.tall .pw-hint{position:static;transform:none;display:table;margin-top:8px;font-size:12px;padding:5px 11px;animation:none;}
/* friends in a game right now (boing-pond.js syncFriends): a live dot on the name, and Join for a race lobby */
.pw-tag.live{background:rgba(22,101,52,.9);}
.pw-tag.on:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-inline-end:5px;vertical-align:1px;}
.pw-tag.live:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-inline-end:5px;vertical-align:1px;animation:pwLive 1.6s infinite;}
@keyframes pwLive{0%{box-shadow:0 0 0 0 rgba(74,222,128,.75);}70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
.pw-join{position:absolute;transform:translate(-50%,0);z-index:2;background:#facc15;color:#422006!important;font:800 11.5px 'Work Sans',system-ui,sans-serif;
  border-radius:100px;padding:4px 10px;box-shadow:0 3px 0 rgba(0,0,0,.25);text-decoration:none;white-space:nowrap;}
.pw-join:after{content:" ▸";}
.pw.diving .pw-join{opacity:0;pointer-events:none;}
/* where friends are (2 Nov 2026, boing-pond.js placeOf): the closed campus, the small places, the Snooze Pond and the "+3" chip */
.pw-isl small{font:800 10px 'Work Sans',system-ui,sans-serif;letter-spacing:.02em;background:#ffedd5;color:#9a3412;border-radius:100px;padding:2px 7px;}
.pw-isl.mini{padding:3px 9px;font-size:10.5px;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.2);opacity:.96;}
.pw-tag.zz{transform:translate(-50%,0);background:rgba(30,41,82,.66);color:rgba(255,255,255,.88)!important;font-weight:600;font-size:10.5px;}
.pw-cove{position:absolute;transform:translate(-50%,-100%);font:800 11px 'Work Sans',system-ui,sans-serif;color:#eef1ff;background:rgba(30,41,82,.8);
  padding:2px 10px;border-radius:100px;white-space:nowrap;pointer-events:none;z-index:1;}
.pw-more{position:absolute;transform:translate(-50%,-50%);min-width:30px;height:24px;padding:0 8px;border:0;border-radius:100px;background:#fff;color:#16202a;
  font:800 12px 'Work Sans',system-ui,sans-serif;box-shadow:0 2px 0 rgba(0,0,0,.28);cursor:pointer;z-index:2;}
.pw-more:before{content:"";position:absolute;inset:-9px;}
.pw-more:hover,.pw-more:focus-visible{outline:none;box-shadow:0 2px 0 rgba(0,0,0,.28),0 0 0 3px #4cbf62;}
.pw-people{display:grid;gap:2px;margin-top:8px;max-height:min(232px,40vh);overflow:auto;overscroll-behavior:contain;}
.pw-p{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;color:#16202a!important;text-decoration:none;}
.pw-p:hover,.pw-p:focus-visible{background:#eef2f6;outline:none;}
.pw-p>span:last-child{min-width:0;flex:1;}
.pw-card .pw-p b{font:700 14px/1.2 'Work Sans',system-ui,sans-serif;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate;}
.pw-p small{display:block;font-size:12px;color:#64748b;}
.pw.tall{transition:height .3s;margin-bottom:14px;}
.pw.tall .pw-cove{transform:translate(-50%,-50%);white-space:normal;max-width:100px;text-align:center;line-height:1.15;border-radius:12px;}
.pw.tall .pw-tag{font-size:10px;padding:1px 6px;max-width:76px;overflow:hidden;text-overflow:ellipsis;}
.pw.tall .pw-isl.mini{font-size:10px;padding:2px 8px;}
.pw.tall .pw-isl.soon{padding-left:10px;gap:6px;}
.pw.tall .pw-isl.soon i{display:none;}   /* narrow phones: the campus label fits between Planner and AI Study */
.pw.diving .pw-more,.pw.diving .pw-cove{opacity:0;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.pw-hint,.pw-tag.live:before{animation:none;}.pw.tall{transition:none;}}
/* diving into a game (boing-pond.js diveInto): the words fade, then the water closes over the screen in the game's
   colours from the middle of the pond, with bubbles, on the picture the game opens with (boing-arcade.css .ba-splash) */
.pw.diving .pw-isl,.pw.diving .pw-tag,.pw.diving .pw-top,.pw.diving .pw-hint{opacity:0;pointer-events:none;transition:opacity .25s;}
.pw-dive{position:fixed;inset:0;z-index:300;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;
  clip-path:circle(0 at var(--x) var(--y));transition:clip-path .62s cubic-bezier(.55,0,.7,.4);}
.pw-dive.on{clip-path:circle(150vmax at var(--x) var(--y));}
.pw-dv-in{text-align:center;opacity:0;transform:scale(.7);transition:opacity .3s .22s,transform .5s cubic-bezier(.2,1.6,.4,1) .22s;position:relative;z-index:1;}
.pw-dive.on .pw-dv-in{opacity:1;transform:none;}
.pw-dv-in canvas{width:170px;height:170px;display:block;margin:0 auto 10px;}
.pw-dv-k{font:800 13px/1 'Work Sans',sans-serif;letter-spacing:.3em;color:rgba(255,255,255,.85);}
.pw-dv-t{font:800 clamp(44px,9vw,96px)/1 'Baloo 2','Work Sans',sans-serif;color:#fff;margin-top:6px;text-shadow:0 6px 0 rgba(0,0,0,.22),0 18px 40px rgba(0,0,0,.25);}
.pw-bub{position:absolute;bottom:-40px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 45%);
  animation:pwBub 1.1s cubic-bezier(.4,0,.8,.6) both;}
@keyframes pwBub{from{transform:translateY(0);opacity:.95;}to{transform:translateY(-115vh);opacity:0;}}

/* ===================== the friends list on the side (29 Oct 2026, owner: "a friends' list on the right side of the screen for
   laptops or larger screens, like Discord, showing whether someone is online or offline and what they are doing") =====================
   boing-social.js rail(): computers 1280 px and wider, members only. The page makes room for it (body padding), the top bar
   still spans the whole width. Folded, it's a column of frogs. In Arabic it sits on the left. */
.bs-rail{display:none;}
@media(min-width:1280px){
 body.bs-railed{--railw:256px;padding-right:var(--railw);}
 body.bs-railed.bs-rail-min{--railw:68px;}
 body.bs-railed .bs-nav{margin-right:calc(-1 * var(--railw));}
 .bs-rail{display:flex;flex-direction:column;position:fixed;top:calc(62px + env(safe-area-inset-top,0px));right:0;bottom:0;width:var(--railw);z-index:30;
  background:var(--card);border-left:1px solid var(--line);}
 /* the feed's own left column (your card and links) steps aside while the list is open on mid-size screens */
 body.bs-railed:not(.bs-rail-min) .bs-3col{grid-template-columns:minmax(0,1fr) 300px;}
 body.bs-railed:not(.bs-rail-min) .bs-3col>.bs-left{display:none;}
}
@media(min-width:1640px){
 body.bs-railed:not(.bs-rail-min) .bs-3col{grid-template-columns:260px minmax(0,1fr) 300px;}
 body.bs-railed:not(.bs-rail-min) .bs-3col>.bs-left{display:flex;}
}
.bs-rail-h{display:flex;align-items:center;gap:8px;padding:14px 12px 10px 16px;border-bottom:1px solid var(--line);}
.bs-rail-h b{display:block;font-family:'Baloo 2',cursive;font-size:19px;line-height:1.1;color:var(--ink);}
.bs-rail-h small{display:block;font-size:12px;font-weight:600;color:var(--frog2);}
.bs-rail-tg{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line2);border-radius:10px;color:var(--muted);cursor:pointer;}
.bs-rail-tg:hover{color:var(--ink);border-color:var(--frog);}
.bs-rail-tg svg{width:17px;height:17px;transform:scaleX(-1);}
.bs-rail.min .bs-rail-tg svg{transform:none;}
.bs-rail.min .bs-rail-h{justify-content:center;padding:14px 0 10px;}
.bs-rail-list{flex:1;overflow-y:auto;padding:6px 8px 18px;scrollbar-width:thin;}
.bs-rail-t{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:12px 8px 6px;}
.bs-rail-n{font-weight:700;letter-spacing:0;}
.bs-rail-r{display:flex;align-items:center;border-radius:12px;position:relative;}
.bs-rail-r:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);}
.bs-rail-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 8px;color:inherit;text-decoration:none;border-radius:12px;}
.bs-rail-main:focus-visible{outline:2px solid var(--frog);outline-offset:-2px;}
.bs-rail-av{position:relative;flex:none;display:block;line-height:0;}
.bs-rail-av .bs-av{display:block;}
.bs-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 2.5px var(--card);}
.bs-rail-r.is-on .bs-dot{background:#22c55e;}
.bs-rail-r.is-play .bs-dot,.bs-rail-r.is-doing .bs-dot{background:#22c55e;animation:pLiveR 1.8s infinite;}
@keyframes pLiveR{0%{box-shadow:0 0 0 2.5px var(--card),0 0 0 2.5px rgba(34,197,94,.6);}70%{box-shadow:0 0 0 2.5px var(--card),0 0 0 8px rgba(34,197,94,0);}100%{box-shadow:0 0 0 2.5px var(--card),0 0 0 2.5px rgba(34,197,94,0);}}
.bs-rail-r:not(.is-on) .bs-rail-av .bs-av{filter:grayscale(.7);opacity:.6;}
.bs-rail-tx{flex:1;min-width:0;display:block;line-height:1.2;}
.bs-rail-tx b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
.bs-rail-r:not(.is-on) .bs-rail-tx b{color:var(--muted);font-weight:600;}
.bs-rail-tx small{display:block;font-size:12px;color:var(--dim);margin-top:1px;}
.bs-rail-r.is-on .bs-rail-tx small{color:var(--muted);}
.bs-rail-r.is-play .bs-rail-tx small,.bs-rail-r.is-doing .bs-rail-tx small{color:var(--frog2);font-weight:700;}
.bs-rail-msg{flex:none;width:30px;height:30px;margin-right:6px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--dim);opacity:0;transition:opacity .12s;}
.bs-rail-msg svg{width:17px;height:17px;}
.bs-rail-r:hover .bs-rail-msg,.bs-rail-msg:focus-visible{opacity:1;}
.bs-rail-msg:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,transparent);}
.bs-rail-join{flex:none;margin-right:8px;background:#facc15;color:#422006!important;font-weight:800;font-size:12px;border-radius:100px;padding:4px 10px;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.18);}
.bs-rail-empty{padding:18px 10px;text-align:center;}
.bs-rail-empty p{font-size:13.5px;line-height:1.5;color:var(--muted);margin-bottom:12px;}
.bs-rail-all{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--blue);padding:10px;}
.bs-rail .bs-spin{margin:24px auto;}
.bs-rail.min .bs-rail-list{padding:6px 0 18px;}
.bs-rail.min .bs-rail-r{justify-content:center;}
.bs-rail.min .bs-rail-main{flex:none;padding:6px;}
.bs-rail.min hr{border:0;border-top:1px solid var(--line);margin:8px 14px;}
html[data-theme=light] .bs-rail{background:#fff;box-shadow:-1px 0 0 #e4ece7;}
html[data-theme=light] .bs-dot{box-shadow:0 0 0 2.5px #fff;}
html[data-theme=light] .bs-rail-r.is-on .bs-rail-tx small{color:#566878;}
html[data-theme=light] .bs-rail-r.is-play .bs-rail-tx small,html[data-theme=light] .bs-rail-r.is-doing .bs-rail-tx small{color:#15803d;}
html[data-theme=light] .bs-rail-h small{color:#15803d;}
@media(min-width:1280px){
 html[dir=rtl] body.bs-railed{padding-right:0;padding-left:var(--railw);}
 html[dir=rtl] body.bs-railed .bs-nav{margin-right:0;margin-left:calc(-1 * var(--railw));}
 html[dir=rtl] .bs-rail{right:auto;left:0;border-left:0;border-right:1px solid var(--line);}
}
html[dir=rtl] .bs-rail-h{padding:14px 16px 10px 12px;}
html[dir=rtl] .bs-rail-tg svg{transform:none;}
html[dir=rtl] .bs-rail.min .bs-rail-tg svg{transform:scaleX(-1);}
html[dir=rtl] .bs-dot{right:auto;left:-1px;}
html[dir=rtl] .bs-rail-msg{margin-right:0;margin-left:6px;}
html[dir=rtl] .bs-rail-join{margin-right:0;margin-left:8px;}
/* reactions and replies: the light look and right to left */
html[data-theme=light] .bs-rsum:hover{background:#eef3f0;color:#16212b;}
html[data-theme=light] .bs-rbar{background:#fff;box-shadow:0 14px 36px rgba(20,40,30,.2);}
html[data-theme=light] .bs-rsum-e i{background:#f1f5f3;box-shadow:0 0 0 2px #fff;}
html[data-theme=light] .bs-react.on.r-haha,html[data-theme=light] .bs-react.on.r-wow{color:#a16207;}
html[dir=rtl] .bs-rsum{margin-left:0;margin-right:auto;}
html[dir=rtl] .bs-rsum-e i+i{margin-left:0;margin-right:-5px;}
html[dir=rtl] .bs-replies{margin-left:0;margin-right:39px;padding-left:0;padding-right:10px;border-left:0;border-right:2px solid var(--line);}
html[dir=rtl] .bs-cmt.gone{padding-left:0;padding-right:39px;}
html[dir=rtl] .bs-fold{margin:0 49px 4px 0;}

/* ===================== invites (29 Oct 2026): the Invite friends window, the welcome for someone who came through a link,
   and the button at the bottom of the friends list ===================== */
.bs-modal .bs-box.bs-inv{max-width:520px;}
.bs-inv-top{display:flex;gap:14px;align-items:center;}
.bs-inv-top canvas{width:96px;height:96px;flex:none;}
.bs-inv-top h3{font-family:'Baloo 2',cursive;font-size:23px;line-height:1.15;}
.bs-inv-link{display:flex;gap:8px;margin-top:14px;}
.bs-inv-link .bs-in{font-size:14px;font-weight:600;}
.bs-inv-share{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.bs-inv-qr{display:flex;gap:14px;align-items:center;margin-top:14px;padding:12px;border-radius:16px;background:var(--card2);border:1px solid var(--line);}
.bs-inv-qrbox{width:132px;height:132px;flex:none;border-radius:10px;overflow:hidden;background:#fff;}
.bs-inv-qrbox svg{width:100%;height:100%;display:block;}
.bs-inv-qr b{font-size:15px;}
.bs-inv-qr .bs-sub{font-size:13px;margin:2px 0 8px;}
.bs-inv-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:13px;color:var(--muted);font-weight:600;}
.bs-inv-won{color:var(--frog2);font-weight:800;}
.bs-invbar{display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,28px);background:linear-gradient(90deg,#7c5cff,#ff5bc8);color:#fff;position:relative;z-index:19;}
.bs-invbar b{display:block;font-size:15px;}
.bs-invbar small{display:block;font-size:12.5px;opacity:.92;}
.bs-invbar .bs-join{flex:none;}
.bs-rail-inv{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 12px 14px;padding:10px;border-radius:12px;border:1.5px dashed var(--line2);
  background:none;color:var(--muted);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;}
.bs-rail-inv:hover{color:var(--ink);border-color:var(--frog);}
.bs-rail-inv svg{width:16px;height:16px;}
.bs-rail-empty .bs-btn{display:flex;width:100%;justify-content:center;}
@media(max-width:520px){.bs-inv-qr{flex-direction:column;text-align:center;}.bs-inv-qr .bs-row{justify-content:center;}.bs-invbar small{display:none;}}

/* ---- next to a name: the birthday cake (Nov 2026) ---- */
.bs-nameline{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;}
.bs-nameline .bs-ell{min-width:0;}
.bs-marks{display:inline-flex;align-items:center;gap:5px;flex:none;}
.bs-cake{font-size:14px;line-height:1;}