/* ── style-responsive.css ────────────────────────────────────────────────────
   Mobile / small-screen overrides (max-width: 640px).
   Loaded by index.html last, after all other stylesheets.
*/

@media (max-width: 640px) {
  .page {
    padding: 24px 14px 60px;
  }

  /* 平台卡片 + 类型行改为垂直排列 */
  .style-genre-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .style-genre-divider {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
  }

  .style-cards {
    flex-direction: column;
    gap: 8px;
  }

  /* 卡片改为网格布局，说明文字始终可见 */
  .style-card {
    display: grid;
    grid-template-areas: "icon main" "desc desc";
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0 10px;
    padding: 12px 14px;
    height: auto; /* 覆盖桌面端固定高度 */
    flex: none; /* 覆盖桌面端 flex:1 1 0 */
    width: 100%;
  }

  .card-icon {
    grid-area: icon;
  }
  .card-main {
    grid-area: main;
  }

  /* 说明文字始终展示，不再依赖 hover */
  .card-desc {
    grid-area: desc;
    position: static !important;
    transform: none !important;
    background: rgba(77, 184, 176, 0.08) !important;
    color: var(--muted) !important;
    font-size: 0.68rem;
    border-radius: 4px;
    padding: 5px 8px;
    margin-top: 8px;
    width: 100%;
  }

  /* 禁用卡片 hover 滑入效果 */
  .style-card:hover .card-desc {
    transform: none !important;
  }

  /* 手机端类型按钮：自然换行 flex */
  .genre-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 手机端：卡片区段撑满宽度 */
  .style-cards-section {
    width: 100%;
  }

  /* 手机端："更多平台"按钮居中 */
  .style-more-btn {
    text-align: center;
    width: 100%;
    padding: 6px 0;
  }

  .style-cards-section.mobile-platform-collapsed .style-card:not(.active) {
    display: none;
  }

  .style-cards-section.mobile-platform-expanded .style-cards {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  .style-cards-section.mobile-platform-expanded .style-card {
    width: 100%;
  }

  .drawer-toggle-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .drawer-toggle-row::-webkit-scrollbar {
    display: none;
  }

  .drawer-toggle-row > div {
    flex: 0 0 auto;
    min-width: min(72vw, 170px);
    max-width: 78vw;
  }

  .drawer-toggle-row button {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    text-align: center;
  }

  /* 手机端：登录按钮固定在左上角 */
  #user-menu-wrap {
    position: fixed;
    top: 16px;
    left: 16px;
  }

  /* 下拉菜单改为左对齐（按钮在左侧时防止溢出屏幕） */
  .user-dropdown {
    right: auto;
    left: 0;
  }

  /* 手机端：Pro 按钮固定底部居中；lang 留在 #top-controls 右上角 */
  #pro-toggle {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    top: auto;
    right: auto;
  }

  /* 涟漪从底部中央扩散 */
  .pro-ripple {
    clip-path: circle(0% at 50% calc(100% - 48px));
  }

  .pro-ripple.expanding {
    clip-path: circle(200% at 50% calc(100% - 48px));
  }
}