/* =========================================================
   games.css · v2/v3 新增板块样式
   ---------------------------------------------------------
   包含：
   01. 入场动画补充延迟（anim-6 ~ anim-9，衔接 style.css 的 anim-1 ~ anim-5）
   02. 各平台状态下拉面板（点击展开 / 收起）
   03. Steam 资料条（Edge Function 返回后展示）
   04. 游戏板块容器与标题
   05. 皮肤网格与皮肤卡片（掌瓦风格等大毛玻璃小格子）
   06. 空状态提示
   07. 响应式适配
   08. v3 管理面板扩展：解锁后追加的编辑模块（密钥 / 皮肤管理 / 保存）
   ========================================================= */

/* ========== 01. 入场动画补充延迟 ========== */
/* 与 style.css 的 .anim / .anim-1..5 同一套 rise 动画，错开延迟依次浮入 */
.anim-6 { animation-delay: 0.60s; }
.anim-7 { animation-delay: 0.72s; }
.anim-8 { animation-delay: 0.84s; }
.anim-9 { animation-delay: 0.96s; }

/* ========== 02. 各平台状态下拉面板 ========== */
/* 大面板不需要 hover 上浮，抵消 .glass-card:hover 的位移，避免内部点击抖动 */
.platform-panel:hover,
.game-board:hover {
  translate: 0 0;
}

.platform-panel {
  margin-top: 18px;
  padding: 0;          /* 内边距交给按钮与列表自行控制 */
  overflow: hidden;     /* 圆角裁切折叠内容 */
}

/* 顶部切换按钮：占据整行，左侧标题 + 右侧折叠箭头 */
.panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border: none;
  border-radius: 28px;
  background: none;
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.3s ease;
}

.panel-toggle:hover { background: var(--glass); }

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

/* 图标小方块：玻璃底 + 细描边，与全站图标容器统一 */
.panel-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.panel-name { letter-spacing: -0.3px; }

.panel-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  transition: color var(--dur-theme) ease;
}

/* 折叠箭头：展开时平滑旋转 180° */
.panel-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.5s var(--ease);
}

.platform-panel.open .panel-chevron { transform: rotate(180deg); }

/* 折叠动画：grid-template-rows 0fr → 1fr（比 max-height 更顺滑，内容高度自适应） */
.platform-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}

.platform-panel.open .platform-wrap { grid-template-rows: 1fr; }

.platform-list {
  overflow: hidden;          /* 配合 0fr 收起 */
  padding: 0 24px;
  transition: padding 0.55s var(--ease);
}

.platform-panel.open .platform-list { padding-bottom: 18px; }

/* —— 平台状态行：图标 + 名称 + 状态药丸 —— */
.platform-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--glass-border);
  /* 展开时逐行滑入（默认隐藏在左侧） */
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}

.platform-panel.open .platform-item {
  opacity: 1;
  transform: none;
}

/* 逐行错开延迟，营造瀑布式展开 */
.platform-panel.open .platform-item:nth-child(1) { transition-delay: 0.05s; }
.platform-panel.open .platform-item:nth-child(2) { transition-delay: 0.12s; }
.platform-panel.open .platform-item:nth-child(3) { transition-delay: 0.19s; }

/* 状态色令牌：与全站三态色一致 */
.platform-item[data-status="online"] { --pstat: var(--c-online); }
.platform-item[data-status="away"]   { --pstat: var(--c-away); }
.platform-item[data-status="busy"]   { --pstat: var(--c-busy); }

.pi-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.pi-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}

/* 状态药丸：颜色由 --pstat 派生（与状态徽章同款配方） */
.pi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pstat);
  background: color-mix(in srgb, var(--pstat) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pstat) 32%, transparent);
  transition:
    color 0.5s ease,
    background-color 0.5s ease,
    border-color 0.5s ease;
}

.pi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pstat);
  box-shadow: 0 0 8px var(--pstat);
}

/* ========== 03. Steam 资料条 ========== */
.steam-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 8%, var(--glass));
  border: 1px solid var(--glass-border);
}

.sp-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-border);
}

.sp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-name {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}

.sp-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background-color 0.4s ease;
}

/* ========== 04. 游戏板块容器 ========== */
.game-board {
  margin-top: 18px;
  padding: 22px 24px;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.board-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.board-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.board-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* 右侧计数小药丸 */
.board-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-2);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

