/* L3 分線：座位頁／私房修行卷／式神圖卡／導師頭像去背後的圓形裁切與鎖住剪影（REVIEW2 #19） */

/* 導師頭像：去背後統一圓形裁切、和紙底色；鎖住階段改成墨線剪影 */
.hero .guide,.summary .guide,.level .avatar{border-radius:50%;object-fit:cover;object-position:top;background:var(--washi)}
.level.locked .avatar{background:transparent;border-color:transparent;box-shadow:none;filter:brightness(0) opacity(.35)} /* 去背後整張壓黑＝墨線剪影；底色要透明否則變灰圓盤 */
@media (prefers-color-scheme:dark){
  .hero .guide,.summary .guide,.level .avatar{background:#2e2b27}
  .level.locked .avatar{filter:brightness(0) invert(1) opacity(.3)}
}

/* 自學區自訂範圍 */
.custom-scope{border-top:1px dashed var(--line);margin-top:10px;padding-top:8px}
.custom-scope h3{font-size:15px;margin:4px 0 6px}
.custom-scope .chk{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;font-size:15px}
.custom-scope .chk input{width:20px;height:20px;margin:0}
.custom-scope .custom-name{flex:1 1 140px;min-width:0;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:15px}
.custom-set{justify-content:space-between;border-top:1px solid var(--line);padding-top:6px}
.custom-set-name{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.mode-card.disabled{opacity:.45;cursor:not-allowed}

/* 座位頁 */
.seat-card.active{border-color:var(--kin);box-shadow:0 0 0 2px #fff8e6,0 1px 0 rgba(31,58,95,.06)}
.seat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.seat-name{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0}
.seat-name input{flex:1;min-width:0;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
.seat-stat{margin:6px 0}
.seat-link a{padding:8px 4px;display:inline-block}

/* 式神圖卡覆蓋層 */
.pet-card-modal{max-width:min(92vw,420px);max-height:90dvh;overflow:auto}
.pet-card-img{display:block;width:100%;max-width:360px;height:auto;margin:0 auto 8px;border:1px solid var(--line);border-radius:10px}
.pet-card-modal .row{justify-content:center}

@media (prefers-color-scheme:dark){
  .custom-scope .custom-name,.seat-name input{background:#2e2b27;border-color:var(--line)}
  .seat-card.active{box-shadow:0 0 0 2px #3a3423}
}