/* 灵感工坊三个房间页（竞赛信息 / 网页提示词 / 游客作品）· 手机端 UI 优化
 *
 * 只在 @media (max-width: 760px) 内生效，桌面端零影响。新增文件，不修改
 * room-page.css 里任何一条规则；需要覆盖的一律在这里重写，引用顺序放在
 * room-page.css 之后。
 *
 * 解决的问题：房间页的整套 UI 原本是「舞台按宽度缩放 + 内部元素用 em」的沉浸式
 * 版式，桌面上舞台约 1243px 宽时比例正常；手机竖屏布局把舞台改成通栏流式后，
 * 舞台字号固定 14px，而内部元素的倍率在 0.52~0.85 之间，实测正文被压到 7~11px：
 * .work-detail__label 7.3px、span.paper-tag 7.0px、gallery-card__number 7.3px、
 * .works-toolbar p 9.0px、竞赛卡 footer 9.2px、.competition-card__host 9.8px。
 * 手机上这个尺寸基本读不了。
 *
 * 做法：给舞台内的文字元素设绝对像素下限（13px），标题、徽标、标签另给尺寸以保住
 * 层级；同时放宽行高与卡片内边距，让竖屏下的密度更合理。
 *
 * 竞赛与提示词列表在手机上改为一排两张。每张卡约 155px 宽，原来的版式撑不住，
 * 因此同时重排卡片内部：竞赛卡的类型徽标从左侧绝对定位（占掉 66px 左内边距）改为
 * 静态的行内小胶囊置于顶部，标题限两行、描述限三行省略，meta 与 footer 从左右
 * 分布改为纵向堆叠，footer 用 margin-top: auto 压到卡片底部以对齐两列高度。
 *
 * 赛事详情弹窗在手机上必须改成单列。.competition-modal__body 是两列网格，第二列
 * （报名情况 .competition-modal__team）写的是 minmax(15rem, .75fr)，最小 240px；
 * 手机上弹窗内容区总共才约 281px，报名列先吃满 240px，赛事详情只分到 31px、内部
 * 滚动区仅 28px，等于被压没了。这里改为单列堆叠（DOM 顺序本就是详情在前、报名在
 * 后），并把滚动从 .competition-reader__scroll 上移到整个 __body，避免手机上出现
 * 嵌套滚动区。弹窗高度改用 max-height: 100%（相对 .competition-modal 的 fixed 容器）
 * 而不是 vh，避开移动端 100vh 含浏览器工具栏的问题。
 *
 * 另有一类「容器固定 em 高度 + 内部控件被拉到 44px」的重叠问题：mobile-tap.css 给
 * 交互控件设了 44px 最小触控高度，而 .competition-pagination（height: 2.1em ≈ 20px）
 * 与 .search-field（≈ 32px）都是写死高度的 flex 容器，按钮和输入框撑出容器后会压到
 * 相邻内容上（真机可见翻页条盖住最后一行卡片）。这里把两者改为 height: auto 并给出
 * 44px 最小高度。以后凡是给控件加触控下限，都要同时检查其父容器有没有固定高度。
 *
 * 两处优先级注意：.work-detail__label 在 room-page.css 里带 !important，必须同样用
 * !important 才能覆盖；.work-detail .paper-tag、.recommendation-mode .wood-tab、
 * .works-toolbar .wood-action、.work-stats .work-react 都是双类选择器（0,2,0），
 * 压得过单类规则，因此这里也用同样的双类选择器、靠源码顺序在后取胜。
 *
 * 注意：本文件内任何位置都不要写注释——声明块内、@media 块内规则之间的注释都会
 * 让其后的声明或规则被静默丢弃。所有说明写在这段文件头里。
 */

@media (max-width: 760px) {
  .detail-stage p,
  .detail-stage span,
  .detail-stage strong,
  .detail-stage time,
  .detail-stage small,
  .detail-stage b,
  .detail-stage i,
  .detail-stage label,
  .detail-stage button,
  .detail-stage a {
    font-size: 13px;
  }

  .detail-stage p {
    line-height: 1.6;
  }

  .competition-card h3,
  .work-detail h2 {
    font-size: 16px;
    line-height: 1.35;
  }

  .competition-card__mark {
    font-size: 13px;
  }

  .work-detail__label {
    font-size: 12px !important;
    letter-spacing: .08em;
  }

  .paper-tag,
  .gallery-card__number {
    font-size: 12px;
  }

  .work-detail .paper-tag,
  .recommendation-mode .wood-tab,
  .works-toolbar .wood-action,
  .work-detail .wood-action,
  .work-stats .work-react {
    font-size: 13px;
  }

  .competition-card {
    padding: 14px 14px 12px 66px;
    border-radius: 10px;
  }

  .competition-card h3 {
    white-space: normal;
  }

  .competition-card__host {
    white-space: normal;
  }

  .competition-card footer {
    gap: 10px;
    padding-top: 10px;
  }

  .work-detail,
  .deadline-board,
  .ai-board,
  .prompt-board,
  .competition-board {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .wood-tabs {
    gap: 8px;
  }

  .board-toolbar,
  .prompt-toolbar {
    gap: 10px;
  }

  .competition-list,
  .prompt-list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .competition-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
  }

  .competition-card__mark {
    position: static;
    align-self: flex-start;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
  }

  .competition-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .competition-card__host {
    margin: 0;
    font-size: 12px;
  }

  .competition-card__meta {
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
  }

  .competition-card footer {
    position: static;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 12px;
  }

  .competition-card__action {
    margin-left: 0;
  }

  .prompt-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
  }

  .prompt-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
  }

  .prompt-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
  }

  .prompt-card footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: auto;
    font-size: 12px;
  }

  .competition-pagination,
  .search-field {
    height: auto;
    min-height: 44px;
  }

  .competition-pagination {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 14px;
  }

  .search-field {
    align-items: center;
  }

  .competition-modal {
    padding: 12px;
  }

  .competition-modal__panel {
    width: 100%;
    height: auto;
    max-height: 100%;
  }

  .competition-modal__header {
    padding: 16px 16px 12px;
  }

  .competition-modal__facts {
    padding: 12px 16px;
  }

  .competition-modal__body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 16px 16px;
    overflow-y: auto;
  }

  .competition-reader {
    grid-template-rows: auto auto;
    padding-right: 0;
  }

  .competition-reader__scroll {
    padding-right: 0;
    overflow-y: visible;
  }

  .competition-modal__footer {
    padding: 12px 16px;
  }
}