/* main.css - 选歌页样式（明黄波普漫画风 × VOCALOID 三色） */

:root {
  --ink: #1d1d1d;          /* 墨色描边 */
  --paper: #ffffff;        /* 卡片白 */
  --stage: #FFD93D;        /* 明黄底 */
  --accent-red: #F0605A;   /* Teto 红 */
  --accent-yellow: #FFD93D;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--stage);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  height: 100svh;
  height: 100dvh; /* 动态视口高兜底（批次十六） */
  height: var(--rv-viewport-height, 100dvh);
  padding:
    max(12px, env(safe-area-inset-top), var(--rv-safe-top, 0px))
    max(20px, env(safe-area-inset-right), var(--rv-safe-right, 0px))
    max(12px, env(safe-area-inset-bottom), var(--rv-safe-bottom, 0px))
    max(20px, env(safe-area-inset-left), var(--rv-safe-left, 0px));
  /* 半调网点 */
  background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
  overflow: hidden;
}

/* 装饰元素（songs.html 中的静态装饰） */
.deco {
  position: absolute;
  pointer-events: none;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
  z-index: 0;
}

.deco.star-a { top: 22px; left: 44px; font-size: 34px; transform: rotate(-12deg); }
.deco.star-b { top: 58px; right: 54px; font-size: 22px; transform: rotate(16deg); }
.deco.star-c { bottom: 54px; left: 118px; font-size: 18px; transform: rotate(6deg); }

.deco.star-a, .deco.star-b, .deco.star-c { color: #fff; }

/* 返回主页（左上角，波普贴纸风，44px+ 触控目标） */
.home-link {
  position: absolute;
  top: max(14px, env(safe-area-inset-top), var(--rv-safe-top, 0px));
  left: max(14px, env(safe-area-inset-left), var(--rv-safe-left, 0px));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}
.home-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.deco.burst {
  top: -50px;
  right: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.35) 0deg 6deg, transparent 6deg 18deg);
  text-shadow: none;
}

/* 标题区 */
.title-area {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: clamp(6px, 3vh, 24px);
}

.game-title {
  display: inline-block;
  font-size: clamp(30px, 6.5vw, 46px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  transform: rotate(-3deg);
  /* 白填充 + 黑描边 + Teto 红错位影 */
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink),
    6px 6px 0 var(--accent-red);
}

.game-subtitle {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 16px;
  background: var(--ink);
  color: var(--accent-yellow);
  font-size: clamp(10px, 1.6vw, 12px);
  font-weight: 900;
  letter-spacing: 6px;
  transform: rotate(-1deg);
}

/* top-row 默认透明（display:contents），仅矮横屏档变成真正的横行容器（批次三十） */
.top-row {
  display: contents;
}

/* 选歌区 */
.song-select {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  /* 内容超高时允许区内滚动（批次十六：极端矮屏兜底） */
  overflow-y: auto;
  /* 批次三十三：只设 overflow-y 时 overflow-x 会被算成 auto，旋转卡片的视觉溢出
     在老 Android/X5 上会顶出底部横向拖动条；裁掉横向并隐藏该区滚动条（触摸滑动保留） */
  overflow-x: hidden;
  scrollbar-width: none;
}

.song-select::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 批次三十：弹性上下撑杆——内容放得下时把卡片群垂直居中；
   内容超高时自动归零，从顶部起排，上下全程可滚（修 margin:auto 居中裁顶不可达的隐患） */
.song-select::before,
.song-select::after {
  content: "";
  display: block;
  flex: 0 0 0;
}
.song-select::before { margin-top: auto; }
.song-select::after { margin-bottom: auto; }

.song-cards {
  /* 批次二十四：横向弹性行改四列网格——横屏不再从左到右滑，改向下滑动浏览 */
  display: grid;
  grid-template-columns: repeat(4, auto);
  align-items: start;
  justify-content: center;
  gap: clamp(16px, 4vw, 30px);
  padding: 10px;
  width: 100%;
  max-width: 100%;
  /* 横向居中即可；垂直居中交给 .song-select 的弹性撑杆（避免溢出时顶部被裁不可达） */
  margin: 0 auto;
}

.library-toolbar {
  position: relative;
  width: min(1120px, calc(100% - 28px));
  margin: 8px auto 12px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.library-toolbar[hidden] { display: none; }

.library-back {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  appearance: none;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 18px;
  font: 900 14px/1 inherit;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}

.library-back:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.library-heading {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink);
}

