/* Reusable full-screen trade view. The shared Modal supplies the visual scroll rail. */
.gr-trade-dialog .gr-dialog__body { min-width:0; }
.gr-trade-dialog>.gr-dialog__head { padding:12px 16px; gap:12px; }
.gr-trade-dialog>.gr-dialog__head h2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; margin:0; font-size:max(18pt,1rem); line-height:1.2; overflow-wrap:anywhere; }
.gr-trade-dialog>.gr-dialog__head .gr-icon-button { width:64px; height:64px; min-width:64px; min-height:64px; flex:0 0 64px; }
.gr-trade-screen { min-width:0; color:#e8edda; font:inherit; font-size:max(16pt,1em); }
.gr-trade-bundles,.gr-trade-compose-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.gr-trade-bundle { min-width:0; padding:20px; border:1px solid #91b8a86b; border-radius:14px; background:#123741; }
.gr-trade-bundle h3,.gr-trade-cargo h3 { display:flex; justify-content:space-between; gap:12px; margin:0 0 18px; color:#ead5a7; font:inherit; font-weight:650; line-height:1.25; }
.gr-trade-bundle--receive { border-color:#86bcb375; background:#123f44; }
.gr-trade-bundle--receive h3 { color:#c7e6cd; }
.gr-trade-resource { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #adc4b325; }
.gr-trade-resource>span { display:flex; align-items:center; gap:12px; min-width:0; overflow-wrap:anywhere; }
.gr-trade-resource svg { flex:0 0 28px; color:#e1bf80; }
.gr-trade-resource>strong { color:#fff0ca; font:inherit; font-weight:700; font-variant-numeric:tabular-nums; }
.gr-trade-items { display:grid; gap:10px; margin-top:12px; }
.gr-trade-item { position:relative; display:flex; align-items:center; gap:12px; min-width:0; margin:0; padding:12px; border:1px solid #9fbfaf45; border-radius:10px; background:#082c38; overflow-wrap:anywhere; }
.gr-trade-item__art { display:flex; align-items:center; justify-content:center; flex:0 0 64px; width:64px; height:64px; }
.gr-trade-item__art>svg { display:block; width:64px; height:64px; max-width:100%; }
.gr-trade-item__copy { display:grid; gap:8px; min-width:0; }
.gr-trade-item__copy>strong { color:#f5e8c6; font:inherit; font-weight:650; line-height:1.25; }
.gr-trade-item__effects { display:flex; flex-wrap:wrap; gap:6px 12px; color:#b5dec7; line-height:1.25; }
.gr-trade-item__effects>span { display:inline-flex; align-items:center; gap:6px; }
.gr-trade-item__effects svg { flex:0 0 24px; width:24px; height:24px; }
.gr-trade-item__curio { color:#b7c8bd; }
.gr-trade-item--mystery { border-color:#d3b87580; background:linear-gradient(125deg,#24434b,#102d3a); }
.gr-trade-item--mystery .gr-trade-item__art { position:relative; color:#ebcc8c; }
.gr-trade-item--mystery .gr-trade-item__art>b { position:absolute; inset:0; display:grid; place-items:center; color:#102b35; font:inherit; font-size:max(20pt,1.25em); font-weight:800; }
.gr-trade-status { margin:18px 0; padding:12px 16px; border-left:3px solid #dfbc7c; border-radius:3px; color:#ecd8ad; background:#dfbc7c0b; font:inherit; line-height:1.4; overflow-wrap:anywhere; }
.gr-trade-status--error { border-color:#eda58f; color:#ffd4c3; }
.gr-trade-actions { position:sticky; bottom:-1px; z-index:2; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:16px; padding:14px 0 2px; background:#082b36; }
.gr-trade-actions .gr-button { min-height:48px; min-width:100px; padding:10px 16px; }
.gr-trade-empty-state,.gr-trade-complete { display:grid; justify-items:center; gap:18px; padding:30px 12px; text-align:center; color:#cadccc; }
.gr-trade-empty-state>svg { color:#ddc187; }
.gr-trade-empty-state>p,.gr-trade-empty { margin:0; color:#c4d1bf; line-height:1.4; }
.gr-trade-complete>svg { color:#b0e5bd; }
.gr-trade-complete>h3 { margin:0; font:inherit; font-weight:650; color:#d0edcf; }
.gr-trade-number { display:grid; grid-template-columns:minmax(0,1fr) minmax(88px,120px); gap:14px; align-items:center; margin:16px 0 0; }
.gr-trade-number>span { display:flex; align-items:center; gap:10px; min-width:0; line-height:1.25; }
.gr-trade-number svg { color:#e4c18b; flex:0 0 28px; }
.gr-trade-number input { width:100%; min-width:0; min-height:48px; padding:8px 10px; border:2px solid #92b6a8; border-radius:8px; background:#052630; color:#fff0cf; font:inherit; font-size:inherit; text-align:right; line-height:1.25; font-variant-numeric:tabular-nums; }
.gr-trade-number input:focus-visible { outline:3px solid #f0c881; outline-offset:3px; }
.gr-trade-number input:disabled { opacity:.65; }
.gr-trade-wallet { margin:16px 0 0; color:#c3d2c1; font:inherit; line-height:1.4; }
.gr-trade-cargo { margin-top:22px; }
.gr-trade-cargo h3>span { color:#b9caba; font-weight:400; white-space:nowrap; }
.gr-trade-cargo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.gr-trade-cargo label.gr-trade-item { cursor:pointer; padding-left:44px; min-height:88px; }
.gr-trade-cargo input[type=checkbox] { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; margin:0; accent-color:#e7c17c; }
.gr-trade-cargo input[type=checkbox]:focus-visible { outline:3px solid #f4ce8e; outline-offset:4px; }
.gr-trade-item--selected { border-color:#edca8b; background:#254748; box-shadow:inset 0 0 0 1px #edca8b; }
@media(max-width:760px) {
 .gr-trade-bundles,.gr-trade-compose-grid,.gr-trade-cargo-grid { grid-template-columns:minmax(0,1fr); }
 .gr-trade-bundle { padding:16px; }
}
@media(max-width:420px) {
 .gr-trade-bundle { padding:14px; }
 .gr-trade-item { padding:10px; gap:8px; }
 .gr-trade-item__art { flex-basis:52px; width:52px; height:52px; }
 .gr-trade-item__art>svg { width:52px; height:52px; }
 .gr-trade-actions { gap:8px; }
 .gr-trade-actions .gr-button { flex:1 1 100px; min-width:0; padding:10px 12px; }
 .gr-trade-number { grid-template-columns:minmax(0,1fr) 100px; gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .gr-trade-screen * { scroll-behavior:auto; } }