/* ===== YDCK-RESPONSIVE-GLOBAL-001：小屏通用压缩 =====
   学生笔记本常见可视高度 600-700px，原设计留白偏大，
   首屏看到的内容太少。这里按视口高度逐级压缩间距。 */

/* 笔记本（<= 800px 高）：明显收紧 */
@media (max-height: 800px) {
  /* YDCK-RESPONSIVE-GLOBAL-002：导航固定 64px 太高，小屏压到 54px。
     注意：真正决定高度的是 .oj-nav 和 body.oj-nav-page 的 padding-top。 */
  .oj-nav { height: 54px !important; }
  .oj-nav .logo { font-size: 19px !important; height: 22px !important; line-height: 22px !important; }
  .oj-nav .nav_link a { padding: 5px 13px !important; font-size: 15px !important; }
  body.oj-nav-page { padding-top: 54px !important; }

  .py-12 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-10 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .py-8  { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .my-12 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-10 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
  .mt-12 { margin-top: 1.5rem !important; }
  .mt-10 { margin-top: 1.25rem !important; }
  .mt-8  { margin-top: 1rem !important; }
  .gap-8 { gap: 1rem !important; }
  .gap-6 { gap: .875rem !important; }

  .p-8  { padding: 1.5rem !important; }
  .p-6  { padding: 1.125rem !important; }

  .problem-row { padding-top: 12px !important; padding-bottom: 12px !important; }

  .text-5xl { font-size: 2.25rem !important; line-height: 1.15 !important; }
  .text-4xl { font-size: 1.875rem !important; line-height: 1.2 !important; }
}

/* 小屏（<= 680px 高）：进一步压缩 */
@media (max-height: 680px) {
  .oj-nav { height: 50px !important; }
  .oj-nav .logo { font-size: 18px !important; height: 20px !important; line-height: 20px !important; }
  .oj-nav .nav_link a { padding: 4px 11px !important; font-size: 14.5px !important; }
  body.oj-nav-page { padding-top: 50px !important; }

  .py-12 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-10 { padding-top: .875rem !important; padding-bottom: .875rem !important; }
  .py-8  { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .my-12 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-10 { margin-top: .875rem !important; margin-bottom: .875rem !important; }
  .mt-12 { margin-top: 1rem !important; }
  .mt-10 { margin-top: .875rem !important; }
  .mt-8  { margin-top: .75rem !important; }
  .mt-6  { margin-top: .625rem !important; }
  .gap-8 { gap: .875rem !important; }
  .gap-6 { gap: .625rem !important; }
  .gap-4 { gap: .625rem !important; }

  .p-8  { padding: 1.125rem !important; }
  .p-6  { padding: .875rem !important; }
  .p-5  { padding: .75rem !important; }

  .problem-row { padding-top: 9px !important; padding-bottom: 9px !important; }

  .text-5xl { font-size: 1.875rem !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.375rem !important; }
}

/* ===== YDCK-RESPONSIVE-GLOBAL-003：骨架屏占位压缩（小屏） =====
   OJ 首页加载前的骨架屏 min-height 过大（432/564/236px），
   小屏首屏几乎全是占位块。这里按视口高度等比压缩。 */
@media (max-height: 800px) {
  #homeSetList { min-height: 300px !important; }
  [data-oj-skeleton="home-set"] { height: 150px !important; }
  #homeContestList { min-height: 380px !important; }
  [data-oj-skeleton="contest-card"] { height: 190px !important; }
  #topThree { min-height: 170px !important; }
  [data-oj-skeleton="podium-row"] { height: 150px !important; }
  #countdownList { min-height: 150px !important; }
  #brickRow { min-height: 140px !important; }
}

@media (max-height: 680px) {
  #homeSetList { min-height: 240px !important; }
  [data-oj-skeleton="home-set"] { height: 120px !important; }
  #homeContestList { min-height: 300px !important; }
  [data-oj-skeleton="contest-card"] { height: 155px !important; }
  #topThree { min-height: 140px !important; }
  [data-oj-skeleton="podium-row"] { height: 125px !important; }
  #countdownList { min-height: 120px !important; }
  #brickRow { min-height: 115px !important; }
}

/* ===== YDCK-RESPONSIVE-GLOBAL-004：排行榜缺背景图时用渐变兜底 =====
   原 CSS 引用 images/arena-bg-light.jpg，该文件不存在（404）。
   用 CSS 渐变替代，视觉效果接近"竞技场"纹理，且零请求。 */
.arena-section, [class*="arena"] {
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(99,102,241,.10), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(236,72,153,.08), transparent 55%),
    linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ===== YDCK-RESPONSIVE-GLOBAL-005：排行榜首屏优化 =====
   实测 1366x640 下：hero 288px + controls 138px = 426px，
   真正的排名列表从 475px 才开始，首屏只能看到 1-2 名。
   小屏把 hero 和 controls 压缩，让排名列表尽早出现。 */
@media (max-height: 800px) {
  .wrap > .hero { padding-top: 18px !important; padding-bottom: 18px !important; }
  .wrap > .hero h1 { font-size: 26px !important; line-height: 1.25 !important; }
  .wrap > .hero p { font-size: 13px !important; margin-top: 6px !important; }
  .wrap > .controls { padding-top: 8px !important; padding-bottom: 8px !important; }
  .wrap > .controls .seg,
  .wrap > .controls button { padding: 5px 11px !important; font-size: 13px !important; }
  .wrap > .board { margin-top: 10px !important; }
}

@media (max-height: 680px) {
  .wrap > .hero { padding-top: 12px !important; padding-bottom: 12px !important; }
  .wrap > .hero h1 { font-size: 22px !important; }
  .wrap > .hero p { font-size: 12.5px !important; margin-top: 4px !important; }
  .wrap > .controls { padding-top: 6px !important; padding-bottom: 6px !important; }
  .wrap > .controls .seg,
  .wrap > .controls button { padding: 4px 9px !important; font-size: 12.5px !important; }
  .wrap > .board { margin-top: 8px !important; }
}

/* ===== YDCK-RESPONSIVE-GLOBAL-006：OJ 首页首屏优化 =====
   倒计时区块 380px 偏高，小屏压缩，让"专项强化训练"更早出现。 */
@media (max-height: 800px) {
  #homeSetList { min-height: 300px !important; }
  #homeContestList { min-height: 360px !important; }
  #topThree { min-height: 165px !important; }
}

@media (max-height: 680px) {
  #homeSetList { min-height: 250px !important; }
  #homeContestList { min-height: 300px !important; }
  #topThree { min-height: 145px !important; }
}

/* ===== YDCK-RESPONSIVE-GLOBAL-007：提交记录表格小屏优化 ===== */
@media (max-height: 800px) {
  #recordContent table th,
  #recordContent table td { padding-top: 8px !important; padding-bottom: 8px !important; }
  #problemRecords .problem-record-item,
  #problemRecords > div > div { min-height: 48px !important; }
}