/* ============================================================================
   KrakenTheMeta — /sets  ·  Abyssal Arsenal brand (Cinzel + Sora, abyss/ink/cyan).
   On-site set browser: a grid of sets → click opens the set's cards ON OUR SITE
   (images, prices, TCGplayer buy links) instead of leaving to Scryfall.
   Namespace: .st-
   ============================================================================ */
:root {
  --st-abyss:#04101e; --st-ink:#081f33; --st-ink2:#0b2640;
  --st-line:rgba(162,231,238,.12); --st-line2:rgba(162,231,238,.22);
  --st-cyan:#a2e7ee; --st-blue:#4196e0; --st-text:#eaf4fb; --st-dim:#9fb6c9; --st-mut:#6f879b;
  --st-grad:linear-gradient(135deg,#a2e7ee,#4196e0);
}
.st-page, .st-page * { box-sizing:border-box; }
.st-page {
  font-family:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--st-text); width:100%; max-width:1180px; margin:0 auto; padding:120px 22px 90px; min-height:60vh;
  /* the global body is display:flex — without min-width:0 this flex item keeps its
     grid's intrinsic (content) width and overflows narrow screens off the right. */
  min-width:0;
}

/* ---- hero ---- */
.st-hero { text-align:center; margin-bottom:26px; }
.st-title { font-family:'Cinzel',Georgia,serif; font-weight:700; letter-spacing:.5px; line-height:1.15;
  font-size:clamp(1.7rem,4.5vw,2.5rem); margin:0 0 10px;
  background:var(--st-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.st-sub { color:var(--st-dim); font-size:clamp(14px,2.2vw,16px); margin:0; }

/* ---- toolbar ---- */
.st-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin:22px 0 26px; }
.st-search { position:relative; flex:1; min-width:220px; max-width:520px; }
.st-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; fill:var(--st-mut); }
.st-input, .st-select {
  width:100%; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06);
  border:1px solid var(--st-line); color:var(--st-text); font-family:inherit; font-size:14.5px;
  transition:border-color .2s, box-shadow .2s;
}
.st-input { padding-left:40px; }
.st-input::placeholder { color:var(--st-mut); }
.st-input:focus, .st-select:focus { outline:none; border-color:var(--st-cyan); box-shadow:0 0 0 3px rgba(162,231,238,.15); }
.st-select { width:auto; appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239fb6c9' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.st-select option { background:var(--st-ink); color:var(--st-text); }

/* ---- sets grid ---- */
.st-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.st-tile {
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px; cursor:pointer; width:100%; min-width:0;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%),var(--st-ink);
  border:1px solid var(--st-line); transition:transform .2s, border-color .2s, box-shadow .2s; text-align:left; font-family:inherit; color:inherit;
}
.st-tile:hover { transform:translateY(-4px); border-color:var(--st-line2); box-shadow:0 16px 40px -20px rgba(162,231,238,.4); }
.st-tile-icon { width:46px; height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:rgba(162,231,238,.08); border:1px solid var(--st-line); }
.st-tile-icon img { width:26px; height:26px; filter:brightness(0) invert(.92); } /* monochrome set icons → light */
.st-tile-main { min-width:0; display:flex; flex-direction:column; }
.st-tile-name { display:block; font-family:'Cinzel',Georgia,serif; font-size:15px; font-weight:600; color:#fff; line-height:1.25; overflow-wrap:anywhere; }
.st-tile-meta { display:block; font-size:12px; color:var(--st-mut); margin-top:4px; }

/* ---- pagination / load more ---- */
.st-more { display:flex; justify-content:center; gap:10px; margin-top:28px; }
.st-btn { display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:11px; font-family:inherit;
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.st-btn--primary { background:var(--st-grad); color:#05101c; }
.st-btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(162,231,238,.6); }
.st-btn--ghost { background:var(--st-ink); color:var(--st-text); border-color:var(--st-line); }
.st-btn--ghost:hover { background:var(--st-ink2); border-color:var(--st-line2); }
.st-btn[disabled] { opacity:.4; cursor:default; transform:none; box-shadow:none; }

/* ---- set detail (cards in a set) ---- */
.st-detail[hidden] { display:none; }
.st-back { display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:var(--st-dim); font-family:inherit;
  font-size:14px; cursor:pointer; padding:0; margin-bottom:18px; transition:color .2s; }
.st-back:hover { color:var(--st-cyan); }
.st-detail-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.st-detail-icon { width:56px; height:56px; border-radius:13px; background:rgba(162,231,238,.08); border:1px solid var(--st-line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.st-detail-icon img { width:32px; height:32px; filter:brightness(0) invert(.92); }
.st-detail-title { font-family:'Cinzel',Georgia,serif; font-size:clamp(1.4rem,3.6vw,2rem); font-weight:700; color:#fff; margin:0; line-height:1.2; }
.st-detail-meta { color:var(--st-dim); font-size:13px; margin-top:3px; }

.st-cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.st-card { border-radius:12px; overflow:hidden; background:var(--st-ink); border:1px solid var(--st-line); min-width:0;
  transition:transform .2s, border-color .2s, box-shadow .2s; display:flex; flex-direction:column; }
.st-card:hover { transform:translateY(-4px); border-color:var(--st-line2); box-shadow:0 16px 44px -18px rgba(0,0,0,.7); }
.st-card-img { width:100%; aspect-ratio:63/88; object-fit:cover; background:var(--st-abyss); display:block; }
.st-card-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.st-card-name { font-size:13px; font-weight:600; color:var(--st-text); line-height:1.3; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.st-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.st-card-price { font-family:'Cinzel',Georgia,serif; font-size:15px; font-weight:700; color:#fff; }
.st-card-price.empty { font-family:'Sora',sans-serif; font-size:12px; font-weight:500; color:var(--st-mut); }
.st-buy { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; font-size:12px; font-weight:600;
  text-decoration:none; color:#05101c; background:var(--st-grad); transition:transform .15s, box-shadow .2s; white-space:nowrap; }
.st-buy:hover { transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(162,231,238,.6); }

/* ---- states ---- */
.st-empty { text-align:center; padding:50px 20px; color:var(--st-mut); grid-column:1/-1; }
.st-spinner { width:44px; height:44px; margin:50px auto; border:3px solid rgba(162,231,238,.18); border-top-color:var(--st-cyan); border-radius:50%; animation:st-spin .8s linear infinite; }
@keyframes st-spin { to { transform:rotate(360deg); } }

@media (max-width:560px) {
  .st-page { padding:100px 15px 80px; }
  .st-grid { grid-template-columns:1fr; }
  .st-cardgrid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px; }
  .st-card-foot { flex-direction:column; align-items:stretch; }
  .st-buy { justify-content:center; }
}