/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL SCRIPT CARD  —  sc-card system  (Layout G / V2)
   Loaded globally via layout.tsx. Use everywhere.
   ═══════════════════════════════════════════════════════════════ */

.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}

/* ── Base card — no background/border here, tier classes own those ── */
.sc-card{text-decoration:none;display:block;position:relative;border-radius:12px;overflow:hidden;cursor:pointer;
  transition:transform .18s,box-shadow .18s,border-color .18s;}
.sc-card:hover{transform:translateY(-3px);}
.sc-card:hover .sc-thumb img{transform:scale(1.04);}

/* ── Tier-tinted card backgrounds — exact same values as CARD_STYLES in user-profile.js ── */
.sc-card-free {background:rgb(14,12,10);  border:.5px solid rgba(200,129,58,.3);  box-shadow:rgba(200,129,58,.1)  0 0 0 1px,rgba(200,129,58,.08)  0 0 28px,rgba(232,168,106,.12) 0 1px 0 inset;}
.sc-card-basic{background:rgb(12,14,16);  border:.5px solid rgba(192,200,212,.35);box-shadow:rgba(192,200,212,.12) 0 0 0 1px,rgba(192,200,212,.1)  0 0 32px,rgba(232,237,244,.2)  0 1px 0 inset;}
.sc-card-pro  {background:rgb(15,12,0);   border:.5px solid rgba(212,160,23,.5); box-shadow:rgba(212,160,23,.2)   0 0 0 1px,rgba(212,160,23,.15)  0 0 50px,rgba(0,0,0,.7) 0 12px 60px,rgba(245,208,96,.3) 0 1px 0 inset;}
.sc-card-free:hover {border-color:rgba(200,129,58,.55);  box-shadow:rgba(200,129,58,.18)  0 0 0 1px,rgba(200,129,58,.14)  0 0 36px,rgba(232,168,106,.18) 0 1px 0 inset;}
.sc-card-basic:hover{border-color:rgba(192,200,212,.55); box-shadow:rgba(192,200,212,.22) 0 0 0 1px,rgba(192,200,212,.18) 0 0 40px,rgba(232,237,244,.3)  0 1px 0 inset;}
.sc-card-pro:hover  {border-color:rgba(212,160,23,.75);  box-shadow:rgba(212,160,23,.32)  0 0 0 1px,rgba(212,160,23,.25)  0 0 60px,rgba(0,0,0,.7) 0 14px 70px,rgba(245,208,96,.45) 0 1px 0 inset;}

/* ── Boosted override ── */
.sc-boosted{border-color:rgba(240,165,0,.45)!important;box-shadow:rgba(240,165,0,.15) 0 0 0 1px,rgba(240,165,0,.12) 0 0 32px!important;}

/* ── Thumbnail ── */
.sc-thumb{width:100%;height:155px;position:relative;overflow:hidden;background:#18181b;}
.sc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
/* Fade bottom of thumbnail into card background — JS sets --card-bg per tier */
.sc-thumb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px;
  background:linear-gradient(transparent,var(--sc-fade-bg,#111113));pointer-events:none;}
.sc-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.15;}

/* Key badge — top left of thumbnail */
.sc-key-badge{position:absolute;top:9px;left:9px;font-size:9px;font-family:'DM Mono',monospace;font-weight:600;
  padding:2px 8px;border-radius:4px;background:rgba(232,48,42,.9);color:#fff;z-index:3;letter-spacing:.02em;}
.sc-key-free{background:rgba(34,197,94,.9);}

/* Game name — bottom right of thumbnail, hard text-shadow for readability on any image */
.sc-thumb-game{position:absolute;bottom:9px;right:10px;z-index:3;
  font-size:10px;font-family:'DM Mono',monospace;font-weight:600;color:#f0ede8;letter-spacing:.03em;
  text-shadow:0 1px 3px rgba(0,0,0,1),0 0 10px rgba(0,0,0,1),
    1px 1px 0 rgba(0,0,0,1),-1px -1px 0 rgba(0,0,0,1),
    1px -1px 0 rgba(0,0,0,1),-1px 1px 0 rgba(0,0,0,1);}

/* ── Card body ── */
.sc-body{padding:0 13px 12px;}

/* Avatar row — punches up out of thumbnail bottom */
.sc-author-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-24px;margin-bottom:8px;}
.sc-av-wrap{display:inline-flex;flex-shrink:0;}
.sc-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;}
.sc-stats{display:flex;gap:8px;font-size:10px;font-family:'DM Mono',monospace;color:#5a5856;padding-bottom:3px;}
.sc-stats span{display:flex;align-items:center;gap:3px;}

/* Username */
.sc-un-wrap{display:inline-flex;align-items:center;margin-bottom:3px;}
.sc-author-name{font-size:11px;font-family:'DM Mono',monospace;color:#3a3836;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}

/* Title */
.sc-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:#f0ede8;
  margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}

/* Tags */
.sc-tags{display:flex;gap:4px;flex-wrap:wrap;}
.sc-tag{font-size:9px;font-family:'DM Mono',monospace;padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.06);color:#6b6966;border:0.5px solid rgba(255,255,255,.08);}