/* The friends panel (js/social.js): same chunky neon style as the games */
#soc{position:fixed;left:14px;top:64px;z-index:40;font-family:system-ui,sans-serif;color:#fff}
#soc[hidden]{display:none !important}
.soc-btn{position:relative;display:flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:6px 12px;font:20px "Jersey 10",monospace;color:#fff;background:#16112ce6;box-shadow:0 0 0 2px #0a0a0c,0 0 0 4px #42b642}
.soc-btn:hover{translate:-1px -1px}
.soc-on{font-size:15px;color:#7dff9a}
.soc-btn em,.soc-tabs em,.soc-row em{position:absolute;right:-8px;top:-8px;min-width:20px;font:15px/20px "Jersey 10",monospace;font-style:normal;text-align:center;background:#ef2029;color:#fff;padding:0 4px;box-shadow:0 0 0 2px #0a0a0c}
.soc-panel{margin-top:10px;width:min(330px,calc(100vw - 28px));max-height:min(70vh,520px);display:flex;flex-direction:column;background:linear-gradient(180deg,#2c2350,#16112c);box-shadow:0 0 0 2px #0a0a0c,0 0 0 4px #42b642,6px 6px 0 4px #0a0a0c;overflow:hidden}
.soc-tabs{display:flex;gap:4px;padding:8px}
.soc-tabs button{position:relative;flex:1;border:0;cursor:pointer;padding:6px 4px;font:17px "Jersey 10",monospace;color:#fff;background:#0a0a0c88;box-shadow:0 0 0 2px #4a4a52}
.soc-tabs button.on{background:#42b642;color:#0a0a0c;box-shadow:0 0 0 2px #0a0a0c}
.soc-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid #ffffff14}
.soc-row .dot{width:10px;height:10px;border-radius:50%;background:#555;flex:none}.soc-row .dot.on{background:#42ff7a;box-shadow:0 0 8px #42ff7a}
.soc-n{flex:1;min-width:0}.soc-n b{display:block;font:20px/1 "Jersey 10",monospace;overflow:hidden;text-overflow:ellipsis}.soc-n small{font-size:11px;opacity:.7}
.soc-row button{position:relative;border:0;cursor:pointer;width:36px;height:32px;font-size:16px;color:#fff;background:#0a0a0c88;box-shadow:0 0 0 2px #31c7ef}
.soc-row button.x{box-shadow:0 0 0 2px #4a4a52;opacity:.7}.soc-row button.ok{background:#42b642;color:#0a0a0c;box-shadow:0 0 0 2px #0a0a0c}
.soc-empty{padding:12px;font-size:13px;opacity:.85;line-height:1.4}
.soc-say{display:flex;gap:6px;padding:8px;border-top:1px solid #ffffff14}
.soc-say input{flex:1;min-width:0;font:16px system-ui;padding:7px 8px;border:0;background:#0a0a0c;color:#fff;box-shadow:0 0 0 2px #31c7ef;outline:none;user-select:text;-webkit-user-select:text}
.soc-say button{border:0;cursor:pointer;padding:0 12px;font:18px "Jersey 10",monospace;background:#42b642;color:#0a0a0c;box-shadow:0 0 0 2px #0a0a0c}
.soc-chathead{display:flex;align-items:center;gap:8px;padding:8px}
.soc-chathead button{border:0;cursor:pointer;width:34px;height:30px;color:#fff;background:#0a0a0c88;box-shadow:0 0 0 2px #4a4a52}.soc-chathead b{font:22px "Jersey 10",monospace}
.soc-msgs{flex:1;min-height:160px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px}
.soc-msgs div{display:flex}.soc-msgs div.me{justify-content:flex-end}
.soc-msgs span{max-width:80%;padding:6px 10px;font-size:14px;line-height:1.3;background:#0a0a0caa;box-shadow:0 0 0 1px #4a4a52;word-wrap:break-word;user-select:text;-webkit-user-select:text}
.soc-msgs .me span{background:#31c7ef;color:#0a0a0c;box-shadow:none}
.soc-note{padding:8px 10px;font-size:13px;background:#ffd21f;color:#0a0a0c}
#soc-invite{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:10px 12px;font:15px system-ui;color:#fff;background:#16112cf2;box-shadow:0 0 0 2px #0a0a0c,0 0 0 4px #ffd21f,0 0 24px #ffd21f88;animation:socin .3s ease-out}
#soc-invite[hidden]{display:none}
#soc-invite span{flex:1;min-width:0}
#soc-invite button{border:0;cursor:pointer;padding:6px 12px;font:18px "Jersey 10",monospace;background:#ffd21f;color:#0a0a0c;box-shadow:0 0 0 2px #0a0a0c}
#soc-invite button[data-p="x"]{background:#0a0a0c88;color:#fff;box-shadow:0 0 0 2px #4a4a52}
@keyframes socin{from{transform:translate(-50%,-20px);opacity:0}}
/* where the button sits on each page */
body.spleef #soc{top:104px}
body.spleef.touch #soc{top:104px;left:8px}
@media (max-width:700px){#soc{top:56px;left:8px}.soc-btn{font-size:17px;padding:5px 9px}}
@media (max-width:700px){body:not(.spleef):not(.islands) #soc{top:auto;bottom:10px;display:flex;flex-direction:column-reverse}body:not(.spleef):not(.islands) .soc-panel{margin:0 0 10px}}

.soc-btns{display:flex;gap:8px}
.soc-gb{box-shadow:0 0 0 2px #0a0a0c,0 0 0 4px #ffb43a}
.soc-dc{display:flex;flex-direction:column;gap:2px;margin:8px 8px 0;padding:8px 10px;text-decoration:none;color:#fff;background:#5865f2;box-shadow:0 0 0 2px #0a0a0c}
.soc-dc:hover{background:#4752c4}.soc-dc b{font:18px "Jersey 10",monospace;font-weight:normal}.soc-dc span{font-size:12px;opacity:.9}
.soc-games{padding-bottom:8px}.soc-gh{font:16px "Jersey 10",monospace;padding:8px 10px 2px;opacity:.75}
.soc-g{display:flex;flex-direction:column;margin:6px 8px 0;padding:8px 10px;text-decoration:none;color:#fff;background:#0a0a0c88;box-shadow:0 0 0 2px #4a4a52}
.soc-g:hover{box-shadow:0 0 0 2px #ffb43a}.soc-g.here{box-shadow:0 0 0 2px #42b642;opacity:.8}.soc-g b{font:20px "Jersey 10",monospace;font-weight:normal}.soc-g small{font-size:11px;opacity:.75}
.soc-hint{display:block;margin-top:6px;padding:4px 8px;max-width:240px;font-size:12px;line-height:1.3;color:#fff;text-decoration:none;background:#5865f2dd;box-shadow:0 0 0 2px #0a0a0c}
.soc-hint b{font-weight:600;white-space:nowrap}.soc-hint:hover{background:#4752c4}
@media (max-width:700px){.soc-hint{display:none}}
/* the buttons wear the games' own chunky style (Block Friends' HELP / SOUND), scaled to sit beside them */
.soc-btns{zoom:var(--s,.62);gap:16px;align-items:flex-start}
.soc-btn{--c:#42b642;display:flex;align-items:center;gap:10px;font:30px "Jersey 10",monospace;letter-spacing:.04em;color:#fff;text-shadow:2px 2px #0a0a0c;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 38%,#1a1430) 0 50%,#1a1430 50%);border:0;padding:6px 16px 6px 6px;box-shadow:0 0 0 3px #0a0a0c,inset 0 0 0 3px var(--c),6px 6px 0 #0a0a0c;cursor:pointer;transition:transform .06s}
.soc-btn i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;background:var(--c);text-shadow:none;font-size:26px;box-shadow:inset 3px 3px 0 #fff8,inset -3px -3px 0 #0005}
.soc-btn:hover{translate:0 0;transform:translate(-2px,-2px);box-shadow:0 0 0 3px #0a0a0c,inset 0 0 0 3px var(--c),8px 8px 0 #0a0a0c,0 0 18px var(--c)}
.soc-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 3px #0a0a0c,inset 0 0 0 3px var(--c),2px 2px 0 #0a0a0c}
.soc-btn .soc-on{font-size:20px}.soc-btn em{font-size:20px;line-height:26px;min-width:26px;right:-10px;top:-12px}
.soc-gb{--c:#ffb43a}
body.islands #soc,body.spleef #soc{left:max(12px,env(safe-area-inset-left))}
@media (max-width:700px){.soc-btns{zoom:.5}}