/* =============== 
   Sponsor Center - Apple-ish Style
   =============== */

:root{
  --sc-bg: #f5f6f8;
  --sc-card: rgba(255,255,255,.85);
  --sc-card-solid: #ffffff;
  --sc-text: #111827;
  --sc-subtext: #6b7280;
  --sc-border: rgba(17,24,39,.08);
  --sc-border-strong: rgba(17,24,39,.12);
  --sc-shadow: 0 10px 30px rgba(0,0,0,.06);
  --sc-shadow-soft: 0 6px 20px rgba(0,0,0,.05);
  --sc-radius: 16px;
  --sc-radius-sm: 12px;
  --sc-accent: #0a84ff;        /* iOS blue */
  --sc-accent-weak: rgba(10,132,255,.12);
  --sc-success: #34c759;       /* iOS green */
  --sc-danger: #ff3b30;        /* iOS red */
  --sc-warn: #ff9f0a;          /* iOS orange */
}

.sponsor-center{
  max-width: 980px;
  margin: 28px auto;
  padding: 22px;
  color: var(--sc-text);
  background: linear-gradient(180deg, #ffffff 0%, var(--sc-bg) 120%);
  border: 1px solid var(--sc-border);
  border-radius: calc(var(--sc-radius) + 4px);
  box-shadow: var(--sc-shadow);
  backdrop-filter: blur(10px);
}

.sponsor-center__title{
  margin: 0 0 16px;
  font-size: 22px;
  letter-spacing: .2px;
}

/* Tabs */
.sponsor-tabs{
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 6px;
  margin: 10px 0 18px;
  background: rgba(17,24,39,.04);
  border: 1px solid var(--sc-border);
  border-radius: 999px;
}

.sponsor-tabs li{ margin: 0; padding: 0; }

.sponsor-tabs a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  color: var(--sc-subtext);
  transition: transform .08s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
}

.sponsor-tabs a:hover{
  background: rgba(255,255,255,.8);
  color: var(--sc-text);
}

.sponsor-tabs a.is-active{
  background: var(--sc-card-solid);
  color: var(--sc-text);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Content wrapper */
.sponsor-tab-content{
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 18px 18px 16px;
  box-shadow: var(--sc-shadow-soft);
}

.sponsor-tab-content h2{
  margin: 0 0 10px;
  font-size: 18px;
}

.sponsor-tab-content h3{
  margin: 18px 0 10px;
  font-size: 15px;
  color: var(--sc-text);
}

/* Notice */
.sponsor-notice{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,.7);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.sponsor-notice--success{
  border-color: rgba(52,199,89,.22);
  background: rgba(52,199,89,.10);
}

.sponsor-notice--error{
  border-color: rgba(255,59,48,.22);
  background: rgba(255,59,48,.10);
}

/* Sponsor status "card row" look */
.sponsor-status-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}

.sponsor-status-card{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 14px;
}

.sponsor-status-card .k{
  font-size: 12px;
  color: var(--sc-subtext);
  margin-bottom: 6px;
}
.sponsor-status-card .v{
  font-size: 14px;
  font-weight: 650;
}

/* Redeem info */
.sponsor-code-info{
  margin: 12px 0 12px;
  padding: 12px 14px;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-border);
  background: rgba(10,132,255,.08);
}

.sponsor-code-info p{ margin: 0 0 8px; font-weight: 650; }
.sponsor-code-info ul{ margin: 0; padding-left: 18px; color: var(--sc-subtext); }

/* Inputs + Buttons */
.sponsor-input{
  width: 320px;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--sc-border-strong);
  background: rgba(255,255,255,.9);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.sponsor-input:focus{
  border-color: rgba(10,132,255,.55);
  box-shadow: 0 0 0 4px var(--sc-accent-weak);
}

.sponsor-btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(10,132,255,.28);
  background: rgba(10,132,255,.12);
  color: var(--sc-text);
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
}

