/* ============================================================
   The pedlar's tray (shop) · the satchel (item tray) · coin fx
   ============================================================ */

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  padding:20px; background:rgba(4,10,12,.78); backdrop-filter:blur(4px);
  animation:fadeIn .25s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:min(880px,100%); max-height:86vh; overflow:auto;
  background:linear-gradient(180deg,var(--slate-2),var(--ink) 60%);
  border:1px solid var(--brass-dim); border-radius:var(--r);
  padding:22px 24px 26px; box-shadow:0 40px 90px -40px #000;
  animation:sheetIn .32s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes sheetIn{from{opacity:0; transform:translateY(18px) scale(.985)}to{opacity:1; transform:none}}
.sheet-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.sheet-head h2{
  font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:.08em;
  margin:0; color:var(--bone);
}
.sheet-head .purse{
  margin-left:auto; font-family:var(--mono); font-size:16px; letter-spacing:.1em; color:var(--brass);
  border:1px solid var(--brass-dim); padding:5px 12px; border-radius:var(--r);
}
.sheet-note{max-width:64ch; color:#b6b0a4; font-size:15px; margin:0 0 22px}
.sheet-note em{color:var(--brass); font-style:italic}

/* ---------- cards ---------- */
.shopgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:12px}
.card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  background:var(--slate); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 16px 14px; transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--brass-dim); transform:translateY(-2px)}
.card.poor{opacity:.5}
.card .ico{font-size:26px; line-height:1; color:var(--brass); filter:drop-shadow(0 0 8px rgba(201,146,46,.35))}
.card h3{
  font-family:var(--display); font-weight:500; font-size:17px; letter-spacing:.05em;
  margin:0; color:var(--bone);
}
.card p{margin:0; font-size:14.5px; line-height:1.5; color:#aaa49a; flex:1}
.card .foot{display:flex; align-items:center; gap:10px; margin-top:4px}
.card .price{font-family:var(--mono); font-size:14px; color:var(--brass); letter-spacing:.06em}
.card-buy{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  background:transparent; color:var(--brass); border:1px solid var(--brass-dim);
  padding:7px 12px; border-radius:var(--r); transition:background .18s,color .18s;
}
.card-buy:hover{background:var(--brass); color:var(--ink)}
.card-buy[disabled]{opacity:.35; cursor:not-allowed; background:transparent; color:var(--bone-dim)}
.card .own{
  position:absolute; top:10px; right:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--verdigris);
}
.card.bought{animation:cardFlash .5s ease}
@keyframes cardFlash{0%{box-shadow:0 0 0 0 rgba(201,146,46,.55)}100%{box-shadow:0 0 0 14px rgba(201,146,46,0)}}

/* ---------- right panel: satchel + the pedlar ---------- */
.side{position:sticky; top:78px}
.side .rail-h{margin-bottom:12px}
.satchel{
  display:flex; flex-direction:column; gap:7px;
  padding:12px; margin:0 0 12px;
  border:1px solid var(--line); border-radius:var(--r); background:rgba(18,38,44,.42);
}
.satchel .empty{margin:2px 0; font-size:14px; font-style:italic; color:#6d7a7c; line-height:1.4}
.btn.wide{width:100%; text-align:center; padding:10px 12px}
.sidepurse{
  margin:10px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--bone-dim);
  display:flex; align-items:baseline; gap:8px;
}
.sidepurse b{margin-left:auto; font-size:14px; letter-spacing:.06em; color:var(--brass); font-weight:500}

.item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:var(--slate); border:1px solid var(--brass-dim); color:var(--bone);
  padding:8px 10px; border-radius:var(--r); font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  transition:background .18s,transform .12s,opacity .2s,border-color .18s;
}
.item .g{font-size:16px; color:var(--brass); line-height:1}
.item .t{flex:1}
.item .n{color:var(--verdigris)}
.item:hover{background:var(--slate-2); transform:translateX(2px); border-color:var(--brass)}
.item[disabled]{opacity:.32; cursor:not-allowed; transform:none}
.item.spend{animation:spend .5s ease}

@media(max-width:1000px){
  .side{position:static}
  .satchel{flex-direction:row; flex-wrap:wrap; align-items:center}
  .item{width:auto}
  .item .t{flex:0 0 auto}
  .btn.wide{width:auto}
  .sidepurse{display:inline-flex; margin-left:14px}
  .sidepurse b{margin-left:6px}
}
@keyframes spend{0%{box-shadow:0 0 0 0 rgba(79,163,146,.5)}100%{box-shadow:0 0 0 12px rgba(79,163,146,0)}}

/* ---------- flying coins / sparks ---------- */
.fxlayer{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden}
.flycoin{
  position:fixed; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe6a8, var(--brass) 55%, #6d4d13);
  box-shadow:0 0 10px rgba(201,146,46,.7);
  transition:transform 1s cubic-bezier(.35,-.2,.6,1), opacity .95s ease-in;
}
.spark{
  position:fixed; width:3px; height:3px; border-radius:50%; background:var(--brass-lit);
  box-shadow:0 0 6px var(--brass);
  transition:transform 1.15s cubic-bezier(.2,.7,.3,1), opacity 1.15s linear;
}
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  background:rgba(11,23,27,.94); border:1px solid var(--brass-dim); color:var(--brass);
  padding:10px 18px; border-radius:var(--r); z-index:70;
  animation:toast 2.4s ease both;
}
.toast.bad{border-color:var(--rust); color:var(--rust)}
.toast.good{border-color:var(--verdigris); color:var(--verdigris)}
@keyframes toast{
  0%{opacity:0; transform:translate(-50%,14px)}
  12%,80%{opacity:1; transform:translate(-50%,0)}
  100%{opacity:0; transform:translate(-50%,-10px)}
}