/* ════════════════════════════════════════════════════════════════════
   css/agora-store.css — Agora Surfers: η σελίδα του καταστήματος
   (js/agora-store.js · #/agora-store). Μόνο σημασιολογικά tokens
   (--card, --fg, --terra …), άρα ακολουθεί κάθε θέμα της πλατφόρμας.
   ════════════════════════════════════════════════════════════════════ */
.ast { display:flex; flex-direction:column; gap:14px; }
.ast-play { padding:10px 18px; border:0; border-radius:999px; cursor:pointer;
  background:var(--acc-fill); color:var(--on-acc); font:700 14px/1 var(--sans); letter-spacing:.3px; }
.ast-play:hover { background:var(--terra-dk); }
.ast-play:focus-visible, .ast-cta:focus-visible, .ast-buy:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

.ast-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--sink);
  font:500 14px/1.45 var(--sans); color:var(--fg); }
.ast-banner.is-sub { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, var(--card)); }
.ast-banner.is-ok { color:var(--muted); font-size:13px; }
.ast-cta { flex:none; padding:9px 16px; border:0; border-radius:999px; cursor:pointer;
  background:var(--acc-fill); color:var(--on-acc); font:700 13px/1 var(--sans); }
.ast-cta:hover { background:var(--terra-dk); }
.ast-ret, .ast-err { margin:0; padding:10px 14px; border-radius:0 10px 10px 0; font:500 14px/1.45 var(--sans);
  border-left:3px solid var(--gold); background:var(--sink); color:var(--fg); }
.ast-ret.is-done { border-left-color:var(--sage); }
.ast-err { border-left-color:var(--terra); }

.ast-h { margin:10px 0 0; font:700 12px/1 var(--sans); letter-spacing:2px; color:var(--muted); }
/* Grammar Invaders: τίτλος ενότητας με «Παίξε» δίπλα */
.ast-hrow { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ast-hrow .ast-h { margin:0; }
.ast-sub { margin:6px 0 -4px; font:700 14px/1.3 var(--sans); color:var(--fg); }
.ast-count { font:600 12px/1 var(--sans); color:var(--muted); }
.ast-play--sm { padding:8px 14px; font-size:13px; }
.ast-lede { margin:-4px 0 0; font:500 13px/1.5 var(--sans); color:var(--muted); max-width:72ch; }
.ast-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px; }
.ast-grid--packs { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }

.ast-card { position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--card); }
.ast-card.is-own { border-color:color-mix(in srgb, var(--sage) 55%, var(--line)); }
.ast-pv { position:relative; aspect-ratio:1 / 1; background:linear-gradient(160deg, var(--sink), color-mix(in srgb, var(--gold) 14%, var(--sink))); }
.ast-pv > img { width:100%; height:100%; object-fit:cover; display:block; }
.ast-mos { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:var(--line); }
.ast-mos img { width:100%; height:100%; min-height:0; object-fit:cover; display:block; }
.ast-mos.n1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.ast-mos.n2 { grid-template-rows:1fr; }
.ast-mos.n3 img:first-child { grid-row:span 2; }
.ast-more { display:grid; place-items:center; background:var(--sink); color:var(--muted); font:800 16px/1 var(--sans); }
.ast-own, .ast-save { position:absolute; top:8px; z-index:1; border-radius:999px; font:800 11px/1 var(--sans); color:#fff; }
.ast-own { right:8px; width:24px; height:24px; display:grid; place-items:center; background:var(--sage); }
.ast-save { left:8px; padding:5px 8px; background:var(--terra); }

.ast-cap { display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; flex:1; }
.ast-kind { font:600 10.5px/1.2 var(--sans); letter-spacing:.4px; color:var(--muted); }
.ast-nm { font:800 14px/1.2 var(--sans); letter-spacing:.4px; color:var(--fg); }
.ast-en { font:500 12px/1.35 var(--sans); color:var(--muted); }
.ast-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.ast-chip { padding:3px 7px; border-radius:999px; background:var(--sink); color:var(--fg); font:700 10px/1.2 var(--sans); letter-spacing:.4px; }
.ast-chip.is-new { background:var(--acc-fill); color:var(--on-acc); }
.ast-chip.is-season { background:color-mix(in srgb, var(--gold) 22%, var(--card)); }
.ast-inpack { font:500 11px/1.3 var(--sans); color:var(--muted); }
.ast-have { margin-top:auto; padding-top:6px; font:800 12px/1 var(--sans); letter-spacing:1px; color:var(--sage); }
.ast-buy { margin-top:auto; align-self:flex-start; display:inline-flex; gap:6px; align-items:baseline;
  padding:8px 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--acc-fill); color:var(--on-acc); font:800 13px/1 var(--sans); }
