/* 阅读层级、窄屏布局与交互状态；置于组件样式之后。 */
[hidden] { display: none !important; }
.mobile-only { display: none; }
.page-heading { font-size: 27px; font-weight: 650; letter-spacing: -0.035em; }
.page-subheading { margin-top: 5px; line-height: 1.6; }
.brand-title { font-size: 16px; }
.sidebar-brand { padding-top: 10px; padding-bottom: 24px; }
.sidebar-nav { margin-top: 24px; }
.nav-item { min-height: 44px; }
.topbar { padding-top: 24px; padding-bottom: 20px; }
.topbar-upper { gap: 20px; }
.topbar-search-group { flex: 0 1 390px; }
.search-box { min-width: 0; }
.filter-bar { align-items: end; gap: 12px; }
.filter-item { min-width: 0; }
.apple-select { max-width: 100%; }
.kpi-value { font-size: 28px; line-height: 1.3; letter-spacing: -0.035em; }
.kpi-label { min-height: 22px; }
.demo-micro { display: none; }
.panel-title { font-size: 16px; }
.panel-header { align-items: flex-start; gap: 12px; }
.panel-subtitle { margin-top: 5px; line-height: 1.6; }
.proto-inline-tag, .proto-pill, .nav-badge { flex-shrink: 0; white-space: nowrap; }
.apple-table th { font-size: 12px; white-space: nowrap; }
.apple-table td { padding-top: 17px; padding-bottom: 17px; }
.apple-table .col-game { min-width: 180px; max-width: 260px; }
.apple-table td:nth-child(8), .row-actions { white-space: nowrap; }
.game-cell-inner { min-width: 160px; }
.btn-secondary, .btn-primary, .btn-xs, .text-link-btn { white-space: nowrap; }
.history-batch-row > button { flex-shrink: 0; }
.game-title-btn { overflow-wrap: anywhere; text-align: left; }
.mech-rank-badge { font-size: 13px; font-weight: 600; }
.subgenre-chip { font-size: 12px; }
.theme-mini-tag { background: transparent; padding-left: 0; }
.chart-caption-note { line-height: 1.6; }
.candidate-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.source-badge { overflow-wrap: anywhere; }
.drawer-close-btn, .fav-btn { touch-action: manipulation; }

@media (max-width: 1200px) {
  .topbar-upper { align-items: flex-start; flex-wrap: wrap; }
  .topbar-search-group { flex-basis: 100%; max-width: none; }
  .search-box { flex: 1; max-width: none; }
}

@media (max-width: 960px) {
  .mobile-only { display: inline-flex; }
  .page-heading { font-size: 26px; }
  .sidebar { top: 0; height: 100dvh; padding-top: 40px; }
  .topbar-title-group { gap: 10px; }
  .filter-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-item .apple-select { width: 100%; }
  .filter-checkbox-item { align-self: center; }
}

@media (max-width: 600px) {
  .prototype-banner { padding: 8px 16px; }
  .proto-text { font-size: 11px; line-height: 1.6; }
  .topbar { position: static; padding-top: 20px; }
  .page-heading { font-size: 24px; }
  .topbar-search-group { gap: 8px; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .filter-item label { margin-bottom: 5px; }
  .apple-select, .apple-input { min-height: 40px; }
  .filter-checkbox-item { grid-column: 1 / -1; }
  .kpi-strip { gap: 10px; }
  .kpi-card { padding: 15px; }
  .kpi-value { font-size: 24px; }
  .kpi-foot { font-size: 11px; }
  .panel-header { padding: 16px; }
  .panel-title { font-size: 16px; }
  .panel-body { padding: 12px; }
  .panel-header .proto-inline-tag { display: none; }
  .chart-legend-item { font-size: 11px; }
  .chart-legend-bar { gap: 7px; }
  .apple-table th, .apple-table td { padding: 12px 8px; }
  .apple-table :is(th, td):nth-child(2),
  .apple-table :is(th, td):nth-child(4),
  .apple-table :is(th, td):nth-child(5),
  .apple-table :is(th, td):nth-child(7),
  .apple-table :is(th, td):nth-child(8) { display: none; }
  .apple-table .col-game { min-width: 120px; max-width: 150px; }
  .game-cell-inner { min-width: 0; gap: 7px; }
  .game-cell-inner > svg { width: 30px; height: 30px; flex-shrink: 0; }
  .game-sub-line, .new-tag-badge { display: none; }
  .game-title-btn { font-size: 12px; }
  .apple-table td:nth-child(6) small { display: none; }
  .row-actions .text-link-btn { display: none; }
  .delta-badge { white-space: nowrap; font-size: 11px; padding: 2px 4px; }
  .rank-num { font-size: 15px; }
  .candidate-grid { padding: 14px; }
  .drawer-meta-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}