/* Okno handlu: kafelki jak w warsztacie i kartach łupu */
#trade-modal { display: none; position: fixed; inset: 0; z-index: 120; align-items: center; justify-content: center; background: rgba(8,10,6,.62); backdrop-filter: blur(2px); font-family: Bahnschrift, 'Segoe UI', sans-serif; color: #d6ded0; }
#trade-modal.open { display: flex; }
.tr-box { position: relative; width: min(980px, 96vw); max-height: 90vh; display: flex; flex-direction: column; padding: 16px 22px 22px; background: rgba(22,25,17,.97); border: 1px solid #5a5746; box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: bnIn .3s cubic-bezier(.2,1.2,.4,1) both; }
.tr-box .win-x { top: 12px; right: 12px; }
.tr-header { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; padding-right: 44px; }
.tr-header h2 { margin: 0; font: 700 20px Bahnschrift, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #e6e0c4; }
.tr-msg { flex: 1; font: 700 13px Bahnschrift, sans-serif; letter-spacing: .08em; } .tr-msg.good { color: #8fd36a; } .tr-msg.bad { color: #e0563c; }
/* która strona to która: nagłówek kolumny (ksywka / „HANDLARZ”, ikona, złom) i cienki akcent — gracz stonowana zieleń, handlarz wyblakły bursztyn */
.tr-col { display: flex; flex-direction: column; min-width: 0; }
.tr-colhead { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: rgba(10,12,8,.55); border-top: 2px solid var(--acc, #5a5746); }
.tr-col-player { --acc: #6f9a78; } .tr-col-trader { --acc: #a88548; }
.tr-col-player .tr-colhead { background: linear-gradient(rgba(60,96,70,.2), rgba(10,12,8,.6)); }
.tr-col-trader .tr-colhead { background: linear-gradient(rgba(120,94,46,.2), rgba(10,12,8,.6)); }
.tr-ico { width: 22px; height: 22px; flex: none; color: var(--acc); }
.tr-who { font: 800 14px Bahnschrift, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e6e0c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tr-col-trader .tr-who { color: #d7bd85; }
.tr-cash { margin-left: auto; display: flex; align-items: center; gap: 5px; font: 800 16px Bahnschrift, sans-serif; color: #f0c84c; flex: none; }
.tr-cash img { width: 20px; height: 20px; }
/* podpis kierunku nad planszami (ui/trade.js showDir): st-pos zielony, st-neg pomarańczowy, .bad czerwony */
.tr-dir { min-height: 22px; margin-bottom: 8px; text-align: center; font: 800 13px Bahnschrift, sans-serif; letter-spacing: .08em; }
.tr-dir.bad { color: #e0563c; }
.tr-main { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 0; }
.tr-board { display: grid; grid-template-columns: repeat(auto-fill, 104px); gap: 8px; align-content: start; justify-content: center; min-height: 250px; max-height: 66vh; overflow-y: auto; padding: 10px; background: radial-gradient(circle at 50% 0%, rgba(70,76,50,.28), rgba(14,17,11,.6) 72%); border: 1px solid #3a3d2e; scrollbar-width: thin; scrollbar-color: #5a5746 transparent; }
.tr-tile { position: relative; width: 104px; height: 118px; cursor: pointer; border: 2px solid var(--rc, #5a5746); transition: transform .1s, filter .1s;
  background: linear-gradient(155deg, color-mix(in srgb, var(--rc, #888) 62%, #1c2016) 0%, color-mix(in srgb, var(--rc, #888) 22%, #181b12) 60%, #14170f 100%); }
.tr-tile:hover:not(.off) { transform: translateY(-3px); filter: brightness(1.2); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent); }
.tr-tile > img { position: absolute; left: 14px; top: 6px; width: 76px; height: 76px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.tr-tile .n { position: absolute; right: 5px; top: 3px; font: 800 14px Bahnschrift, sans-serif; color: #efe9d0; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.tr-tile .v { position: absolute; left: 3px; top: 3px; padding: 1px 4px; font: 800 9px Bahnschrift, sans-serif; letter-spacing: .08em; border: 1px solid; }
.tr-tile .v.up { color: #9be07c; background: rgba(30,66,26,.9); border-color: #62b85c; } .tr-tile .v.down { color: #ff9a5a; background: rgba(82,40,12,.9); border-color: #e0743a; }
.tr-tile .stock { position: absolute; left: 4px; bottom: 28px; font: 700 10px Bahnschrift, sans-serif; letter-spacing: .1em; color: #cfc9ac; text-shadow: 0 1px 2px #000; }
.tr-tile .price { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(8,10,6,.82); border-top: 1px solid rgba(255,255,255,.08); }
.tr-tile .price img { width: 18px; height: 18px; } .tr-tile .price i { font: 800 15px Bahnschrift, sans-serif; font-style: normal; color: #f0913a; } .tr-tile .price.gain i { color: #8fd36a; }
.tr-tile.off { cursor: default; } .tr-tile.off > img { filter: grayscale(.6) drop-shadow(0 3px 4px rgba(0,0,0,.7)); opacity: .7; }
.tr-tile.bad .price i { color: #ff7a5c; }
.tr-tile .price:hover .sv-tip { display: flex; }
.tr-tile.lift { opacity: .4; }
.tr-empty { grid-column: 1 / -1; min-height: 120px; }
#tip { z-index: 140; }
.ghost#ghost3 { z-index: 130; }