.ast-buy:hover { background:var(--terra-dk); }
.ast-buy s { opacity:.7; font-weight:600; }
.ast-buy.is-locked { background:var(--sink); color:var(--fg); border:1px solid var(--line); }
.ast-buy.is-locked:hover { background:var(--card); }
.ast-buy:disabled { opacity:.6; cursor:progress; }
.ast-fine, .ast-empty { margin:6px 0 0; font:500 12.5px/1.5 var(--sans); color:var(--muted); }

/* Καρτέλες ανά παιχνίδι (#/agora-store): σήμα + όνομα + «Χ/Υ δικά σου» */
.ast-tabs { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; }
.ast-tab { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--fg); font:inherit; }
.ast-tab:hover { border-color:color-mix(in srgb, var(--terra) 45%, var(--line)); }
.ast-tab.on { border-color:var(--terra); box-shadow:inset 0 0 0 1px var(--terra); background:color-mix(in srgb, var(--terra) 8%, var(--card)); }
.ast-tab:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ast-tab__t { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ast-tab__t b { font:800 14px/1.2 var(--sans); }
.ast-tab__n { font:500 11.5px/1.3 var(--sans); color:var(--muted); }
.ast-mark, .ast-tab__mark, .ast-ghead__mark { display:inline-flex; flex:none; gap:2px; color:var(--terra); }
.ast-mark__i { display:block; width:30px; height:30px; }
.ast-mark__i svg { width:100%; height:100%; display:block; }
.ast-ghead__mark .ast-mark__i { width:42px; height:42px; }
.ast-pane { display:flex; flex-direction:column; gap:14px; padding-top:4px; }
.ast-ghead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px; border-radius:14px; background:var(--sink); }
.ast-ghead__t { flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.ast-gname { margin:0; font:800 18px/1.2 var(--sans); color:var(--fg); }
.ast-ghead .ast-lede { margin:0; }
.ast-shead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:6px 0 -4px; }
.ast-shead .ast-sub { margin:0; display:inline-flex; align-items:center; gap:8px; }
.ast-sub--sm { font-size:13px; }
.ast-sub--off { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); }
.ast-when { font:700 12px/1.2 var(--sans); color:var(--muted); }
.ast-shead.is-live .ast-when { color:var(--fg); }
.ast-dot { width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 25%, transparent); }
/* Εκτός εποχής: γκρίζα κάρτα, η τιμή και πότε ανοίγει — καμία αγορά */
.ast-card.is-off .ast-pv { filter:grayscale(1); opacity:.55; }
.ast-card.is-off .ast-nm, .ast-card.is-off .ast-en { color:var(--muted); }
.ast-off { margin-top:auto; padding-top:6px; display:flex; flex-direction:column; gap:3px; }
.ast-off__p { font:700 13px/1 var(--sans); color:var(--muted); }
.ast-off__d { font:700 12px/1.3 var(--sans); color:var(--fg); }

@media (max-width: 520px) {
  .ast-tabs { grid-template-columns:1fr; }
  .ast-tab { padding:9px 10px; }
  .ast-ghead { padding:12px; }
  .ast-ghead__mark { display:none; }
  .ast-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .ast-grid--packs { grid-template-columns:1fr; }
  .ast-grid--packs .ast-card { flex-direction:row; }
  .ast-grid--packs .ast-pv { width:42%; flex:none; aspect-ratio:auto; min-height:150px; }
  .ast-cap { padding:9px 10px 11px; }
}