/* 页面专属样式。共用骨架（令牌/背景/返回/容器/Hero/药丸/工具栏/按钮/卡片墙/空态/页脚）
   已提炼到 ../../../css/shell.css，本文件只保留跑分与试玩相关部分。 */

.upload-meta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--dim);
}

.upload-meta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.55);
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}

.sort-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sort-group .ctrl-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.chip-btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: 0.15s ease;
}

.chip-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.chip-btn.chip-dir {
  min-width: 68px;
  color: var(--magenta);
  border-color: rgba(255, 61, 158, 0.4);
}

.chip-btn.chip-dir:hover {
  border-color: var(--magenta);
  color: var(--magenta);
}

/* 排序维度下拉：原生箭头在深色底上几乎看不见，自绘一个 */
.sort-select {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 26px 6px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sort-select:hover,
.sort-select:focus {
  border-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}

/* 下拉展开的选项列表跟随系统配色，必须显式给深色 */
.sort-select option {
  background: #0c1222;
  color: var(--text);
}

/* ---------- 专注试玩（视图切换组件在 ../../../css/shell.css） ---------- */
.focus-btn {
  padding: 8px 18px;
  gap: 8px;
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35), 0 0 20px rgba(0, 240, 255, 0.28);
}

.focus-btn:hover {
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.6), 0 0 28px rgba(0, 240, 255, 0.45);
  transform: translateY(-1px);
}

.focus-btn .ic {
  width: 14px;
  height: 14px;
}

/* ---------- 列表模式 ---------- */
.cards.list-mode {
  grid-template-columns: 1fr;
  gap: 10px;
}

.cards.list-mode .card {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  align-items: stretch;
}

/* 预览里的 demo 本身是响应式窄布局，缩略图里会挤成一列。
   列表模式下把它按「宽屏」渲染，再整体缩到缩略图尺寸，读起来才是正常画面。 */
.cards.list-mode .card-preview iframe {
  width: 400px;
  height: 620px;
  transform: scale(0.52);
  transform-origin: top left;
}

.cards.list-mode .card:hover {
  transform: none;
}

.cards.list-mode .card-preview {
  aspect-ratio: auto;
  height: 320px;
  border-bottom: 0;
  border-right: 1px solid var(--border-soft);
}

.cards.list-mode .card-body {
  padding: 12px 16px 14px;
  gap: 8px;
}

.cards.list-mode .card-head {
  align-items: center;
}

.cards.list-mode .card-body h3 {
  font-size: 14px;
}

.cards.list-mode .card-body p {
  font-size: 12.5px;
  line-height: 1.65;
  /* 列表模式只留两行，避免行高不齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cards.list-mode .bench {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 11px;
  flex-wrap: wrap;
}

.cards.list-mode .bench-top {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.cards.list-mode .bench-axes {
  flex: 1 1 320px;
  min-width: 260px;
}

/* 列表模式正文够宽，属性条排一行铺满整条 */
.cards.list-mode .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 试玩页内切换产物 ---------- */
.player-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.player-switch .nav-btn {
  padding: 8px 11px;
  line-height: 1;
}

.player-switch .nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.player-select {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  background: rgba(7, 11, 20, 0.95);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  text-overflow: ellipsis;
  /* 在切换控件里吃掉剩余宽度，避免和相邻按钮互相挤换行。
     min-width 必须显式归零：select 默认 min-width:auto = 内容宽度，
     不归零就压不下去，整行会溢出。 */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
}

.player-select:hover,
.player-select:focus {
  border-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}

/* compact download control — not a full ghost-btn pill */
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.06);
  color: var(--cyan);
  text-decoration: none;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.download-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-btn:hover {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.14);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.18);
  transform: translateY(-1px);
}

.download-btn:active {
  transform: translateY(0);
}

.player-actions .download-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-soft);
}

.player-actions .download-btn:hover {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
}

/* Cards grid */

.card-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #10182b, #0a101c);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}

/* mute live preview so it reads as a thumbnail, not a CTA */
.card-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.18) 0%, rgba(7, 11, 20, 0.32) 55%, rgba(7, 11, 20, 0.42) 100%),
    radial-gradient(ellipse at center, transparent 35%, rgba(7, 11, 20, 0.28) 100%);
}

.card-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
  opacity: 0.78;
  filter: saturate(0.7) brightness(0.88) contrast(0.98);
  overflow: hidden;
  scrollbar-width: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.card:hover .card-preview iframe {
  opacity: 0.9;
  filter: saturate(0.8) brightness(0.95);
}

