/**
 * index.html 页面级样式（阶段一拆分）
 * 从 index.html 内联 <style> 提取：
 *   - 诗社功能增强样式（ptab/pentry-card/pact-btn）
 *   - 弹窗通用样式（pm-*）
 *   - 节气卡片（cjq-*）+ 节气详情弹窗（jd-*）
 *   - 游客注册引导气泡（guest-*）
 *   - 签筒动画（fortune* / particle* / stick* / btnPulse）
 *   - 诗社字体（pcp / couplet-input）
 */

/* ═══ 诗社功能增强样式 ═══ */
.ptab{flex:1;padding:9px 0;border:none;background:transparent;color:rgba(175,169,236,0.5);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .25s;letter-spacing:1px}
.ptab.active{color:var(--pc);border-bottom-color:var(--pc)}

/* 角色Tab切换 — 卡片式带头像 */
.poem-tabs{display:flex;gap:10px;margin-bottom:14px}
.poem-tab{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 8px;background:rgba(26,15,46,0.9);border:1px solid rgba(232,200,76,0.2);border-radius:12px;cursor:pointer;transition:all .3s}
.poem-tab.active{background:rgba(206,203,246,0.12);border-color:#7B77DD;transform:translateY(-1px)}
.poem-tab-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid transparent}
.poem-tab.active .poem-tab-avatar{border-color:#7B77DD}
.tab-name{font-size:13px;font-weight:500;color:#f5e8c8;margin-top:4px}
.poem-tab.active .tab-name{color:#CECBF6}
.pentry-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;background:rgba(30,25,45,0.7);border:0.5px solid rgba(127,119,221,0.18);border-radius:14px;text-decoration:none;transition:all .25s}
.pentry-card:active{transform:scale(0.97);border-color:var(--ec)}
.pentry-icon{font-size:24px}.pentry-t{font-size:13px;color:#EEEDFE;font-weight:500}
.pentry-s{font-size:10px;color:rgba(150,140,180,0.5)}
.pact-btn{flex:1;padding:10px 4px;border:0.5px solid transparent;border-radius:50px;background:transparent;font-size:12px;color:#CECBF6;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap}
.pact-btn:active{transform:scale(0.95)}

/* 四模式方块网格（同 poetry.html） */
.poetry-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0}
.mode-card{background:rgba(26,15,46,0.9);border:1px solid rgba(232,200,76,0.2);border-radius:14px;padding:18px 12px;text-align:center;cursor:pointer;transition:all .3s}
.mode-card:active{border-color:rgba(232,200,76,0.45);transform:scale(0.97);box-shadow:0 4px 16px rgba(139,26,60,0.15)}
.mode-icon{font-size:32px;margin-bottom:8px}
.mode-name{font-family:"STKaiti",serif;font-size:15px;color:#e8c84c;margin-bottom:4px}
.mode-desc{font-size:11px;color:rgba(245,232,200,0.55);line-height:1.4}

/* ═══ 弹窗通用 ═══ */
.pm-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,8,20,0.65);backdrop-filter:blur(8px);animation:pmin .2s ease}
@keyframes pmin{from{opacity:0}to{opacity:1}}
.pm-box{width:100%;max-height:80vh;overflow-y:auto;background:linear-gradient(180deg,#1e172d,#151120);border-radius:20px 20px 0 0;padding:22px 20px 28px;box-sizing:border-box;animation:pmup .3s ease}
@keyframes pmup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.pm-head b{font-size:17px;color:#EEEDFE}
.pm-close{width:28px;height:28px;border:none;border-radius:50%;background:rgba(255,255,255,0.08);color:rgba(175,169,236,0.6);font-size:18px;cursor:pointer;line-height:28px;text-align:center}
.pm-go{padding:12px;border:none;border-radius:50px;background:linear-gradient(135deg,#D4537E,#7F77DD);color:#fff;font-size:15px;cursor:pointer;letter-spacing:2px;font-weight:500}
.pm-res{margin-top:16px;padding:16px;background:rgba(127,119,221,0.06);border:0.5px solid rgba(127,119,221,0.15);border-radius:12px;font-size:14px;color:rgba(220,210,240,0.88);line-height:2;white-space:pre-wrap;word-break:break-all}

/* 意境选择 */
.pmood-btn{padding:12px 8px;border:0.5px solid rgba(91,141,213,0.2);border-radius:12px;background:rgba(91,141,213,0.06);color:rgba(220,210,240,0.85);font-size:13px;cursor:pointer;text-align:center;transition:all .2s}
.pmood-btn:active,.pmood-btn.sel{border-color:#5B8DD5;background:rgba(91,141,213,0.18);color:#5B8DD5}

/* ═══ 当前节气卡片（小程序同步） ═══ */
.cjq-card{text-align:center;padding:20px 16px 18px;background:linear-gradient(135deg,rgba(139,26,60,0.18),rgba(127,119,221,0.12));border:0.5px solid rgba(212,83,126,0.25);border-radius:14px;margin-bottom:14px;cursor:pointer;transition:all .2s}
.cjq-card:active{transform:scale(0.98)}
.cjq-icon{font-size:44px;margin-bottom:6px}
.cjq-name{font-size:22px;font-weight:600;color:#D4537E;margin-bottom:4px;letter-spacing:4px;font-family:Georgia,serif}
.cjq-date{font-size:11px;color:rgba(150,140,180,0.55);margin-bottom:10px}
.cjq-desc{font-size:13px;color:rgba(220,210,240,0.75);line-height:1.7;margin-bottom:8px}
.cjq-poem{font-family:Georgia,serif;font-size:11px;color:rgba(150,140,180,0.5);font-style:italic;line-height:1.6}

/* ═══ 节气详情弹窗 ═══ */
.jd-overlay{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:375px;max-width:100vw;z-index:999;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.7);animation:pmin .2s ease;margin:0}
.jd-modal{width:100%;max-height:85vh;background:linear-gradient(180deg,#1e172d,#151120);border-radius:20px 20px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:pmup .3s ease}
.jd-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:0.5px solid rgba(127,119,221,0.2)}
.jd-tag{font-size:15px;font-weight:600;letter-spacing:2px;color:#D4537E}
.jd-close{width:28px;height:28px;border:none;border-radius:50%;background:rgba(255,255,255,0.08);color:rgba(175,169,236,0.6);font-size:18px;cursor:pointer;line-height:28px;text-align:center}
.jd-body{flex:1;overflow-y:auto;padding:16px 20px calc(16px+env(safe-area-inset-bottom))}
.jd-info-row{display:flex;gap:8px;margin-bottom:14px}
.jd-info-item{flex:1;background:rgba(255,255,255,0.04);border-radius:8px;padding:8px 10px;text-align:center}
.jd-label{display:block;font-size:10px;color:rgba(150,140,180,0.5);margin-bottom:4px;letter-spacing:1px}
.jd-val{display:block;font-size:13px;color:#EEEDFE;font-weight:500}
.jd-desc{font-size:14px;color:rgba(220,210,240,0.75);line-height:1.8;margin-bottom:14px;padding:10px 12px;background:rgba(127,119,221,0.07);border-radius:8px;border-left:3px solid rgba(127,119,221,0.4)}
.jd-poem-section{margin-bottom:14px}
.jd-section-title{font-size:11px;color:rgba(150,140,180,0.5);letter-spacing:2px;margin-bottom:6px}
.jd-poem{font-family:Georgia,serif;font-size:13px;color:#D4537E;line-height:2;padding:12px;background:rgba(139,26,60,0.07);border-radius:8px;white-space:pre-line}
.jd-mood-section{margin-bottom:8px}
.jd-mood-text{font-size:13px;color:rgba(220,210,240,0.75);line-height:1.7;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:8px}
.jd-scene-btn{width:100%;margin:0;padding:14px;border:none;border-radius:50px;background:linear-gradient(135deg,#c94043,#a32f31);color:white;font-size:15px;cursor:pointer;letter-spacing:1px;font-weight:500}
.jd-no-scene{text-align:center;font-size:12px;color:rgba(150,140,180,0.4);padding:12px 0;font-style:italic}
.jd-footer{flex-shrink:0;padding:12px 20px calc(12px+env(safe-area-inset-bottom));background:#151120;border-top:0.5px solid rgba(127,119,221,0.15)}

/* ═══ 游客注册引导气泡 ═══ */
.guest-reg-prompt-wrap {
  margin: 16px 8px;
  padding: 16px;
  background: rgba(83,74,183,0.08);
  border: 1px solid rgba(83,74,183,0.25);
  border-radius: 14px;
}
.guest-prompt-msg {
  font-size: 14px;
  color: rgba(196,180,224,0.9);
  line-height: 1.9;
  font-family: Georgia,'KaiTi',serif;
  margin-bottom: 10px;
}
.guest-prompt-hint {
  font-size: 11px;
  color: rgba(200,160,100,0.5);
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.guest-prompt-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.guest-btn-primary {
  padding: 10px 18px;
  background: linear-gradient(135deg,rgba(83,74,183,0.5),rgba(196,96,126,0.4));
  border: 1px solid rgba(196,96,126,0.4);
  border-radius: 20px;
  color: #EEEDFE;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s;
}
.guest-btn-primary:hover { opacity: 0.85; }
.guest-btn-skip {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(200,160,100,0.2);
  border-radius: 20px;
  color: rgba(200,160,100,0.5);
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}
.guest-btn-skip:hover { border-color: rgba(200,160,100,0.4); color: rgba(200,160,100,0.8); }

/* 游客状态顶部提示条 */
.guest-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(83,74,183,0.15);
  border-bottom: 1px solid rgba(83,74,183,0.2);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(200,180,240,0.6);
  letter-spacing: 1px;
}
.guest-topbar-btn {
  padding: 4px 12px;
  background: rgba(196,96,126,0.2);
  border: 1px solid rgba(196,96,126,0.35);
  border-radius: 12px;
  color: #e8a0b8;
  font-size: 11px;
  cursor: pointer;
  transition: all .2s;
}
.guest-topbar-btn:hover { background: rgba(196,96,126,0.35); }

/* ═══ 签筒摇动动画 ═══ */
@keyframes fortuneShake {
  0%   { transform: rotate(0deg) translateX(0) translateY(0); }
  5%   { transform: rotate(-12deg) translateX(-5px) translateY(-2px); }
  10%  { transform: rotate(13deg) translateX(5px) translateY(-4px); }
  15%  { transform: rotate(-15deg) translateX(-6px) translateY(-1px); }
  20%  { transform: rotate(15deg) translateX(6px) translateY(-5px); }
  25%  { transform: rotate(-12deg) translateX(-5px) translateY(-2px); }
  30%  { transform: rotate(12deg) translateX(5px) translateY(-6px); }
  35%  { transform: rotate(-14deg) translateX(-6px) translateY(-1px); }
  40%  { transform: rotate(14deg) translateX(6px) translateY(-4px); }
  50%  { transform: rotate(-8deg) translateX(-3px) translateY(-2px); }
  60%  { transform: rotate(8deg) translateX(3px) translateY(-3px); }
  70%  { transform: rotate(-5deg) translateX(-2px) translateY(-1px); }
  80%  { transform: rotate(5deg) translateX(2px) translateY(-2px); }
  90%  { transform: rotate(-2deg) translateX(-1px) translateY(0); }
  100% { transform: rotate(0deg) translateX(0) translateY(0); }
}
.fortune-shaking {
  animation: fortuneShake 1.1s cubic-bezier(0.36,0.07,0.19,0.97);
}

/* 签筒发光效果 */
@keyframes tongGlow {
  0%   { filter: drop-shadow(0 0 0px rgba(201,64,67,0)); }
  30%  { filter: drop-shadow(0 0 8px rgba(201,64,67,0.5)) drop-shadow(0 0 16px rgba(245,200,66,0.3)); }
  60%  { filter: drop-shadow(0 0 12px rgba(201,64,67,0.7)) drop-shadow(0 0 20px rgba(245,200,66,0.4)); }
  100% { filter: drop-shadow(0 0 0px rgba(201,64,67,0)); }
}
.fortune-shaking #fortune-svg {
  animation: tongGlow 1.1s ease-in-out;
}

/* 签条弹射飞出动画 */
@keyframes stickFlyOut {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1); opacity: 1; }
  15%  { transform: translateY(-30px) rotate(-5deg) scaleX(0.95); opacity: 1; }
  35%  { transform: translateY(-90px) rotate(-15deg) scaleX(0.9); opacity: 1; }
  55%  { transform: translateY(-130px) rotate(8deg) scaleX(1.05); opacity: 0.85; }
  75%  { transform: translateY(-110px) rotate(18deg) scaleX(0.95); opacity: 0.6; }
  100% { transform: translateY(-80px) rotate(25deg) scaleX(0.9); opacity: 0; }
}
.stick-flying {
  animation: stickFlyOut 0.85s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* 粒子效果 */
@keyframes particleFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: var(--px, 20px) var(--py, -60px) scale(0); opacity: 0; }
}
.fortune-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFly var(--dur, 0.8s) ease-out var(--delay, 0s) forwards;
}

/* 求签按钮脉冲效果 */
@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,64,67,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(201,64,67,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,64,67,0); }
}
#fortune-draw-btn:not(:disabled) {
  animation: btnPulse 2s ease-in-out infinite;
}

/* 诗社页面字体统一 16px */
.pcp {
  font-size: 16px;
  color: #EEEDFE;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 2px;
  line-height: 2.2;
  text-align: center;
  padding: 12px 4px;
}
#couplet-input::placeholder {
  font-size: 16px;
  color: rgba(175,169,236,0.35);
  letter-spacing: 2px;
}