/* =========================================================
   v9.15 收藏板與收藏冊（js/showcase.js）：名片上的縮圖、看收藏、編輯收藏
   ========================================================= */
/* ---------- 名片上的「收藏」那一格 ---------- */
.sc-lic{margin:0 14px 10px;padding:5px 8px 8px;background:#00000010;border:2px dashed var(--lsub,#8a5a12)}
.sc-lic.empty{padding:6px 8px}
.sc-lic .nt-show-h em{margin-left:auto;font-style:normal;font-size:10px;opacity:.8}
.sc-lic-row{display:flex;gap:12px;margin-top:5px;flex-wrap:wrap}
.sc-thumb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;margin:0;background:none;border:0;cursor:pointer;font:inherit}
.sc-thumb:hover .sc-board,.sc-thumb:hover .sc-binder{transform:translateY(-3px)}
.sc-cap{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:900;color:var(--link,#3d2308)}
.sc-lk{font-style:normal;padding:0 5px;font-size:10.5px;line-height:15px;color:#fff;background:#d84a6a;border:2px solid #000}
.sc-lk.on{background:#e0392b}

/* ---------- 收藏板：場景＋站著的卡 ---------- */
.sc-board{--w:110px;position:relative;flex:0 0 auto;width:var(--w);height:calc(var(--w) * 4 / 3);overflow:hidden;border:3px solid #000;
  box-shadow:0 4px 0 #0006;transition:transform .15s;isolation:isolate;background:#1d1a2e}
.sc-board.big{--w:250px;border-width:4px}
.sc-board>i{position:absolute;pointer-events:none}
.sc-bg{inset:0;z-index:0}
.sc-light{inset:0;z-index:1}
.sc-surf{left:0;right:0;bottom:0;height:30%;z-index:2}
.sc-glare{inset:-30%;z-index:9;background:linear-gradient(115deg,#fff0 42%,#ffffff2a 50%,#fff0 58%);animation:sc-glare 6s ease-in-out infinite}
@keyframes sc-glare{0%,62%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.sc-none{position:absolute;left:8%;right:8%;top:38%;z-index:5;text-align:center;font-size:11px;font-weight:900;color:#fff;text-shadow:0 1px 0 #000,0 0 6px #000}
.sc-board.big .sc-none{font-size:15px}
.sc-item{position:absolute;left:50%;bottom:13%;z-index:4;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.sc-shadow{position:absolute;left:50%;bottom:-4px;width:120%;height:10px;transform:translateX(-50%);background:radial-gradient(ellipse,#000a,#0000 70%);z-index:-1}
.sc-hold{position:relative;display:flex;flex-direction:column;align-items:center}
.sc-item.slab .gslab{zoom:.4;cursor:default;animation:sc-float 4s ease-in-out infinite}
.sc-board.big .sc-item.slab .gslab{zoom:.82}
.sc-item .gslab:hover{transform:none}
@keyframes sc-float{0%,100%{translate:0 0}50%{translate:0 -2px}}
/* 角色卡：裝進壓克力磁吸卡磚（四個角落有螺絲），下面一個小底座 */
.sc-acrylic{position:relative;padding:7px;background:linear-gradient(135deg,#ffffff70,#ffffff22 45%,#ffffff48);border:2px solid #ffffffc8;border-radius:3px;
  box-shadow:inset 0 0 0 1px #ffffff55,0 0 0 1px #0006,0 6px 12px #0007}
.sc-acard{zoom:.46}
.sc-board.big .sc-acard{zoom:1}
.sc-board.big .sc-acrylic{padding:12px;border-width:3px}
.sc-screw{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9aa3b2 60%,#4a4f5c);box-shadow:0 0 0 1px #0007}
.sc-board.big .sc-screw{width:9px;height:9px}
.sc-screw.a{left:2px;top:2px}.sc-screw.b{right:2px;top:2px}.sc-screw.c{left:2px;bottom:2px}.sc-screw.d{right:2px;bottom:2px}
.sc-board.big .sc-screw.a{left:3px;top:3px}.sc-board.big .sc-screw.b{right:3px;top:3px}.sc-board.big .sc-screw.c{left:3px;bottom:3px}.sc-board.big .sc-screw.d{right:3px;bottom:3px}
.sc-base{display:block;width:84%;height:6px;margin-top:-1px;background:linear-gradient(#ffffff90,#ffffff30);border:1px solid #ffffffb0;border-top:0;clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.sc-board.big .sc-base{height:12px}
.sc-item.acr .tcard{cursor:default}

/* 場景（v9.15.1）：畫布畫的照片（js/scenes.js 的 scSceneEnsure 插 `.sc-<id> .sc-bg{background-image}`）；
   CSS 只管底色（圖還沒畫好的那一瞬間）、會動的小東西（.sc-light 的 ::before／::after）、光滑檯面上的倒影 */
.sc-bg{background:#1d1a2e center/cover no-repeat}
.sc-marble .sc-bg{background-color:#e6e1d8}.sc-wood .sc-bg{background-color:#3a2416}.sc-night .sc-bg{background-color:#141a40}
.sc-sakura .sc-bg{background-color:#ffd9e6}.sc-space .sc-bg{background-color:#0a0620}.sc-spot .sc-bg{background-color:#0a070c}
.sc-surf{display:none}
.sc-light{overflow:hidden}
.sc-light::before,.sc-light::after{content:'';position:absolute;left:-15%;right:-15%;top:-100%;height:200%;background-size:100% 50%;opacity:0;pointer-events:none}
/* 櫻花：兩層花瓣往下飄（近的大、快） */
.sc-sakura .sc-light::before{opacity:.9;animation:sc-fall 13s linear infinite;background-image:
  radial-gradient(ellipse 1.7% 1% at 10% 14%,#ffc1d5 70%,#0000 100%),radial-gradient(ellipse 1.4% .8% at 38% 4%,#ffd6e4 70%,#0000 100%),
  radial-gradient(ellipse 1.6% .9% at 66% 26%,#ffb3cc 70%,#0000 100%),radial-gradient(ellipse 1.3% .8% at 24% 40%,#ffc1d5 70%,#0000 100%),
  radial-gradient(ellipse 1.7% 1% at 86% 9%,#ffd6e4 70%,#0000 100%),radial-gradient(ellipse 1.4% .8% at 54% 44%,#ffb3cc 70%,#0000 100%),
  radial-gradient(ellipse 1.5% .9% at 92% 36%,#ffc1d5 70%,#0000 100%)}
.sc-sakura .sc-light::after{opacity:.85;animation:sc-fall2 8s linear infinite;background-image:
  radial-gradient(ellipse 2.6% 1.5% at 18% 30%,#ffb8cf 70%,#0000 100%),radial-gradient(ellipse 2.3% 1.3% at 72% 12%,#ffcadb 70%,#0000 100%),
  radial-gradient(ellipse 2.4% 1.4% at 48% 46%,#ffb8cf 70%,#0000 100%)}
@keyframes sc-fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(5%,50%) rotate(2deg)}}
@keyframes sc-fall2{from{transform:translate(0,0)}to{transform:translate(-4%,50%)}}
/* 星空：兩層星星輪流閃 */
.sc-space .sc-light::before,.sc-space .sc-light::after{top:0;height:66%;left:0;right:0;background-size:auto}
.sc-space .sc-light::before{animation:sc-twinkle 3.2s ease-in-out infinite;background-image:
  radial-gradient(circle at 14% 22%,#fff 0 .6%,#0000 1.4%),radial-gradient(circle at 62% 12%,#cfe0ff 0 .5%,#0000 1.2%),radial-gradient(circle at 82% 52%,#fff 0 .6%,#0000 1.4%),
  radial-gradient(circle at 34% 64%,#ffe6c8 0 .5%,#0000 1.2%),radial-gradient(circle at 48% 34%,#fff 0 .4%,#0000 1%)}
.sc-space .sc-light::after{animation:sc-twinkle 4.4s ease-in-out 1.6s infinite;background-image:
  radial-gradient(circle at 24% 46%,#fff 0 .5%,#0000 1.2%),radial-gradient(circle at 74% 28%,#ffe6c8 0 .6%,#0000 1.4%),radial-gradient(circle at 90% 18%,#cfe0ff 0 .4%,#0000 1%),
  radial-gradient(circle at 8% 70%,#fff 0 .5%,#0000 1.2%),radial-gradient(circle at 56% 58%,#fff 0 .4%,#0000 1%)}
@keyframes sc-twinkle{0%,100%{opacity:0}50%{opacity:1}}
/* 聚光燈：光束裡的灰塵慢慢往上飄 */
.sc-spot .sc-light::before{left:30%;right:30%;opacity:.8;animation:sc-dust 16s linear infinite reverse;background-image:
  radial-gradient(circle at 20% 10%,#fff3d6 0 1.2%,#0000 2%),radial-gradient(circle at 70% 24%,#fff3d6 0 .9%,#0000 1.6%),radial-gradient(circle at 44% 38%,#fff3d6 0 1%,#0000 1.8%),
  radial-gradient(circle at 86% 6%,#fff3d6 0 .8%,#0000 1.4%),radial-gradient(circle at 30% 46%,#fff3d6 0 .9%,#0000 1.6%)}
@keyframes sc-dust{from{transform:translateY(0)}to{transform:translateY(50%)}}
/* 夜景：窗外的光點一明一暗 */
.sc-night .sc-light::before{top:0;height:66%;left:0;right:0;background-size:auto;animation:sc-twinkle 5s ease-in-out infinite;background-image:
  radial-gradient(circle at 22% 40%,#ffd98a88 0 3%,#0000 6%),radial-gradient(circle at 70% 30%,#8fd8ff88 0 2.5%,#0000 5%),radial-gradient(circle at 52% 62%,#ff9ac888 0 3%,#0000 6%)}
/* 書桌：檯燈的光一直在「呼吸」 */
.sc-wood .sc-light::before{top:-20%;height:120%;left:-30%;right:30%;background:radial-gradient(circle at 30% 25%,#ffc36e55,#0000 60%);animation:sc-breath 5s ease-in-out infinite}
@keyframes sc-breath{0%,100%{opacity:.35}50%{opacity:.75}}
/* 光滑的檯面（大理石、窗台、黑曜石平台）：卡片底下有一點倒影（只有 Chrome／Safari 有，其他瀏覽器就是沒有倒影） */
.sc-marble .sc-hold,.sc-night .sc-hold,.sc-space .sc-hold{-webkit-box-reflect:below 1px linear-gradient(transparent 62%,rgba(255,255,255,.3))}

/* ---------- 收藏冊：封面 ---------- */
.sc-binder{--w:110px;position:relative;flex:0 0 auto;width:var(--w);height:calc(var(--w) * 4 / 3);display:flex;flex-direction:column;padding:6px 6px 0 12px;
  background:linear-gradient(135deg,#4a2a6a,#2a1640);border:3px solid #000;border-radius:2px 6px 6px 2px;box-shadow:0 4px 0 #0006,inset 0 0 0 2px #ffffff22;transition:transform .15s}
.sc-binder.big{--w:250px;padding:10px 10px 0 22px;border-width:4px}
.sc-spine{position:absolute;left:0;top:0;bottom:0;width:9px;background:repeating-linear-gradient(#1d1a2e 0 10%,#c7ccd6 10% 13%,#1d1a2e 13% 23%);border-right:2px solid #000}
.sc-binder.big .sc-spine{width:16px}
.sc-cover{position:relative;flex:1;min-height:0;border:2px solid #000;background:#1d1a2e;overflow:hidden}
.sc-cover canvas{display:block;width:100%;height:100%}
.sc-cshine{position:absolute;inset:0;background:linear-gradient(120deg,#fff0 30%,#ffffff33 45%,#fff0 60%);pointer-events:none}
.sc-band{display:flex;flex-direction:column;align-items:center;padding:3px 2px 5px;line-height:1.2;text-align:center}
.sc-band b{max-width:100%;font-size:11px;font-weight:900;color:#ffe9a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.sc-band small{font-size:9px;font-weight:800;color:#d9c8f5}
.sc-binder.big .sc-band{padding:6px 4px 9px}
.sc-binder.big .sc-band b{font-size:17px}
.sc-binder.big .sc-band small{font-size:11.5px}
/* ---------- 收藏冊：內頁（3×3） ---------- */
.sc-page{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:9px;background:linear-gradient(#fffdf5,#efe3c4);border:4px solid #000;box-shadow:0 4px 0 #0006}
.sc-cell{position:relative;width:74px;height:104px;display:grid;place-items:center;background:#e9dcbc;border:2px solid #c9b07a;box-shadow:inset 0 2px 4px #0002;overflow:hidden}
.sc-cell.empty{background:repeating-linear-gradient(45deg,#efe3c4 0 6px,#e6d6b0 6px 12px);border-style:dashed}
.sc-cell .tcard{zoom:.66;cursor:default}
.sc-cell .gslab{zoom:.6;cursor:default}
.sc-cell .gslab:hover{transform:none}
.sc-page.edit .sc-cell:not(.empty){cursor:pointer}
.sc-x{position:absolute;right:1px;top:1px;z-index:3;width:16px;height:16px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:#c2372f;border:2px solid #000}
.sc-vbook{display:flex;gap:12px;align-items:center;justify-content:center}

/* ---------- 看收藏 ---------- */
.sc-view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.sc-view .sc-board.big{--w:240px}
.sc-view .sc-binder.big{--w:228px}
.sc-vfoot{display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;font-weight:900;color:#3d2308}
.sc-like{padding:6px 16px;font-size:14px}
.sc-like b{margin-left:8px;padding:0 6px;font-size:12px;color:#fff;background:#d84a6a;border:2px solid #000}
.sc-likes{padding:2px 10px;font-size:13px;color:#fff;background:#d84a6a;border:2px solid #000}

/* ---------- 編輯收藏 ---------- */
.sc-edit{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:10px}
.sc-edit.binder{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.sc-ecol{min-height:0;display:flex;flex-direction:column;gap:6px}
.sc-eprev{align-items:center;justify-content:center}
.sc-eprev .sc-board.big{--w:216px}
.sc-eprev .sc-binder.big{--w:170px}
.sc-eprev .sc-cell{width:62px;height:88px}
.sc-eprev .sc-cell .tcard{zoom:.55}
.sc-eprev .sc-cell .gslab{zoom:.5}
.sc-tip{font-size:11px;font-weight:800;color:#8a5a12}
.sc-eform{overflow-y:auto;padding-right:3px}
.sc-eform>*{flex-shrink:0}                     /* 表單太長就整欄捲動，不要把封面列、選卡區擠扁 */
.sc-src{display:flex;gap:6px}
.sc-src .nt-ttl{flex:1}
.sc-pick{flex:0 0 auto;min-height:120px;max-height:186px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px 8px;align-content:flex-start;padding:8px;background:#2a1408;border:3px solid #000}
.sc-pk{position:relative;padding:0;margin:0;background:none;border:0;cursor:pointer;font:inherit}
.sc-pk.slab .gslab{zoom:.62}
.sc-pk.card .tcard{zoom:.86}
.sc-pk.on{outline:3px solid #ffd75e;outline-offset:2px}
.sc-scenes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sc-scn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px;cursor:pointer;font:inherit;background:#fffaf0;border:3px solid #000}
.sc-scn .sc-board{--w:58px;border-width:2px;box-shadow:none}
.sc-scn .sc-none{display:none}
.sc-scn small{font-size:9.5px;font-weight:900;color:#3d2308;white-space:nowrap}
.sc-scn.on{background:linear-gradient(#ffd98a,#f0b429);transform:translateY(-2px)}
.sc-covers{display:flex;flex-wrap:wrap;gap:4px;max-height:108px;overflow-y:auto;padding:4px;background:#fffaf0;border:3px solid #000}
.sc-cvr{width:46px;height:50px;padding:0;cursor:pointer;background:#2a1408;border:2px solid #000}
.sc-cvr canvas{display:block;width:40px;height:44px;margin:1px auto}
.sc-cvr.on{outline:3px solid #ffd75e;outline-offset:1px}
#sc-title{padding:6px 9px;font:inherit;font-size:14px;font-weight:800;color:#3d2308;background:#fffdf5;border:3px solid #000}

/* 手機直立 */
@media (max-width: 700px){
  .sc-edit,.sc-edit.binder{grid-template-columns:1fr}
  .sc-vbook{flex-direction:column}
  .sc-scenes{grid-template-columns:repeat(3,1fr)}
}
/* 名片上的縮圖小一點（玩家證本來就很擠） */
.sc-lic .sc-board,.sc-lic .sc-binder{--w:84px}
.sc-lic .sc-binder{padding:4px 4px 0 10px}
.sc-lic .sc-spine{width:7px}
.sc-lic .sc-band b{font-size:10px}
.sc-lic .sc-item.slab .gslab{zoom:.32}
.sc-lic .sc-acard{zoom:.36}
/* 看收藏冊：封面＋內頁要塞進面板的高度 */
.sc-view .sc-binder.big{--w:196px}
.sc-view .sc-page{padding:7px;gap:5px}
.sc-view .sc-cell{width:66px;height:90px}
.sc-view .sc-cell .tcard{zoom:.58}
.sc-view .sc-cell .gslab{zoom:.54}