:root{
  --bg:#0f1115;
  --panel:rgba(23, 26, 32, 0.58);
  --panel-2:rgba(29, 33, 40, 0.52);
  --panel-3:rgba(17, 20, 26, 0.44);
  --text:#e9edf3;
  --muted:#a7b0bc;
  --border:#303640;
  --danger:#ff9b9b;
  --right-pane-size: clamp(260px, 17vw, 340px);
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
}

#app{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:var(--bg);
}

#game{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  width:100vw;
  height:100%;
  display:block;
  background:#0b0d11;
}

.rightPane{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:var(--right-pane-size);
  display:flex;
  flex-direction:column;
  min-height:0;
  border-left:1px solid var(--border);
  background:linear-gradient(180deg, rgba(22, 27, 37, 0.46), rgba(16, 20, 30, 0.40));
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
}

.rightPaneHeader{
  padding:10px;
  border-bottom:1px solid var(--border);
  background:rgba(17, 22, 32, 0.45);
}

.title{ font-weight:700; font-size:15px; letter-spacing:0.02em; }
.sub{ color:var(--muted); font-size:13px; margin-top:3px; line-height:1.35; }
.small{ font-size:12px; color:var(--muted); }
.profileCardHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
  min-width:0;
}
.profileMiniHead{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.profileMiniHead > div,
.profileCardHead > div{
  min-width:0;
}
.profileActionRow{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.profileAvatar{
  --avatar-fallback:#5c7faa;
  --avatar-size:36px;
  width:var(--avatar-size);
  height:var(--avatar-size);
  flex:0 0 var(--avatar-size);
  border-radius:999px;
  border:1px solid rgba(218, 232, 255, 0.26);
  background-color:var(--avatar-fallback);
  background-repeat:no-repeat;
  background-size:220%;
  background-position:center 24%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.profileAvatarSm{ --avatar-size:36px; }
.profileAvatarLg{ --avatar-size:48px; }
.profileAvatarInitial{
  color:#f5f8ff;
  font-size:calc(var(--avatar-size) * 0.42);
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.36);
}
.profileAvatar.hasImage .profileAvatarInitial{
  opacity:0;
}

.paneTopRow{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}

.paneTabs{
  margin-top:8px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:6px;
}

.paneTab{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 8px;
  font-size:13px;
}

.paneTab.active{
  border-color:#5a6472;
  background:#252a33;
}

button, input, select{ font: inherit; }
button{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 8px;
  font-size:13px;
  cursor:pointer;
}
button:hover{ border-color:#4b5360; }
button:disabled{ opacity:0.55; cursor:not-allowed; }

input, select{
  width:100%;
  background:var(--panel-3);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 8px;
  font-size:13px;
  min-width:0;
}
input[type="color"]{ min-height:34px; padding:4px; }
input[type="number"]{ width:72px; }

.row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.stack{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.stack .row{ align-items:center; }

.field{ display:flex; flex-direction:column; gap:4px; margin-top:8px; min-width:0; }
.field > label{ color:var(--muted); font-size:11px; }
.grow{ flex:1; }

.check{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}
.check input{ width:auto; }

hr{ border:none; border-top:1px solid var(--border); margin:10px 0; }

.contextAction{
  margin:8px 10px 0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
}
.contextAction[hidden]{ display:none !important; }
.contextActionLabel{
  color:var(--muted);
  font-size:12px;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.drawerLayer{
  position:relative;
  width:100%;
  padding:10px;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  flex:1;
  overflow:auto;
}

.inspectorPanel + .inspectorPanel{
  margin-top:8px;
}

.quickStats{
  margin:10px;
  margin-top:0;
  font-size:13px;
}

.ludoValue{
  font-weight:700;
  transition:color 180ms ease, text-shadow 180ms ease;
}

.ludoValue.gain{
  color:#f3f8ff;
  text-shadow:0 0 5px rgba(163, 197, 255, 0.45);
}

.ludoGainTag{
  margin-left:4px;
  font-size:12px;
  color:#cfe0ff;
}

.drawerTabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
}
.drawerTab{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 8px;
  font-size:11px;
}
.drawerTab.active{
  border-color:#5a6472;
  background:#252a33;
}

.drawerPanels{
  min-height:0;
  flex:1;
}
.drawerPanel{
  width:100%;
  height:100%;
  min-height:180px;
  overflow:auto;
}
.drawerPanel[hidden]{ display:none !important; }

.panel{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.chatOverlay{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:20;
  width:calc(100vw - var(--right-pane-size) - 16px);
  max-width:calc(100vw - var(--right-pane-size) - 16px);
  height:clamp(152px, 20vh, 280px);
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(23, 26, 32, 0.5);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.chatOverlay.folded{ height:32px; }
.chatOverlay.folded .chatOverlayBody{ display:none; }
.chatOverlay[hidden]{ display:none; }
.chatOverlayHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:32px;
  padding:4px 8px;
  border-bottom:1px solid var(--border);
  background:rgba(29, 33, 40, 0.5);
}
.chatOverlayHeader button{
  border-radius:6px;
  padding:3px 8px;
  font-size:12px;
  background:rgba(29, 33, 40, 0.5);
}
.chatOverlayTitle{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text);
}
.chatOverlayBody{
  padding:6px 8px;
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
}
.chatLog{
  flex:1;
  min-height:0;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:5px;
  background:rgba(17, 20, 26, 0.5);
  padding:4px 6px;
  display:block;
}
.chatLogEmpty{ color:var(--muted); font-size:12px; padding:1px 0; }
.chatLogItem{
  display:block;
  font-size:12px;
  line-height:16px;
  min-height:16px;
  flex:0 0 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chatLogItem + .chatLogItem{
  margin-top:2px;
}
.chatOverlayRow{ display:flex; align-items:center; gap:5px; flex:0 0 auto; min-height:30px; }
.chatOverlayRow[hidden]{ display:none !important; }
.chatOverlayRow select,
.chatOverlayRow input{
  flex:1;
  min-width:0;
  background:rgba(17, 20, 26, 0.5);
}
.chatOverlayRow input{
  padding:6px 8px;
  font-size:15px;
  line-height:1.35;
}
.chatScopeLabel{
  min-width:58px;
  padding:5px 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-align:center;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  background:rgba(29, 33, 40, 0.5);
}
.chatOverlayFriendsTitle{ display:none; }
#chatFriendsWrap[hidden]{ display:none !important; }
.chatFriends{
  max-height:30px;
  overflow:auto;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--panel-3);
}
.chatFriendBtn{
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--muted);
  font-size:11px;
}
.chatFriendBtn.active{
  border-color:#5a6472;
  color:var(--text);
  background:#252a33;
}

.placeRow{ align-items:center; }
.placeRow label{ font-size:12px; color:var(--muted); }

.inventoryList{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.inventoryRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--border);
  background:var(--panel-3);
  border-radius:8px;
  padding:6px 8px;
}
.inventoryMeta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.inventoryMeta .k{
  max-width:170px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btnInventoryUse{
  flex:0 0 auto;
}

.decorStudio{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.decorStudioMeta{
  color:#c3cbda;
}

.btnDecorGoHome{
  align-self:flex-start;
}

.decorDropZone{
  border:1px dashed #3f4857;
  border-radius:8px;
  background:rgba(24, 28, 36, 0.42);
  transition:border-color 100ms ease, background-color 100ms ease;
}

.decorDropZone.active{
  border-color:#56627a;
}

.decorDropZone.dropHover{
  border-color:#87a2d2;
  background:rgba(41, 55, 82, 0.48);
}

.decorInventoryPool{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px;
  min-height:44px;
}

.decorChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #445067;
  background:rgba(40, 48, 61, 0.88);
  color:var(--text);
  font-size:12px;
  user-select:none;
  cursor:grab;
}

.decorChip .qty{
  color:#d4deef;
  font-size:11px;
}

.decorChip.selected{
  border-color:#92afe2;
  background:rgba(62, 82, 121, 0.92);
}

.decorChip.disabled{
  opacity:0.56;
  cursor:not-allowed;
}

.decorHomeGrid{
  display:grid;
  grid-template-columns:repeat(var(--cols, 14), minmax(0, 1fr));
  gap:2px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(14, 18, 25, 0.68);
  padding:6px;
}

.decorCell{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #30394a;
  border-radius:4px;
  background:rgba(35, 42, 54, 0.58);
  color:#aeb8cc;
  font-size:10px;
  line-height:1;
  user-select:none;
}

.decorCell.hasItem{
  border-color:#607493;
  background:rgba(51, 61, 80, 0.85);
  color:#ecf2ff;
  font-weight:700;
  cursor:grab;
}

.decorCell.targetable{
  border-color:#4f6e9a;
  background:rgba(53, 73, 102, 0.62);
  cursor:pointer;
}

.decorCell.selectedSource{
  border-color:#9bb8eb;
  box-shadow:0 0 0 1px rgba(155, 184, 235, 0.35) inset;
}

.decorCell.disabled{
  cursor:not-allowed;
}

.decorCell.dropHover{
  border-color:#9bb8eb;
  background:rgba(65, 81, 112, 0.9);
}

.decorInventoryBin{
  padding:8px;
  font-size:12px;
  color:#ccd5e6;
}

.decorPlacedList{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.decorPlacedRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-3);
  padding:6px 8px;
  cursor:pointer;
}

.decorPlacedRow.selected{
  border-color:#7f96c0;
  background:rgba(43, 58, 84, 0.78);
}

.decorPlacedMeta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.decorPlacedActions{
  display:flex;
  align-items:center;
  gap:6px;
}

.decorOtherItems{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.decorOtherList{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.decorDragging .decorDraggable.dragging{
  opacity:0.66;
}

.tradeInbox{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tradeItem{
  border:1px solid var(--border);
  background:var(--panel-3);
  border-radius:8px;
  padding:6px 8px;
  font-size:12px;
}
.tradeItem .row{ margin-top:6px; }

#feed{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.feedItem{
  border:1px solid var(--border);
  background:var(--panel-3);
  border-radius:8px;
  padding:8px;
}
.feedMeta{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.feedText{ margin-top:4px; font-size:13px; }
.k{
  display:inline-block;
  padding:2px 6px;
  border-radius:999px;
  background:#2a2f38;
  border:1px solid var(--border);
  font-size:12px;
  color:var(--text);
}

.bar{
  height:8px;
  background:#252a33;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.bar > div{ height:100%; background:#5f6b7c; }

.grid{
  display:grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  gap:4px;
  margin-top:8px;
}
.cell{
  height:22px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#252a33;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:var(--muted);
}
.homeMiniGrid{
  grid-template-columns: repeat(var(--cols, 20), 14px);
  justify-content:flex-start;
  gap:2px;
  max-height:190px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-3);
}
.homeMiniGrid .cell{
  width:14px;
  height:14px;
  border-radius:3px;
  font-size:9px;
  line-height:1;
  color:#c2cad5;
}
.homeMiniGrid .cell.hasItem{
  border-color:#5a6472;
  background:#333a45;
  color:var(--text);
  font-weight:700;
}

.friendHomeList{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.friendsPanel{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.friendsAddCard,
.friendRow,
.friendEmpty{
  border:1px solid var(--border);
  background:var(--panel-3);
  border-radius:8px;
}

.friendsAddCard{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.friendsAddRow{
  display:flex;
  align-items:center;
  gap:6px;
}

.friendsAddRow select{
  flex:1;
}

.friendList{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.friendRow{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.friendMeta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.friendMeta .name{
  font-weight:600;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.friendMeta .status{
  font-size:12px;
  color:var(--muted);
}

.friendActions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.btnFriendRemove{
  border-color:#65424b;
  color:#ffd6dd;
}

.btnFriendRemove:hover{
  border-color:#9f626e;
}

.friendEmpty{
  padding:8px;
  color:var(--muted);
  font-size:12px;
}

.vendorFocusCard{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  background:linear-gradient(180deg, #21262f 0%, #1a1f27 100%);
}
.vendorFocusTop{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
}
.vendorFocusMeta{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}
.vendorFunds{
  margin-top:8px;
  font-size:12px;
  color:#d5dbe6;
}
.vendorFunds b{
  color:#f1f5ff;
}
.vendorFocusNotice{
  margin-top:8px;
  font-size:12px;
  color:#cdd8ea;
  border:1px solid #3c4a60;
  background:#1e2938;
  border-radius:8px;
  padding:6px 8px;
}
.vendorBuyList{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vendorBuyTile{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:2px 8px;
  text-align:left;
  padding:7px 9px;
  border-radius:8px;
  border:1px solid #3a4453;
  background:#232a34;
}
.vendorBuyTile .name{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}
.vendorBuyTile .price{
  font-size:12px;
  font-weight:700;
  color:#e5efff;
}
.vendorBuyTile .state{
  grid-column:1 / -1;
  font-size:11px;
  color:#c7cfdb;
}
.vendorBuyTile.confirming{
  border-color:#5f86bf;
  background:#27374a;
}
.vendorBuyTile .state.confirm{
  color:#dcecff;
  font-weight:700;
}
.vendorBuyTile .state.error{
  color:#ffd6de;
  font-weight:700;
}
.vendorBuyTile.blocked{
  border-color:#4b3e46;
  background:#2a2228;
}

#btnVendorBuy.confirming{
  border-color:#5f86bf;
  background:#27374a;
}

#playerLog{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:140px;
  overflow:auto;
}
.logItem{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel-3);
  border-radius:8px;
  padding:6px 8px;
}
.logItem.error{ border-color:#5f3d3d; color:var(--danger); }

.authGate{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10, 12, 16, 0.9);
}
.authGate[hidden]{ display:none !important; }
.authCard{
  width:min(360px, calc(100vw - 24px));
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
}
.authModeRow{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.authModeBtn{
  border-radius:999px;
  padding:6px 10px;
}
.authModeBtn.active{
  border-color:#5a6472;
  background:#252a33;
}
.authAvatarPicker{
  margin-top:2px;
  display:grid;
  grid-template-columns:46px minmax(0, 1fr) auto;
  gap:8px;
  align-items:stretch;
}
.authAvatarStepStack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:6px;
}
.authAvatarStepBtn{
  min-height:32px;
  padding:0;
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.authAvatarVariantLabel{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-3);
  padding:6px 8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  text-align:center;
}
.authAvatarRandomBtn{
  min-width:72px;
  padding:6px 10px;
  font-weight:600;
}
.authAvatarVariantSelect{
  display:none;
}
.authAvatarPreviewWrap{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  border:1px solid rgba(132, 152, 184, 0.32);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(24, 29, 38, 0.68), rgba(14, 18, 26, 0.74));
}
#authAvatarPreview{
  display:block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.helpOverlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(7, 9, 14, 0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.helpOverlay[hidden]{
  display:none !important;
}

.helpDialog{
  width:min(780px, 92vw);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow:hidden;
}

.helpDialogHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  min-height:34px;
}

.helpDialogTitle{
  font-size:12px;
  letter-spacing:0.03em;
  font-weight:700;
  text-transform:uppercase;
}

.helpDialogHeader button{
  font-size:12px;
}

.helpDialogBody{
  min-height:0;
  overflow:auto;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.helpDialogBody h3{
  margin:0;
  color:var(--text);
  font-size:13px;
}

.helpDialogBody h4{
  margin:0;
  color:var(--text);
  font-size:12px;
}

.helpCategory + .helpCategory{
  border-top:1px dashed var(--border);
  padding-top:8px;
}

.helpSection{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.helpSection ul{
  margin:0 0 0 18px;
  padding:0;
}

.helpSection li{
  margin:0 0 4px;
}

.helpMeta{
  color:var(--text);
  font-size:11px;
  opacity:0.75;
}

.tradeOverlay{
  position:fixed;
  inset:0;
  z-index:92;
  background:rgba(7, 9, 14, 0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.tradeOverlay[hidden]{
  display:none !important;
}

.tradeDialog{
  width:min(520px, 94vw);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow:hidden;
}

.tradeDialogHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  min-height:34px;
}

.tradeDialogTitle{
  font-size:12px;
  letter-spacing:0.03em;
  font-weight:700;
  text-transform:uppercase;
}

.tradeDialogBody{
  min-height:0;
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.btnProfileTradeAction{
  border-color:#3e5762;
}

.btnProfileTradeAction:hover{
  border-color:#5f7f8f;
}

@media (max-width: 1050px) {
  :root{
    --right-pane-size: clamp(240px, 28vw, 320px);
  }
  .drawerTabs{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root{
    --right-pane-size: 100vw;
  }

  #game{
    right:0;
    width:100vw;
    height:58vh;
    bottom:auto;
  }

  .rightPane{
    top:auto;
    height:42vh;
    width:100vw;
    border-left:none;
    border-top:1px solid var(--border);
  }

  .chatOverlay{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    left:8px;
    bottom:calc(42vh + 8px);
    height:26vh;
    min-height:148px;
  }

  .drawerPanel{
    min-height:120px;
  }

  .row{
    flex-wrap:wrap;
  }

  .friendsAddRow{
    flex-direction:column;
    align-items:stretch;
  }

  .tradeDialog{
    width:calc(100vw - 16px);
  }
}