/* Fishin' Bids join / recover / account screens (js/join.js). Sits on the game's #lg overlay.
 * 2026-10-17 v2: game look. Lilita outlined text (--rgS/--rgL ring), candy buttons like Cast, navy cards with the 3px #284a66 frame. */
.lg.fbj, .lg.fbj *{ --rgL:2.30px 0.00px 0 var(--cbO), 2.27px 0.40px 0 var(--cbO), 2.16px 0.79px 0 var(--cbO), 1.99px 1.15px 0 var(--cbO), 1.76px 1.48px 0 var(--cbO), 1.48px 1.76px 0 var(--cbO), 1.15px 1.99px 0 var(--cbO), 0.79px 2.16px 0 var(--cbO), 0.40px 2.27px 0 var(--cbO), 0.00px 2.30px 0 var(--cbO), -0.40px 2.27px 0 var(--cbO), -0.79px 2.16px 0 var(--cbO), -1.15px 1.99px 0 var(--cbO), -1.48px 1.76px 0 var(--cbO), -1.76px 1.48px 0 var(--cbO), -1.99px 1.15px 0 var(--cbO), -2.16px 0.79px 0 var(--cbO), -2.27px 0.40px 0 var(--cbO), -2.30px 0.00px 0 var(--cbO), -2.27px -0.40px 0 var(--cbO), -2.16px -0.79px 0 var(--cbO), -1.99px -1.15px 0 var(--cbO), -1.76px -1.48px 0 var(--cbO), -1.48px -1.76px 0 var(--cbO), -1.15px -1.99px 0 var(--cbO), -0.79px -2.16px 0 var(--cbO), -0.40px -2.27px 0 var(--cbO), -0.00px -2.30px 0 var(--cbO), 0.40px -2.27px 0 var(--cbO), 0.79px -2.16px 0 var(--cbO), 1.15px -1.99px 0 var(--cbO), 1.48px -1.76px 0 var(--cbO), 1.76px -1.48px 0 var(--cbO), 1.99px -1.15px 0 var(--cbO), 2.16px -0.79px 0 var(--cbO), 2.27px -0.40px 0 var(--cbO), 1.75px 0.00px 0 var(--cbO), 1.69px 0.45px 0 var(--cbO), 1.51px 0.87px 0 var(--cbO), 1.24px 1.24px 0 var(--cbO), 0.87px 1.51px 0 var(--cbO), 0.45px 1.69px 0 var(--cbO), 0.00px 1.75px 0 var(--cbO), -0.45px 1.69px 0 var(--cbO), -0.87px 1.51px 0 var(--cbO), -1.24px 1.24px 0 var(--cbO), -1.51px 0.87px 0 var(--cbO), -1.69px 0.45px 0 var(--cbO), -1.75px 0.00px 0 var(--cbO), -1.69px -0.45px 0 var(--cbO), -1.51px -0.87px 0 var(--cbO), -1.24px -1.24px 0 var(--cbO), -0.87px -1.51px 0 var(--cbO), -0.45px -1.69px 0 var(--cbO), -0.00px -1.75px 0 var(--cbO), 0.45px -1.69px 0 var(--cbO), 0.87px -1.51px 0 var(--cbO), 1.24px -1.24px 0 var(--cbO), 1.51px -0.87px 0 var(--cbO), 1.69px -0.45px 0 var(--cbO), 1.03px 0.00px 0 var(--cbO), 0.90px 0.52px 0 var(--cbO), 0.52px 0.90px 0 var(--cbO), 0.00px 1.03px 0 var(--cbO), -0.52px 0.90px 0 var(--cbO), -0.90px 0.52px 0 var(--cbO), -1.03px 0.00px 0 var(--cbO), -0.90px -0.52px 0 var(--cbO), -0.52px -0.90px 0 var(--cbO), -0.00px -1.03px 0 var(--cbO), 0.52px -0.90px 0 var(--cbO), 0.90px -0.52px 0 var(--cbO); --rgS:1.70px 0.00px 0 var(--cbO), 1.67px 0.30px 0 var(--cbO), 1.60px 0.58px 0 var(--cbO), 1.47px 0.85px 0 var(--cbO), 1.30px 1.09px 0 var(--cbO), 1.09px 1.30px 0 var(--cbO), 0.85px 1.47px 0 var(--cbO), 0.58px 1.60px 0 var(--cbO), 0.30px 1.67px 0 var(--cbO), 0.00px 1.70px 0 var(--cbO), -0.30px 1.67px 0 var(--cbO), -0.58px 1.60px 0 var(--cbO), -0.85px 1.47px 0 var(--cbO), -1.09px 1.30px 0 var(--cbO), -1.30px 1.09px 0 var(--cbO), -1.47px 0.85px 0 var(--cbO), -1.60px 0.58px 0 var(--cbO), -1.67px 0.30px 0 var(--cbO), -1.70px 0.00px 0 var(--cbO), -1.67px -0.30px 0 var(--cbO), -1.60px -0.58px 0 var(--cbO), -1.47px -0.85px 0 var(--cbO), -1.30px -1.09px 0 var(--cbO), -1.09px -1.30px 0 var(--cbO), -0.85px -1.47px 0 var(--cbO), -0.58px -1.60px 0 var(--cbO), -0.30px -1.67px 0 var(--cbO), -0.00px -1.70px 0 var(--cbO), 0.30px -1.67px 0 var(--cbO), 0.58px -1.60px 0 var(--cbO), 0.85px -1.47px 0 var(--cbO), 1.09px -1.30px 0 var(--cbO), 1.30px -1.09px 0 var(--cbO), 1.47px -0.85px 0 var(--cbO), 1.60px -0.58px 0 var(--cbO), 1.67px -0.30px 0 var(--cbO), 1.29px 0.00px 0 var(--cbO), 1.25px 0.33px 0 var(--cbO), 1.12px 0.65px 0 var(--cbO), 0.91px 0.91px 0 var(--cbO), 0.65px 1.12px 0 var(--cbO), 0.33px 1.25px 0 var(--cbO), 0.00px 1.29px 0 var(--cbO), -0.33px 1.25px 0 var(--cbO), -0.65px 1.12px 0 var(--cbO), -0.91px 0.91px 0 var(--cbO), -1.12px 0.65px 0 var(--cbO), -1.25px 0.33px 0 var(--cbO), -1.29px 0.00px 0 var(--cbO), -1.25px -0.33px 0 var(--cbO), -1.12px -0.65px 0 var(--cbO), -0.91px -0.91px 0 var(--cbO), -0.65px -1.12px 0 var(--cbO), -0.33px -1.25px 0 var(--cbO), -0.00px -1.29px 0 var(--cbO), 0.33px -1.25px 0 var(--cbO), 0.65px -1.12px 0 var(--cbO), 0.91px -0.91px 0 var(--cbO), 1.12px -0.65px 0 var(--cbO), 1.25px -0.33px 0 var(--cbO), 0.77px 0.00px 0 var(--cbO), 0.66px 0.38px 0 var(--cbO), 0.38px 0.66px 0 var(--cbO), 0.00px 0.77px 0 var(--cbO), -0.38px 0.66px 0 var(--cbO), -0.66px 0.38px 0 var(--cbO), -0.77px 0.00px 0 var(--cbO), -0.66px -0.38px 0 var(--cbO), -0.38px -0.66px 0 var(--cbO), -0.00px -0.77px 0 var(--cbO), 0.38px -0.66px 0 var(--cbO), 0.66px -0.38px 0 var(--cbO); }
.lg.fbj{ z-index:120; overflow-y:auto; overscroll-behavior:contain; padding:max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom)); align-items:flex-start;
  background:radial-gradient(90% 55% at 50% 0%, rgba(79,209,197,.16), rgba(79,209,197,0) 70%), radial-gradient(80% 60% at 50% 100%, rgba(167,139,250,.14), rgba(167,139,250,0) 70%),
    linear-gradient(180deg, rgba(5,12,32,.93), rgba(3,7,20,.97)); }
