/* Store-promo styles for the SELF-CONTAINED game pages (games/solitaire,
   games/slotcar, games/slotcar3d) that do NOT load css/site.css. These
   mirror the .store-promo / .promo-leaderboard rules in css/site.css — keep
   the two in sync. Composer pages get the rules via site.css instead. */
.store-promo{display:flex;flex-direction:column;align-items:center;gap:7px;
  /* Grid/flex items default to min-width:auto and refuse to shrink below
     their content, which left the nominal 728px frame overflowing a narrow
     cell instead of honouring its own max-width:100%. */
  min-width:0;max-width:100%}
.store-promo__label{
  font-family:var(--font-ui,inherit);font-weight:600;font-size:10px;letter-spacing:.16em;
  color:var(--soft,#a79f93);text-transform:uppercase;text-align:center;
}
.store-promo__frame{
  position:relative;overflow:hidden;border-radius:12px;
  border:1px solid var(--line-2,#d7cdb6);background:var(--card,#faf6ee);max-width:100%;
}
.store-promo--rect .store-promo__frame{width:300px;height:250px}
.store-promo--leader .store-promo__frame{width:728px;height:90px}
.store-promo__item{
  position:absolute;inset:0;display:flex;text-decoration:none;color:inherit;
  opacity:0;visibility:hidden;transition:opacity .5s ease;
}
.store-promo__item.is-active{opacity:1;visibility:visible}
.store-promo__img{overflow:hidden;background:var(--inset,#fcfaf5);flex:none}
/* contain, never cover: whole product always visible for any shape. */
.store-promo__img img{width:100%;height:100%;object-fit:contain;display:block}
.store-promo__body{
  flex:1;min-width:0;display:flex;flex-direction:column;
  gap:3px;padding:11px 13px;
}
.store-promo__eyebrow{
  font-family:var(--font-ui,inherit);font-weight:700;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,#20507e);
}
.store-promo__name{
  font-family:var(--font-ui,inherit);font-weight:700;font-size:14.5px;line-height:1.25;
  color:var(--ink,#232026);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.store-promo__price{font-size:13px;font-weight:600;color:var(--muted,#5d5852)}
.store-promo__price b{color:var(--ink,#232026);font-weight:700}
.store-promo__cta{
  align-self:flex-start;font-family:var(--font-ui,inherit);font-weight:700;font-size:12px;
  color:#fff;background:var(--accent,#20507e);padding:6px 12px;border-radius:8px;
  white-space:nowrap;
}
.store-promo__item:hover .store-promo__cta{background:var(--accent-light,#2f6c9e)}
.store-promo__item:hover .store-promo__name{color:var(--accent,#20507e)}
.store-promo--rect .store-promo__item{
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:9px;padding:14px 14px 16px;
}
.store-promo--rect .store-promo__img{
  width:118px;height:118px;border-radius:10px;border:1px solid var(--line-2,#d7cdb6);
}
.store-promo--rect .store-promo__body{flex:none;align-items:center;gap:3px;padding:0}
.store-promo--rect .store-promo__eyebrow{display:none}
.store-promo--rect .store-promo__cta{align-self:center;margin-top:5px}
.store-promo--leader .store-promo__item{flex-direction:row;align-items:center}
.store-promo--leader .store-promo__img{width:90px;height:90px}
.store-promo--leader .store-promo__body{
  flex-direction:row;align-items:center;gap:14px;padding:0 16px 0 15px;
}
.store-promo--leader .store-promo__eyebrow{display:none}
.store-promo--leader .store-promo__name{-webkit-line-clamp:2;font-size:15px;flex:1}
.store-promo--leader .store-promo__price{white-space:nowrap}
.store-promo--leader .store-promo__cta{align-self:center}
/* Game promos: we have no game artwork, so the launcher's emoji stands in
   for a product photo and occupies the same box as .store-promo__img. */
.store-promo__icon{
  flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--inset,#fcfaf5);border:1px solid var(--line-2,#d7cdb6);
  line-height:1;
}
.store-promo__tag{
  font-family:var(--font-ui,inherit);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft,#a79f93);
}
.store-promo__item--game:hover .store-promo__name{color:var(--accent,#20507e)}
.store-promo--rect .store-promo__icon{width:118px;height:118px;font-size:60px}
.store-promo--leader .store-promo__icon{width:90px;height:90px;font-size:44px;border-radius:0;border:0;background:none}
.store-promo--leader .store-promo__item--game .store-promo__body{gap:10px}
.store-promo--leader .store-promo__tag{white-space:nowrap}

/* Phones: the 300x250 costs ~250px of scroll to say what the 90px leaderboard
   strip says. Below 640px the rect adopts the leader's horizontal layout —
   markup is identical, so this is purely a restyle. The frame's max-width:100%
   keeps the nominal 728px inside the viewport. */
@media (max-width: 640px) {
  .store-promo--rect .store-promo__frame { width: 728px; height: 90px; }
  .store-promo--rect .store-promo__item {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 0; padding: 0;
  }
  .store-promo--rect .store-promo__img { width: 90px; height: 90px; border: 0; border-radius: 0; }
  .store-promo--rect .store-promo__icon {
    width: 90px; height: 90px; font-size: 44px; border: 0; border-radius: 0; background: none;
  }
  .store-promo--rect .store-promo__body {
    flex: 1; min-width: 0; flex-direction: row; align-items: center;
    gap: 12px; padding: 0 14px 0 12px;
  }
  .store-promo--rect .store-promo__name { flex: 1; font-size: 15px; -webkit-line-clamp: 2; }
  .store-promo--rect .store-promo__tag { white-space: nowrap; }
  .store-promo--rect .store-promo__cta { align-self: center; margin-top: 0; }
}
/* Very narrow: the tag is the first thing that can go so the name and the CTA
   both keep their room. */
@media (max-width: 420px) {
  .store-promo--rect .store-promo__tag { display: none; }
  .store-promo--rect .store-promo__icon { width: 74px; height: 74px; font-size: 36px; }
  .store-promo--rect .store-promo__img { width: 74px; height: 74px; }
}

.promo-leaderboard{margin-top:22px}
.promo-leaderboard:not(:has(.store-promo)){display:none;margin:0}