/* The store-preview popover (public/storePreview.js). Its own file, outside
 * the style.css partials, and built only on the shared tokens (--panel,
 * --line, --text, --dim, --surface-2, --shadow-soft), so both skins and both
 * themes colour it without a rule of their own. */
.sp-pop {
  position: fixed; z-index: 60;
  width: min(1000px, calc(100vw - 16px)); box-sizing: border-box;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 32px var(--shadow-soft);
  font-size: .85rem; line-height: 1.35;
}
.sp-pop[hidden] { display: none; }
/* The caret points at the hovered icon. */
.sp-pop::before {
  content: ""; position: absolute; left: calc(var(--sp-arrow-x, 50%) - 7px);
  width: 12px; height: 12px; background: var(--panel);
  border: 1px solid var(--line); transform: rotate(45deg);
}
.sp-pop[data-side="below"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.sp-pop[data-side="above"]::before { bottom: -7px; border-left: 0; border-top: 0; }

.sp-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  padding: .65rem .9rem; border-bottom: 1px solid var(--line);
}
.sp-store { width: 20px; height: 20px; flex: none; }
.sp-name { font-weight: 700; font-size: 1rem; }
.sp-by { color: var(--dim); }
.sp-by b { color: var(--text); font-weight: 600; }
.sp-fact { padding-left: .75rem; border-left: 1px solid var(--line); white-space: nowrap; }
.sp-dim { color: var(--dim); }
.sp-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.sp-chips:empty { display: none; }
.sp-why { display: flex; align-items: center; gap: .75rem; padding: .5rem .9rem; border-bottom: 1px solid var(--line); }
.sp-why:empty { display: none; }
.sp-why .pw-graph { width: 14rem; flex: none; }

/* Portrait screenshots, 280px tall, scrolling sideways when they overflow. */
.sp-strip {
  display: flex; gap: .5rem; padding: .7rem .9rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  max-width: 100%; box-sizing: border-box;
}
.sp-strip img {
  height: 280px; width: auto; min-width: 120px; flex: none;
  border-radius: 8px; background: var(--surface-2);
}
.sp-strip-loading { height: 280px; align-items: center; justify-content: center; min-width: 320px; }

.sp-foot {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  padding: .55rem .9rem; border-top: 1px solid var(--line); color: var(--dim);
}
.sp-foot b { color: var(--text); font-weight: 600; }

/* Game page screenshots (public/gameScreenshots.js): natural aspect ratio, one row, scrolls sideways. */
.gs-strip { display: flex; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .4rem; }
.gs-strip a { flex: none; display: block; }
.gs-strip img { display: block; height: 360px; width: auto; min-width: 120px; border-radius: 8px; background: var(--surface-2); }
@media (max-width: 600px) { .gs-strip img { height: 240px; } }