.social-window { position:absolute; z-index:10; padding:0; border:0; color:#fff; font:12px/16px Arial,sans-serif; text-shadow:1px 1px #000; }
.social-window[hidden] { display:none; }
.menu-trade[aria-pressed='true'] { background-image:url('/ui/button-trade-pressed.png?v=6295bdb7c20cd1de'); }
.menu-friend[aria-pressed='true'] { background-image:url('/ui/button-friend-pressed.png?v=a55693a319151953'); }
.social-art { position:absolute; padding:0; border:0; border-radius:0; background:var(--social-art) no-repeat; width:64px; height:22px; }
.social-art:active,.social-art[aria-pressed='true'] { background-image:var(--social-pressed); }
.social-art:disabled { cursor:default; }
.social-art:focus-visible,.social-trade-slot:focus-visible,.social-friend-entry:focus-visible { outline:1px solid #ffff80; outline-offset:1px; }
.social-close-x,.social-help-x { width:15px; height:15px; }
.social-up,.social-down { width:17px; height:17px; }
.social-friends { left:8px; top:40px; width:215px; height:375px; background:url('/ui/social/friend-frame.png?v=60e2d32c4c9b194b') no-repeat; }
.social-friend-title { position:absolute; left:70px; top:10px; width:80px; height:17px; }
.social-friend-list { position:absolute; left:22px; top:40px; width:150px; height:250px; overflow:auto; scrollbar-width:thin; scrollbar-color:#b8a874 #102635; }
.social-friend-entry { display:block; width:100%; padding:2px 0; border:0; background:transparent; color:#ff0000; font:11px/18px Arial,sans-serif; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.social-friend-entry[data-online='true'] { color:#fff; }
#social-friend-close { left:175px; top:10px; }
#social-friend-help { left:155px; top:10px; }
#social-friend-up { left:156px; top:40px; }
#social-friend-down { left:156px; top:271px; }
#social-make-friends { left:70px; top:308px; }
#social-enemy { left:80px; top:340px; width:43px; }
#social-partner { left:140px; top:340px; width:44px; }
.social-trade { left:8px; top:40px; width:335px; height:308px; background:url('/ui/social/trade-frame.png?v=df80a1d90724dd2f') no-repeat; }
.social-trade-partner { position:absolute; left:20px; top:28px; width:122px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.social-trade-level { position:absolute; left:156px; top:28px; }
.social-trade-grid { position:absolute; left:20px; width:129px; height:86px; display:grid; grid-template-columns:repeat(3,43px); grid-template-rows:repeat(2,43px); }
.social-trade-other { top:56px; }
.social-trade-own { top:167px; }
.social-trade-slot { position:relative; width:43px; height:43px; padding:1px; border:0; border-radius:0; background:transparent; }
.social-trade-slot:disabled { opacity:1; }
.social-trade-slot img { position:relative; z-index:1; width:41px; height:41px; object-fit:contain; }
.social-trade-other-silver { position:absolute; left:215px; top:75px; width:88px; text-align:right; }
.social-trade-silver { position:absolute; left:211px; top:187px; width:88px; height:16px; margin:0; padding:0 2px; border:0; background:transparent; border-radius:0; color:#fff; font:12px/16px Arial,sans-serif; text-align:right; }
.social-trade-silver[aria-invalid='true'] { color:#ff7777; }
#social-trade-silver-confirm { left:186px; top:236px; }
/* CPs: the frame's own silver box, cut from trade-frame.png and set below each silver box, labelled like the bag's CPs row. */
.social-trade-cps-box { position:absolute; left:212px; width:96px; height:22px; background:url('/ui/social/trade-frame.png?v=df80a1d90724dd2f') -212px -73px no-repeat; }
.social-trade-cps-box::before { content:attr(data-label); position:absolute; right:calc(100% + 6px); top:0; color:#f0dfae; font:11px/22px Arial,sans-serif; text-shadow:1px 1px #000; }
#social-trade-other-cps-box { top:99px; }
#social-trade-own-cps-box { top:211px; }
.social-trade-other-cps { position:absolute; left:215px; top:101px; width:88px; text-align:right; color:#ffd75a; }
.social-trade-cps { position:absolute; left:211px; top:213px; width:88px; height:16px; margin:0; padding:0 2px; border:0; background:transparent; border-radius:0; color:#fff; font:12px/16px Arial,sans-serif; text-align:right; }
.social-trade-cps[aria-invalid='true'] { color:#ff7777; }
#social-trade-cps-confirm { left:254px; top:236px; }
#social-trade-other-confirmed { left:186px; top:124px; }
#social-trade-other-confirmed:not([aria-pressed='true']) { opacity:.45; }
#social-trade-confirm { left:112px; top:261px; width:40px; }
#social-trade-help { left:24px; top:261px; width:48px; }
#social-trade-close { left:222px; top:261px; }
#social-trade-x { left:303px; top:8px; }
#social-trade-other-up { left:152px; top:57px; }
#social-trade-other-down { left:152px; top:120px; }
#social-trade-own-up { left:152px; top:168px; }
#social-trade-own-down { left:152px; top:233px; }
.social-trade-state { position:absolute; left:12px; top:307px; width:315px; color:#ffffb0; font:11px/14px Arial,sans-serif; }
.social-prompt-blocker { position:absolute; inset:0; z-index:19; }
.social-prompt-blocker[hidden] { display:none; }
.social-prompt { z-index:20; left:50%; top:30%; transform:translateX(-50%); width:300px; height:110px; background:url('/ui/social/prompt-frame.png?v=b1fb5cbec0d260f7') no-repeat; }
.social-prompt-text { position:absolute; left:10px; top:9px; width:270px; max-height:55px; margin:0; color:#fff; font:12px/16px Arial,sans-serif; overflow-wrap:anywhere; }
/* Seconds left on the invitation, beside the OK/Cancel buttons. */
.social-prompt-expiry { position:absolute; left:12px; top:72px; width:125px; margin:0; color:#ffd56a; font:11px/14px Arial,sans-serif; text-shadow:1px 1px #000; }
#social-prompt-ok { left:145px; top:67px; width:40px; }
#social-prompt-cancel { left:215px; top:67px; width:40px; }
.social-notice { position:absolute; z-index:9; top:20px; left:8px; right:8px; margin:0; color:#ffff80; pointer-events:none; font:12px/16px Arial,sans-serif; text-shadow:1px 1px #000; }
.social-notice:empty { display:none; }
.social-fireworks { position:absolute; z-index:6; inset:0; width:100%; height:100%; pointer-events:none; }
@media (max-width:600px) { .social-trade { top:50px; } .social-friends { top:50px; } }