#ae-social{--as-ink:var(--well,#0b0810);--as-panel:#17111f;--as-edge:var(--bronze,#8a6a3a);--as-gold:var(--gold2,#f4d47c);--as-text:var(--parch,#eadfc6);--as-dim:var(--dim,#b2a28d);position:fixed;inset:0;z-index:25;pointer-events:none;color:var(--as-text);font:calc(15px * var(--txt))/1.4 var(--f-ui,"Pixelify Sans",sans-serif)}
#ae-social *,#ae-social *::before,#ae-social *::after{box-sizing:border-box}
#ae-social [hidden]{display:none!important}
#ae-social button,#ae-social input,#ae-social select{font:inherit}
#ae-social button{cursor:pointer;touch-action:manipulation}
#ae-social button:disabled{cursor:default;opacity:.55}
#ae-social button:focus-visible,#ae-social input:focus-visible,#ae-social select:focus-visible{outline:2px solid var(--as-gold);outline-offset:2px}
#ae-social .as-button{min-height:38px;padding:7px 13px;color:var(--as-text);background:linear-gradient(#2b2230,#18121e);border:1px solid var(--as-edge);box-shadow:inset 0 0 0 1px #0006;text-shadow:0 1px #000}
#ae-social .as-button:hover:not(:disabled){border-color:var(--as-gold);color:var(--as-gold)}
#ae-social .as-primary{background:linear-gradient(#54401f,#332512);color:var(--as-gold);border-color:#b68b40}
#ae-social .as-danger{color:#ff9e91}
#ae-social .as-cover{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:#07060bb8;pointer-events:auto}
#ae-social .as-floating{position:absolute;right:18px;top:82px;pointer-events:auto;max-width:calc(100vw - 36px)}
#ae-social .as-window{display:flex;flex-direction:column;width:min(430px,calc(100vw - 36px));max-height:calc(100dvh - 36px);min-width:0;background:linear-gradient(120deg,#221826,#120e19 70%);border:2px solid var(--as-edge);box-shadow:0 18px 70px #000b,inset 0 0 0 2px #0005;pointer-events:auto}
#ae-social .as-window:focus{outline:none}
#ae-social .as-window-head{flex:none;display:flex;align-items:center;gap:12px;min-height:55px;padding:9px 14px;border-bottom:1px solid #715138;background:#110d18}
#ae-social h2{flex:1;min-width:0;font:400 30px/1.1 var(--f-title,"Jacquard 12",serif);color:var(--as-gold);margin:0;overflow-wrap:anywhere;text-shadow:0 2px #000}
#ae-social h3{font:500 calc(18px * var(--txt))/1.25 var(--f-ui,"Pixelify Sans",sans-serif);color:var(--as-gold);margin:4px 0 10px}
#ae-social p{margin:6px 0 12px}
#ae-social .as-close{flex:none;width:36px;min-height:34px;padding:0;font:24px/1 sans-serif}
#ae-social .as-window-body{padding:16px;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--as-edge) var(--as-ink)}
#ae-social .as-note{color:var(--as-dim);font-size:calc(13px * var(--txt));line-height:1.45}
#ae-social .as-actions{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin:10px 0}
#ae-social .as-field{display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--as-dim);font-size:calc(13px * var(--txt));margin:10px 0}
#ae-social input,#ae-social select{min-height:38px;width:100%;padding:8px 9px;background:var(--as-ink);color:var(--as-text);border:1px solid var(--as-edge);border-radius:0}
#ae-social .as-party-toggle{position:absolute;right:10px;top:44px;min-height:28px;padding:4px 10px;font-size:calc(12px * var(--txt));pointer-events:auto}
#ae-social .as-party-frames{position:absolute;left:12px;top:96px;width:186px;display:grid;gap:4px;pointer-events:auto}
#ae-social .as-member{width:100%;min-height:54px;text-align:left;border:1px solid #655039;background:#110d18e8;color:var(--as-text);padding:6px 8px;box-shadow:0 2px 8px #0007}
#ae-social .as-member-line{display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:calc(12px * var(--txt))}
#ae-social .as-member-line b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#ae-social .as-member-line>span{flex:none;color:var(--as-dim);font-size:calc(11px * var(--txt))}
#ae-social .as-member small{display:block;color:var(--as-dim);font-size:calc(10px * var(--txt));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ae-social .as-meter{height:7px;width:100%;background:#09070d;border:1px solid #49343b;margin:4px 0;overflow:hidden}
#ae-social .as-meter>span{display:block;height:100%;background:linear-gradient(90deg,#8d2630,#ce4a48)}
#ae-social .as-meter.as-mana{height:4px;margin:3px 0}
#ae-social .as-meter.as-mana>span{background:linear-gradient(90deg,#315795,#6591d4)}
#ae-social .as-offline{opacity:.65}
#ae-social .as-party-window{width:min(350px,calc(100vw - 36px))}
#ae-social .as-party-card{padding:10px 0;border-bottom:1px solid #58412f;margin-bottom:9px}
#ae-social .as-party-card .as-note{margin:4px 0}
#ae-social .as-tag{font-size:calc(11px * var(--txt));color:var(--as-gold)}
#ae-social .as-notices{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:min(510px,calc(100vw - 28px));display:grid;gap:6px;z-index:4}
#ae-social .as-notice{padding:10px 14px;border:1px solid #887343;background:#14101bf5;color:var(--as-gold);box-shadow:0 6px 25px #0008;text-align:center}
#ae-social .as-warning{color:#ffb698!important}
/* invitations and the outgoing trade request: small toasts with a countdown, never modal */
#ae-social .as-invitations{position:absolute;right:12px;top:83px;display:grid;gap:8px;max-height:calc(100dvh - 105px);overflow:auto;width:min(290px,calc(100vw - 24px));pointer-events:auto;z-index:3}
#ae-social .as-invite{padding:9px 12px 10px;background:#15101df2;border:2px solid #997544;box-shadow:0 8px 26px #000a}
#ae-social .as-invite h3{font-size:calc(15px * var(--txt));margin:0 0 3px}
#ae-social .as-invite p{font-size:calc(13px * var(--txt));margin:2px 0}
#ae-social .as-invite .as-actions{margin:7px 0 0;gap:6px}
#ae-social .as-invite .as-button{flex:1;min-height:36px;padding:5px 10px}
#ae-social .as-outgoing{border-color:#6f5a3b;background:#120e19ee}
#ae-social .as-countdown{color:var(--as-gold)}
/* the trade window (Troca), as before 2026-10-07 (social.js buildTrade / renderTrade) */
#ae-social .as-trade-window{width:min(820px,calc(100vw - 36px))}
#ae-social .as-trade-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
#ae-social .as-trade-side{min-width:0}
#ae-social .as-trade-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));position:relative;aspect-ratio:2;background:#07070c;border:2px solid #705031;min-width:0}
#ae-social .as-grid-cell{margin:0;padding:0;min-width:0;min-height:0;background:linear-gradient(135deg,#1b1521,#0e0b12);border:0;border-right:1px solid #3c2e25;border-bottom:1px solid #3c2e25;outline-offset:-3px}
#ae-social .as-grid-cell:hover{background:#352a20}
#ae-social .as-grid-cell:disabled{opacity:1}
#ae-social .as-offered-item{position:absolute;padding:2px;min-height:0;background:#221b2d;border:1px solid #a48243;overflow:hidden}
#ae-social .as-offered-item:disabled{opacity:1}
#ae-social .as-item-picture{position:relative;display:grid;place-items:center;width:100%;height:100%;font-size:24px;line-height:1}
#ae-social .as-item-picture img{display:block;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
#ae-social .as-item-qty{position:absolute;right:2px;bottom:2px;padding:2px;background:#07060ada;color:#fff;font-size:calc(10px * var(--txt))}
#ae-social .as-offer-zen{color:var(--as-gold);text-align:right;font-size:calc(17px * var(--txt));margin:7px 0 3px}
#ae-social .as-offer-ready{font-size:calc(12px * var(--txt));color:var(--as-dim);margin:0 0 9px;text-align:right}
#ae-social .as-ready{color:#8cde9c}
#ae-social .as-trade-zen{width:180px;margin:0}
#ae-social .as-trade-bag{display:flex;flex-wrap:wrap;gap:6px;min-height:54px;max-height:130px;overflow:auto}
#ae-social .as-bag-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:calc(112px * var(--txt-h));min-height:74px;padding:6px;overflow:hidden}
#ae-social .as-bag-item .as-item-picture{height:34px}
#ae-social .as-bag-item>span:last-child{font-size:calc(11px * var(--txt));width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15;overflow-wrap:anywhere;text-align:center}
/* "Tamanho do texto": the bag picker's item names wrap to two lines instead of an ellipsis */
#ae-social .as-selected{border-color:var(--as-gold);box-shadow:inset 0 0 0 1px var(--as-gold);background:#493619}
#ae-social .as-trade-footer{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #705031;background:#110d18}
#ae-social .as-trade-status{width:100%;font-size:calc(13px * var(--txt));margin:0 0 4px}
#ae-social .as-bound-note{border-top:1px solid #4f3a2b;padding-top:9px;margin-top:12px}
/* the player card (Social.select): a click on a player selects them; Trocar / Party / Sussurrar / Duelo */
#ae-social .as-card{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:min(330px,calc(100vw - 24px));padding:7px 9px 8px;background:#15101df2;border:2px solid #997544;box-shadow:0 6px 22px #000a;pointer-events:auto;z-index:2}
#ae-social .as-card-head{display:flex;align-items:center;gap:8px}
#ae-social .as-card-name{flex:1;min-width:0;font-size:calc(16px * var(--txt));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px #000}
#ae-social .as-card-x{flex:none;width:30px;min-height:28px;padding:0;font:20px/1 sans-serif}
#ae-social .as-card-info{margin:1px 0 6px;color:var(--as-dim);font-size:calc(12px * var(--txt))}
#ae-social .as-card-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:5px}
#ae-social .as-card-btn{min-height:40px;padding:4px 6px;font-size:calc(13px * var(--txt));white-space:nowrap}
#ae-social .as-card-status{margin:5px 0 0;font-size:calc(12px * var(--txt));color:var(--as-gold)}
#ae-social .as-card-status:empty{display:none}
#ae-social .as-pk{position:absolute;right:12px;top:83px;padding:5px 9px;color:var(--as-gold);border:1px solid #8b6839;background:#160e1bf0;font-size:calc(12px * var(--txt))}
#ae-social .as-outlaw{color:#ffac60;border-color:#b57530}
#ae-social .as-murderer{color:#ff7775;border-color:#b94a42}
#ae-social .as-aggressor{color:#d69bff;border-color:#7f4bac}
#ae-social .as-duel-banner{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:9px 16px;background:#110d1bf0;border:2px solid #9f783e;color:var(--as-gold);box-shadow:0 4px 18px #0009;white-space:nowrap;pointer-events:auto;max-width:calc(100vw - 28px)}
#ae-social .as-duel-banner>span{font-size:calc(13px * var(--txt));color:var(--as-text)}
#ae-social .as-duel-banner .as-button{min-height:29px;font-size:calc(12px * var(--txt));padding:4px 9px}
#ae-social .as-duel-result{font-size:calc(20px * var(--txt-h))}
#ae-social .as-import-window{width:min(630px,calc(100vw - 36px))}
#ae-social .as-import-warning{padding:12px;border:1px solid #9b783b;background:#342615;color:#f1d198;font-size:calc(14px * var(--txt))}
#ae-social .as-import-hero{padding:12px 0;border-top:1px solid #63482f}
#ae-social .as-import-pick{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#ae-social .as-import-pick input{width:20px;min-height:20px;margin:0;accent-color:#d1a458}
#ae-social .as-import-pick small{color:var(--as-dim)}
#ae-social .as-import-status{color:#ffbd9a;font-size:calc(14px * var(--txt))}
@media(max-width:650px){#ae-social{font-size:calc(14px * var(--txt))}#ae-social .as-cover{padding:10px}#ae-social .as-window{width:min(100%,calc(100vw - 20px));max-height:calc(100dvh - 20px)}#ae-social .as-window-head{padding:9px 11px}#ae-social .as-window-body{padding:12px}#ae-social .as-trade-sides{grid-template-columns:minmax(0,1fr);gap:9px}#ae-social .as-trade-grid{width:100%;max-height:190px}#ae-social .as-trade-footer{padding:10px 12px}#ae-social .as-trade-footer .as-button{flex:1;min-height:42px}#ae-social .as-party-frames{width:146px;left:8px;top:82px;gap:3px}#ae-social .as-member{padding:4px 6px;min-height:48px}#ae-social .as-floating{top:82px;right:10px;max-width:calc(100vw - 20px)}#ae-social .as-party-window{width:calc(100vw - 20px)}#ae-social .as-duel-banner{top:10px;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:8px 12px;white-space:normal;text-align:center}#ae-social .as-duel-banner b{width:100%}#ae-social .as-bag-item{width:100px;min-height:70px}#ae-social .as-notices{top:20%}#ae-social .as-invitations{top:84px}#ae-social .as-card{top:auto;bottom:calc(var(--con-h,132px) + 10px);left:auto;right:10px;transform:none;width:min(330px,calc(100vw - 66px))}}
@media(prefers-reduced-motion:reduce){#ae-social *,#ae-social *::before,#ae-social *::after{animation:none!important;transition:none!important}}

/* =====================================================================
   TROCA while it is open (owner 2026-10-08): on wide screens the trade window keeps its look but no longer covers the
   screen, so the Inventário that ui.js docks on the right stays usable (the world stays locked: Social.isModal); phones
   keep the full-screen window with its own bag list. Bound items are listed greyed with the reason.
   ===================================================================== */
@media(min-width:761px){#ae-social .as-cover.as-trade-cover{background:transparent;pointer-events:none;justify-items:start}}
#ae-social .as-bag-item{position:relative}
#ae-social .as-bag-item.as-bound{opacity:.5;filter:grayscale(.85);cursor:not-allowed}
#ae-social .as-bag-item.as-bound::after{content:"Vinculado";position:absolute;top:3px;left:0;right:0;font-size:calc(9px * var(--txt));line-height:1;text-align:center;letter-spacing:.03em;color:var(--as-dim)}
/* the Inventário's cursor item, mirrored over the trade window (#ui lies under this layer) */
#ae-social .as-held{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:.92}
#ae-social .as-held .as-item-picture{font-size:22px}
/* the Inventário during a trade (#ui.trading, ui.js): offered items dimmed and locked, bound ones greyed */
#ui.trading .w-inv .it.offered{opacity:.4;filter:grayscale(.7)}
#ui.trading .w-inv .it.offered::after{border:1px dashed var(--gold2,#f4d47c)}
#ui.trading .w-inv .it.no-trade,#ui.trading .w-inv .slot.no-trade .slot-ic{opacity:.45;filter:grayscale(.9)}
.hint-trade{display:none}
@media(hover:hover){#ui.trading .w-inv .hint-mouse,#ui.trading .w-inv .hint-vault{display:none}#ui.trading .w-inv .hint-trade{display:inline}}
/* touch item sheet while trading on a wide screen: over the Inventário, clear of the trade window (social.js placeTrade) */
@media(min-width:761px){#ui.trading .sheet{left:auto;right:8px;transform:none;width:min(340px,calc(100vw - 16px))}}
/* ui.js toasts ("Esse item está na troca…") also lie under this layer: while trading on a wide screen they show over the
   docked Inventário, never hidden under the trade window */
@media(min-width:761px){#ui.trading .toasts{left:auto;right:8px;transform:none;width:min(300px,calc(100vw - 16px))}}