.lg.fbj .lgc{ position:relative; width:min(100%,400px); margin:auto; gap:10px; padding:16px 18px 14px; box-sizing:border-box; border-radius:22px;
  border:3px solid #284a66; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 2px 0 rgba(160,210,255,.12), 0 14px 40px rgba(0,0,0,.6);
  background:radial-gradient(120% 50% at 50% 0%, rgba(80,170,210,.14), rgba(80,170,210,0) 60%),
    linear-gradient(180deg, rgba(14,28,62,.97) 0%, rgba(8,17,42,.96) 60%, rgba(6,13,34,.92) 100%),
    url('/art/ocean/base.webp?v=1') 50% 100% / 100% auto no-repeat, #0a1533; }
.lg.fbj a{ color:#7fe3ff; }

/* ---------------------------------------------------------------- hero */
.fbh{ position:relative; text-align:center; }
.fbbadge{ display:block; width:auto; height:clamp(96px, 20vh, 176px); max-width:80%; margin:-4px auto 0; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.fbhero .fbbadge{ animation:fbBob 3.4s ease-in-out infinite; will-change:transform; }
@keyframes fbBob{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-6px) rotate(1deg); } }
.fbh .fbt{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.fbt{ font:400 34px 'Lilita One',var(--fun); color:#ffd27a; }
.fbtag{ margin:2px 0 0; text-align:center; font:400 24px/1.1 'Lilita One',var(--fun); letter-spacing:.02em; color:#ffd27a; --cbO:#4a2f04; text-shadow:var(--rgL), 0 3px 0 rgba(5,10,24,.55); }
.fbs{ margin-top:2px; color:var(--ink-2); font:500 14px/1.45 var(--font); }

/* ---------------------------------------------------------------- the 3 step chips */
.fbsteps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; counter-reset:fbs; }
.fbsteps li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px 7px; border-radius:14px; counter-increment:fbs;
  background:linear-gradient(180deg,#22335f,#121d40); border:2px solid #0a1230; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18), 0 3px 0 #0a1230; }
.fbsteps li::before{ content:counter(fbs); position:absolute; left:6px; top:5px; font:400 12px/1 'Lilita One',var(--fun); color:#8592b1; --cbO:#050a18; text-shadow:var(--rgS); }
.fbsteps .fbi{ width:32px; height:32px; overflow:visible; }
.fbsteps span{ font:400 14.5px/1.05 'Lilita One',var(--fun); letter-spacing:.03em; color:#fff; --cbO:#050a18; text-shadow:var(--rgS); white-space:nowrap; }
.fbsteps li:nth-child(2) span{ color:#e6eeff; }

/* ---------------------------------------------------------------- the name field */
.fbfield{ display:grid; gap:6px; }
.fbl{ font:400 18px/1 'Lilita One',var(--fun); letter-spacing:.03em; color:#fff; --cbO:#050a18; text-shadow:var(--rgS); margin-top:2px; }
.fbrow{ display:flex; gap:8px; align-items:stretch; }
.lg.fbj input[type=text]{ flex:1 1 auto; min-width:0; width:100%; box-sizing:border-box; height:52px; padding:0 14px; border-radius:14px;
  font:400 20px/1 'Lilita One',var(--fun); letter-spacing:.03em; color:#fff;
  background:linear-gradient(180deg,#040b1f,#0a1636); border:3px solid #284a66; box-shadow:inset 0 3px 8px rgba(0,0,0,.65), inset 0 -1px 0 rgba(120,170,230,.12), 0 1px 0 rgba(255,255,255,.05);
  outline:none; transition:border-color .15s, box-shadow .15s; caret-color:#ffd27a; }
.lg.fbj input[type=text]::placeholder{ color:#4f6488; opacity:1; }
.lg.fbj input[type=text]:focus{ border-color:#ffd27a; box-shadow:inset 0 3px 8px rgba(0,0,0,.65), 0 0 0 3px rgba(255,210,122,.28); }
.lg.fbj input.fbcodein{ font:700 17px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; text-transform:uppercase; }
.fbhint{ color:#8a9bbd; font:12px/1.35 var(--font); }

/* ---------------------------------------------------------------- candy buttons (the Cast button recipe) */
.lg.fbj .lgc button.fbgo, .lg.fbj .lgc button.fblink, .lg.fbj .lgc button.fbdice{ position:relative; cursor:pointer; color:#fff; box-sizing:border-box;
  border:3px solid var(--cbO); background:linear-gradient(180deg, var(--cbHi) 0%, var(--cbMid) 50%, var(--cbLo) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 var(--cbO), 0 9px 14px rgba(0,0,0,.38); margin-bottom:5px;
  transition:transform .08s, box-shadow .08s, filter .15s; -webkit-tap-highlight-color:transparent; }
.lg.fbj .lgc button.fbgo::after, .lg.fbj .lgc button.fblink::after, .lg.fbj .lgc button.fbdice::after{ content:''; position:absolute; left:9%; right:9%; top:3px; height:36%;
  border-radius:12px 12px 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events:none; }
.lg.fbj .lgc button.fbgo:hover, .lg.fbj .lgc button.fblink:hover, .lg.fbj .lgc button.fbdice:hover{ filter:brightness(1.06); }
.lg.fbj .lgc button.fbgo:active, .lg.fbj .lgc button.fblink:active, .lg.fbj .lgc button.fbdice:active{ transform:translateY(4px); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 var(--cbO), 0 4px 8px rgba(0,0,0,.35); }
.lg.fbj .lgc button:focus-visible{ outline:3px solid #ffd27a; outline-offset:3px; }
/* primary: teal, like Cast UP */
.lg.fbj .lgc button.fbgo{ --cbHi:#a8f5ec; --cbMid:#4fd1c5; --cbLo:#23a094; --cbO:#0c5049; min-height:56px; border-radius:16px; padding:4px 16px;
  font:400 25px/1 'Lilita One',var(--fun); letter-spacing:.03em; text-shadow:var(--rgL); }
/* not ready yet (still tappable: a tap says what is missing) / busy (disabled) */
.lg.fbj .lgc button.fbgo.off, .lg.fbj .lgc button.fbgo:disabled{ --cbHi:#53618a; --cbMid:#3a4668; --cbLo:#2a3352; --cbO:#121933; color:#9aa6c4; cursor:default; filter:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14), 0 5px 0 var(--cbO), 0 9px 14px rgba(0,0,0,.3); }
.lg.fbj .lgc button.fbgo.off::after, .lg.fbj .lgc button.fbgo:disabled::after{ opacity:.35; }
.lg.fbj .lgc button.fbgo:disabled:active{ transform:none; }
/* secondary: small slate */
.lg.fbj .lgc button.fblink{ --cbHi:#62779f; --cbMid:#3a4d78; --cbLo:#27365e; --cbO:#0a1230; justify-self:center; min-height:40px; padding:2px 18px; border-radius:13px;
  border-width:2.5px; font:400 16px/1 'Lilita One',var(--fun); letter-spacing:.03em; text-shadow:var(--rgS); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35), 0 4px 0 var(--cbO), 0 7px 10px rgba(0,0,0,.3); }
.lg.fbj .lgc button.fblink.danger{ --cbHi:#ff9aa8; --cbMid:#e0566c; --cbLo:#a8324a; --cbO:#4a0d1c; }
/* the dice: violet, like Cast DOWN */
.lg.fbj .lgc button.fbdice{ --cbHi:#ddd2ff; --cbMid:#a78bfa; --cbLo:#7a5ae0; --cbO:#3d2490; flex:none; width:52px; height:52px; padding:0; border-radius:14px; margin-bottom:5px;
  display:inline-flex; align-items:center; justify-content:center; }
.fbdice .fbi{ width:30px; height:30px; overflow:visible; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.fbdice.roll .fbi{ animation:fbRoll .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes fbRoll{ 0%{ transform:rotate(0) scale(1); } 40%{ transform:rotate(200deg) scale(.82); } 100%{ transform:rotate(360deg) scale(1); } }
.lg.fbj .lgc button.fbx{ position:absolute; right:10px; top:8px; z-index:2; min-height:0; width:36px; height:36px; border-radius:10px; background:none; border:0; color:var(--ink-2); font:400 26px var(--font); cursor:pointer; }

/* ---------------------------------------------------------------- candy check (18+, I saved my code) */
.fbck{ display:flex; gap:10px; align-items:center; cursor:pointer; color:#dfe7f8; font:400 15.5px/1.2 'Lilita One',var(--fun); letter-spacing:.02em; --cbO:#050a18; text-shadow:var(--rgS); }
.fbck a{ color:#7fe3ff; text-decoration:none; --cbO:#05213a; }
.fbck a:hover{ text-decoration:underline; }
.lg.fbj .fbck input[type=checkbox]{ -webkit-appearance:none; appearance:none; flex:none; width:30px; height:30px; margin:0 0 3px; border-radius:10px; cursor:pointer; position:relative;
  background:linear-gradient(180deg,#53618a,#2a3352); border:2.5px solid #0a1230; box-shadow:inset 0 2px 4px rgba(0,0,0,.45), 0 3px 0 #0a1230; transition:transform .1s; }
.lg.fbj .fbck input[type=checkbox]:checked{ background:linear-gradient(180deg,#a8f5ec 0%,#4fd1c5 50%,#23a094 100%); border-color:#0c5049; box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #0c5049; }
.lg.fbj .fbck input[type=checkbox]:checked::after{ content:''; position:absolute; inset:2px; background:no-repeat center / 20px 20px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230c5049' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lg.fbj .fbck input[type=checkbox]:focus-visible{ outline:3px solid #ffd27a; outline-offset:2px; }
.lg.fbj .fbck input[type=checkbox]:active{ transform:scale(.92); }

/* ---------------------------------------------------------------- Turnstile (interaction-only: no space unless it needs a tap) */
.fbts{ display:flex; justify-content:center; min-height:0; }
.fbts:empty{ display:none; }
.fbts[hidden]{ display:none; }
.fbts.on{ min-height:65px; padding:4px; border-radius:14px; background:#06102a; border:2px solid #284a66; }

/* ---------------------------------------------------------------- messages, text, footer */
.fbm{ min-height:17px; margin-top:-4px; text-align:center; color:#ff9aa8; font:400 14.5px/1.15 'Lilita One',var(--fun); letter-spacing:.02em; --cbO:#2a0710; text-shadow:var(--rgS); }
.fbm:empty{ min-height:0; height:0; margin-top:-10px; }
.fbm.ok{ color:#a8f5ec; --cbO:#05211e; }
.fbp{ margin:0; text-align:center; color:#c3cfe8; font:500 13.5px/1.45 var(--font); }
.fbcode{ font:700 clamp(15px, 4.9vw, 20px) ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.05em; white-space:nowrap; overflow-x:auto; text-align:center; padding:14px 8px; border-radius:14px; background:linear-gradient(180deg,#040b1f,#0a1636);
  border:3px dashed rgba(255,210,122,.7); box-shadow:inset 0 3px 8px rgba(0,0,0,.6); color:#ffe6a8; user-select:all; }
.fbf{ text-align:center; color:#7d8db0; font:12px/1.5 var(--font); }
.fbf a{ color:#9fdcf0; }

/* ---------------------------------------------------------------- welcome aboard: the assigned whale pops in */
.lg.fbj .lgc.fbwel{ overflow:hidden; }
.fbwelh{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:4px; }
.fbburst{ position:absolute; left:50%; top:62px; width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%; pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 0deg, rgba(255,210,122,.38) 0 10deg, rgba(255,210,122,0) 10deg 24deg);
  -webkit-mask:radial-gradient(circle, #000 25%, transparent 68%); mask:radial-gradient(circle, #000 25%, transparent 68%); animation:fbSpin 18s linear infinite; }
@keyframes fbSpin{ to{ transform:rotate(360deg); } }
.fbpfp{ position:relative; width:116px; height:116px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #2c4d7e, #0e1d40); border:4px solid #ffd27a; box-shadow:0 0 0 3px #4a2f04, 0 6px 0 #4a2f04, 0 12px 24px rgba(0,0,0,.5); animation:fbPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.fbpfp-l{ font:400 54px/1 'Lilita One',var(--fun); color:#ffd27a; --cbO:#4a2f04; text-shadow:var(--rgL); }
.fbpfp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(.8); transition:opacity .35s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.fbpfp.in img{ opacity:1; transform:scale(1); }
@keyframes fbPop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.fbh .fbt.fbwt{ position:relative; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; text-align:center; }
.fbwt small{ display:block; font:400 19px/1 'Lilita One',var(--fun); letter-spacing:.04em; color:#e6eeff; --cbO:#050a18; text-shadow:var(--rgS); }
.fbwt span{ display:block; margin-top:4px; font:400 32px/1.05 'Lilita One',var(--fun); letter-spacing:.02em; color:#ffd27a; --cbO:#4a2f04; text-shadow:var(--rgL), 0 4px 0 rgba(5,10,24,.6); word-break:break-word; }

/* ---------------------------------------------------------------- short phones (375x667 and the like): everything on one screen */
@media (max-height:760px){
  .lg.fbj .lgc{ gap:8px; padding:12px 16px 12px; }
  .fbbadge{ height:clamp(84px, 16vh, 120px); }
  .fbtag{ font-size:22px; }
  .fbsteps li{ padding:6px 4px 5px; }
  .fbsteps .fbi{ width:28px; height:28px; }
  .lg.fbj .lgc button.fbgo{ min-height:52px; font-size:23px; }
}
@media (max-height:680px){
  .fbbadge{ height:78px; }
  .fbsteps .fbi{ width:24px; height:24px; }
  .fbsteps span{ font-size:13.5px; }
  .fbhint{ font-size:11.5px; }
  .lg.fbj input[type=text]{ height:48px; }
  .lg.fbj .lgc button.fbdice{ width:48px; height:48px; }
  .fbpfp{ width:92px; height:92px; }
  .fbburst{ top:50px; }
  .fbwt span{ font-size:28px; }
}
@media (max-width:360px){ .fbsteps span{ font-size:12.5px; } .fbsteps{ gap:6px; } }
@media (prefers-reduced-motion: reduce){
  .fbhero .fbbadge, .fbburst, .fbpfp, .fbdice.roll .fbi{ animation:none !important; }
  .fbpfp img{ transition:none; transform:none; }
  .lg.fbj .lgc button{ transition:none !important; }
}

/* the name is fixed at join (no rename in the public game): no pencil, no button look on press */
#nm::after{ display:none !important; content:none !important; }
#nm{ cursor:default; }
#nm:active{ transform:none; }
#acctBtn{ margin-top:0; margin-left:6px; }
/* the wordmark in the top bar, left: sized to the bar, always visible (the desk hid its text logo on phones) */
.bar .logo.fblogo{ display:flex !important; align-items:center; flex:0 1 auto; min-width:0; height:40px; margin-right:auto; }
.bar .logo.fblogo img{ display:block; height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left center; filter:drop-shadow(0 1px 0 rgba(3,8,22,.9)) drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
@media (max-width:899px){ .bar .logo.fblogo{ height:34px; } }
@media (max-width:409px){ .bar .logo.fblogo{ height:30px; } }
/* the How to play badge in the help card header */
.hq .hq-logo{ height:54px; margin:-4px 0 -4px -2px; }
.hq .hq-logo img{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }