/* Trading cards with a friend (src/screens/trade.mjs). Cards show in their grading slabs (.gc-slab, style.css). */
.fr-dot--trading{background:#c08cff;box-shadow:0 0 8px #c08cff}
/* friend rows in the drawer carry Invite and Trade, so their buttons run a little tighter */
.fr-drawer .fr-row{gap:8px}
.fr-drawer .fr-row .gbtn{padding:8px 11px;font-size:13px;letter-spacing:.08em}

/* waiting / request / ended: the search screen's ring with the trade arrows in the middle */
.trade-wait .search-core{gap:16px}
.tr-crest{display:grid;place-items:center;color:#fbe7b0;background:radial-gradient(circle at 40% 30%,#2a3a44,#0c1216)}
.tr-crest svg{width:46%;height:46%}
.tr-lead{margin:0;max-width:560px;font-size:16px;color:var(--muted)}
.tr-lead b{color:var(--ink)}
.tr-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tr-btns .gbtn{min-width:150px}

/* the table: your graded cards on the left, the two offers on the right */
.trade-page{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,30vw,540px);gap:28px;align-items:start}
.tr-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.tr-head{display:flex;align-items:center;gap:16px}
.tr-av{width:58px;height:58px;font-size:26px}
.tr-title{flex:1;min-width:0}
.tr-title small{display:block;font:700 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tr-title h1{margin:5px 0 0;font:700 clamp(30px,3.4vw,46px)/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-head .gbtn{min-width:0}
.tr-pickbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tr-pickbar h2{flex:1;margin:0;font:700 22px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tr-pickbar h2 small{margin-left:6px;font-size:18px;color:var(--gold1)}
.tr-pickbar input{flex:0 1 240px;min-width:0;padding:11px 14px;border-radius:6px;border:1px solid rgba(215,166,83,.5);background:rgba(8,9,10,.85);font:600 15px/1 var(--cond);letter-spacing:.04em}
.tr-rule{margin:-8px 0 0;font-size:13px;color:var(--muted)}
.tr-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(140px,9.5vw,180px),1fr))}
.tr-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px 24px;border-radius:12px;background:rgba(0,0,0,.3);border:1px dashed rgba(215,166,83,.4)}
.tr-empty p{margin:0;color:var(--muted)}

.tr-cell{position:relative}
.tr-cell .gc-slab{transition:transform .2s,box-shadow .2s,filter .2s}
.tr-cell.is-picked .gc-slab{filter:brightness(.42) saturate(.45);transform:scale(.95)}
.tr-tick{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:2;display:none;padding:7px 12px 7px 30px;border-radius:999px;pointer-events:none;white-space:nowrap;
  font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#1a1106;background:linear-gradient(180deg,#fbe7b0,#d7a653);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.tr-tick::before{content:"";position:absolute;left:12px;top:50%;width:6px;height:11px;border:solid #1a1106;border-width:0 2.5px 2.5px 0;translate:0 -65%;rotate:45deg}
.tr-cell.is-picked .tr-tick{display:block}
.tr-zoom{position:absolute;right:-8px;top:-8px;z-index:3;width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .15s,transform .15s;
  border:1px solid rgba(251,231,176,.45);background:rgba(10,12,14,.94);color:var(--gold1);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.tr-zoom svg{width:16px;height:16px}
.tr-zoom:hover{transform:scale(1.1)}
.tr-cell:hover .tr-zoom,.tr-zoom:focus-visible{opacity:1}
@media (hover:none){.tr-zoom{opacity:1}}

.tr-aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:10px;height:calc(100vh - 40px);min-height:560px;padding:14px;border-radius:10px;
  border:2px solid transparent;background:linear-gradient(180deg,#141a1d,#08090b) padding-box,var(--frame) border-box;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.tr-side{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.07);transition:border-color .3s,box-shadow .3s}
.tr-side header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tr-side h3{margin:0;font:700 18px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fbe7b0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-sum{font:600 12px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tr-gem{color:#ffd27a}
.tr-okay{margin-left:auto;padding:4px 10px;border-radius:999px;font:700 12px/1 var(--cond);font-style:normal;letter-spacing:.12em;text-transform:uppercase;background:rgba(75,224,138,.16);color:#8ff0b5;border:1px solid rgba(75,224,138,.5)}
.tr-side.is-ready{border-color:rgba(75,224,138,.65);box-shadow:inset 0 0 22px rgba(75,224,138,.16)}
.tr-side.is-changed{animation:trFlash 1.1s ease}
@keyframes trFlash{0%{box-shadow:0 0 0 2px #ffd27a,0 0 28px rgba(255,210,122,.5)}}
.tr-slabs{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px 12px;align-content:start;padding:8px 8px 6px 2px}
.tr-slabs:has(.tr-hint){place-items:center;align-content:center}
.tr-hint{grid-column:1/-1;margin:0;text-align:center;font-size:14px;color:var(--muted)}
.tr-cell--offer .gc-slab:hover{transform:translateY(-3px)}
.tr-x{position:absolute;right:-6px;top:-6px;z-index:2;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .15s;
  background:#6a2027;border:1px solid #ff8a7a;color:#fff}
.tr-x svg{display:block;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tr-side--mine .tr-cell:hover .tr-x{opacity:1}
.tr-cell.is-new{animation:trIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes trIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
.tr-swap{flex:none;align-self:center;width:42px;height:42px;margin:-4px 0;display:grid;place-items:center;rotate:90deg;border-radius:50%;color:#fbe7b0;
  border:2px solid transparent;background:radial-gradient(#1b1b1b,#0a0a0a) padding-box,var(--frame) border-box}
.tr-swap svg{width:22px;height:22px}
.tr-foot{flex:none;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.tr-confirm{width:100%}
.tr-state{margin:0;text-align:center;font-size:14px;color:var(--muted)}
.tr-state b{color:#8ff0b5}
.tr-note{margin:0;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.4;background:rgba(215,166,83,.1);border:1px solid rgba(215,166,83,.35);color:#eadfc6}
.tr-note--alert{background:rgba(255,176,74,.14);border-color:#ffb04a;color:#ffe2b8}
.tr-aside .ol-error{width:auto;font-size:14px}

/* the trade went through: the cards that arrived deal in from the other side */
.trade-done{justify-content:center}
.tr-done-card{width:min(100%,1000px);display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px clamp(18px,3vw,40px);border-radius:14px;text-align:center;
  border:2px solid transparent;background:linear-gradient(180deg,#18232a,#0a0e11) padding-box,var(--frame) border-box;box-shadow:0 30px 60px rgba(0,0,0,.6);animation:inspectIn .35s ease}
.tr-done-card h1{margin:0;font:700 clamp(32px,4vw,52px)/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(180deg,#fff6de,#e9bb6a 60%,#a47232);-webkit-background-clip:text;background-clip:text;color:transparent}
.tr-done-card h4{margin:8px 0 0;font:700 13px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tr-done-card .tr-note{max-width:640px}
.tr-done-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;color:#fbe7b0;border:2px solid transparent;
  background:radial-gradient(#1b2a33,#0a0f12) padding-box,var(--frame) border-box;box-shadow:0 0 30px rgba(255,210,122,.35)}
.tr-done-icon svg{width:34px;height:34px}
.tr-done-grid{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:20px 18px;padding:6px 0}
.tr-done-cell{width:clamp(140px,11vw,180px);animation:trDeal .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 90ms + 150ms)}
@keyframes trDeal{from{opacity:0;transform:translateX(-70px) rotate(-8deg) scale(.85)}}
body.no-motion .tr-done-cell,body.no-motion .tr-cell.is-new,body.no-motion .tr-side.is-changed{animation:none}

/* narrow screens: header, then the table, then your cards */
@media (max-width:1100px){
  .trade-page{display:flex;flex-direction:column;align-items:stretch;gap:18px}
  .tr-main{display:contents}
  .tr-head{order:0}.tr-aside{order:1}.tr-pickbar,.tr-rule,#tr-grid{order:2}
  .tr-aside{position:static;height:auto;min-height:0}
  .tr-side{flex:none}
  .tr-slabs{max-height:340px}
}
@media (max-width:700px){
  .tr-head{flex-wrap:wrap}.tr-head .gbtn{width:100%}
  .tr-av{width:46px;height:46px;font-size:21px}
  .tr-pickbar input{flex:1 1 100%}
  .tr-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px 12px}
  .tr-slabs{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .tr-done-cell{width:calc(50% - 9px)}
}