/* 傲慢之塔圖鑑（js/toibook.js）：上面已開通進度＋永久能力合計，底下九段一段一張卡 */
#toi-book .bd { gap: 8px; }
#toi-book .tb-top { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid rgba(214,170,80,.7); border-radius: 8px;
  background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(214,170,80,.16), transparent 70%), linear-gradient(180deg, rgba(44,34,20,.96), rgba(18,13,8,.96)); }
#toi-book .tb-sum { display: flex; align-items: center; gap: 8px; }
#toi-book .tb-sum b { color: #f6dc8c; font-size: 15px; letter-spacing: .1em; }
#toi-book .tb-sum span { color: #e8dcc0; font-size: 14px; font-variant-numeric: tabular-nums; }
#toi-book .tb-sum i { flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #8a6420, #f2d77f var(--p), rgba(255,255,255,.1) var(--p)); }
#toi-book .tb-perm { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
#toi-book .tb-perm em { font-style: normal; color: #a8997a; font-size: 12px; margin-right: 2px; }
#toi-book .tb-perm span { padding: 1px 7px; border: 1px solid rgba(226,189,107,.55); border-radius: 10px; color: #f2d77f; font-size: 12px; background: rgba(60,45,20,.6); }
#toi-book .tb-perm span.none { color: #8f8574; border-color: rgba(140,130,110,.4); background: none; }

#toi-book .tb-seg { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border: 1px solid rgba(160,130,80,.55); border-radius: 8px; background: linear-gradient(180deg, rgba(32,26,18,.95), rgba(14,11,8,.95)); }
#toi-book .tb-seg.open { border-color: rgba(226,189,107,.85); box-shadow: inset 0 1px 0 rgba(255,230,160,.2), 0 0 10px rgba(226,189,107,.12); }
#toi-book .tb-seg.lock { opacity: .55; }
#toi-book .tb-hd { display: flex; align-items: center; gap: 8px; }
#toi-book .tb-f { min-width: 40px; padding: 1px 6px; border: 1px solid rgba(226,189,107,.85); border-radius: 4px; background: rgba(20,14,6,.92); color: #f6dc8c; font-weight: 700; font-size: 14px; text-align: center; }
#toi-book .tb-rg { flex: 1; color: #d6c7a6; font-size: 14px; }
#toi-book .tb-st { font-style: normal; padding: 1px 8px; border-radius: 10px; border: 1px solid rgba(140,130,110,.5); color: #a8997a; font-size: 12px; white-space: nowrap; }
#toi-book .tb-st.on { border-color: #d9b25e; color: #ffe6a6; background: rgba(90,66,26,.6); font-weight: 700; }
#toi-book .tb-st.max { border-color: #f2d77f; color: #1c1306; background: linear-gradient(180deg, #f2d77f, #b8913f); font-weight: 700; }
#toi-book .tb-st.lock { color: #8f8574; }
#toi-book .tb-pm { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
#toi-book .tb-pm em, #toi-book .tb-fl em { font-style: normal; flex: none; color: #a8997a; font-size: 12px; }
#toi-book .tb-pm b { color: #f2d77f; }
#toi-book .tb-seg:not(.open) .tb-pm b { color: #c9b98f; }
#toi-book .tb-pm small { color: #8f8574; font-size: 11px; }
#toi-book .tb-fl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12px; color: #c9b98f; }
#toi-book .tb-fl em { width: 100%; }
#toi-book .tb-fl b { color: #e8dcc0; }
#toi-book .tb-seg.open .tb-fl b { color: #8fd18b; }
#toi-book .tb-fl u { text-decoration: none; margin-left: 3px; color: #f2d77f; }
#toi-book .tb-cost { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
#toi-book .tb-cost span { display: inline-flex; align-items: center; gap: 3px; }
#toi-book .tb-cost span img { width: 20px; height: 20px; object-fit: contain; }
#toi-book .tb-cost .ok { color: #8fd18b; }
#toi-book .tb-cost .no { color: #ef8f84; }
#toi-book .tb-go { margin-left: auto; padding: 5px 14px; border: 1px solid rgba(200,160,80,.8); border-radius: 5px; background: linear-gradient(180deg, #b8913f, #6e521f); color: #1c1306; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
#toi-book .tb-go:disabled { background: #2a2419; color: #7d7364; border-color: #4a3f30; cursor: not-allowed; }

/* 開通／升級儀式的徽章（toibook.js toiCeremony；外框、動畫借 top1.css .t1-crown） */
#toi-cer .tc-emb { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#toi-cer .tc-ic { position: relative; width: 96px; height: 96px; display: grid; place-items: center; border: 2px solid #e2bd6b; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle, rgba(255,220,130,.45), rgba(40,28,10,.95) 70%); box-shadow: 0 0 24px rgba(255,200,90,.8), inset 0 0 14px rgba(0,0,0,.7); }
#toi-cer .tc-ic img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
#toi-cer .tc-ic .hs-fx b { width: 26%; background: #fff; }
#toi-cer .tc-f { padding: 2px 14px; border: 1px solid #e2bd6b; border-radius: 6px; background: linear-gradient(#5a4512, #2a1f08); color: #ffe7a0; font-size: 20px; letter-spacing: 2px; box-shadow: 0 0 12px rgba(255,200,90,.6); }
/* 第 495 項：開通能力升級預覽（→ 下一級的數值） */
#toi-book .tb-pm u { text-decoration: none; color: #9fd67a; font-size: 12px; }

/* 進塔提示（toibook.js toiEnterTip）：畫面上方中間，淡入、停 1.6 秒、淡出（共 2.6 秒）；不擋點擊 */
#toi-enter { position: fixed; left: 50%; top: 18%; z-index: 60; transform: translateX(-50%); max-width: min(92vw, 420px); padding: 10px 16px; pointer-events: none; text-align: center;
  border: 1px solid rgba(226,189,107,.75); border-radius: 10px; background: linear-gradient(rgba(40,30,12,.92), rgba(20,14,6,.92)); box-shadow: 0 0 18px rgba(255,200,90,.35);
  color: #f1e6cf; font-size: 14px; animation: toiEnter 2.6s ease forwards; }
#toi-enter b { display: block; margin-bottom: 4px; color: #ffe7a0; font-size: 16px; letter-spacing: 1px; }
#toi-enter p { margin: 2px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; }
#toi-enter em { font-style: normal; color: #c9b48a; }
#toi-enter span { color: #9fe08f; font-weight: 700; }
@keyframes toiEnter { 0% { opacity: 0; transform: translate(-50%, -8px); } 15% { opacity: 1; transform: translate(-50%, 0); } 77% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #toi-enter { animation: none; } }