/* =====================================================================
   Player trade window v2 (#trade-window.nv-trade, js/trade.js) - 2026-09-29
   One window: both offers + ZEN + confirm + your bag (tap / drag to add). Sky frame, gold accents, phone friendly.
   ===================================================================== */
html body #hud section#trade-window.nv-trade {
  width: min(640px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px); display: flex; flex-direction: column; overflow: hidden;
  padding: 0; z-index: 60 !important; background: linear-gradient(180deg, #f4f9ff, #e3effc); color: #25354d; border: 2px solid #6c9fd8; border-radius: 12px;
  box-shadow: inset 0 0 0 2px #fff, 0 10px 30px rgba(10, 30, 60, .45); font: 13px/1.35 system-ui, Tahoma, sans-serif; pointer-events: auto;
}
/* keep it centred: the generic scale rule in index.html (#novicia-cointh-scale) outranks the centring rule since its
   :not(#id) parts count as ids; a window the player dragged (inline left) keeps its place */
#hud#hud#hud section#trade-window.nv-trade:not([style*="left"]):not(.dragging) {
  inset: 50% auto auto 50% !important; margin: 0 !important; transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) scale(calc(var(--ui-zoom, 1) * var(--window-scale, 1) * var(--fit, 1))) !important;
}
#hud #trade-window.nv-trade .titlebar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 8px 0 14px;
  background: linear-gradient(180deg, #4b93e8, #1f5db6); color: #fff; border: 0; border-bottom: 2px solid #d4af37; font-weight: 800; font-size: 15px;
  text-shadow: 0 1px 0 #0b2a57; cursor: move; border-radius: 10px 10px 0 0; }
#hud #trade-window.nv-trade .titlebar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud #trade-window.nv-trade .titlebar button { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #e0493c; color: #fff;
  font: 800 16px/1 system-ui, sans-serif; cursor: pointer; }
#hud #trade-window.nv-trade button { font: 600 12px/1.2 system-ui, Tahoma, sans-serif; cursor: pointer; touch-action: manipulation; }
#hud #trade-window.nv-trade .nt-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; }

/* offers */
#hud #trade-window.nv-trade .nt-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
#hud #trade-window.nv-trade .nt-side { min-width: 0; display: flex; flex-direction: column; border: 2px solid #9ec2e6; border-radius: 10px; background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s; }
#hud #trade-window.nv-trade .nt-side.ok { border-color: #3fa65a; box-shadow: 0 0 0 2px rgba(63, 166, 90, .25); }
#hud #trade-window.nv-trade .nt-side[data-drop].over { border-color: #d4af37; border-style: dashed; background: #fffbea; }
#hud #trade-window.nv-trade .nt-side h3 { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 6px 10px; font-size: 13px; font-weight: 800;
  color: #1d4f93; background: linear-gradient(180deg, #eaf4ff, #d6e8fb); border-bottom: 1px solid #b7d1ee; overflow-wrap: anywhere; }
#hud #trade-window.nv-trade .nt-side.theirs h3 { color: #7a4d06; background: linear-gradient(180deg, #fff8e0, #f6e3ad); border-bottom-color: #e2c77a; }
#hud #trade-window.nv-trade .nt-side h3 em { font-style: normal; color: #2e8b47; white-space: nowrap; }
#hud #trade-window.nv-trade .nt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; align-content: start; min-height: 132px;
  max-height: 200px; overflow: auto; padding: 8px; }
#hud #trade-window.nv-trade .nt-slot, #hud #trade-window.nv-trade .nt-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0; padding: 5px 3px 4px; border: 1px solid #c3d7ee; border-radius: 8px; background: linear-gradient(180deg, #fff, #eef5fd); color: #28405f; }
#hud #trade-window.nv-trade .nt-slot.mine:hover, #hud #trade-window.nv-trade .nt-cell:hover { border-color: #d4af37; background: #fffbea; }
#hud #trade-window.nv-trade .nt-slot.gear, #hud #trade-window.nv-trade .nt-cell.gear { background: linear-gradient(180deg, #fff, #f4ecff); border-color: #cdb8ee; }
#hud #trade-window.nv-trade .nt-slot img, #hud #trade-window.nv-trade .nt-cell img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#hud #trade-window.nv-trade .nt-slot b, #hud #trade-window.nv-trade .nt-cell b { position: absolute; top: 2px; right: 3px; padding: 0 4px; border-radius: 6px;
  background: rgba(16, 35, 68, .82); color: #ffe38a; font-size: 10px; font-weight: 800; line-height: 15px; }
