/* Entry screen: the BB mark's white, black and coral street-game identity. */
#join-gate { --join-black:#090909; --join-panel:#191919; --join-white:#fafafa; --join-muted:#b8b8b8; --join-coral:#ff604b; position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:#101010; color:var(--join-white); font:15px/1.5 "Avenir Next",Arial,sans-serif; padding:32px 24px; overflow:auto; color-scheme:dark; }
#join-gate section { position:relative; width:min(460px,100%); padding:24px 36px 30px; background:var(--join-panel); border:3px solid var(--join-black); border-radius:4px; box-shadow:0 0 0 1px #777,8px 8px 0 var(--join-black),10px 10px 0 var(--join-coral); }
#join-gate .join-brand { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
#join-gate .join-logo { width:124px; height:124px; margin:-16px 0 -10px -20px; }
#join-gate .join-brand>span { font:700 10px/1.5 "Courier New",monospace; letter-spacing:1.5px; color:var(--join-muted); max-width:90px; text-align:right; }
#join-gate h1 { font:900 clamp(44px,8vw,64px)/.94 Impact,"Arial Black",sans-serif; letter-spacing:-.5px; margin:16px 0; color:var(--join-white); text-shadow:3px 3px 0 var(--join-black); }
#join-gate h1 span { color:var(--join-coral); }
#join-gate .join-intro { color:var(--join-muted); font-size:15px; margin:0; }
#join-gate form { margin-top:30px; }
#join-gate label { display:block; margin-bottom:10px; font-size:11px; font-weight:800; letter-spacing:1.5px; }
#join-gate input { display:block; width:100%; min-height:56px; padding:14px 16px; border:2px solid #777; border-radius:2px; background:var(--join-black); color:var(--join-white); font:600 16px/1.4 "Avenir Next",Arial,sans-serif; outline:none; }
#join-gate input::placeholder { color:#999; font-weight:400; }
#join-gate input:focus { border-color:var(--join-coral); box-shadow:0 0 0 3px #ff604b30; }
#join-gate #name-help { margin:8px 0 0; font-size:12px; color:var(--join-muted); }
#join-gate button { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:58px; margin-top:24px; padding:12px 18px; border:2px solid var(--join-black); border-radius:2px; background:var(--join-coral); color:var(--join-black); box-shadow:3px 3px 0 var(--join-white); font:900 20px/1.2 "Arial Black","Avenir Next",sans-serif; letter-spacing:-.5px; cursor:pointer; transition:transform .12s,box-shadow .12s; }
#join-gate button>span:last-child { font:700 28px/1 Arial,sans-serif; }
#join-gate button:hover:not(:disabled) { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--join-white); }
#join-gate button:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--join-white); }
#join-gate button:focus-visible { outline:2px solid var(--join-white); outline-offset:6px; }
#join-gate button:disabled { opacity:.6; cursor:wait; }
#join-gate .join-note { margin:20px 0 0; color:var(--join-muted); font-size:12px; text-align:center; }
#join-gate [hidden] { display:none; }
.session-error { color:#ffcb91; font:12px/1.5 system-ui; margin-top:8px; }
#join-gate .session-error:empty { display:none; }
#join-gate .session-error:not(:empty) { margin-top:20px; padding:12px; border-left:3px solid var(--join-coral); background:var(--join-black); color:var(--join-white); }
@media(max-width:480px) { #join-gate { padding:24px 20px; } #join-gate section { padding:20px 24px 24px; } }
@media(prefers-reduced-motion:reduce) { #join-gate button { transition:none; } }
#social-ui { position:fixed; left:20px; top:110px; z-index:25; width:280px; padding:12px; border:1px solid #ffffff25; border-radius:12px; background:#111925df; color:#e7edf5; font:12px/1.5 system-ui; }
.social-top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } #connection-status { color:#bfcdfc; }
#social-ui button { background:none; color:inherit; border:0; text-decoration:underline; cursor:pointer; margin-left:auto; }
#join-feed { list-style:none; margin:8px 0; } #join-feed time { color:#98a5b6; }
.avatar-upload { display:inline-block; padding:6px 10px; border:1px solid #ffffff40; border-radius:6px; cursor:pointer; }
#social-ui small { display:block; margin-top:4px; color:#98a5b6; }
.player-name { position:fixed; left:0; top:0; z-index:16; background:#101722dd; color:white; padding:3px 9px; border-radius:5px; pointer-events:none; font:600 12px system-ui; white-space:nowrap; }
.player-name[hidden] { display:none; } #ad-bid { width:100%; padding:12px; }
@media(max-width:600px) { #social-ui { width:210px; left:10px; top:108px; } }
.url-ranking { max-height:160px; overflow:auto; margin:12px 0; padding-left:24px; font:12px/1.7 system-ui; overflow-wrap:anywhere; }
.bid-summary { overflow-wrap:anywhere; }