/* ── 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;
    flex: none;    /* 覆盖桌面端 flex:1 1 0，防止 flex-basis:0 + overflow:hidden 折叠高度 */
    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(139, 92, 246, 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;
  }

  /* 手机端：登录按钮固定在左上角 */
  #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));
  }
}