#hud #trade-window.nv-trade .nt-slot small, #hud #trade-window.nv-trade .nt-cell small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; font-size: 10px; font-weight: 600; color: #405674; }
#hud #trade-window.nv-trade .nt-empty { grid-column: 1 / -1; margin: 22px 6px; text-align: center; color: #7d93b0; font-size: 12px; line-height: 1.6; }

/* quantity editor */
#hud #trade-window.nv-trade .nt-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 8px 8px; padding: 6px; border-radius: 8px;
  background: #fff8df; border: 1px solid #e2c77a; }
#hud #trade-window.nv-trade .nt-edit img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
#hud #trade-window.nv-trade .nt-edit span { flex: 1 1 calc(100% - 40px); min-width: 0; display: flex; flex-direction: column; }
#hud #trade-window.nv-trade .nt-edit span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud #trade-window.nv-trade .nt-edit small { color: #7a6a3a; font-size: 11px; }
#hud #trade-window.nv-trade .nt-step { min-width: 32px; height: 30px; padding: 0 6px; border-radius: 7px; border: 1px solid #9ec2e6; background: linear-gradient(180deg, #fff, #e3effc);
  color: #1d4f93; }
#hud #trade-window.nv-trade .nt-qty, #hud #trade-window.nv-trade .nt-zen input { width: 74px; height: 30px; padding: 0 6px; border: 1px solid #9ec2e6; border-radius: 7px;
  background: #fff; color: #1c2f4a; font: 700 13px system-ui, sans-serif; text-align: right; user-select: text; -webkit-user-select: text; }

/* ZEN */
#hud #trade-window.nv-trade .nt-zen { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 6px 10px; border-top: 1px solid #dbe7f5; background: #f6faff;
  font-weight: 800; color: #6b4b06; }
#hud #trade-window.nv-trade .nt-zen input { flex: 1 1 auto; min-width: 0; width: auto; }
#hud #trade-window.nv-trade .nt-zen > b { margin-left: auto; color: #6b4b06; font-size: 14px; }
#hud #trade-window.nv-trade .nt-coin { width: 16px; height: 16px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4b8, #e6b422 55%, #a87908);
  box-shadow: 0 0 0 1px #8a6205; }

/* status + actions */
#hud #trade-window.nv-trade .nt-note { margin: 0; padding: 6px 10px; border-radius: 8px; background: #eaf3fd; color: #3a5d8a; text-align: center; font-size: 12px; }
#hud #trade-window.nv-trade .nt-actions { display: flex; gap: 8px; justify-content: center; }
#hud #trade-window.nv-trade .nt-btn { min-height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid #8fb4dc; background: linear-gradient(180deg, #fff, #dbe9f8);
  color: #1d4f93; font-weight: 800; font-size: 13px; }
#hud #trade-window.nv-trade .nt-actions .nt-btn { flex: 1 1 0; max-width: 240px; }
#hud #trade-window.nv-trade .nt-btn.gold { border-color: #a37a17; background: linear-gradient(180deg, #ffe58a, #e0a92a); color: #3d2806; text-shadow: 0 1px 0 #fff3c4; }
#hud #trade-window.nv-trade .nt-btn.red { border-color: #c0463a; background: linear-gradient(180deg, #ff8a7d, #d9483a); color: #fff; }
#hud #trade-window.nv-trade .nt-btn:disabled { opacity: .55; cursor: default; filter: grayscale(.4); }

/* bag */
#hud #trade-window.nv-trade .nt-bag { border: 2px solid #9ec2e6; border-radius: 10px; background: #fff; overflow: hidden; }
#hud #trade-window.nv-trade .nt-bag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(180deg, #eaf4ff, #d6e8fb);
  border-bottom: 1px solid #b7d1ee; color: #1d4f93; }
