/* the free website: join a class game, nothing else (webjoin.js) */
html.webjoin #intro,html.webjoin #cTitle,html.webjoin .c-hud,html.webjoin .c-nav,html.webjoin #cNav,html.webjoin .tour,html.webjoin #tour,html.webjoin #consent,html.webjoin .adspot,html.webjoin .guest-link,html.webjoin #guestbar{display:none!important}
html.webjoin body.career .wrap{padding-top:18px;padding-bottom:30px}
html.webjoin #login .or,html.webjoin #login .socials,html.webjoin #login .swap,html.webjoin #signup{display:none!important}
html.webjoin #login .auth-top p::after{content:" Sign in with the email and password from your Blueprint app.";}
.wj{max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 4px 20px;color:#fff}
.wj-logo{width:min(250px,62vw);height:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));animation:inPop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes inPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.wj-card{width:100%;padding:20px 18px;border-radius:24px;text-align:center;background:radial-gradient(120% 80% at 50% 0%,rgba(95,208,255,.2),transparent 60%),linear-gradient(170deg,#1D3D8A,#0F1F4D 70%);box-shadow:inset 0 0 0 2px rgba(150,200,255,.25),0 16px 36px rgba(0,0,0,.45)}
.wj-card h1{margin:0;font:400 34px/1 var(--shout,'Barlow Condensed'),sans-serif;text-transform:uppercase;-webkit-text-stroke:5px #0A1433;paint-order:stroke fill}
.wj-card p{margin:8px 0 14px;font:600 15px Barlow,system-ui,sans-serif;color:#C9D8F7}
#wjForm{display:flex;flex-direction:column;gap:10px}
.wj-code{width:100%;padding:12px;border:0;border-radius:16px;text-align:center;background:#fff;color:#0B1D45;font:400 46px/1 var(--shout,'Barlow Condensed'),sans-serif;letter-spacing:.18em;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.wj-code::placeholder{color:#C3CCE0}
.wj-name{text-align:center;font-size:18px}
.wj-acct{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);font:600 14px/1.35 Barlow,system-ui,sans-serif;color:#D5E3FF}
.wj-acct span{flex:1}.wj-acct b{color:#FFD964}
.wj-acct .c-btn{min-height:44px;font-size:16px}
.wj-app{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(170deg,#17603F,#0D2E3A);box-shadow:inset 0 0 0 2px rgba(61,214,140,.5),0 8px 18px rgba(0,0,0,.35)}
.wj-app img{width:96px;aspect-ratio:3/2;object-fit:cover;border-radius:12px;flex:none}
.wj-app span{flex:1;display:flex;flex-direction:column;gap:2px}.wj-app b{font:800 18px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.wj-app small{font:600 12px/1.3 Barlow,system-ui,sans-serif;color:#D5F5E6}
.wj-app em{font:800 13px 'Barlow Condensed',sans-serif;font-style:normal;text-transform:uppercase;color:#0B2A1C;background:#7CF0B4;padding:6px 9px;border-radius:10px;flex:none}
.wj-foot{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font:600 13px Barlow,system-ui,sans-serif}
.wj-foot a{color:#9FB4E4;text-decoration:none}
/* end of game: get the app */
.wj-promo .bpd-card{padding-top:20px}
.wj-pimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:12px;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.wj-promo .bpd-yes{display:grid;place-items:center;text-decoration:none}

html.webjoin #asGuest,html.webjoin #asGuest2{display:none!important}
.wj-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:8px 14px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:700 14px Barlow,system-ui,sans-serif;cursor:pointer}
html.webjoin #player .cap{margin-top:50px}

/* teachers: host from the computer */
.wj-host{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border:0;border-radius:18px;cursor:pointer;text-align:left;color:#fff;background:linear-gradient(170deg,#7A4A06,#3A2206);box-shadow:inset 0 0 0 2px rgba(255,201,60,.6),0 8px 18px rgba(0,0,0,.35)}
.wj-host img{width:96px;aspect-ratio:3/2;object-fit:cover;border-radius:12px;flex:none}
.wj-host span{flex:1;display:flex;flex-direction:column;gap:2px}.wj-host b{font:800 18px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.wj-host small{font:600 12px/1.3 Barlow,system-ui,sans-serif;color:#FFE7B0}
.wj-host em{font:800 13px 'Barlow Condensed',sans-serif;font-style:normal;text-transform:uppercase;color:#3A1E00;background:#FFC93C;padding:6px 12px;border-radius:10px;flex:none}