.sponsor-btn:hover{
  background: rgba(10,132,255,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
}

.sponsor-btn:active{
  transform: translateY(1px);
}

.sponsor-redeem-form{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Profile form layout */
.sponsor-profile-form .sponsor-field{
  display: grid;
  grid-template-columns: 84px minmax(0, 360px) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17,24,39,.06);
}

.sponsor-profile-form .sponsor-field:last-child{
  border-bottom: none;
}

.sponsor-profile-form label{
  color: var(--sc-subtext);
  font-size: 13px;
}

.sponsor-static{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  color: var(--sc-text);
}

/* Field notice */
.sponsor-field-notice{
  font-size: 13px;
  color: var(--sc-subtext);
  min-height: 18px;
}

.sponsor-field-notice.is-success{ color: var(--sc-success); }
.sponsor-field-notice.is-error{ color: var(--sc-danger); }
.sponsor-field-notice.is-warn{ color: var(--sc-warn); }

/* Table (History) */
.sponsor-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,.85);
}

.sponsor-table th,
.sponsor-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(17,24,39,.06);
  font-size: 13px;
}

.sponsor-table thead th{
  background: rgba(17,24,39,.03);
  color: var(--sc-subtext);
  font-weight: 650;
}

.sponsor-table tbody tr:hover{
  background: rgba(10,132,255,.06);
}

.sponsor-table tbody tr:last-child td{
  border-bottom: none;
}

/* Pagination */
.sponsor-pagination{
  margin-top: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sponsor-pagination a,
.sponsor-pagination strong,
.sponsor-pagination .page-nav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.75);
  text-decoration: none;
  color: var(--sc-text);
  font-size: 13px;
}

.sponsor-pagination a:hover{
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
  background: rgba(255,255,255,.92);
}

.sponsor-pagination strong{
  border-color: rgba(10,132,255,.35);
  background: rgba(10,132,255,.12);
}

.sponsor-pagination .dots{
  color: var(--sc-subtext);
  padding: 0 4px;
}

.sponsor-pagination .page-nav.is-disabled{
  opacity: .45;
  cursor: not-allowed;
}

.sponsor-logout{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
}

.sponsor-btn--danger{
 background: #fff;
 border: 1px solid #e55;
 color: #e55;
 width: 80%;
 text-align: center;
}
.sponsor-btn--danger:hover{
  opacity: .9;
  color:#e55;
}

/* ===== User Center: Favorites / Played list ===== */
.ruc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ruc-item{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,.85);
  border-radius: var(--sc-radius);
  overflow: hidden;
  align-items: center;
  padding: 0px 8px;
  min-height: 120px;          /* ✅ 固定“卡片高度基准” */
}

.ruc-cover{
  width: 120px;
  height: 120px;              /* ✅ 固定封面容器高度 */
  overflow: hidden;
  background: rgba(17,24,39,.04);
}

.ruc-cover a{ display:block; width:100%; height:100%; }
.ruc-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* ✅ 原图 URL + CSS 裁切 */
  display: block;
}

.ruc-coverph{ width:100%; height:100%; background: rgba(17,24,39,.06); }

.ruc-body{
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ruc-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* ✅ 标题两行固定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  max-height: calc(1.35em * 2);
  text-decoration: none;
  color: var(--sc-text);
  font-size: 14px;
  font-weight: 650;
}

