/* ============================================================
   迭代2+ · 星瓣词汇消消乐 10×10 + 星图单词拼拼乐 增强 + 收藏馆BGM
   ============================================================ */

/* ---------- 星瓣词汇消消乐 10×10 ---------- */
.mg10-card{ width:min(640px,98vw); }
.mg10-diff{ display:flex; gap:8px; justify-content:center; margin:0 0 10px; }
.mg10-d{ padding:6px 18px; border-radius:16px; border:2px solid #ffd0e0; background:#fff7fb; color:#d6648a; cursor:pointer; font-size:13px; font-weight:700; }
.mg10-d.active{ background:#ff7fb0; color:#fff; border-color:#ff7fb0; }
.mg10-board{ display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin:8px 0 4px; position:relative; }
.mg10-cell{
  aspect-ratio:1; padding:3px; border-radius:9px; border:1.5px solid #ffd0e0; cursor:pointer;
  background:#fff7fb; color:#7a4a66; font-size:13px; font-weight:700; line-height:1.1;
  display:flex; align-items:center; justify-content:center; text-align:center; transition:.12s; word-break:break-word;
}
.mg10-cell.star{ background:linear-gradient(135deg,#fff8fb,#ffe6f0); border-color:#ffe0ec; cursor:default; font-size:14px; }
.mg10-cell.en{ font-family:Georgia,serif; color:#a24672; }
.mg10-cell.d-easy{ background:#ffe0ec; border-color:#ffc2d9; }
.mg10-cell.d-medium{ background:#ffc2d9; border-color:#ff9ebf; }
.mg10-cell.d-hard{ background:#ff9ebf; border-color:#ff7fb0; }
.mg10-cell.sel{ border-color:#ff5fa2; background:#ffe6f1; box-shadow:0 0 0 2px #ffb6d5; transform:translateY(-1px); }
.mg10-cell.bad{ border-color:#ff8f8f; background:#ffecec; animation:mgShake .35s; }
.mg10-cell.done{ opacity:0; transform:scale(.5); pointer-events:none; }

/* 星瓣雨 */
.mg10-petal{ position:absolute; font-size:18px; pointer-events:none; animation:petalFall 2s ease-in forwards; z-index:10; }
@keyframes petalFall{ 0%{ transform:translateY(-20px) rotate(0deg); opacity:1 } 100%{ transform:translateY(260px) rotate(360deg); opacity:0 } }

/* 星光爆炸 */
.mg10-boom{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:80px; pointer-events:none; z-index:20; animation:boomPop .6s ease-out forwards; }
@keyframes boomPop{ 0%{ transform:translate(-50%,-50%) scale(.3); opacity:1 } 50%{ transform:translate(-50%,-50%) scale(1.5); opacity:.8 } 100%{ transform:translate(-50%,-50%) scale(2); opacity:0 } }

/* ---------- 星图单词拼拼乐 增强 ---------- */
.pz-diff{ display:flex; gap:8px; justify-content:center; margin:6px 0; }
.pz-d{ padding:5px 14px; border-radius:14px; border:2px solid #ffd0e0; background:#fff7fb; color:#d6648a; cursor:pointer; font-size:12px; font-weight:700; }
.pz-d.active{ background:#ff7fb0; color:#fff; border-color:#ff7fb0; }
.pz-tools{ display:flex; gap:10px; justify-content:center; margin:8px 0; }
.pz-tool{ padding:7px 16px; border-radius:12px; border:2px solid #ffd0e0; background:#fff7fb; color:#a24672; cursor:pointer; font-size:13px; font-weight:700; }
.pz-tool:hover{ border-color:#ff7fb0; background:#ffe6f1; }
.pz-cell.hint-flash{ animation:hintFlash 1s ease-in-out 3; }
@keyframes hintFlash{ 0%,100%{ box-shadow:none } 50%{ box-shadow:0 0 0 3px #ffd76a, 0 0 12px #ffd76a } }
.pz-cell.glow{ animation:pieceGlow .8s ease; }
@keyframes pieceGlow{ 0%{ box-shadow:0 0 0 0 rgba(255,127,184,0) } 50%{ box-shadow:0 0 0 6px rgba(255,127,184,.5) } 100%{ box-shadow:0 0 0 0 rgba(255,127,184,0) } }
.pz-preview{ position:absolute; inset:0; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; border-radius:18px; opacity:0; transition:opacity .3s; z-index:5; }
.pz-preview.show{ opacity:1; }
.pz-preview svg{ max-width:90%; max-height:90%; }

/* ---------- 星愿收藏馆 ---------- */
.sc-tabs{ display:flex; gap:8px; justify-content:center; margin:10px 0; flex-wrap:wrap; }
.sc-tab{ padding:6px 14px; border-radius:14px; border:2px solid #ffd0e0; background:#fff7fb; color:#a24672; cursor:pointer; font-size:13px; font-weight:700; }
.sc-tab.active{ background:#ff7fb0; color:#fff; border-color:#ff7fb0; }
.sc-star-pop{ position:absolute; font-size:18px; pointer-events:none; animation:starPop .9s ease-out forwards; }
@keyframes starPop{ 0%{ transform:scale(.5); opacity:1 } 100%{ transform:scale(1.4) translateY(-20px); opacity:0 } }
.sc-empty{ padding:20px; color:#b295a0; font-size:14px; line-height:1.8; }

/* BGM 歌单 */
.sc-music-wrap{ max-height:320px; overflow-y:auto; text-align:left; }
.sc-music-cats{ display:flex; gap:8px; margin:0 0 10px; }
.sc-mc{ padding:5px 14px; border-radius:12px; border:2px solid #ffd0e0; background:#fff7fb; color:#a24672; cursor:pointer; font-size:12px; font-weight:700; }
.sc-mc.active{ background:#ff7fb0; color:#fff; border-color:#ff7fb0; }
.sc-music-list{ display:flex; flex-direction:column; gap:10px; }
.sc-mg{ background:linear-gradient(180deg,#fff8fb,#fff0f6); border:1.5px solid #ffdcea; border-radius:14px; padding:10px 12px; }
.sc-mg-artist{ font-size:13px; font-weight:800; color:#e85f95; margin-bottom:6px; }
.sc-song{ display:inline-block; padding:5px 10px; margin:3px; border-radius:10px; border:1.5px solid #ffd0e0; background:#fff; color:#7a4a66; font-size:12px; cursor:pointer; transition:.15s; }
.sc-song:hover{ border-color:#ff7fb0; background:#ffe6f1; }
.sc-song.active{ background:#ff7fb0; color:#fff; border-color:#ff7fb0; }

/* BGM 底部播放栏 */
.sc-bgm-bar{ display:flex; align-items:center; gap:8px; margin:14px 0 4px; padding:10px 14px; border-radius:16px; background:linear-gradient(180deg,#ffe8f4,#ffd0e6); border:1.5px solid #ffd0e0; }
.sc-bgm-icon{ font-size:18px; }
.sc-bgm-info{ flex:1; font-size:13px; font-weight:700; color:#a24672; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-bgm-btn{ width:36px;height:36px; border-radius:50%; border:none; background:#ff7fb0; color:#fff; font-size:16px; cursor:pointer; box-shadow:0 2px 8px rgba(255,127,184,.4); }

/* ---------- 星伴精灵 6款 ---------- */
.pet-thumb-svg svg{ width:56px; height:56px; }
.pet-thumb-placeholder{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.pet-opt small{ display:block; font-size:10px; color:#b295a0; margin-top:2px; line-height:1.3; }
.pet-svg svg{ width:66px; height:66px; filter:drop-shadow(0 4px 8px rgba(180,120,200,.35)); animation:petFloat 3s ease-in-out infinite; }
