/* 容器初始化 - 增强移动端与PC互通性 */
.phm-ui {
  --phm-pink: #FFD1DC;
  --phm-deep-pink: #FF85A2;
  --phm-gold: #FFD700;
  --phm-bg: #FFF9FA;
  --phm-text: #5D4037;
  --phm-shadow: 0 4px 12px rgba(255, 133, 162, 0.15);
  
  display: block;
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--phm-text);
  background: var(--phm-bg);
  padding: 12px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  /* 增加触摸优化 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 环境头部 - 优化间距与可读性 */
.phm-ui hd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: white;
  padding: 10px 12px;
  border-radius: 12px;
  border-left: 4px solid var(--phm-deep-pink);
  box-shadow: var(--phm-shadow);
  margin-bottom: 15px;
  font-size: 13px;
}
.phm-ui hd t, 
.phm-ui hd l { 
  display: block; 
  width: 100%; 
  font-weight: bold; 
  word-break: break-word; /* 防止长文本溢出 */
}
.phm-ui hd a { 
  color: var(--phm-deep-pink); 
  font-style: italic; 
  word-break: break-all;
}

/* 正文部分 - 提升阅读舒适度 */
.phm-ui article {
  display: block;
  background: white;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 209, 220, 0.5);
  text-align: justify;
  min-height: 100px;
  color: var(--phm-text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 通用卡片样式 (Details) - 适配触屏点击区域 */
.phm-ui details {
  background: white;
  border-radius: 15px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--phm-shadow);
  border: 1px solid #FFF0F3;
}

