/* SPEC: 2026-01-11 Stage153 Patch161 */
/* TriFront Shop modal (placeholder for skins / no-ads / etc.) */

:root{
  --sp-bg: rgba(10,12,16,0.72);
  --sp-card: #111822;
  --sp-bd: #253244;
  --sp-txt: #dfe7f4;
  --sp-muted: #9fb2cc;
  --sp-accent: #3aa0ff;
  --sp-accent-weak: rgba(58,160,255,0.15);
}

#shopModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: radial-gradient(1200px 1200px at 50% 50%, var(--sp-bg), transparent 70%);
  backdrop-filter: blur(2px);
}

#shopModal.on{ display:flex; }

.shop-card{
  width: min(680px, 92vw);
  max-height: min(78vh, 760px);
  background: var(--sp-card);
  color: var(--sp-txt);
  border: 1px solid var(--sp-bd);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.shop-head{
  padding: 14px 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--sp-bd);
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-head .title{ flex: 1; }

.shop-body{
  padding: 16px 18px;
  overflow: auto;
  line-height: 1.6;
}

.shop-muted{
  color: var(--sp-muted);
  font-size: 13px;
  word-break: break-word;
  white-space: normal;
}

.shop-foot{
  padding: 12px 16px;
  border-top: 1px solid var(--sp-bd);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: #0e1520;
}

#shopModal .btn{
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--sp-bd);
  background: #0c141e;
  color: var(--sp-txt);
  cursor: pointer;
}
#shopModal .btn:hover{ filter: brightness(1.1); }
#shopModal .btn.primary{ border-color: var(--sp-accent); background: #132235; }
#shopModal .btn.ghost{ background: transparent; }

.shop-items{ margin-top: 14px; display: grid; gap: 12px; }
.shop-item{
  border: 1px solid var(--sp-bd);
  border-radius: 12px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.12);
  display: flex;
  gap: 12px;
  align-items: center;
}
.shop-item-main{ flex: 1; min-width: 0; }
.shop-item-title{ font-weight: 700; }
.shop-item-desc{ color: var(--sp-muted); font-size: 13px; margin-top: 2px; }
.shop-item-state{ margin-top: 6px; font-size: 12px; color: var(--sp-muted); }
.shop-item-price{ margin-top: 6px; font-size: 13px; color: var(--sp-txt); opacity: 0.92; }
.shop-item-act{ flex: 0 0 auto; }

.shop-row{ margin-top: 14px; display: grid; gap: 6px; }


/* Orthodox pack thumbnails (shop) */
.shop-item-thumbs{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.shop-thumb{
  width:44px;
  height:62px;
  object-fit:cover;
  border:1px solid var(--sp-bd);
  border-radius:6px;
  background:#0b1017;
}

/* Stage860: Shop background */
.shop-card{
  background:
    linear-gradient(180deg, rgba(6,9,14,.52) 0%, rgba(7,10,16,.64) 42%, rgba(6,8,13,.78) 100%),
    url("img/ui/shop_bg.jpg?v=20260711-860") center/cover no-repeat;
}
.shop-head,
.shop-body,
.shop-foot{
  position:relative;
  z-index:1;
}
.shop-item{
  background:rgba(7,10,16,.90);
}
.shop-foot{
  background:rgba(7,10,16,.92);
}