/* Carved frames, iron offer trays, and the game's own inventory art. */
#centre > .wnd.social-window { width: min(860px, 94vw); height: min(900px, calc(100vh / var(--ui-scale, 1) - 62px)); max-height: none; padding: 4px 14px 8px; }
.social-window { --social-green: #a7b78e; --social-brass: #736146; }
.social-tabs { flex: none; margin: -3px 0 13px; gap: 4px; }.social-tabs .tab { min-width: 125px; }
.social-count { display: inline-block; min-width: 15px; margin-left: 8px; color: var(--gold-hi); font: 11px var(--f-ui); }
.social-error { flex: none; margin: 0 0 10px; border-bottom: 1px solid #764b32; padding: 7px 5px 10px; color: #e8b194; font: 13px/1.4 var(--f-ui); text-align: center; }.social-error[hidden] { display: none; }
.social-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; padding: 0 4px 4px; }
.social-window button:focus-visible, .social-window input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.social-window[aria-busy=true] { cursor: progress; }
.social-eyebrow { display: block; color: #8c826e; font: 11px/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .15em; }
.social-section-title { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.social-section-title h3 { margin: 0; font: 400 17px var(--f-title); color: var(--parch); letter-spacing: .035em; }.social-section-title > span { font: 12px var(--f-ui); color: #968970; }
.social-portrait { position: relative; display: inline-block; width: 96px; height: 112px; flex: none; background: radial-gradient(ellipse at 50% 65%, #49483688, #0b0c08 72%); border: 1px solid #857252; box-shadow: 0 0 0 2px #0a0807, 0 0 0 4px #43392a, inset 0 0 20px #000; }
.social-portrait::before, .social-portrait::after { content: ''; position: absolute; width: 25px; height: 25px; background: url('/activity/assets/kit/frames/detail1.png') center / contain no-repeat; image-rendering: pixelated; pointer-events: none; z-index: 2; top: -10px; }.social-portrait::before { left: -11px; }.social-portrait::after { right: -11px; }
.social-portrait > img, .social-portrait > canvas { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; display: block; }.social-portrait > img { padding: 12px; }
.social-portrait-level { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: grid; place-items: center; min-width: 32px; height: 22px; border: 1px solid #807053; background: #18140f; color: var(--gold-hi); font: 13px var(--f-title); box-shadow: 0 0 0 2px #0b0907; z-index: 2; }
.social-empty-portrait { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 112px; color: #6f654e; border: 1px solid #493f2d; box-shadow: 0 0 0 3px #15120e, 0 0 0 4px #30291e; background: radial-gradient(ellipse, #3b342433, transparent); }.social-empty-portrait .glyph { opacity: .32; }

/* The two offers share one centre rail. */
.trade-table { position: relative; padding: 4px 15px 12px; border: 1px solid #514933; background: radial-gradient(ellipse at 24% 10%, #58533925, transparent 45%), radial-gradient(ellipse at 76% 10%, #58533925, transparent 45%), linear-gradient(180deg, #171912, #0e100c 77%, #16170f); box-shadow: inset 0 0 0 2px #080a07, inset 0 0 30px #0007, 0 0 0 3px #0a0907; }
.trade-table::before, .trade-table::after { content: ''; position: absolute; top: -7px; width: 27px; height: 27px; background: url('/activity/assets/kit/frames/detail3.png') center / contain no-repeat; image-rendering: pixelated; z-index: 1; pointer-events: none; }.trade-table::before { left: -10px; }.trade-table::after { right: -10px; transform: scaleX(-1); }
.trade-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative; gap: 38px; }
.trade-sides::after { content: ''; position: absolute; top: 4px; bottom: 3px; left: calc(50% - 4px); width: 8px; background: linear-gradient(90deg, #090a06, #5e5940 27%, #26291e 50%, #5c5941 75%, #090a06); box-shadow: 0 0 7px #000; opacity: .8; }
.trade-side { min-width: 0; padding: 18px 3px 0; }.trade-character { text-align: center; }
.trade-character h2 { margin: 21px 0 4px; color: #ddcdb0; font: 400 22px/1.1 var(--f-title); overflow-wrap: anywhere; text-shadow: 0 2px 2px #000; }.trade-character > span { color: #8b8773; font: 12px var(--f-ui); }
.trade-side-status { display: flex; justify-content: center; align-items: center; gap: 10px; height: 47px; color: #8a8975; font: 15px var(--f-ui); font-variant: small-caps; letter-spacing: .05em; }.is-locked .trade-side-status { color: #a5b98e; }.is-accepted .trade-side-status { color: #d1dba9; }
.trade-lock { position: relative; display: inline-block; flex: none; width: 12px; height: 10px; margin-top: 5px; border: 1px solid currentColor; border-radius: 1px; background: #11120d; color: #777d64; }
.trade-lock::before { content: ''; position: absolute; width: 7px; height: 8px; left: 4px; top: -8px; border: 2px solid currentColor; border-bottom: none; border-radius: 6px 6px 0 0; transform: rotate(18deg); }.trade-lock.closed::before { left: 1px; transform: none; }.trade-lock::after { content: ''; position: absolute; width: 2px; height: 4px; top: 2px; left: 4px; background: currentColor; }.is-locked .trade-lock { color: #a0b281; }
.trade-offer-bed { position: relative; padding: 5px; border: 1px solid #5e6245; outline: 2px solid #090b07; background: #090c08; box-shadow: 0 0 0 3px #323625, inset 0 0 16px #000; transition: border-color .14s, box-shadow .14s; }
.trade-offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 55px); gap: 1px; }
.trade-empty-cell { position: relative; display: block; min-width: 0; border: 1px solid #3a403029; background: linear-gradient(150deg, #22291966, #11170d44); box-shadow: inset 0 0 10px #0004; }
.trade-grid-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #6f775d; pointer-events: none; font: italic 13px var(--f-ui); }
.trade-grid-seal { display: grid; place-items: center; position: absolute; bottom: 9px; right: 10px; width: 26px; height: 28px; background: #13170fe8; border: 1px solid #53613d; box-shadow: 0 1px 6px #000; pointer-events: none; opacity: .85; }.trade-grid-seal .trade-lock { margin-top: 6px; }
.trade-item.slot { width: 100%; height: 55px; min-width: 0; border-width: 7px; border-image-width: 7px; cursor: grab; }.trade-item.slot::before { inset: -3px; }
.trade-item.slot[draggable=false] { cursor: default; }.trade-item.slot[aria-disabled=true].unavailable { cursor: not-allowed; }.trade-item .icon { pointer-events: none; }
.trade-item-level { position: absolute; right: -3px; bottom: -4px; padding: 0 2px; color: #d0bda0; background: #0c0b08c9; font: 10px/12px var(--f-ui); z-index: 1; }
.trade-item-bound { position: absolute; top: -4px; left: -3px; font: 10px/12px var(--f-ui); color: #c3aacb; background: #100b15e3; padding: 0 2px; z-index: 1; }
.trade-item.unavailable .icon { opacity: .38; filter: saturate(.35); }.trade-item.is-dragging { opacity: .24; }
.trade-gold { display: flex; align-items: center; gap: 9px; margin-top: 14px; min-height: 35px; padding: 0 4px; color: #c2ae81; font: 14px var(--f-ui); }
.trade-gold b { margin-left: auto; min-width: 118px; text-align: right; color: #ded0a0; font: 400 15px var(--f-ui); padding: 5px 10px; border: 1px solid #353a26; background: #090b07; }
.trade-gold input { min-width: 0; width: 118px; margin-left: auto; padding: 6px 9px; border: 1px solid #827042; background: #090b07; color: #eedbaa; box-shadow: inset 0 2px 4px #000; font: 15px var(--f-ui); text-align: right; outline: none; }.trade-gold input:disabled { border-color: #353a26; color: #aaa484; opacity: 1; }
.trade-verdict { margin: 13px 0 8px; color: #93947b; font: italic 12px/1.35 var(--f-ui); text-align: center; min-height: 17px; }
.trade-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; }.trade-actions .btn { width: 100%; min-width: 0; font-size: 15px; letter-spacing: .065em; }.trade-actions .btn:disabled { opacity: .42; }
.trade-backpack { margin-top: 17px; }.trade-backpack > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 8px; }.trade-backpack .social-section-title { justify-content: flex-start; gap: 16px; }
.trade-wallet { color: #c4ae7d; font: 13px var(--f-ui); white-space: nowrap; }
.trade-backpack-scroll { max-height: 168px; overflow: auto; scrollbar-width: thin; scrollbar-color: #69583c #090907; padding: 5px; border: 1px solid #51442e; background: #090806; box-shadow: inset 0 0 12px #000, 0 0 0 2px #17130d; transition: border-color .14s, box-shadow .14s; }
.trade-backpack-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: 48px; gap: 1px; }.trade-backpack .trade-item.slot { height: 48px; }.trade-backpack .trade-empty-cell { border-color: #49412b3b; background: linear-gradient(150deg, #2a22194d, #13100b); }
.trade-backpack-foot { display: flex; justify-content: space-between; gap: 15px; padding-top: 10px; align-items: baseline; }.trade-backpack-foot > span { font: italic 12px/1.4 var(--f-ui); color: #8f8069; }.trade-backpack-foot .linkish { flex: none; font-size: 12px; }
.trade-dragging-bag [data-trade-drop=offer].can-drop, .trade-dragging-offer [data-trade-drop=bag].can-drop { border-color: #a18c57; box-shadow: 0 0 0 2px #74613966, inset 0 0 20px #987b3022; }.social-window .drag-over { border-color: #d7bf7b !important; box-shadow: 0 0 0 2px #c1a36099, inset 0 0 30px #ac91343b !important; }
.trade-result { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 14px; padding: 12px 0 5px; border-top: 1px solid #434331; color: #b5ab91; }.trade-result strong { font: 20px var(--f-title); }.trade-result span { font: 13px var(--f-ui); }.trade-result.completed { color: #b4c19b; }.trade-table + .social-nearby { margin-top: 24px; }
.trade-awaiting { text-align: center; padding: 25px 0 30px; margin-bottom: 10px; border-bottom: 1px solid #3c3324; }.trade-awaiting-portraits { display: flex; align-items: center; justify-content: center; gap: 48px; }.trade-exchange-seal { color: #887346; font: 36px var(--f-ui); }.trade-awaiting h2 { margin: 29px 0 8px; font: 23px var(--f-title); color: var(--parch); }.trade-awaiting p { color: #a08e73; font: 14px var(--f-ui); }

/* Three places around the fire, followed by the world-map destination. */
.social-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 0; }
.social-member { position: relative; padding: 13px 9px 16px; text-align: center; border: 1px solid #50412c; background: radial-gradient(ellipse at 50% 30%, #483a2555, transparent 80%), linear-gradient(180deg, #18150f, #0b0907); box-shadow: inset 0 0 0 2px #080705; }.social-member.ready { border-color: #66734d; background: radial-gradient(ellipse at 50% 30%, #4a5d3338, transparent 80%), #0d100b; }
.social-role { display: block; color: #a08d68; font: 10px/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 20px; }
.social-member h3 { margin: 22px 0 4px; color: #dfcfb4; font: 400 19px/1.2 var(--f-title); overflow-wrap: anywhere; }.social-member > p { margin: 0; color: #8d826d; font: 12px/1.4 var(--f-ui); }
.social-ready { display: inline-block; margin-top: 12px; color: #877c65; font: 12px var(--f-ui); }.social-ready.is-ready { color: #b7c598; }.social-member p.social-blocker { color: #d7a487; padding-top: 9px; font-size: 12px; }
.social-member-actions { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }.social-member-actions .linkish { font-size: 11px; }
.social-member.vacant { display: flex; flex-direction: column; align-items: center; justify-content: center; border-color: #352d20; background: linear-gradient(180deg, #15120d77, #0b0907); }.social-member.vacant h3 { font: italic 14px var(--f-ui); color: #8d7e63; }.social-member.vacant p { font-size: 11px; color: #645b48; }.social-member.vacant .social-empty-portrait { width: 72px; height: 92px; opacity: .5; }
.social-destination { margin: 19px 0 24px; padding: 16px; border: 1px solid #55472f; background: radial-gradient(ellipse at left, #66502a30, transparent 90%), #0c0a07; box-shadow: 0 0 0 2px #0b0906, inset 0 0 22px #0007; }
.social-destination-info { display: flex; align-items: center; gap: 17px; }.social-destination-info .glyph { flex: none; }.social-destination h3 { margin: 6px 0 4px; font: 400 21px var(--f-title); color: #d3bd8f; }.social-destination p { margin: 0; font: 13px/1.4 var(--f-ui); color: #9c8d73; }
.social-party-progress { margin:12px 0;padding:10px 0;border-top:1px solid #5b4b32; }.social-party-progress strong { color:var(--gold-hi);font:14px var(--f-ui); }.social-party-progress p { margin-top:5px;overflow-wrap:anywhere; }
.social-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; justify-content: flex-end; }.social-buttons .btn { font-size: 13px; }
.social-nearby > .social-section-title { margin-bottom: 10px; border-bottom: 1px solid #3b3021; padding-bottom: 10px; }.social-peer-list { display: flex; flex-direction: column; gap: 7px; }
.social-peer { display: flex; align-items: center; gap: 15px; padding: 10px 12px; border: 1px solid #3b3022; background: linear-gradient(90deg, #231b10a0, #0c090680); }
.social-portrait.small { width: 38px; height: 42px; margin: 0; box-shadow: 0 0 0 2px #0a0807, 0 0 0 3px #43392a; }.social-portrait.small > img { padding: 2px; }.social-portrait.small .social-portrait-level, .social-portrait.small::before, .social-portrait.small::after { display: none; }
.social-peer-name { min-width: 0; flex: 1; }.social-peer-name b { display: block; font: 400 16px var(--f-title); color: var(--parch); overflow-wrap: anywhere; }.social-peer-name small { display: block; font: 11px/1.6 var(--f-ui); color: #9b8b70; }
.social-online-list > .social-section-title { margin-bottom: 10px; border-bottom: 1px solid #3b3021; padding-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.social-online-you { color: var(--gold-hi); font: 11px var(--f-ui); }
.social-online-location { max-width: 40%; color: var(--parch-dim); font: 12px/1.5 var(--f-ui); text-align: right; overflow-wrap: anywhere; }
.social-peer-actions { display: flex; gap: 5px; }.social-peer-actions .btn { font-size: 12px; padding-left: 9px; padding-right: 9px; min-width: 85px; }
.social-quiet { color: #97876d; font: italic 13px/1.5 var(--f-ui); margin: 14px 0; }.social-bottom { display: flex; justify-content: flex-end; padding: 15px 4px 2px; }
.social-invite { display: flex; align-items: center; gap: 13px; padding: 9px 13px; margin-bottom: 15px; border: 1px solid #8e7548; background: linear-gradient(90deg, #46331e80, #17120c); }.social-invite p { flex: 1; margin: 0; color: var(--parch); }.social-invite p b { display: block; color: var(--gold-hi); font: 17px var(--f-title); }.social-invite p span { display: block; margin-top: 4px; color: #ac9877; font: 12px var(--f-ui); }

/* Shared inventory tooltip policy markings. */
.item-policy-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; font: 10px/1.4 var(--f-ui); letter-spacing: .04em; }.item-policy-tags > span { border: 1px solid #423723; padding: 1px 5px; color: #b7a486; background: #0b0906; }.item-policy-tags .tradeable { color: #94ad8a; border-color: #3e4a30; }.item-policy-tags .bound { color: #aca0c2; border-color: #554862; }.item-policy-tags .too-high { color: #df987b; border-color: #71462e; }
.tip-binding { color: #b3a1cf; font: 13px var(--f-ui); padding: 2px 0 3px; }.tip-requirement { color: #bca881; }
@media (max-width: 700px) {
  #centre > .wnd.social-window { width: 96vw; padding-left: 4px; padding-right: 4px; }
  .trade-table { padding-left: 8px; padding-right: 8px; }.trade-sides, .trade-actions { gap: 22px; }
  .trade-character h2 { font-size: 18px; }.trade-character .social-portrait { width: 80px; height: 94px; }
  .trade-offer-grid { grid-template-rows: repeat(3, 48px); }.trade-item.slot { height: 48px; }
  .trade-side-status { font-size: 12px; gap: 7px; }.trade-gold { font-size: 12px; gap: 4px; }.trade-gold input, .trade-gold b { width: 85px; min-width: 0; }
  .trade-actions .btn { font-size: 12px; border-image-width: 0 36px; border-width: 0 36px; }
  .trade-backpack-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }.trade-backpack-foot > span { max-width: 70%; font-size: 11px; }
  .social-members { gap: 7px; }.social-member { padding-left: 5px; padding-right: 5px; }.social-member .social-portrait { width: 76px; height: 89px; }.social-member h3 { font-size: 15px; }.social-member.vacant h3 { font-size: 12px; }
  .social-member-actions { flex-direction: column; gap: 4px; }.social-peer-actions .btn { min-width: 65px; }.social-buttons .btn { min-width: 0; }
  .social-tabs { flex-wrap: wrap; }.social-tabs .tab { min-width: 0; flex: 1; }
  .social-online-peer { flex-wrap: wrap; gap: 8px 15px; }
  .social-online-location { flex-basis: 100%; max-width: none; padding-left: 53px; text-align: left; }
}

/* Community shares the HUD's carved iron and inset trays. Town browsing is paged. */
.hud-row { gap: 5px; }
.hud-community-count { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 2px; background: #792c22; color: var(--gold-hi); border: 1px solid var(--gold-lo); font: 11px/12px var(--f-title); box-shadow: 0 2px 4px #000; z-index: 2; }
.hud-community-count[hidden] { display: none; }
#centre > .wnd.social-window:not(.social-trade) { height: min(740px, calc(100vh / var(--ui-scale, 1) - 62px)); }
.social-party .social-scroll { scrollbar-width: none; }
.social-party .social-scroll::-webkit-scrollbar { display: none; }
.social-nearby .social-scroll { overflow: hidden; }
.social-party .social-member { border: 12px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-i.png') 12 / 12px stretch; background: #17130e; background-clip: padding-box; box-shadow: none; padding: 9px 6px 13px; }
.social-party .social-member.ready { border-image-source: url('/activity/assets/kit/d/panels/panel-h.png'); }
.social-portrait, .social-empty-portrait { border: 7px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-f.png') 12 / 7px stretch; background: #0a0907; background-clip: padding-box; box-shadow: none; }
.social-portrait::before, .social-portrait::after { display: none; }
.social-portrait.small { border-width: 4px; border-image-width: 4px; box-shadow: none; }
.social-destination { border: 10px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-h.png') 20 / 10px stretch; background: #0d0b08; background-clip: padding-box; box-shadow: none; padding: 9px; margin-bottom: 14px; }
.social-bottom { justify-content: space-between; align-items: center; gap: 12px; padding: 5px 4px 2px; }
.social-peer { border: 8px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-i.png') 12 / 8px stretch; background: #16120e; background-clip: padding-box; padding: 6px 9px; }
.social-peer-pages { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 15px; color: var(--parch-dim); font-size: 12px; }
.social-town-empty { border: 12px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-i.png') 12 / 12px stretch; background: #0d0b08; background-clip: padding-box; padding: 60px 20px; text-align: center; }
.social-town-empty > .glyph { margin: 0 auto 20px; opacity: .55; }
.social-town-empty h2 { font: 23px var(--f-title); color: var(--gold-hi); }
.social-town-empty p { color: var(--parch-dim); font-size: 14px; line-height: 1.8; margin: 12px 0 24px; }
#social-hud { border: 12px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-h.png') 20 / 12px stretch; background: #15120f; background-clip: padding-box; border-radius: 0; box-shadow: 0 5px 18px #0009; }
.social-hud-head { padding: 4px 3px 8px; }
.social-member-life { height: 7px; background: url('/activity/assets/kit/orbs/resorbredbar.png') 0 0 / 100% 100%; }
.social-member-life > i { background: url('/activity/assets/kit/d/bars/redbar.png') 0 0 / 100% 100%; }