/* 称号系统样式（2026-10-24）
   1) HUD 里宠物名上方那一行：字号必须与 .hud-name 完全一致（16px；≤360px 时 14px）
   2) 称号面板：签到 + 日常任务 + 图鉴 */

/* ---------- 1. HUD ---------- */
#hud-title{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hud-title[hidden]{ display: none; }
.hud-title-chip{
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 8px;
  font: inherit;
  color: #FFFDF7;
  letter-spacing: .5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: 1px;
  border: 1px solid rgba(255, 253, 247, .55);
  box-shadow: 0 2px 6px rgba(107, 79, 58, .22);
}
.hud-title-chip.tier-1{ background: linear-gradient(135deg, #E8AEB4, #D98B95); }
.hud-title-chip.tier-2{ background: linear-gradient(135deg, #9FB6CC, #6F8CA6); }
.hud-title-chip.tier-3{ background: linear-gradient(135deg, #F0C976, #C98B2C 60%, #8C5A12); }
.hud-title-chip.tier-3{
  position: relative;
  text-shadow: 0 1px 2px rgba(90, 52, 8, .45);
}
.hud-title-chip.tier-3::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: hudTitleShine 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes hudTitleShine{
  0%{ transform: translateX(-120%); }
  18%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}
@media (max-width: 360px){
  #hud-title{ font-size: 14px; }
}

/* ---------- 2. 面板 ---------- */
.title-overlay{
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(52, 38, 26, .46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.title-overlay[hidden]{ display: none; }
.title-sheet{
  width: 100%;
  max-width: 430px;
  max-height: 84vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 18px;
  border-radius: 22px;
  background: #FFFDF7;
  border: 2px solid #E4D5C0;
  box-shadow: 0 18px 48px rgba(72, 52, 34, .28);
  color: #4B3A2B;
}
.title-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.title-h2{ font-size: 19px; margin: 0; font-weight: 800; letter-spacing: 1px; }
.title-close{
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: #F3E7D4;
  color: #6B4F3A;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.title-close:hover{ background: #EADCC4; }

.title-sign{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #FBF2E2;
  border: 1px dashed #DFCBA9;
}
.title-sign-btn{
  flex: 0 0 auto;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #F0C976, #C98B2C);
  color: #FFFDF7;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(160, 110, 32, .3);
}
.title-sign-btn:disabled{
  background: #E7DCCB;
  color: #9C8A75;
  box-shadow: none;
  cursor: default;
}
.title-sign-note{ margin: 0; font-size: 12px; color: #85715C; line-height: 1.4; }

.title-tasks{ margin: 12px 0 8px; display: grid; gap: 8px; }
.title-task{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 13px;
}
.title-task-name{ color: #4B3A2B; }
.title-task-num{ color: #9C8A75; font-variant-numeric: tabular-nums; }
.title-task-bar{
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: #F0E5D3;
  overflow: hidden;
}
.title-task-bar > i{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #E8AEB4, #C98B2C);
  transition: width .3s ease;
}
.title-task.is-done .title-task-name{ color: #4E8B62; }

.title-claim{
  width: 100%;
  margin: 4px 0 14px;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: #E8AEB4;
  color: #FFFDF7;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.title-claim:disabled{ background: #EEE3D2; color: #A79481; cursor: default; }

.title-codex{ margin-top: 6px; }
.title-h3{
  font-size: 14px;
  margin: 0 0 8px;
  color: #6B4F3A;
  letter-spacing: .5px;
}
.title-count{ font-weight: 400; color: #9C8A75; }
.title-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 420px){
  .title-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.t-badge{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 66px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: #F7EFE1;
  color: #4B3A2B;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.t-badge-txt{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.1;
  text-align: center;
}
.t-badge-note{
  font-size: 10px;
  color: #8A7660;
  line-height: 1.2;
  text-align: center;
}
.t-badge.tier-1 .t-badge-txt{ color: #B3616B; }
.t-badge.tier-2 .t-badge-txt{ color: #5C7A94; }
.t-badge.tier-3 .t-badge-txt{ color: #A46C18; }
.t-badge.is-owned{ border-color: currentColor; }
.t-badge.tier-1.is-owned{ background: linear-gradient(160deg, #FDEFF1, #F8DCE0); }
.t-badge.tier-2.is-owned{ background: linear-gradient(160deg, #F0F5FA, #DCE7F0); }
.t-badge.tier-3.is-owned{ background: linear-gradient(160deg, #FFF7E3, #F7E4B8); }
.t-badge.is-owned:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(160, 138, 118, .22); }
.t-badge.is-locked{ background: #F2EEE7; border-color: #E4DCD0; }
.t-badge.is-locked .t-badge-txt{ color: #A79884; font-weight: 700; }
.t-badge.is-locked .t-badge-note{ color: #B0A492; }
.t-badge.is-worn{ box-shadow: 0 0 0 2px #E8AEB4 inset, 0 6px 14px rgba(160, 138, 118, .22); }
.t-badge.is-worn .t-badge-note{ color: #B3616B; font-weight: 700; }

.title-tip{
  margin: 12px 0 0;
  font-size: 11px;
  color: #9C8A75;
  line-height: 1.5;
}

/* 面板打开时锁住背景滚动（仅在本面板存在时生效） */
body.title-open{ overflow: hidden; }