.library-heading strong { font-size: 24px; }
.library-heading span { font-size: 12px; font-weight: 800; color: #6f6558; }

/* 批次一百四十一：活动页打榜规则提示，紧跟标题行一眼可见 */
.library-event-hint {
  display: block;
  /* 桌面端按文案自然收口，不再横向铺满整条工具栏。 */
  justify-self: center;
  width: auto;
  max-width: calc(100% - 180px);
  margin: 5px auto 0;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.library-event-hint[hidden] { display: none !important; }

.song-select.event-library .rank-panel { display: none; }

/* 歌曲卡片（紧凑） */
.song-card {
  position: relative;
  width: clamp(156px, 22vw, 182px);
  height: clamp(168px, 25vw, 186px); /* 原 158/176：为难度通栏横条加高 ~10px */
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 底部留白：height:auto 档位（竖屏/矮横屏）P主行不再贴底边被裁 */
  padding-bottom: 5px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.song-item:nth-child(1) .song-card { transform: rotate(-3deg); }
.song-item:nth-child(2) .song-card { transform: rotate(2deg); }
.song-item:nth-child(3) .song-card { transform: rotate(-1.5deg); }

.song-card.available:hover,
.song-card.available:focus-visible {
  transform: rotate(-1deg) translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--ink);
  outline: none;
}

.song-card.available:active {
  transform: rotate(-1deg) translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

/* 活动曲包：保留歌曲卡比例，但通过文件夹页签和角标明确它是二级入口。 */
.event-folder-card {
  overflow: visible;
  margin-top: 12px;
  --event-theme: #8A74D6;
  --card-theme: var(--event-theme);
}

.event-folder-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 12px;
  width: 72px;
  height: 22px;
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--event-theme);
}

.event-folder-card .card-head {
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}

.event-badge {
  position: absolute;
  z-index: 3;
  top: -12px;
  right: -10px;
  padding: 4px 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--event-badge-theme, var(--accent-yellow));
  color: var(--event-badge-color, var(--ink));
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.event-folder-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(29, 29, 29, 0.28));
}

.event-folder-diff {
  letter-spacing: 1px;
  white-space: nowrap;
}

.event-folder-card .card-up {
  color: var(--event-theme);
}

.event-placeholder .card-head {
  color: #fff2a6;
  background: #8A74D6;
  font-size: 36px;
}

.event-song-cover {
  background: #17112f;
}

/* 根目录特刊单曲：沿用活动角标语言，但仍是可直接进入的单曲卡。 */
.featured-song-card {
  overflow: visible;
  margin-top: 12px;
}

.featured-song-card .card-head {
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}