/* ========== 05. 皮肤网格与卡片 ========== */
/* 掌瓦风格：等大格子自动换行铺满 */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.skin-card {
  border-radius: 20px;
  padding: 10px;
  /* 交错浮入：--i 由 JS 按索引赋值 */
  opacity: 0;
  animation: rise 0.6s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* 图片格：4:3 等比，圆角内裁切 */
.skin-img {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.skin-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

/* hover 时图片轻微放大 */
.skin-card:hover .skin-img img { transform: scale(1.06); }

/* 无图占位：枪皮 / 刀皮各自的柔和渐变底 + Emoji */
.skin-img.ph-gun {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--c-away) 10%, transparent)
  );
}

.skin-img.ph-knife {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-away) 16%, transparent),
    color-mix(in srgb, var(--c-busy) 10%, transparent)
  );
}

.ph-emoji {
  font-size: 30px;
  opacity: 0.9;
  user-select: none;
}

/* 图片加载失败时降级为 Emoji 占位（JS 给父级加 .broken） */
.skin-img.broken img { display: none; }

.skin-img.broken::after {
  content: '🔫';
  font-size: 30px;
}

.skin-img.broken[data-type="knife"]::after { content: '🔪'; }

/* —— 卡片底部信息行：名称 + 类型药丸 —— */
.skin-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 0 4px 2px;
}

.skin-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 类型药丸：枪皮（强调色）/ 刀皮（琥珀色） */
.skin-type {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}

.type-gun {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.type-knife {
  color: var(--c-away);
  background: color-mix(in srgb, var(--c-away) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-away) 30%, transparent);
}

/* ========== 06. 空状态提示 ========== */
.board-empty {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  padding: 26px 0 10px;
  transition: color var(--dur-theme) ease;
}

/* ========== 07. 响应式适配 ========== */
@media (max-width: 600px) {
  .platform-panel { margin-top: 16px; }
  .game-board      { padding: 18px; margin-top: 16px; }
  .skin-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
  }
  .panel-hint { display: none; }   /* 窄屏隐藏副标题，保持一行 */
  .sp-avatar  { width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .skin-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* =========================================================
   ========== 08. v3 管理面板扩展（解锁后追加模块） ==========
   以下样式只作用于 .admin-panel 内部新增的编辑控件，
   未解锁时面板整体收起（max-height: 0 + overflow: hidden），
   访客端外观与 v1 完全一致。
   ========================================================= */

/* —— 面板展开高度覆盖 ——
   原规则（style.css）：body.is-admin .admin-panel { max-height: 340px; }
   追加模块后内容更高，改为大高度上限 + 面板内部滚动；
   本文件在 style.css 之后加载，同优先级规则后者生效，原文件零改动。 */
body.is-admin .admin-panel {
  max-height: min(82vh, 1400px);
  overflow-y: auto;
  scrollbar-width: thin;                          /* Firefox 细滚动条 */
}

/* WebKit 细滚动条：与玻璃风格协调 */
body.is-admin .admin-panel::-webkit-scrollbar { width: 5px; }
body.is-admin .admin-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-3) 28%, transparent);
  border-radius: 999px;
}

/* —— 分区分隔线（复用 .admin-divider，仅加间距） —— */
.mng-divider { margin-top: 24px; }

/* —— 模块容器：纵向排布 —— */
.mng-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* —— 表单行 —— */
.mng-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* —— 提示文字（密钥配置状态等） —— */
.mng-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  transition: color 0.3s ease;
}

.mng-hint.ok   { color: var(--c-online); font-weight: 600; }
.mng-hint.warn { color: var(--c-away); }
.mng-hint.sub  { color: var(--text-3); }

/* —— 枪皮 / 刀皮分段选择器 —— */
.seg {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}

.seg button {
  padding: 10px 14px;
  border: none;
  background: var(--glass);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.seg button.active {
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, var(--glass));
}

/* —— 小按钮（选择图片 / 添加 / 取消编辑） —— */
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-1);
  font-size: 12.5px;
  cursor: pointer;
  transition:
    translate 0.25s var(--ease),
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.mini-btn:hover { translate: 0 -1px; }

/* 编辑进行中的「添加」按钮强调 */
.mini-btn.mng-add { color: var(--accent); }

/* —— 图片预览小图与文件名 —— */
.mng-preview {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--glass-border);
}

