/* ============================================================
   迭代4/5 · 隐藏支线 + 星光陈列室（复用 .day-overlay/.day-card）
   ============================================================ */

/* ---------- 隐藏支线 ---------- */
.sq-picks{ display:flex; flex-direction:column; gap:9px; margin:6px 0 4px; }
.sq-pick{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,#fff7fb,#ffeef6); border:1.5px solid #ffdcea; text-align:left; }
.sq-pick:hover{ border-color:#ff9ecf; }
.sq-pick .sq-ic{ font-size:24px; }
.sq-pick .sq-nm{ flex:1; font-size:15px; font-weight:800; color:#a24672; }
.sq-pick .sq-bs{ font-size:11px; color:#b295a0; }

.sq-card{ min-height:220px; }
.sq-top{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:800; color:#e85d75; margin-bottom:14px; }
.sq-sc{ background:#ffe6f1; color:#e85f95; border-radius:12px; padding:2px 10px; }
.sq-word{ font-family:Georgia,serif; font-size:30px; font-weight:900; color:#a24672; text-align:center; margin:6px 0 16px; word-break:break-word; }
.sq-opts{ display:flex; flex-direction:column; gap:9px; }
.sq-opt{ padding:12px; border-radius:14px; border:2px solid #ffd0e0; background:#fff7fb; color:#7a4a66;
  font-size:15px; font-weight:700; cursor:pointer; transition:.15s; }
.sq-opt:hover{ border-color:#ff9ecf; }
.sq-opt.right{ border-color:#6bcb77; background:#e8f7ea; color:#3f9a4f; }
.sq-opt.wrong{ border-color:#ff8f8f; background:#ffecec; color:#e05a5a; }

/* ---------- 星光陈列室 ---------- */
.sc-card{ width:min(440px,94vw); }
.sc-grid{ display:flex; gap:14px; justify-content:center; margin:8px 0 6px; }
.sc-item{ flex:1; max-width:180px; }
.sc-art{ position:relative; height:150px; border-radius:18px; overflow:hidden;
  background:linear-gradient(165deg,#fff2f8,#ffe0ee); border:1.5px solid #ffdcea;
  display:flex; align-items:center; justify-content:center; }
.sc-art img{ width:88%; height:88%; object-fit:contain; }
#sc-gram{ cursor:pointer; transition:transform .15s; }
#sc-gram:active{ transform:scale(.96); }
.sc-badge{ position:absolute; left:0; right:0; bottom:8px; text-align:center; }
.sc-badge b{ display:block; font-size:26px; font-weight:900; color:#e85d75; text-shadow:0 1px 3px rgba(255,255,255,.8); }
.sc-badge span{ font-size:11px; color:#a24672; }
.sc-name{ margin-top:8px; font-size:14px; font-weight:800; color:#a24672; text-align:center; }
.sc-tip{ display:block; font-size:11px; font-weight:600; color:#c98ca8; margin-top:2px; }
.sc-note{ position:absolute; bottom:30%; font-size:22px; pointer-events:none; animation:scNote 1.3s ease-out forwards; }
@keyframes scNote{ 0%{ transform:translateY(0) scale(.6); opacity:0 } 20%{ opacity:1 } 100%{ transform:translateY(-90px) scale(1.1); opacity:0 } }

/* ---------- 单词星光拼图 ---------- */
.pz-card{ width:min(480px,96vw); padding:18px 16px 22px; }
.pz-top{ text-align:center; margin-bottom:12px; }
.pz-art-wrap{ position:relative; width:240px; height:240px; margin:0 auto 14px; border-radius:18px; overflow:hidden;
  background:linear-gradient(165deg,#fff2f8,#ffe0ee); border:2px solid #ffdcea; box-shadow:0 6px 22px rgba(255,140,185,.18); }
.pz-art-overlay{ position:absolute; inset:0; pointer-events:none; }
.pz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:280px; margin:0 auto 12px; }
.pz-cell{ aspect-ratio:1; border-radius:14px; background:linear-gradient(180deg,#fff7fb,#ffeef6);
  border:2px solid #ffdcea; display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:.18s; font-size:13px; color:#b295a0; }
.pz-cell:hover{ transform:translateY(-2px); border-color:#ff9ecf; box-shadow:0 4px 12px rgba(255,140,185,.18); }
.pz-cell.revealed{ background:linear-gradient(180deg,#e8f7ea,#f0fff4); border-color:#a8e6b8; cursor:default; }
.pz-cell.revealed:hover{ transform:none; box-shadow:none; }
.pz-lock{ font-size:22px; margin-bottom:2px; }
.pz-hint{ font-size:11px; font-weight:700; color:#d6648a; }
.pz-piece{ font-size:28px; }
.pz-status{ text-align:center; font-size:13px; color:#a24672; margin-bottom:10px; }
.pz-status b{ color:#e85d75; }

.pz-q .day-card{ width:min(420px,92vw); }
.pz-q-card{ padding:18px 16px 22px; }
.pz-word-show{ font-family:Georgia,serif; font-size:28px; font-weight:900; color:#a24672; text-align:center; margin:6px 0 4px; word-break:break-word; }
.pz-word-show small{ display:block; font-size:13px; color:#b295a0; font-weight:500; margin-top:2px; }
.pz-q-text{ text-align:center; font-size:15px; font-weight:700; color:#7a4a66; margin:10px 0 14px; }
.pz-opts{ display:flex; flex-direction:column; gap:9px; }
.pz-opt{ padding:12px; border-radius:14px; border:2px solid #ffd0e0; background:#fff7fb; color:#7a4a66;
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s; text-align:left; }
.pz-opt:hover{ border-color:#ff9ecf; }
.pz-opt.right{ border-color:#6bcb77; background:#e8f7ea; color:#3f9a4f; }
.pz-opt.wrong{ border-color:#ff8f8f; background:#ffecec; color:#e05a5a; }

.pz-win{ text-align:center; padding:10px 0; }
.pz-win-art{ width:200px; height:200px; margin:0 auto 10px; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 24px rgba(255,140,185,.22); }

@media (prefers-reduced-motion: reduce){ .sc-note{ animation-duration:.6s; } }
.sc-card{ width:min(440px,94vw); }
.sc-grid{ display:flex; gap:14px; justify-content:center; margin:8px 0 6px; }
.sc-item{ flex:1; max-width:180px; }
.sc-art{ position:relative; height:150px; border-radius:18px; overflow:hidden;
  background:linear-gradient(165deg,#fff2f8,#ffe0ee); border:1.5px solid #ffdcea;
  display:flex; align-items:center; justify-content:center; }
.sc-art img{ width:88%; height:88%; object-fit:contain; }
#sc-gram{ cursor:pointer; transition:transform .15s; }
#sc-gram:active{ transform:scale(.96); }
.sc-badge{ position:absolute; left:0; right:0; bottom:8px; text-align:center; }
.sc-badge b{ display:block; font-size:26px; font-weight:900; color:#e85d75; text-shadow:0 1px 3px rgba(255,255,255,.8); }
.sc-badge span{ font-size:11px; color:#a24672; }
.sc-name{ margin-top:8px; font-size:14px; font-weight:800; color:#a24672; text-align:center; }
.sc-tip{ display:block; font-size:11px; font-weight:600; color:#c98ca8; margin-top:2px; }
.sc-note{ position:absolute; bottom:30%; font-size:22px; pointer-events:none; animation:scNote 1.3s ease-out forwards; }
@keyframes scNote{ 0%{ transform:translateY(0) scale(.6); opacity:0 } 20%{ opacity:1 } 100%{ transform:translateY(-90px) scale(1.1); opacity:0 } }

@media (prefers-reduced-motion: reduce){ .sc-note{ animation-duration:.6s; } }