.featured-song-badge {
  --event-badge-theme: var(--featured-badge-theme, #FFD93D);
  --event-badge-color: #FFFFFF;
}

.event-cover-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.event-song-status {
  position: absolute;
  z-index: 4;
  top: -12px;
  right: -10px;
  min-width: 38px;
  min-height: 30px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 3px solid currentColor;
  border-radius: 999px;
  background: #fffaf0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.78);
  font-family: "SimHei", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

.event-song-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
}

.event-song-status.is-limited { color: #c9362c; }
.event-song-status.is-permanent { color: #087d72; }
.event-song-status.is-unavailable { color: #6f6b61; background: #efede7; }

.song-card.has-event-status {
  overflow: visible;
  margin-top: 12px;
}

.song-card.has-event-status .mini-star { display: none; }

/* 活动曲使用原视频封面：保持完整比例并统一对齐，避免随机旋转产生“封面错位”。 */
.song-select.event-library .song-item .song-card,
.song-select.event-library .song-card.available:hover,
.song-select.event-library .song-card.available:focus-visible,
.song-select.event-library .song-card.available:active {
  transform: none;
}

/* 主题色头图区：平涂 + 网点 */
.card-head {
  width: 100%;
  height: 88px;
  flex-shrink: 0;
  background: var(--card-theme, #39C5BB);
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  border-bottom: 4px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 42px;
  position: relative;
  /* 批次二十四：图标裁在封面框内——视觉上图标在难度条/文字框「后面」，不再戳出框 */
  overflow: hidden;
}

.card-head .mini-star {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 14px;
  color: var(--accent-yellow);
  text-shadow: 1.5px 1.5px 0 var(--ink);
}

.card-title {
  margin-top: 7px;
  font-size: 18px;
  line-height: 1.2; /* 固定行高，卡片内容总高度可预期（卡片 overflow:hidden） */
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 1px;
  text-align: center;
  width: calc(100% - 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 批次一百四十一：长歌名（≥8 字，如《我在池袋看漂亮姐姐》）缩字号保持单行，
   避免折成两行把歌手/P主行挤出卡片 */
.card-title.is-long {
  font-size: 14px;
  letter-spacing: 0;
}
.card-title.is-very-long { font-size: 11px; letter-spacing: -.35px; }

.card-artist {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  color: #777;
  text-align: center;
  width: calc(100% - 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-artist.is-long { font-size: 9px; letter-spacing: -.2px; }

/* 锁定卡 */
.song-card.locked {
  cursor: default;
}

.song-card.locked .card-head {
  background: #b9b2a4;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}

.song-card.locked .card-title,
.song-card.locked .card-artist {
  color: #9a927f;
}

.lock-banner {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  background: var(--accent-red);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 6px;
  padding: 3px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* 「更多歌曲 敬请期待」占位卡（批次二十四）：虚线浅灰卡，不可点击
   批次三十：暖灰(#b9b2a4/#8a8272)改中性灰——黄底上暖灰显"土黄"，中性灰干净 */
.song-card.coming-soon {
  border-style: dashed;
  cursor: default;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 4px 4px 0 rgba(29, 29, 29, 0.35);
}

.song-card.coming-soon .card-head {
  background: #CFCFCF;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  border-bottom-style: dashed;
  font-size: 34px;
}

.song-card.coming-soon .card-title {
  color: #8a8a8a;
}

.song-card.coming-soon .card-artist {
  color: #b5b5b5;
}

/* 批次三十：大葱是长条图且视觉重心偏下，卡片头图里单独上提居中（只影响选歌卡片，不动游戏内素材） */
.card-head .card-icon-img.icon-levan_polkka {
  transform: translateY(-8%);
}

/* 历史最高评级展示（批次三十）：已从选歌卡片角标移除，改在模式选择页统一展示（js/ready-screen.js） */

/* 底部提示 */
.footer-hint {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(4px, 2vh, 14px);
  text-align: center;
}

.footer-hint p {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 18px;
}

/* 批次一百八十七：平板分屏/窄横屏按实际视口降为三列。
   这类窗口仍是 landscape，不能只依赖 orientation:portrait；旧四列的最小内容宽
   会被 .song-select 的 overflow-x:hidden 裁掉，表现为第四张卡只露一截。 */
@media (max-width: 767px) and (orientation: landscape) {
  .song-cards {
    grid-template-columns: repeat(3, minmax(0, 160px));
    gap: 14px;
    padding: 16px 14px;
  }

  .song-card {
    width: 100%;
    min-width: 0;
  }
}

/* App 中按容器回调的 CSS 像素宽度/朝向触发同一布局，覆盖失真的媒体查询。 */
html.rv-container-app.rv-layout-phone.rv-landscape-view .song-cards {
  grid-template-columns: repeat(3, minmax(0, 160px));
  gap: 14px;
  padding: 16px 14px;
}
html.rv-container-app.rv-layout-phone.rv-landscape-view .song-card {
  width: 100%;
  min-width: 0;
}

/* 极窄横屏（小窗/浮窗）继续降为两列，避免三列卡片文字被压坏。 */
@media (max-width: 500px) and (orientation: landscape) {
  .song-cards {
    grid-template-columns: repeat(2, minmax(0, 160px));
  }
}
html.rv-container-app.rv-layout-compact.rv-landscape-view .song-cards {
  grid-template-columns: repeat(2, minmax(0, 160px));
}

/* 竖屏：一行两个、收窄缩小，纵向滚动（批次二十四：原一行一个大卡改 2 列网格） */
@media (orientation: portrait) {
  html, body {
    /* 批次四十八：竖屏从「整页下拉」改「区内滚动」——标题/搜索框固定不动，榜单与卡片区下滑 */
    overflow: hidden;
    overflow-x: hidden;   /* 批次三十：装饰圆(deco.burst)探出右缘会撑出横向滚动条，裁掉 */
  }

  #app {
    height: 100vh;
    height: 100svh;
    height: var(--rv-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  /* 批次三十：主页按钮从绝对定位改为文档流首项——小屏不再压住 LOGO */
  .home-link {
    position: static;
    align-self: flex-start;
    margin-bottom: 4px;
  }

  .song-cards {
    /* 批次三十五：竖屏两列改流式——列宽吃容器 1fr，卡片 width:100%。
       旧 repeat(2, auto)+卡片 min(42vw,170px) 在部分 Android/X5 上按内容撑出 fit-content 宽度，
       居中后右侧视觉溢出被 overflow-x:hidden 裁掉（用户截图右边缺边）；流式后横向溢出根除 */
    width: 100%;
    max-width: 560px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 14px; /* 旋转卡片的角落在 padding 内消化，不戳出容器 */
  }

  .library-toolbar {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 4px;
    padding-top: 2px;
  }

  .library-back { left: 0; top: 0; padding: 8px 12px; font-size: 12px; }
  .library-heading { flex-direction: column; gap: 1px; padding-inline: 72px; }
  .library-heading strong { font-size: 16px; }
  .library-heading span { font-size: 10px; }
  .library-event-hint {
    width: 100%;
    max-width: none;
    margin-top: 4px;
    padding: 5px 9px;
    border-radius: 16px;
    font-size: 9px !important;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
  }

  .song-card {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 158px;
  }

  .card-head {
    height: 78px;
  }

  .card-title {
    margin-top: 5px;
    font-size: 16px;
  }

  .card-title.is-long {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ===== 搜索框 ===== */
.search-bar {
  position: relative;
  z-index: 1;
  margin-top: clamp(8px, 2vh, 16px);
}

.search-bar input {
  width: clamp(240px, 42vw, 320px);
  height: 44px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  outline: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.search-bar input::placeholder {
  color: #9a927f;
  font-weight: 700;
}

.search-bar input:focus {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

/* ===== 歌曲条目（卡片 + 下方按钮条） ===== */
.song-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* P主名 */
.card-up {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  color: #b0a893;
  text-align: center;
  width: calc(100% - 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-up.is-long { font-size: 8.5px; letter-spacing: -.2px; }

.song-card.locked .card-up {
  color: #b7b0a0;
}

/* 难度横条（通栏深灰色带，夹在封面框与信息区之间，不叠封面图；统一深灰不与封面撞色） */
.card-diff {
  width: 100%;
  flex-shrink: 0;
  padding: 2px 0;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
  background: rgba(29, 29, 29, 0.85);
  border-bottom: 3px solid var(--ink);
}

.card-diff .difficulty-demon {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  color: #fff;
  background: #e53935;
  text-shadow: 0 1px 0 #9b1515;
}

/* 难度配色类保留（DIFFICULTY_MAP 数据结构不动），当前统一深灰条不上色 */
.card-diff.diff-easy,
.card-diff.diff-normal,
.card-diff.diff-hard { background: rgba(29, 29, 29, 0.85); color: #fff; }

.song-card.locked .card-diff {
  background: #cfc8b8;
  color: #8a8272;
}

/* ===== 点赞 / 收藏按钮 ===== */
/* 批次十四：点赞/收藏入口暂时隐藏（代码与后端 functions/api/reactions.js 全部保留，
   恢复时删掉下面一行 display:none 即可） */
.card-marks {
  display: none;
}

.mark-btn {
  min-width: 44px; /* 原固定 44px 宽：放计数后自动撑开为胶囊，无计数时仍是圆形 */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  font-size: 20px;
  line-height: 1;
  color: #b0a893;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
}

/* 计数数字（比图标小一号，颜色跟随按钮状态） */
.mark-count {
  font-size: 12px;
  font-weight: 900;
}

.mark-btn:disabled {
  cursor: default; /* 防连击冷却中不变手型 */
}

.mark-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.mark-btn.mark-like.on {
  color: var(--accent-red);
}

.mark-btn.mark-fav.on {
  color: #ffb800;
}

/* 矮屏横屏（手机横置高度不足；批次十六合并原两处 520px 档为一处）：
   标题区+搜索框合并为一横行（标题缩小靠左、搜索框靠右），卡高改内容自适应，
   选歌区超高可滚动——治 330px 高下卡片上溢压搜索框、下溢压底部胶囊的问题 */
@media (max-height: 520px) {
  /* 批次三十重构：改回纵向不收缩布局——#app 高度钉死视口，
     第一行 top-row（标题+搜索横行）、中间选歌区吃剩余空间内部滚动、底部胶囊自然高。
     （旧版 row+wrap 下选歌区高度由内容撑开，整页超出 100dvh 被 overflow:hidden 切底，
     底部一行卡片与胶囊不可见也无法滚动——横屏"无法下拉"的根因） */
  #app {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    gap: 4px;
  }

  .top-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .title-area {
    flex: 0 1 auto;
    padding-top: 0;
    /* 左上角「主页」按钮是绝对定位，标题区让位 */
    margin-left: clamp(96px, 15vw, 130px);
    text-align: left;
  }

  .game-title {
    font-size: clamp(26px, 5.5vw, 36px);
  }

  .search-bar {
    flex: 0 1 auto;
    margin-top: 0;
    margin-left: auto;
  }

  .search-bar input {
    height: 38px;
  }

  .song-select {
    flex: 1 1 auto; /* 吃剩余空间，超出内部滚动 */
    min-height: 0;
  }

  .song-item {
    gap: 6px;
  }

  .song-cards {
    gap: 16px;
  }

  /* 矮屏档卡高改内容自适应：卡片内容（头70+难度条19+标题24+歌手16+P主14 ≈ 143~150px）
     超出原固定卡高余量为零，auto + min-height:0 让卡片按内容撑高，保持 overflow:hidden */
  .song-card {
    width: clamp(120px, 18vw, 140px); /* 矮屏档收窄：812 宽视口五卡不溢出 */
    height: auto;
    min-height: 0;
  }

  /* 批次四十八：「更多歌曲」占位卡内容少（无难度条/P主行），height:auto 档明显短一截 → 补齐到正常卡内容高 */
  .song-card.coming-soon {
    min-height: 150px;
  }

  .card-head {
    height: 70px;
    font-size: 34px;
  }

  .card-head .card-icon-img {
    max-width: 40px;
    max-height: calc(100% - 10px);
  }

  .card-title {
    margin-top: 5px;
    font-size: 16px;
  }

  .footer-hint {
    flex: 0 0 auto; /* 批次三十：纵向布局下自然高，不再参与弹性分配 */
  }
}

/* 卡片图片图标（医学：红药丸）
   批次二十四：固定宽改 max 双向约束——长条图（300×500 大葱）按高度收进框内，
   方形图按宽度收，任何素材都不会戳出封面框 */
.card-head .card-icon-img {
  max-width: 52px;
  max-height: calc(100% - 16px);
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(29, 29, 29, 0.25));
}

/* ================= toy 总榜面板（仅 toy 环境有数据时显示） ================= */
.rank-panel {
  /* 批次四十八：92vw 超出滚动容器内容盒（padding 14px×2）导致右边距溢出 → 吃满内容盒、上限 520px；
     margin-top 拉开与搜索框的间距（双端反馈挨太近） */
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  margin: 12px auto 12px;
  padding: 10px 14px 12px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}

.rank-panel-title {
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rank-panel-sub {
  font-size: 11px;
  font-weight: 700;
  color: #8d8375;
}

.rp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 9px;
  background: #FFF8E6;
}

.rp-row + .rp-row { margin-top: 4px; }

/* 空态：仅 ?rank=1 显式进入但榜上没有数据时出现（js/main.js handleRankEntry） */
/* 批次四十八：排行榜折叠（默认收起，点箭头展开；?rank=1 进入时 main.js 自动展开） */
.rank-toggle {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  align-self: center;
}
.rank-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.rank-toggle .rank-arrow { display: block; transition: transform 0.15s ease; }
.rank-toggle[aria-expanded="true"] .rank-arrow { transform: rotate(180deg); }
.rank-panel-list.collapsed { display: none; }

.rp-empty {
  padding: 10px 8px;
  border-radius: 9px;
  background: #FFF8E6;
  font-size: 13px;
  font-weight: 800;
  color: #8d8375;
  text-align: center;
}

.rp-no {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 900;
  color: #8d8375;
}

.rp-top1 .rp-no,
.rp-top2 .rp-no,
.rp-top3 .rp-no {
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
}

.rp-top1 .rp-no { background: #FFD93D; }
.rp-top2 .rp-no { background: #E8E8E8; }
.rp-top3 .rp-no { background: #F0B9A0; }

.rp-avatar {
  position: relative;
  overflow: hidden;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: #39C5BB;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.rp-row:nth-child(3n + 2) .rp-avatar { background: #66CCFF; }
.rp-row:nth-child(3n) .rp-avatar { background: #F0605A; }

.rp-avatar img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rp-score {
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* 批次四十四：用户延迟补偿 chip（选歌页底部，点击回首页设置面板校准） */
.offset-chip {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #2AA79B;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.offset-chip:active { transform: translate(1px, 1px); }