/* 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; /* 动态视口高兜底（批次十六） */
  padding:
    max(12px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  /* 半调网点 */
  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));
  left: max(14px, env(safe-area-inset-left));
  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;
  /* 横向居中即可；垂直居中交给 .song-select 的弹性撑杆（避免溢出时顶部被裁不可达） */
  margin: 0 auto;
}

/* 歌曲卡片（紧凑） */
.song-card {
  position: relative;
  width: clamp(140px, 20vw, 160px);
  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);
}

/* 主题色头图区：平涂 + 网点 */
.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;
}

.card-artist {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  color: #777;
  text-align: center;
}

/* 锁定卡 */
.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;
}

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

  #app {
    height: 100vh;
    height: 100svh;
    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 内消化，不戳出容器 */
  }

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

  .card-head {
    height: 78px;
  }

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

@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;
}

.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);
}

/* 难度配色类保留（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;
  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); }