/* ---------- 外層 ---------- */
#sg-game-wrap{
    display:grid;
    gap:24px;
    /* 1～5 欄自動調整，最小寬 220px */
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    margin-top:32px;
  }
  
  /* ---------- 淡入關鍵影格 ---------- */
  @keyframes sgFade{
    0%   {opacity:0;transform:translateY(12px)}
    100% {opacity:1;transform:translateY(0)}
  }
  
  /* ---------- 卡片 ---------- */
  .sg-card{
    background:#322e34;
    color:#fff;
    border-radius:10px;
    padding:12px;
    text-align:center;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:transform .2s;
    /* 動畫起始狀態 */
    opacity:0;
    transform:translateY(12px);
    animation:sgFade .6s ease-out forwards;
  }
  
  /* 滑鼠 hover 再小幅上浮 */
  .sg-card:hover{transform:translateY(-4px)}
  
  /* ---------- 依序延遲 ---------- */
  .sg-card:nth-child(1){animation-delay:.05s}
  .sg-card:nth-child(2){animation-delay:.1s}
  .sg-card:nth-child(3){animation-delay:.15s}
  .sg-card:nth-child(4){animation-delay:.2s}
  .sg-card:nth-child(5){animation-delay:.25s}
  .sg-card:nth-child(6){animation-delay:.3s}
  /* 若一頁超過 6 張，可再往下加，一次 0.05s 差距即可 */
  
  /* 封面 */
  .sg-card .cover{
    width:100%;
    height:auto;
    border-radius:8px;
    object-fit:cover;
    margin-bottom:12px;
  }
  
  /* 按鈕 */
  .sg-card button{
    width:100%;
    padding:8px 0;
    margin:4px 0;
    border:0;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
  }
  .sg-card .play  {background:#14b8a6;color:#fff;}
  .sg-card .unlock{background:#3f3cbb;color:#fff;}
  .sg-card .unlock[disabled]{background:#555;cursor:not-allowed}
  
  /* 點數價格可再做小字體 */
  .sg-card .price{font-size:.9em;color:#8ef}