/* 手机端适配（≤720px）：这层只改小屏，桌面一个像素都不动。
 *
 * 三个真问题：
 *   1. 「联系我们」是 position:fixed 右中（z-index 60），手机上正好压在正文和影片上，
 *      放映厅弹层（z-index 40）还会被它盖住 —— 挪到右下、缩小，并让弹层压过它；
 *   2. 分类标题两边的月桂是 flex:none 的固定宽度，中间那块收不回来，
 *      小屏上字会顶到月桂上；
 *   3. 风格页的提示词块用的是桌面 padding（28px）和 15px 等宽字，390 宽下一次只能看
 *      三十来个字符，行也挤。
 *
 * 联系按钮的定位覆盖靠 .contact-float 这个类，三个页面共用同一份 contact-float.css，
 * 所以按类覆盖，不碰原文件。
 */

@media (max-width: 720px) {
  /* ---- 联系按钮：只挪位置（右中 → 右下），金色胶囊和文字都保留 ---- */
  .contact-float {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
    transform: none;
  }

  /* ---- 放映厅：盖住联系按钮，影片按视口收一点 ---- */
  .room {
    z-index: 90;
    padding: 12px;
  }
  .room .close {
    top: 10px;
    right: 10px;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .stage video {
    max-height: 58vh;
  }

  /* ---- 分类标题：字能缩，月桂让位 ---- */
  .cat-head {
    gap: 10px;
  }
  .cat-head > div {
    min-width: 0;
  }
  .cat-head h2 {
    font-size: clamp(19px, 5.6vw, 26px);
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }
  .cat-head .lf {
    width: 42px;
    height: 24px;
  }

  /* ---- 分类 tab：门票按钮收小，一屏能看见两个半 ---- */
  .tabs .wrap {
    gap: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .tabs button {
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .tabs button small {
    font-size: 9px;
  }
  .tabs button small {
    font-size: 10px;
  }

  /* ---- 风格页：导航 / 标题 / 提示词块 ---- */
  main {
    padding: 20px 16px 64px;
  }
  main nav {
    gap: 16px;
    margin-bottom: 22px;
    font-size: 15px;
  }
  main h1 {
    font-size: 30px;
  }
  main pre {
    padding: 16px 14px;
    font-size: 12.5px;
    line-height: 1.65;
  }
  main button {
    padding: 8px 14px;
    font-size: 15px;
  }
}

@media (max-width: 720px) {
  /* ---- 图鉴列表：手机上压成紧凑的一列，文字左对齐 ----------------------------
     原版一张卡 500+ px（大标题 + 两段 16~19px 的衬线正文），一屏只看得到一张，
     翻 59 个风格要走 34,000 px。这里只改版式：保留黑金配色与金线，正文降到
     12~13px、摘要各留两行、去掉卡内的装饰横线和月桂，一屏能扫到两张多。 */
  .intro {
    padding: 24px 18px 20px;
  }
  .intro .tagline {
    display: none;                 /* 英文长句在手机上顶掉半屏，中文那句意思一样 */
  }
  .intro .tagline-cn {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
  }

  /* 每个分类之间原来留 72px，手机上光空白就占了半屏 */
  .category {
    padding-top: 22px;
    scroll-margin-top: 56px;
  }
  .cat-head {
    display: block;
    text-align: left;
    margin: 0 0 10px;
  }
  .cat-head .lf {
    display: none;                 /* 两侧月桂在小屏只是噪声 */
  }
  /* 英文大标题在这一行里折成两行，还不如用中文分类名当标题 */
  .cat-head h2 {
    display: none;
  }
  .cat-no {
    display: inline;
    font-size: 9.5px;
    letter-spacing: 0.22em;
  }
  .cat-cn {
    display: inline;
    margin: 0 0 0 8px;
    font-size: 12.5px;
    color: var(--soft);
  }

  .grid {
    gap: 12px;
  }
  .nominee .screen {
    margin: 8px 8px 0;
  }
  .nominee .play i {
    width: 46px;
    height: 46px;
  }
  .nominee .play span {
    right: 6px;
    bottom: 6px;
    padding: 3px 6px;
    font-size: 9px;
  }
  .plate {
    padding: 10px 12px 12px;
    text-align: left;
  }
  .plate h3 {
    font-size: 16px;
    letter-spacing: 0.06em;
  }
  .plate .cn {
    margin: 3px 0 0;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .plate .for {
    margin: 6px 0 0;
    font-size: 12px;
  }
  .plate .for::before {
    display: none;
  }
  .plate .line {
    display: none;                 /* 英文摘要先让位，中文那句留着 */
  }
  .plate .line-cn {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .plate .links {
    justify-content: flex-start;
    gap: 12px;
    padding-top: 10px;
    font-size: 11px;
  }
  .plate .links a:last-child {
    padding: 6px 10px;
    letter-spacing: 0.1em;
  }
}

/* 原包给「STYLE.md」上金按钮靠的是 a[href^="styles/"]，压平目录后失效；
   链接顺序固定（在线鉴赏、STYLE.md），改成认最后一个。桌面和手机都还原。 */
.nominee .links a:last-child {
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--black);
  background: var(--foil);
  box-shadow: inset 0 1px 0 rgba(255, 241, 194, 0.45);
}