.ruc-meta{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ruc-rating{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.ruc-action{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;           /* ✅ 操作区固定高度，整条更统一 */
}

.ruc-btn{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.03);
  cursor: pointer;
}

.ruc-btn.on {
    border-color: rgb(0,0,0);
    background: rgb(0,0,0,.50);
}

.ruc-playedtxt{
  font-size: 13px;
  color: var(--sc-subtext);
}

.ruc-norating{ color: var(--sc-subtext); font-size: 13px; }

/* =========================
   Sponsor Center - Mobile
   ========================= */
@media (max-width: 720px){

  /* 外层容器更贴合手机 */
  .sponsor-center{
    margin: 12px auto;
    padding: 14px;
    border-radius: 18px;
  }

  .sponsor-center__title{
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* Tabs：横向滚动，避免换行挤压 */
  .sponsor-tabs{
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px;
    margin: 8px 0 14px;
    scrollbar-width: none;          /* Firefox */
  }
  .sponsor-tabs::-webkit-scrollbar{ display:none; }

  .sponsor-tabs a{
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 5px;
    font-size: 13px;
  }

  /* 内容区域 */
  .sponsor-tab-content{
    padding: 14px;
    border-radius: 16px;
  }

  .sponsor-tab-content h2{
    font-size: 16px;
    margin-bottom: 10px;
  }

  .sponsor-tab-content h3{
    font-size: 14px;
    margin: 14px 0 10px;
  }

  /* Notice 更紧凑 */
  .sponsor-notice{
    padding: 10px 12px;
    border-radius: 14px;
    margin: 10px 0 12px;
  }

  /* Sponsor 状态卡：3列 → 1列 */
  .sponsor-status-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* 兑换区域：输入框占满，按钮跟随 */
  .sponsor-redeem-form{
    gap: 10px;
  }
  .sponsor-input{
    width: 100%;
  }
  .sponsor-btn{
    width: auto;
  }

  /* ===== 表格（历史记录）手机优化：横向可滑动 ===== */
  .sponsor-table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sponsor-table th,
  .sponsor-table td{
    white-space: nowrap;
    font-size: 12px;
    padding: 10px 10px;
  }

  /* ===== Profile 表单：三列 → 两列（label + input），按钮/提示占满一行 ===== */
  .sponsor-profile-form .sponsor-field{
    grid-template-columns: 72px 1fr;
    gap: 10px;
    padding: 10px 0;
  }
  .sponsor-profile-form .sponsor-field .sponsor-btn,
  .sponsor-profile-form .sponsor-field .sponsor-field-notice{
    grid-column: 2 / -1;
  }
  .sponsor-static{
    width: 100%;
  }

  /* ===== Pagination：更紧凑、可换行 ===== */
  .sponsor-pagination{
    gap: 6px;
  }
  .sponsor-pagination a,
  .sponsor-pagination strong,
  .sponsor-pagination .page-nav{
    min-width: 34px;
    height: 32px;
    padding: 0 9px;
    font-size: 12px;
  }

  /* 退出按钮：全宽更舒服 */
  .sponsor-logout{
    margin-top: 14px;
    padding-top: 12px;
  }
  .sponsor-btn--danger{
    width: 100%;
  }

  /* ==================================
     收藏/已玩列表（ruc-*) 手机结构
     - 封面顶部 + 固定高度
     - 标题两行
     - 底部评分+按钮固定高度
     ================================== */
  .ruc-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ruc-item{
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }

  .ruc-cover{
    width: 100%;
    height: 180px;                 /* ✅ 统一封面高度 */
    border-bottom: 1px solid var(--sc-border);
    background: rgba(17,24,39,.04);
  }

  .ruc-cover a{ display:block; width:100%; height:100%; }
  .ruc-cover img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  .ruc-coverph{
    width:100%;
    height:100%;
    background: rgba(17,24,39,.06);
  }

  .ruc-body{
    padding: 12px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ruc-title{
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;         /* ✅ 标题固定两行 */
    overflow: hidden;
    max-height: calc(1.35em * 2);
  }

  .ruc-meta{
    margin-top: 10px;
    gap: 10px;
  }

  .ruc-rating{
    min-height: 22px;
  }

  .ruc-action{
    justify-content: flex-start;   /* 手机左侧更顺手 */
    min-height: 36px;              /* ✅ 操作区高度固定 */
  }

  .ruc-btn{
    padding: 10px 14px;
    border-radius: 14px;
  }

  .ruc-item{
    box-shadow: 0 8px 18px rgba(0,0,0,.04);
  }
}