.card-preview iframe::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.card-preview .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.85);
  border: 1px solid var(--border);
  color: var(--cyan);
  pointer-events: none;
}

.card-preview .preview-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  background: rgba(7, 11, 20, 0.78);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 999px;
  padding: 3px 8px;
  pointer-events: none;
  opacity: 0.85;
}

.card-preview .badge.quant-q4 {
  color: var(--warn);
  border-color: rgba(255, 201, 77, 0.45);
}

.card-preview .badge.quant-q8 {
  color: var(--green);
  border-color: rgba(61, 220, 132, 0.45);
}

.card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* 标题块必须吃掉剩余宽度：flex 子项默认按内容宽收缩，
   不给它 flex:1 就会连同底下的属性区一起被压窄 */
.card-id {
  flex: 1 1 auto;
  min-width: 0;
}

.card-body h3 {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.35;
  word-break: break-word;
}

.card-body p {
  color: var(--dim);
  font-size: 13px;
  flex: 1;
}

/* 标签行：强制单行，保证所有卡片高度一致、视觉对齐 */
.card-body .meta-row {
  margin-top: 8px;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}

.card-body .meta-row .pill {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 11px;
}

/* ---------- SNAKE SCORE 评分块 ---------- */
.bench {
  border: 1px solid var(--border-soft);
  background: rgba(10, 15, 28, 0.75);
  border-radius: 12px;
  padding: 9px 11px 10px;
}

.bench-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bench-tag {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--dim);
}

.bench-num {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.bench-grade {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--cyan);
}