#hud #trade-window.nv-trade .nt-tabs { display: inline-flex; gap: 3px; }
#hud #trade-window.nv-trade .nt-tabs button { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid #9ec2e6; background: #fff; color: #1d4f93; }
#hud #trade-window.nv-trade .nt-tabs button[aria-pressed="true"] { background: linear-gradient(180deg, #4b93e8, #1f5db6); color: #fff; border-color: #1f5db6; }
#hud #trade-window.nv-trade .nt-search { flex: 1 1 100px; min-width: 80px; height: 26px; padding: 0 8px; border: 1px solid #9ec2e6; border-radius: 13px; background: #fff;
  color: #1c2f4a; font: 12px system-ui, sans-serif; user-select: text; -webkit-user-select: text; }
#hud #trade-window.nv-trade .nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; align-content: start; max-height: 190px; overflow: auto; padding: 8px; }
#hud #trade-window.nv-trade .nt-cell { cursor: grab; }

/* invite */
#hud #trade-window.nv-trade .nt-invite { align-items: center; text-align: center; padding: 18px 16px; }
#hud #trade-window.nv-trade .nt-invite h3 { margin: 4px 0 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 17px !important; font-weight: 800; color: #1d4f93; }
#hud #trade-window.nv-trade .nt-invite p { margin: 0 0 6px; color: #4a6283; }
#hud #trade-window.nv-trade .nt-invite .nt-actions { width: 100%; }
#hud #trade-window.nv-trade .nt-emblem { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #d4af37;
  background: linear-gradient(180deg, #4b93e8, #1f5db6); color: #fff; font-size: 28px !important; font-weight: 800; line-height: 1; }
html body #hud section#trade-window.nv-trade:has(.nt-invite) { width: min(380px, calc(100vw - 16px)); }

/* phones: short landscape screens keep 2 columns but slimmer; narrow portrait screens stack the offers */
@media (max-height: 500px) {
  html body #hud section#trade-window.nv-trade { width: min(820px, calc(100vw - 12px)); max-height: calc(100dvh - 84px); }
  #hud #trade-window.nv-trade .titlebar { height: 30px; font-size: 14px; }
  #hud #trade-window.nv-trade .titlebar button { width: 24px; height: 24px; font-size: 14px; }
  /* offers + buttons on the left, the bag fills the right column - everything visible without scrolling */
  #hud #trade-window.nv-trade .nt-body:not(.nt-invite) { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "cols bag" "note bag" "act bag"; padding: 6px; gap: 6px; overflow: hidden; }
  #hud #trade-window.nv-trade .nt-cols { grid-area: cols; min-height: 0; }
  #hud #trade-window.nv-trade .nt-side { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  #hud #trade-window.nv-trade .nt-side h3 { position: sticky; top: 0; z-index: 1; }
  #hud #trade-window.nv-trade .nt-side .nt-zen { position: sticky; bottom: 0; }
  #hud #trade-window.nv-trade .nt-side h3 { padding: 4px 8px; font-size: 12px; }
  #hud #trade-window.nv-trade .nt-slots { flex: 1 1 auto; min-height: 60px; max-height: none; padding: 5px; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  #hud #trade-window.nv-trade .nt-edit { margin: 0 5px 5px; padding: 4px; }
  #hud #trade-window.nv-trade .nt-step, #hud #trade-window.nv-trade .nt-qty, #hud #trade-window.nv-trade .nt-zen input { height: 28px; }
  #hud #trade-window.nv-trade .nt-zen { padding: 4px 6px; }
  #hud #trade-window.nv-trade .nt-note { grid-area: note; padding: 4px 6px; font-size: 11px; }
  #hud #trade-window.nv-trade .nt-actions { grid-area: act; }
  #hud #trade-window.nv-trade .nt-btn { min-height: 34px; padding: 0 10px; }
  #hud #trade-window.nv-trade .nt-bag { grid-area: bag; display: flex; flex-direction: column; min-height: 0; }
  #hud #trade-window.nv-trade .nt-bag-head { padding: 4px 6px; gap: 4px; }
  #hud #trade-window.nv-trade .nt-bag-head > b { display: none; }
  #hud #trade-window.nv-trade .nt-tabs button { height: 24px; padding: 0 7px; }
  #hud #trade-window.nv-trade .nt-grid { flex: 1 1 auto; max-height: none; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); padding: 5px; gap: 4px; }
}
@media (max-width: 520px) {
  html body #hud section#trade-window.nv-trade { max-height: calc(100dvh - 190px); }
  #hud #trade-window.nv-trade .nt-cols { grid-template-columns: 1fr; }
  #hud #trade-window.nv-trade .nt-slots { min-height: 76px; max-height: 150px; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  #hud #trade-window.nv-trade .nt-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* closed = gone (the display:flex above outranks the generic [hidden] rule) */
html body #hud#hud section#trade-window[hidden] { display: none !important; }

/* =====================================================================
   Settings sky frame (2026-09-29 v3): same painted frame, banner title and close button as Settings / the bag.
   ===================================================================== */
html body #hud#hud section#trade-window.nv-trade {
  --window-scale: 0.85;
  --nv-z: calc(var(--ui-zoom, 1) * var(--window-scale));
  --nv-w: min(700px, calc((100vw - 16px) / var(--nv-z)), calc((100dvh - 24px) / var(--nv-z) * 1.35));
  --k: calc(var(--nv-w) / 821);
  --u: calc(100cqw / 821);
  container-type: inline-size;
  width: var(--nv-w) !important; max-height: calc((100dvh - 24px) / var(--nv-z)) !important;
  padding: calc(var(--k) * 196) calc(var(--k) * 38) calc(var(--k) * 56) calc(var(--k) * 42) !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
}
html body #hud#hud section#trade-window.nv-trade:has(.nt-invite) { --nv-w: min(520px, calc((100vw - 16px) / var(--nv-z))); width: var(--nv-w) !important; }
html body #hud#hud section#trade-window.nv-trade::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important;
  border-style: solid !important; border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) !important; border-color: transparent !important;
  border-image: url('/ui/settings/frame-sky.webp?v=1') 492 0 145 0 fill / calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) stretch !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important; background: none !important;
}
html body #hud#hud section#trade-window.nv-trade::after { display: none !important; }
html body #hud#hud section#trade-window.nv-trade > .titlebar {
  position: absolute !important; left: 0 !important; right: 0 !important; top: calc(var(--u) * 78) !important; height: calc(var(--u) * 74) !important;
  padding: 0 calc(var(--u) * 130) !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 2;
}
html body #hud#hud section#trade-window.nv-trade > .titlebar::before { display: none !important; }
html body #hud#hud section#trade-window.nv-trade > .titlebar > span {
  color: #fff !important; font: 700 calc(var(--u) * 40) / 1 'Cormorant Garamond', 'Noto Serif Thai', 'Noto Sans Thai', serif !important;
  text-shadow: -0.1em 0 #1b3a7a, 0.1em 0 #1b3a7a, 0 -0.08em #1b3a7a, 0 0.1em #1b3a7a, 0 0.15em 0.25em rgba(10, 30, 80, 0.6) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body #hud#hud section#trade-window.nv-trade > .titlebar > button {
  position: absolute !important; left: calc(var(--u) * 754) !important; right: auto !important; top: calc(var(--u) * -3) !important;
  width: calc(var(--u) * 56) !important; height: calc(var(--u) * 56) !important; border-radius: 50% !important;
  background: none !important; border: 0 !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important;
}
html body #hud#hud section#trade-window.nv-trade > .titlebar > button:hover { background: rgba(255, 255, 255, 0.25) !important; }
html body #hud#hud section#trade-window.nv-trade .nt-body { padding: 0 !important; }
html body #hud#hud section#trade-window.nv-trade .nt-note { background: rgba(255, 255, 255, 0.7); }
@media (max-height: 520px), (max-width: 640px) {
  html body #hud#hud section#trade-window.nv-trade {
    --window-scale: 0.8;
    --nv-w: min(820px, calc((100vw - 16px) / var(--nv-z)), calc((100dvh - 16px) / var(--nv-z) * 1.6));
    max-height: calc((100dvh - 16px) / var(--nv-z)) !important;
    font-size: 15px !important;
  }
  html body #hud#hud section#trade-window.nv-trade .nt-body { gap: 6px; }
}
html body #hud#hud section#trade-window.nv-trade > .titlebar > span::before, html body #hud#hud section#trade-window.nv-trade > .titlebar > span::after { display: none !important; content: none !important; }