/* 桌面端 (默认样式) */
@media (min-width: 1024px){
  .container{max-width:1200px}
  .main-layout{grid-template-columns:7fr 3fr}
}

/* 平板端 */
@media (max-width: 1023px) and (min-width: 768px){
  .container{max-width:90%}
  .banner-content{grid-template-columns:1fr;gap:12px}
  .banner-characters{margin:0}
  .video-download-grid{grid-template-columns:1fr;gap:24px;overflow:visible}
  /* 平板端：若列宽不足则允许横向滑动（避免内容挤压） */
  .table-scroll{overflow-x:auto}
  .ranking-table{min-width:560px}
  .floating-mascot{
    width:130px;
    top:-40px;
    right:-40px;
  }
  .main-layout{grid-template-columns:1fr}
  .rankings-hub-layout{grid-template-columns:1fr}
  .rankings-hub-right{min-height:unset}
  .rankings-hub-right .table-scroll{min-height:unset}
  .sidebar{margin-top:14px}
  /* 单列布局时无需与右侧对齐，取消固定/拉伸高度 */
  .home-page .kill-rank-section{height:auto}
  .footer-content{grid-template-columns:1fr;gap:12px}
  .footer-links{grid-template-columns:repeat(2, minmax(120px, 1fr))}
  .social-links{flex-direction:row;justify-content:flex-start}
  .gallery-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* 手机端 */
@media (max-width: 767px){
  .nav-menu{display:none}
  .mobile-menu-btn{display:inline-grid;place-items:center}

  /* 行動端選單展開（JS會加 is-open） */
  .nav-menu.is-open{
    display:flex;
    position:absolute;
    left:12px;right:12px;top:64px;
    flex-direction:column;
    gap:6px;
    padding:10px;
    border-radius:20px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(90,74,114,.10);
    box-shadow:0 16px 28px rgba(255,158,216,.18);
  }
  .nav-container{position:relative}
  .nav-download-btn{
    padding:9px 12px;
    gap:6px;
  }
  .nav-download-btn .nd-text{display:none}
  .nav-download-btn .nd-icon{width:28px;height:28px;border-radius:12px}

  .hero-banner h1{font-size:1.8rem}
  .banner-content{grid-template-columns:1fr}
  .banner-characters{margin:0}

  .video-download-section{padding:16px;overflow:visible !important}
  .video-download-grid{grid-template-columns:1fr;gap:20px;overflow:visible}
  .video-player--embed{aspect-ratio:16/9;min-height:0}
  .button-stack{gap:12px}
  .download-tips{padding:16px}
  .video-banner__hint{font-size:12px;padding:7px 10px}
  .btn-download,.btn-register{gap:12px}
  .btn-download .btn-icon,.btn-register .btn-icon{width:54px;height:54px;border-radius:16px}
  .btn-icon-img{width:34px;height:34px}
  /* 行動端調整懸浮圖片 */
  .floating-mascot{
    width:110px;
    top:-30px;
    right:-30px;
  }
  .cta-buttons .button-container{flex-direction:column}
  .btn-download,.btn-register{min-width:unset}
  .main-layout{grid-template-columns:1fr}
  .rankings-hub-layout{grid-template-columns:1fr}
  .rankings-hub-right{min-height:unset}
  .rankings-hub-right .table-scroll{min-height:unset}
  .sidebar{margin-top:14px}
  .sidebar-feature-btn{padding:12px 14px}
  .sidebar-feature-btn .sfb-icon{width:38px;height:38px;border-radius:14px}
  .sidebar-feature-btn .sfb-text{font-size:15px}
  .widget-more{font-size:13px}

  /* 手机端：排行榜标题区避免挤压换行错位，改为上下排 */
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .section-header h2{
    font-size:22px;
    line-height:1.2;
  }
  .section-title-with-icon{
    width:100%;
    flex-wrap:wrap;
  }
  .section-title-icon{
    width:28px;
    height:28px;
  }
  .update-time{
    align-self:flex-start;
  }

  /* 手机端：榜单不滑动，改为“每行一张卡片”的竖向信息布局 */
  .table-scroll{overflow:visible}
  /* 首页殺戮榜：手机端不固定高度（避免过长留白） */
  .home-page .kill-rank-section{height:auto}
  .home-page .kill-rank-section .table-scroll{overflow:visible}
  .ranking-table{min-width:0}
  .ranking-table thead{display:none}
  .ranking-table,
  .ranking-table tbody,
  .ranking-table tr,
  .ranking-table td{
    display:block;
    width:100%;
  }
  .ranking-table tbody tr{
    margin:10px 0;
    padding:12px 12px;
    border-radius:16px;
    background:rgba(255,255,255,.70);
    border:2px solid rgba(255,255,255,.75);
    box-shadow:0 10px 22px rgba(255,158,216,.10);
  }
  .ranking-table tbody tr:hover{
    transform:none;
  }
  .ranking-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px dashed rgba(90,74,114,.10);
  }
  .ranking-table td:last-child{border-bottom:0}
  .ranking-table td::before{
    content:attr(data-label);
    font-weight:900;
    opacity:.85;
    flex:0 0 auto;
  }
  .ranking-table td{
    font-size:14px;
  }
  .ranking-table td:last-child{
    white-space:nowrap;
  }
  .footer-content{grid-template-columns:1fr}
  .footer-links{grid-template-columns:1fr}
  .social-links{flex-direction:row}
  .gallery-grid{grid-template-columns:1fr}
  .search input{width:100%}
}