.bench-grade[data-g="S"] { color: #3ddc84; }
.bench-grade[data-g="A"] { color: #7ef0b4; }
.bench-grade[data-g="B"] { color: #ffc94d; }
.bench-grade[data-g="C"] { color: #ff9f43; }
.bench-grade[data-g="D"] { color: #ff5d73; }
.bench-grade[data-g="E"] { color: #ff5d73; }

.bench-axes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.ba {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ba-l {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.ba-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.ba-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00f0ff, #3a7bd5);
}

.ba-v {
  font-family: var(--display);
  font-size: 11px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* 属性区：整宽「规格条」。
   原来是四个各自居中的小方块，放在 .card-head 里被标题块一起压窄，
   只占卡片左半边、右边空一大块（列表模式尤其夸张）。
   改成四格等分 + 1px 发丝分隔线（分隔线颜色靠格子之间露出的底色实现），
   整条永远铺满卡片宽度，2 列（卡片墙）/ 4 列（列表）都填得满。 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 9px;
  background: rgba(0, 240, 255, 0.13);
  overflow: hidden;
}

.stat {
  background: rgba(10, 15, 28, 0.92);
  padding: 6px 10px 7px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* 标签与值都在格子内居中：四格等宽，居中后长短不一的值（如
     27B / IQ2-mix / Unsloth Desktop / 37.6 tok/s）视觉重心一致 */
  align-items: center;
  text-align: center;
  gap: 2px;
}

.stat span {
  display: block;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: #7e9db0;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Share Tech Mono has no real bold — avoid synthetic bold (blurry) */
.stat b {
  display: block;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: #e6f2f8;
  letter-spacing: 0.02em;
  text-align: center;
  overflow-wrap: anywhere;
  text-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* 「试玩」在两种模式里都待在右上角，DOM 位置只有一处（.card-head 内、下载按钮之后），
   落点由 CSS 决定：
   - 卡片模式：脱离常规流，浮到预览图右上角（与左上角的量化徽章对称）
   - 列表模式：回到常规流，排在下载按钮右侧 —— 下载按钮因此自动左移让位 */
.cards .card {
  /* 绝对定位的参照物。shell.css 的 .card 没设 position，
     这里补上；列表模式会覆盖 .card 的 display 为 grid，但 position 不受影响。 */
  position: relative;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.card-actions a,
.card-actions button {
  justify-content: center;
}

.card-actions .primary-btn {
  min-width: 0;
  padding: 8px 20px;
}

/* 卡片模式：浮在预览图右上角。z-index 要高过 .card-preview::after 的压暗层(1) */
.cards:not(.list-mode) .card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

/* 列表模式：回到常规流，紧跟下载按钮（排在它右边） */
.cards.list-mode .card-actions {
  position: static;
  margin-left: 2px;
}

.cards.list-mode .card-actions .primary-btn {
  padding: 7px 16px;
}

/* Focus / player — near-fullscreen overlay */
.player-shell {
  display: none;
}

.player-shell.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #050810;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(7, 11, 20, 0.96);
  flex: 0 0 auto;
  z-index: 2;
}

.player-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: right;
  margin-left: auto;
}

.player-title .name {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.player-title .path {
  color: var(--dim);
  font-size: 12px;
  word-break: break-all;
}

.player-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* emphasized exit control */
#player-back.primary-btn {
  padding: 9px 16px;
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35), 0 0 18px rgba(0, 240, 255, 0.25);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

#player-back.primary-btn:hover {
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.55), 0 0 26px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.player-frame-wrap {
  position: relative;
  background: #050810;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
}

.player-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  overflow: hidden;
  scrollbar-width: none;
  background: #050810;
}

.player-frame-wrap iframe::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.player-note {
  padding: 8px 14px;
  color: var(--dim);
  font-size: 12px;
  border-top: 1px solid var(--border-soft);
  background: rgba(7, 11, 20, 0.96);
  flex: 0 0 auto;
  text-align: center;
  letter-spacing: 0.04em;
}

/* .wrap / .hero / .back-home 的窄屏规则已在 shell.css，这里只管试玩区 */
@media (max-width: 720px) {
  .player-title .path { display: none; }
  .player-note { font-size: 11px; }
  /* 窄屏属性条统一两列：每格仍有 ~160px，12px 等宽字放得下
     「Unsloth Desktop」；四列会压到 80px 把长值断成两行，单列又太费高度 */
  .stat-grid,
  .cards.list-mode .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 列表模式在窄屏不能保持「216px 预览 + 正文」左右分栏：
     390px 屏上正文只剩 ~126px，属性网格被压到 55px 且卡片横向溢出。
     改为上下堆叠，正文拿回整行宽度。 */
  .cards.list-mode .card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards.list-mode .card-preview {
    height: 200px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  /* 缩略图改成横向渲染再整体缩放，铺满整行宽度；
     竖向渲染会被裁掉下半屏（560×0.46=258 > 200 的框高） */
  .cards.list-mode .card-preview iframe {
    width: 640px;
    height: 380px;
    transform: scale(0.52);
  }

  .cards.list-mode .card-body {
    padding: 12px 14px 14px;
  }

  /* ---- 试玩区移动端适配 ----
     窄屏把工具栏拆成三行，各控件都有充足宽度、不再互相挤压：
     行1 = 返回 / 刷新 / 下载      行2 = 切换产物的 ◀ 下拉 ▶      行3 = 标题 */
  .player-bar {
    padding: 8px 10px;
    gap: 8px;
  }

  .player-actions {
    order: 1;
    width: 100%;
    /* 允许换行：窄屏下「返回+切换+刷新+下载」四项必然放不下，
       靠 flex-shrink 压扁反而更难用，不如有序换行 */
    flex-wrap: wrap;
    gap: 6px;
  }

  /* 切换控件独占一行：下拉框吃掉整行宽度，◀ ▶ 贴着两侧 */
  .player-switch {
    order: 2;
    width: 100%;
    flex: 0 0 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .player-title {
    order: 3;
    width: 100%;
    margin-left: 0;
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  .player-title .name {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* select 的 min-width 默认是 auto（= 内容宽度），
     不归零就压不下去、整行溢出。 */
  .player-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    font-size: 12px;
    padding: 6px 8px;
  }

  .player-switch .player-select { min-width: 0; }

  /* 「返回 / 刷新」按钮保持自身宽度，靠自然换行排布 */
  .player-actions > .primary-btn,
  .player-actions > .ghost-btn {
    flex: 0 0 auto;
  }

  .player-actions .primary-btn,
  .player-actions .ghost-btn {
    padding: 7px 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  .player-switch .nav-btn {
    padding: 7px 10px;
    flex: 0 0 auto;
  }

  /* 下载图标按钮在窄屏可点区域太小 */
  .player-actions .download-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}

/* 超窄屏（横屏手机等）：隐藏路径行，提示条更紧凑 */
@media (max-width: 480px) {
  .player-bar { padding: 6px 8px; gap: 6px; }
  .player-actions .primary-btn { padding: 6px 9px; font-size: 11.5px; }
  .player-title .name { font-size: 12px; }
  .player-note { font-size: 10.5px; padding: 6px 8px; }
}

/* ---- 提示条 ---- */
.player-note .hint-pc {
  display: inline;
}

/* 触屏没有键盘焦点概念，这半句在移动端是多余的 */
@media (max-width: 720px) {
  .player-note .hint-pc { display: none; }
  .player-note .hint-extra { display: inline; }
}

.player-note kbd {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(7, 11, 20, 0.9);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
}