/* ============================================================================
   侦探推理 · 游戏专属样式
   选择器统一以 .g-detective 前缀限定，避免影响其他游戏
   ========================================================================== */

.g-detective {
  gap: 10px;
  padding: 12px 10px calc(14px + var(--safe-b));
}

.g-detective .stats .stat-v { font-size: 16px; }

/* ------------------------------ 选关页 ------------------------------ */

.g-detective .dt-continue {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  text-align: left;
  min-height: 52px;
}
.g-detective .dt-continue:active { transform: scale(0.98); }
.g-detective .dt-continue-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  flex: none;
}
.g-detective .dt-continue-n {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-detective .dt-continue-t { font-size: 11px; color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }
.g-detective .dt-continue-a { font-size: 19px; line-height: 1; color: var(--faint); flex: none; }

.g-detective .dt-sec { display: flex; flex-direction: column; gap: 7px; }
.g-detective .dt-sec-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.g-detective .dt-sec-t { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--dim); }
.g-detective .dt-sec-c { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.g-detective .dt-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-detective .dt-case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 82px;
  padding: 9px 5px 8px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  transition: transform 0.1s ease, border-color 0.16s ease;
  touch-action: manipulation;
}
.g-detective .dt-case:active { transform: scale(0.96); }
.g-detective .dt-case.done {
  border-color: rgba(62, 207, 142, 0.34);
  background: linear-gradient(180deg, rgba(62, 207, 142, 0.13), rgba(62, 207, 142, 0.035));
}
.g-detective .dt-case-no { font-size: 13.5px; font-weight: 800; color: var(--accent); }
.g-detective .dt-case.done .dt-case-no { color: var(--ok); }
.g-detective .dt-case-name { font-size: 11.5px; font-weight: 600; color: var(--text); }
.g-detective .dt-case-meta { font-size: 9.5px; color: var(--faint); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.g-detective .dt-case.done .dt-case-meta { color: rgba(62, 207, 142, 0.85); }
.g-detective .dt-case-check { position: absolute; top: 5px; right: 7px; font-size: 11px; font-weight: 800; color: var(--ok); }
.g-detective .dt-foot-hint { text-align: center; padding: 2px 4px 0; }

/* ------------------------------ 对局页 ------------------------------ */

.g-detective .dt-tabs .seg { width: 100%; }
.g-detective .dt-table-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.g-detective .dt-table {
  --dt-label: 50px;
  --dt-head: 32px;
  --dt-cell: 54px;
  --dt-gap: 4px;
  display: grid;
  gap: var(--dt-gap);
  justify-content: center;
  margin: auto;
}
.g-detective .dt-corner { width: var(--dt-label); height: var(--dt-head); }
.g-detective .dt-colhead,
.g-detective .dt-rowhead {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
}
.g-detective .dt-rowhead {
  width: var(--dt-label);
  height: var(--dt-cell);
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.g-detective .dt-colhead { width: var(--dt-cell); height: var(--dt-head); }

.g-detective .dt-cell {
  position: relative;
  width: var(--dt-cell);
  height: var(--dt-cell);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  touch-action: manipulation;
}
.g-detective .dt-cell:active { transform: scale(0.94); }
.g-detective .dt-cell.cross::after {
  content: "✗";
  font-size: calc(var(--dt-cell) * 0.46);
  font-weight: 700;
  color: rgba(154, 164, 184, 0.6);
  line-height: 1;
}
.g-detective .dt-cell.check {
  background: linear-gradient(180deg, #48d89b, #28a86f);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(62, 207, 142, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.g-detective .dt-cell.check::after {
  content: "✓";
  font-size: calc(var(--dt-cell) * 0.52);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.g-detective .dt-cell.wrong {
  border-color: #ff5c6c;
  box-shadow: 0 0 0 2px rgba(255, 92, 108, 0.55), 0 0 16px rgba(255, 92, 108, 0.35);
}
.g-detective .dt-cell.check.wrong {
  background: linear-gradient(180deg, #ff7180, #d93448);
}
.g-detective .dt-table.won .dt-cell.check {
  box-shadow: 0 6px 16px -8px rgba(62, 207, 142, 0.8), 0 0 18px rgba(62, 207, 142, 0.35);
}

.g-detective .dt-ctrl { gap: 8px; align-items: stretch; }
.g-detective .dt-ctrl .btn { flex: 1; }
.g-detective .dt-auto-btn.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

/* 线索区（可滚动） */
.g-detective .dt-clues {
  flex: 1;
  min-height: 76px;
  max-height: 40vh;
  display: flex;
  flex-direction: column;
  padding: 9px 12px 7px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.g-detective .dt-clues-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--dim);
  padding-bottom: 5px;
  flex: none;
}
.g-detective .dt-clues-c { font-size: 10px; color: var(--faint); font-weight: 500; }
.g-detective .dt-clue-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.g-detective .dt-clue {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--dim);
}
.g-detective .dt-clue-i {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-variant-numeric: tabular-nums;
}
.g-detective .dt-clue-t { flex: 1; min-width: 0; }

/* 完成后收起统计与操作行 */
.g-detective.won-view .stats,
.g-detective.won-view .dt-ctrl { display: none; }

/* ------------------------------ 结算弹窗 ------------------------------ */

.overlay.dt-result-overlay {
  align-items: flex-end;
  padding: 14px 16px calc(18px + var(--safe-b));
  background: rgba(4, 6, 11, 0.36);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.overlay.dt-result-overlay .dialog { padding: 15px 16px; border-radius: 18px; }
.overlay.dt-result-overlay .dialog-actions { margin-top: 13px; }

.dt-res-k {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 11px;
}
.dt-res-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}
.dt-res-grid b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--text);
}
.dt-res-grid .hint { display: block; font-size: 10px; }
.dt-res-tip { margin-top: 11px; text-align: center; font-size: 12px; font-weight: 600; color: var(--warn); }

/* 小屏压缩 */
@media (max-width: 374px) {
  .g-detective { padding-left: 8px; padding-right: 8px; gap: 8px; }
  .g-detective .g-head-right .btn { padding: 6px 8px; }
  .g-detective .dt-case { min-height: 76px; }
  .g-detective .dt-clues { min-height: 66px; padding-left: 10px; padding-right: 10px; }
}