.mng-fname {
  min-width: 0;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-theme) ease;
}

/* —— 表单操作行 —— */
.mng-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* —— 草稿网格：掌瓦风格等大毛玻璃小格子（紧凑版） —— */
.mng-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.mng-card {
  position: relative;
  padding: 8px;
  border-radius: 16px;
}

/* hover 上浮（覆盖 .glass-card:hover 的 -4px，面板内更克制） */
.mng-card:hover { translate: 0 -3px; }

/* 正在编辑的卡片：强调色描边 */
.mng-card.editing {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow-sm);
}

/* 方形缩略格 */
.mng-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

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

/* 无图 Emoji 占位（居中） */
.mng-thumb span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 24px;
  opacity: 0.85;
  user-select: none;
}

.mng-cname {
  display: block;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 类型药丸：字号压缩版（配色复用 .type-gun / .type-knife） */
.mng-badge {
  display: inline-block;
  margin: 4px 2px 0;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

/* —— 卡片右上角操作小圆钮（编辑 / 删除）：hover 浮现 —— */
.mng-e,
.mng-x {
  position: absolute;
  top: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--text-1) 6%, var(--glass));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, translate 0.25s var(--ease);
}

.mng-e { right: 37px; }
.mng-x { right: 11px; color: var(--c-busy); }

.mng-card:hover .mng-e,
.mng-card:hover .mng-x,
.mng-card.editing .mng-e,
.mng-card.editing .mng-x { opacity: 1; }

.mng-e:hover,
.mng-x:hover { translate: 0 -1px; }

/* 触屏设备无 hover：操作钮常显 */
@media (hover: none) {
  .mng-e, .mng-x { opacity: 0.9; }
}

/* —— 草稿空态 —— */
.mng-empty {
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
  padding: 8px 0 4px;
  transition: color var(--dur-theme) ease;
}

/* —— 统一保存行 —— */
.mng-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.mng-dirty {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

#mngSaveBtn { flex: 1; }

/* 有未保存更改时：保存按钮呼吸光晕提示 */
#mngSaveBtn.dirty { animation: mng-pulse 1.8s ease-in-out infinite; }

@keyframes mng-pulse {
  0%, 100% { box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent); }
  50%      { box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* —— v3 管理面板响应式 —— */
@media (max-width: 600px) {
  /* 名称输入独占一行，分段选择器随之下移 */
  .mng-row .msg-input { min-width: 100%; }
  .mng-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
}

@media (max-width: 380px) {
  .mng-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* =========================================================
   ========== 09. v4 面板补充（站点头像 + 平台状态） ==========
   ========================================================= */

/* —— 站点头像：图片模式（.has-img 时隐藏文字，图片填满圆框） —— */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.avatar.has-img .avatar-text { display: none; }

/* —— 面板内头像预览（复用主卡 .avatar 渐变与光环，尺寸缩小） —— */
.avatar.avatar-preview { width: 46px; height: 46px; }
.avatar.avatar-preview .avatar-text { font-size: 20px; }

/* —— 各平台在线状态编辑行 —— */
.mng-plat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mng-plat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur-theme) ease;
}

.mng-plat-seg { flex-shrink: 0; }

/* 分段按钮内的小状态点（绿 / 橙 / 红） */
.mng-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.mng-dot.online { background: var(--c-online); }
.mng-dot.away   { background: var(--c-away); }
.mng-dot.busy   { background: var(--c-busy); }

/* 窄屏：平台名称与分段按钮不挤压 */
@media (max-width: 600px) {
  .mng-plat-row { justify-content: flex-start; }
  .mng-plat-seg { margin-left: auto; }
  .mng-auto-badge { margin-left: auto; }
}

/* =========================================================
   ========== 10. v5 补充（Steam 状态由 API 实时获取） ==========
   ========================================================= */

/* —— Steam 行「离线」展示态：灰色药丸（仅前端展示，不入库） —— */
.platform-item[data-status="offline"] { --pstat: var(--text-3); }

/* —— 管理面板 Steam 行：只读自动标签（虚线描边示意「不可手动修改」） —— */
.mng-auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--glass);
  border: 1px dashed var(--glass-border);
  cursor: default;
  transition:
    color var(--dur-theme) ease,
    background-color var(--dur-theme) ease,
    border-color var(--dur-theme) ease;
}