.phm-ui summary {
  padding: 12px 15px;
  background: linear-gradient(90deg, var(--phm-pink), #fff);
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #D81B60;
  font-family: inherit;
  /* 增加点击区域 */
  min-height: 44px;
  -webkit-touch-callout: none;
  user-select: none;
}
.phm-ui summary::before {
  content: '▶';
  font-size: 10px;
  margin-right: 8px;
  transition: 0.3s;
  flex-shrink: 0; /* 防止变形 */
}
.phm-ui details[open] summary::before { transform: rotate(90deg); }

/* 内容区块 - 优化内边距 */
.phm-ui sec {
  display: block;
  padding: 12px;
  color: var(--phm-text);
  font-family: inherit;
  line-height: 1.6;
  overflow: hidden; /* 防止溢出 */
}

.phm-ui row {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  border-bottom: 1px dashed #FFE4E9;
  padding-bottom: 4px;
  color: var(--phm-text);
  font-family: inherit;
  line-height: 1.5;
  word-break: break-word;
}

/* 人物对话样式 - 淡蓝色 (增强选择器兼容性) */
.phm-ui .dialogue,
.phm-ui .dialog,
.phm-ui [class*="dialogue"],
.phm-ui [class*="dialog"],
.phm-ui .chat-message,
.phm-ui .message,
.phm-ui .conversation,
.phm-ui .talk,
.phm-ui sec.dialogue-content,
.phm-ui row.dialogue-content,
.phm-ui article .dialogue-text,
.phm-ui [class*="对话"],
.phm-ui [class*="chat"],
.phm-ui [class*="speak"],
.phm-ui [class*="say"] {
  color: #B0D4F1 !important;
}

/* 玩家面板特殊样式 - 颜色优化 */
.phm-ui .c-user .v { color: #FFA000; font-weight: bold; }
.phm-ui .c-user .m { color: #4CAF50; text-decoration: none; font-weight: bold; }

/* 好妹状态栏特殊样式 - 适配小屏 */
.phm-ui .c-girl row.h { 
  font-size: 18px; 
  border-bottom: 2px solid var(--phm-pink);
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between;
  align-items: center;
  color: var(--phm-text);
  gap: 4px 8px;
}
.phm-ui .rank {
  background: linear-gradient(45deg, #FFD700, #FFA500);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  animation: phm-glow 2s infinite alternate;
  white-space: nowrap; /* 保持徽章完整 */
}
@keyframes phm-glow {
  from { box-shadow: 0 0 2px #FFD700; }
  to { box-shadow: 0 0 10px #FFA500; }
}

.phm-ui .tags { color: var(--phm-deep-pink); font-size: 12px; }
.phm-ui .stats { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 5px; 
  border: none; 
  margin: 4px 0;
}
.phm-ui bar {
  background: #FFF0F3;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid var(--phm-pink);
  color: #E91E63;
  white-space: nowrap;
}
.phm-ui .mind { 
  font-style: italic; 
  color: #888; 
  background: #fdfdfd; 
  padding: 8px; 
  border-radius: 8px; 
  word-break: break-word;
}
.phm-ui .act { 
  color: #D81B60; 
  font-weight: bold; 
  background: #FFF9FA; 
  padding: 8px; 
  border-radius: 8px; 
  border-left: 3px solid var(--phm-deep-pink);
  word-break: break-word;
}

/* APP 推送样式 - 优化小屏显示 */
.phm-ui msg {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  font-size: 13px;
  position: relative;
  word-break: break-word;
}
.phm-ui msg[type="sys"] { background: #E3F2FD; color: #1976D2; border-left: 4px solid #2196F3; }
.phm-ui msg[type="sale"] { background: #FFF3E0; color: #E65100; border-left: 4px solid #FF9800; }
.phm-ui msg[type="event"] { background: #F3E5F5; color: #7B1FA2; border-left: 4px solid #9C27B0; }

/* 记忆回廊表格 - 移动端横向滚动与可读性 */
.phm-ui .table-box { 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; /* 流畅滚动 */
  margin: 0 -4px; /* 抵消内边距让滚动更自然 */
  padding: 0 4px;
}
.phm-ui table { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 12px; 
  min-width: 300px; 
}
.phm-ui th { 
  background: var(--phm-pink); 
  color: white; 
  padding: 8px 6px; 
  text-align: left; 
  font-weight: 600;
}
.phm-ui td { 
  padding: 8px 6px; 
  border-bottom: 1px solid #EEE; 
  word-break: break-word;
}
.phm-ui tr:nth-child(even) { background: #FFF9FA; }

/* 行动选项 - 触屏友好与响应式 */
.phm-ui nav { 
  list-style: none; 
  padding: 0; 
  margin: 0;
}
.phm-ui nav li {
  background: white;
  margin-bottom: 8px;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid var(--phm-pink);
  cursor: pointer;
  transition: 0.2s;
  font-size: 14px;
  display: flex;
  align-items: center;
  min-height: 44px; /* 触屏点击区域 */
  -webkit-touch-callout: none;
  user-select: none;
  word-break: break-word;
}
.phm-ui nav li::before {
  content: attr(data-idx);
  background: var(--phm-deep-pink);
  color: white;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0;
}
.phm-ui nav li:hover {
  background: var(--phm-pink);
  transform: translateX(5px);
}
/* 移动端点击反馈（非悬停） */
.phm-ui nav li:active {
  background: var(--phm-deep-pink);
  color: white;
  transform: scale(0.98);
}

/* 吐槽 - 优化间距 */
.phm-ui .c-comment p { 
  font-size: 13px; 
  color: #777; 
  font-style: italic; 
  padding: 8px 10px; 
  margin: 0;
  word-break: break-word;
}

/* ===== PC端与移动端互通补充优化 ===== */

/* 针对小屏设备（手机）的微调 */
@media screen and (max-width: 480px) {
  .phm-ui {
    padding: 8px;
    max-width: 100%;
  }
  .phm-ui hd {
    font-size: 12px;
    padding: 8px 10px;
  }
  .phm-ui article {
    padding: 12px;
    font-size: 14px;
  }
  .phm-ui summary {
    font-size: 14px;
    padding: 10px 12px;
    min-height: 40px;
  }
  .phm-ui sec {
    padding: 10px;
  }
  .phm-ui row {
    font-size: 13px;
  }
  .phm-ui nav li {
    font-size: 13px;
    padding: 10px 12px;
    min-height: 40px;
  }
  .phm-ui .c-girl row.h {
    font-size: 16px;
  }
  .phm-ui bar {
    font-size: 11px;
    padding: 3px 8px;
  }
  .phm-ui msg {
    font-size: 12px;
    padding: 8px 10px;
  }
  .phm-ui table {
    font-size: 11px;
    min-width: 280px;
  }
  .phm-ui th, .phm-ui td {
    padding: 6px 4px;
  }
}

/* 针对大屏PC的微调（宽度>768px） */
@media screen and (min-width: 769px) {
  .phm-ui {
    padding: 20px;
    max-width: 640px;
  }
  .phm-ui hd {
    font-size: 14px;
    padding: 12px 16px;
  }
  .phm-ui article {
    padding: 20px;
    font-size: 15px;
  }
  .phm-ui summary {
    font-size: 16px;
    padding: 14px 20px;
  }
  .phm-ui sec {
    padding: 16px;
  }
  .phm-ui nav li {
    font-size: 15px;
    padding: 14px 18px;
  }
  .phm-ui .c-girl row.h {
    font-size: 20px;
  }
  /* 悬停效果仅PC保留，移动端已用:active替代 */
  .phm-ui nav li:hover {
    background: var(--phm-pink);
    transform: translateX(5px);
  }
}

/* 针对平板和中等屏幕的过渡 */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .phm-ui {
    padding: 14px;
    max-width: 100%;
  }
  .phm-ui article {
    padding: 16px;
  }
  .phm-ui summary {
    padding: 12px 16px;
  }
}

/* 通用触摸优化 - 针对所有可点击元素 */
.phm-ui summary,
.phm-ui nav li,
.phm-ui [role="button"],
.phm-ui .clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 133, 162, 0.2);
}

/* 防止内容溢出 */
.phm-ui img,
.phm-ui video,
.phm-ui iframe,
.phm-ui embed {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 增强滚动条样式（仅WebKit内核） */
.phm-ui .table-box::-webkit-scrollbar {
  height: 4px;
  background: #FFF0F3;
}
.phm-ui .table-box::-webkit-scrollbar-thumb {
  background: var(--phm-pink);
  border-radius: 4px;
}