/* Câmbio: diamonds for gold between players (systems/exchange.js), a tab of the market */
.ex { display: grid; gap: 12px; }
.ex-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-gem { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #7fd8ff; white-space: nowrap; }
.ex-gem img { width: 14px; height: 14px; image-rendering: pixelated; }
.ex-gem.big { font-family: var(--pixel); font-size: 1.05rem; }
.ex-gem.big img { width: 18px; height: 18px; }

.ex-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-side, .ex-new, .ex-box {
  display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 14px; border: 1px solid #22355c;
  background: linear-gradient(180deg, #13213d, #0b1424);
}
.ex-side header { display: grid; gap: 2px; }
.ex-side h4, .ex-new h4, .ex-box h4 { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--pixel); font-size: 1rem; }
.ex-sell { border-color: #2a6fa8; }
.ex-sell h4 { color: #7fd8ff; }
.ex-buy { border-color: #8a6a1f; }
.ex-buy h4 { color: #ffd75e; }
.ex-rows { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.ex-row {
  display: grid; grid-template-columns: 70px auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 5px 8px; border-radius: 8px; background: #070e1b; font-size: 0.85rem;
}
.ex-row.mine { box-shadow: inset 2px 0 0 #ffd75e; }
.ex-box .ex-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.ex-price { display: inline-flex; align-items: center; white-space: nowrap; }
.ex-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-take { display: inline-flex; gap: 4px; align-items: center; }
.ex .ex-qty { width: 64px; min-width: 0; padding: 3px 6px; }
.ex-none { padding: 10px 0; text-align: center; }
.ex-lock { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; color: #ffd75e; }

.ex-lower { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; align-items: start; }
.ex-col { display: grid; gap: 12px; }
.ex-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #070e1b; border: 1px solid #22355c; }
.ex-seg button { flex: 1; padding: 7px 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.ex-seg button.on { background: linear-gradient(180deg, #2a4170, #1b2c50); color: #ffd75e; box-shadow: inset 0 0 0 1px #3d5d9e; }
.ex-seg button:disabled { opacity: 0.5; cursor: not-allowed; }
.ex-field { display: grid; gap: 3px; }
.ex .ex-field .input { width: 100%; min-width: 0; }
.ex-sum { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #070e1b; font-size: 0.85rem; }
.ex-sum div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ex-go { width: 100%; }
.ex-last { display: grid; gap: 4px; margin-top: 4px; }
.ex-ticks { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-tick { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; background: #070e1b; border: 1px solid #22355c; font-size: 0.75rem; }

@media (max-width: 760px) {
  .ex-book, .ex-lower { grid-template-columns: 1fr; }
  .ex-row { grid-template-columns: 64px auto minmax(0, 1fr); }
  .ex-row .ex-take { grid-column: 1 / -1; justify-content: flex-end; }
}