:root{
  --c1:#7c5cfc; --c2:#ec4899;
  --bg-dark:0.25;
  --glow:0.6;
  --card:rgba(255,255,255,.08);
  --card-bd:rgba(255,255,255,.16);
  --txt:#f5f5fb;
  --txt-dim:rgba(255,255,255,.62);
  --beat:0;   /* 实时音频能量 0~1，由 JS 每帧写入 */
  --bass:0;   /* 实时低音 0~1，由 JS 每帧写入 */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--txt);
  background:#0a0a14;
  min-height:100vh;
  overflow-x:hidden;
  transition:background 1.2s ease;
}
/* 背景明暗遮罩：--bg-dark 大=抑郁深色，小=活泼浅亮 */
body::after{content:'';position:fixed;inset:0;z-index:1;background:rgba(6,7,13,var(--bg-dark));pointer-events:none;transition:background 1.2s ease}
#photo{
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease, background-image 1.4s ease;
  filter:blur(40px) saturate(1.2);
  transform:scale(1.1);
  animation:kenburns 24s ease-in-out infinite alternate;
}
#photo.show{opacity:.38}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.18) translate(-1.5%,1.5%)}}
#bg{position:fixed; inset:0; z-index:1; width:100%; height:100%}
.wrap{
  position:relative; z-index:2;
  max-width:920px; margin:0 auto; padding:42px 22px 60px;
}
header{text-align:center; margin-bottom:38px}
.brand{
  font-family:'Fraunces',serif; font-weight:700; font-size:46px; letter-spacing:-.5px;
  background:linear-gradient(120deg,#fff,var(--txt-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.brand span{
  background:linear-gradient(120deg,var(--c1),var(--c2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tag{margin-top:10px; color:var(--txt-dim); font-size:14px}

.picker{animation:fade .5s ease}
.pick-title{font-family:'Fraunces',serif; font-size:28px; font-weight:600; text-align:center}
.pick-sub{text-align:center; color:var(--txt-dim); font-size:14px; margin:8px 0 26px}
.moods{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mood{
  cursor:pointer; border:1px solid var(--card-bd); border-radius:20px;
  background:var(--card); backdrop-filter:blur(14px);
  padding:22px 14px; text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.mood:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.4); box-shadow:0 14px 40px rgba(0,0,0,.35)}
.mood .em{display:block; margin-bottom:10px; line-height:0; transition:transform .25s ease}
.mood .em .mface{display:block; margin:0 auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.28)); transform-origin:50% 85%}
.mood:hover .em{transform:scale(1.08) rotate(-2deg)}
.mood .nm{font-weight:700; font-size:17px}
.mood .ds{font-size:12.5px; color:var(--txt-dim); margin-top:4px}

.player{animation:fade .5s ease}
.hidden{display:none!important}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.back{
  background:transparent; border:1px solid var(--card-bd); color:var(--txt-dim);
  padding:8px 16px; border-radius:12px; cursor:pointer; font-size:13px; margin-bottom:22px;
  transition:color .2s,border-color .2s;
}
.back:hover{color:#fff; border-color:rgba(255,255,255,.4)}

.now{display:flex; gap:20px; align-items:center; justify-content:center; margin-bottom:22px}
.cover{
  width:120px; height:120px; border-radius:18px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cover img{width:100%; height:100%; object-fit:cover}
.cover-ph{font-size:46px; color:rgba(255,255,255,.85)}
.meta{min-width:0}
.mood-tag{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.4px;
  padding:4px 12px; border-radius:999px; color:#fff;
  background:linear-gradient(120deg,var(--c1),var(--c2)); margin-bottom:10px;
}
.title{font-family:'Fraunces',serif; font-size:26px; font-weight:600; line-height:1.2; word-break:break-word}
.artist{color:var(--txt-dim); font-size:15px; margin-top:4px}

.broadcast{
  border:1px solid var(--card-bd); border-radius:18px; background:var(--card);
  backdrop-filter:blur(14px); padding:18px 20px; margin-bottom:22px;
  transition:border-color .3s, box-shadow .3s;
}
.broadcast.onair{border-color:rgba(255,120,180,.6); animation:bcPulse 1.8s ease-in-out infinite}
@keyframes bcPulse{0%,100%{box-shadow:0 0 16px rgba(255,120,180,.16)}50%{box-shadow:0 0 30px rgba(255,120,180,.4)}}
.broadcast-label{font-size:12px; color:var(--txt-dim); letter-spacing:.5px; margin-bottom:8px}
.broadcast-text{font-size:17px; line-height:1.6; min-height:52px; font-weight:500; white-space:pre-wrap; word-break:break-word}
.broadcast-text .tw-char{display:inline-block; animation:twPop .28s cubic-bezier(.2,.8,.3,1.2) both; text-shadow:0 0 14px currentColor; font-weight:600}
@keyframes twPop{0%{opacity:0; transform:translateY(8px) scale(.5) rotate(-6deg); filter:blur(2px)}60%{opacity:1; transform:translateY(-2px) scale(1.1)}100%{opacity:1; transform:none; filter:none}}

.controls{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.ctrl{
  width:52px; height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--card-bd); background:var(--card); color:#fff;
  border-radius:50%; cursor:pointer; padding:0;
  transition:transform .15s, background .2s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.ctrl svg{display:block; width:22px; height:22px}
.ctrl:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.4); box-shadow:0 8px 22px rgba(0,0,0,.3)}
.ctrl:active{transform:translateY(0) scale(.94)}
.ctrl.primary{background:linear-gradient(120deg,var(--c1),var(--c2)); border:none; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ctrl.primary:hover{box-shadow:0 12px 30px rgba(0,0,0,.45)}
.ctrl.like{width:48px; height:48px; color:var(--txt-dim)}
.ctrl.like svg{width:20px; height:20px}
.ctrl.like.active{color:#ff3b5c; border-color:#ff3b5c; background:rgba(255,59,92,.16); animation:likebeat .5s ease}
@keyframes likebeat{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.progress{position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:visible; cursor:pointer; margin:14px 0 2px}
.bar{height:100%; width:0; background:linear-gradient(90deg,var(--c1),var(--c2)); border-radius:999px; transition:width .12s linear; position:relative}
.bar::after{content:''; position:absolute; right:-7px; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.45); transform:translateY(-50%); opacity:0; transition:opacity .2s}
.progress:hover .bar::after, .progress:active .bar::after{opacity:1}
.status{margin-top:12px; font-size:12.5px; color:var(--txt-dim); min-height:16px}
.pp-overlay{
  display:block; width:100%; margin-top:14px; padding:16px; border:none; border-radius:14px;
  background:linear-gradient(120deg,var(--c1),var(--c2)); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.95}50%{transform:scale(1.02); opacity:1}}

.home{
  display:inline-block; margin-top:34px; color:var(--txt-dim); text-decoration:none; font-size:13px;
  transition:color .2s;
}
.home:hover{color:#fff}

/* 错位修复：平板/窄屏区间（原 681~920px 仍挤 4 列）改为 3 列，手机再降 2 列 */
@media(max-width:760px){
  .moods{grid-template-columns:repeat(3,1fr)}
  .brand{font-size:38px}
}
@media(max-width:480px){
  .moods{grid-template-columns:repeat(2,1fr)}
  .pick-title{font-size:24px}
  .now{flex-direction:column; text-align:center}
  .cover{margin:0 auto}
}

/* ---------- 账号入口 + 登录弹窗 ---------- */
#ksnAuth{position:fixed; top:16px; right:18px; z-index:30}
.acct-btn{
  background:rgba(255,255,255,.1); border:1px solid var(--card-bd); color:#fff;
  padding:8px 16px; border-radius:999px; font-size:13px; cursor:pointer;
  backdrop-filter:blur(10px); transition:all .2s;
}
.acct-btn:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.16)}
.acct-btn.on{color:#9affc4; border-color:rgba(120,255,180,.5)}

.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(6,7,13,.6); backdrop-filter:blur(6px); padding:20px}
.modal.hidden{display:none}
.modal-card{
  position:relative; width:100%; max-width:360px;
  background:linear-gradient(135deg,rgba(124,92,252,.18),rgba(236,72,153,.12));
  border:1px solid rgba(255,255,255,.18); border-radius:22px; padding:34px 28px 26px; text-align:center;
  backdrop-filter:blur(20px); box-shadow:0 24px 60px rgba(0,0,0,.5); animation:fade .3s ease;
}
.modal-ic{display:flex; justify-content:center; color:#ff5d8f; margin-bottom:10px}
.modal-ic svg{width:34px; height:34px}
.modal-card h3{font-family:'Fraunces',serif; font-size:22px; margin-bottom:6px}
.modal-card p{color:var(--txt-dim); font-size:13px; margin-bottom:20px}
.li-input{width:100%; padding:12px 14px; margin-bottom:12px; border-radius:12px; border:1px solid var(--card-bd);
  background:rgba(0,0,0,.28); color:#fff; font-size:14px; outline:none; transition:border-color .2s}
.li-input:focus{border-color:var(--c1)}
.li-input::placeholder{color:rgba(255,255,255,.4)}
.li-btn{width:100%; padding:12px; border:none; border-radius:12px;
  background:linear-gradient(120deg,var(--c1),var(--c2)); color:#fff; font-size:15px; font-weight:700;
  cursor:pointer; transition:transform .15s, opacity .2s}
.li-btn:hover{opacity:.92; transform:translateY(-1px)}
.li-msg{font-size:12.5px; color:var(--txt-dim); min-height:18px; margin-top:12px}
.li-msg.err{color:#ff7a90}
.li-reg{display:inline-block; margin-top:14px; font-size:12.5px; color:var(--txt-dim); text-decoration:none}
.li-reg:hover{color:#fff}
.modal-x{position:absolute; top:12px; right:14px; width:30px; height:30px; border:none; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:18px; line-height:1; cursor:pointer}
.modal-x:hover{background:rgba(255,255,255,.2)}

/* ============================================================
   动效：头像动作 / 卡片入场 / 封面旋转 / 播报直播光晕
   ============================================================ */

/* ---------- 心情头像：各自的动效动作 ---------- */
@keyframes mFaceFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes mFaceBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}55%{transform:translateY(0)}70%{transform:translateY(-4px)}}
@keyframes mFaceSway{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-4px) rotate(-4deg)}}
@keyframes mFaceBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes mFaceWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(9deg)}75%{transform:rotate(-9deg)}}
@keyframes mFaceJitter{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-2px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}

/* 默认轻轻漂浮；下面按心情覆盖成专属动作 */
.mood .em .mface{animation:mFaceFloat 3.4s ease-in-out infinite}
.mood.mood-happy    .em .mface{animation:mFaceBounce 1.6s ease-in-out infinite}
.mood.mood-energy   .em .mface{animation:mFaceBounce 1.0s ease-in-out infinite}
.mood.mood-party    .em .mface{animation:mFaceWiggle .7s ease-in-out infinite}
.mood.mood-heroic   .em .mface{animation:mFaceBounce 1.2s ease-in-out infinite}
.mood.mood-motivate .em .mface{animation:mFaceBounce 1.2s ease-in-out infinite}
.mood.mood-romance  .em .mface{animation:mFaceFloat 2.8s ease-in-out infinite}
.mood.mood-heal     .em .mface{animation:mFaceFloat 3.0s ease-in-out infinite}
.mood.mood-nostalgia .em .mface{animation:mFaceFloat 3.2s ease-in-out infinite}
.mood.mood-memory   .em .mface{animation:mFaceFloat 3.2s ease-in-out infinite}
.mood.mood-focus    .em .mface{animation:mFaceFloat 3.8s ease-in-out infinite}
.mood.mood-quiet    .em .mface{animation:mFaceBreathe 4.2s ease-in-out infinite}
.mood.mood-sleep    .em .mface{animation:mFaceBreathe 4.6s ease-in-out infinite}
.mood.mood-chill    .em .mface{animation:mFaceSway 3.4s ease-in-out infinite}
.mood.mood-sad      .em .mface{animation:mFaceSway 3.0s ease-in-out infinite}
.mood.mood-lonely   .em .mface{animation:mFaceSway 3.6s ease-in-out infinite}
.mood.mood-breakup  .em .mface{animation:mFaceSway 3.2s ease-in-out infinite}

/* ---------- 卡片入场交错（去 PPT 感）---------- */
@keyframes moodIn{from{opacity:0; transform:translateY(18px) scale(.96)}to{opacity:1; transform:none}}
.moods .mood{animation:moodIn .55s cubic-bezier(.2,.8,.2,1) backwards}

/* ---------- 封面：旋转唱片 + 随节拍脉动光晕 ---------- */
@keyframes vinyl{to{transform:rotate(360deg)}}
.cover{transition:box-shadow .3s ease, transform .12s linear}
.cover.live img, .cover.live .cover-ph{animation:vinyl 16s linear infinite; transform-origin:50% 50%}
.cover.live{box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 calc(16px + var(--bass,0) * 46px) rgba(255,255,255,.30)}

/* ---------- 播报「直播中」光晕 ---------- */
@keyframes onairGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,93,143,0), 0 0 22px rgba(124,92,252,.22)}
  50%{box-shadow:0 0 0 2px rgba(255,93,143,.18), 0 0 42px rgba(236,72,153,.42)}
}
.broadcast.onair{border-color:rgba(255,255,255,.45); animation:onairGlow 1.5s ease-in-out infinite}
.broadcast.onair .broadcast-label{color:#ff9ec4}
.broadcast.onair .broadcast-label::before{
  content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#ff4d6d; margin-right:7px; vertical-align:middle;
  animation:liveDot 1s ease-in-out infinite;
}
@keyframes liveDot{0%,100%{opacity:.4; transform:scale(.8)}50%{opacity:1; transform:scale(1.25)}}

/* ============================================================
   虚拟人「噗噜」舞台 + 逐句歌词
   ============================================================ */
.player{display:flex; flex-direction:column; align-items:center}
.player > *{width:100%; max-width:560px}
.back{align-self:flex-start; width:auto}
.stage{display:flex; justify-content:center; align-items:flex-end; min-height:212px; margin:2px 0 4px}
.avatar-stage{width:200px; height:212px; display:flex; align-items:center; justify-content:center}
/* 图片方案：真实小埋原版图替代 SVG，覆盖填充 + 圆角 + 律动/说话动效 */
/* 常驻呼吸浮动：即使没播歌，头像也始终在轻轻起伏，不会「死板」 */
.avatar-stage.ksn-avatar-img{position:relative; overflow:hidden; border-radius:22px; background:#160f2e; box-shadow:0 10px 40px rgba(124,92,252,.25); animation:ksnFloat 3.8s ease-in-out infinite}
@keyframes ksnFloat{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-5px) rotate(.8deg)}}
.avatar-stage .ksn-face{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; border-radius:22px; background:#160f2e; transition:transform .2s ease, opacity .35s ease}
.ksn-face-back{opacity:0}
.avatar-stage.blink .ksn-face{transform:scaleY(.9); transition:transform .09s ease}
.avatar-stage.beat .ksn-face{animation:ksnBeat .45s ease}
@keyframes ksnBeat{0%{transform:scale(1)}35%{transform:scale(1.07) translateY(-3px)}100%{transform:scale(1)}}
.avatar-stage.speaking .ksn-face{animation:ksnSpeak 1.05s ease-in-out infinite}
@keyframes ksnSpeak{0%,100%{transform:scale(1)}50%{transform:scale(1.04) translateY(-1px)}}
/* 变脸 pop：切换表情时轻微放大回弹 */
.ksn-face.pop{animation:ksnPop .28s ease}
@keyframes ksnPop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

/* 歌词：固定三行窗口，中间那行是正在唱的，自动滚动 + 彩色高光 */
.lyrics{
  height:114px; overflow:hidden; margin:6px 0 18px; position:relative;
  text-align:center; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.lyrics::-webkit-scrollbar{display:none}
.ksn-lrc-inner{transition:transform .45s cubic-bezier(.22,.8,.3,1); will-change:transform}
.ksn-lrc-line{height:38px; line-height:38px; font-size:15px; color:rgba(255,255,255,.4);
  cursor:pointer; transition:color .3s, opacity .3s, transform .3s, filter .3s;
  transform:scale(.96); opacity:.55}
.ksn-lrc-line:hover{color:rgba(255,255,255,.78); opacity:.85}
.ksn-lrc-line.near{color:rgba(255,255,255,.72); opacity:.85; transform:scale(1)}
.ksn-lrc-line.active{
  color:#fff; font-size:19px; font-weight:800; transform:scale(1.06); opacity:1;
  background:linear-gradient(90deg,#ff5d8f,#ffd56b,#5b86e5,#43e97b,#c471ed,#ff5d8f);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,150,210,.55));
  animation:ksnLrcHue 5s linear infinite;
}
@keyframes ksnLrcHue{0%{background-position:0 0}100%{background-position:200% 0}}
.ksn-lrc-none{color:var(--txt-dim); font-size:13px; padding:46px 0; text-align:center}

/* 窄屏：虚拟人/歌词区压缩，避免错位 */
@media(max-width:520px){
  .stage{min-height:200px}
  .lyrics{height:114px}
}