/* 傲慢之塔圖鑑（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: 16px; letter-spacing: .1em; }
#toi-book .tb-sum span { color: #e8dcc0; font-size: 16px; 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; align-items: baseline; gap: 2px 6px; }
#toi-book .tb-perm em { font-style: normal; color: #f6dc8c; font-size: 15px; font-weight: 700; letter-spacing: .05em; }
#toi-book .tb-perm small { color: #a8997a; font-size: 13px; }
#toi-book .tb-chips { width: 100%; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
#toi-book .tb-chips span, #toi-book .tb-v span { padding: 3px 10px; border: 1px solid rgba(160,140,100,.5); border-radius: 10px; color: #d6c7a6; font-size: 15px; background: rgba(40,32,20,.6); white-space: nowrap; }
#toi-book .tb-chips span.on, #toi-book .tb-v span.on { border-color: rgba(226,189,107,.8); color: #ffe7a0; background: rgba(70,52,22,.75); font-weight: 700; }
#toi-book .tb-chips span.none { color: #8f8574; border-color: rgba(140,130,110,.4); background: none; }
#toi-book .tb-v span.dim { border: 0; background: none; padding: 2px 0; color: #8f8574; }
#toi-book .tb-v span.nx { border: 0; background: none; padding: 2px 0; width: 100%; color: #9fd67a; font-size: 11px; white-space: normal; }

#toi-book .tb-seg { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 8px 12px 9px; 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.max { border-color: #f2d77f; box-shadow: inset 0 1px 0 rgba(255,230,160,.3), 0 0 14px rgba(242,215,127,.25); }
#toi-book .tb-hd { display: flex; align-items: center; gap: 8px; }
#toi-book .tb-f { min-width: 44px; padding: 1px 7px; border: 1px solid rgba(226,189,107,.85); border-radius: 4px; background: rgba(20,14,6,.92); color: #f6dc8c; font-weight: 700; font-size: 16px; text-align: center; }
#toi-book .tb-rg { flex: 1; color: #d6c7a6; font-size: 16px; }
#toi-book .tb-st { font-style: normal; padding: 2px 10px; border-radius: 10px; border: 1px solid rgba(140,130,110,.5); color: #a8997a; font-size: 13px; 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; }
/* 能力一行（站長 2026-11-03「字太小空洞太多」）：大字能力＋綠字下一級，沒有左欄標籤 */
#toi-book .tb-ab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 2px 0 0; }
#toi-book .tb-ab small { color: #a8997a; font-size: 13px; }
#toi-book .tb-ab b { color: #ffe7a0; font-size: 17px; letter-spacing: .02em; }
#toi-book .tb-seg:not(.open) .tb-ab b { color: #d6c7a6; font-weight: 600; }
#toi-book .tb-ab .nx { color: #9fd67a; font-size: 14px; }
#toi-book .tb-cost { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-top: 2px; }
#toi-book .tb-cost span { display: inline-flex; align-items: center; gap: 3px; }
#toi-book .tb-cost span img { width: 22px; height: 22px; 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: 7px 18px; 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: 15px; 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); }

/* 進塔提示（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; } }