/* 寵物、掛機設定、紀錄、卡片圖鑑（js/pets.js、idle.js、logs.js、album.js） */
/* HUD 入口：用 items.webp（6×6）當圖示 */
.ic.i6{background-image:url(../art/ui/items.webp);background-size:600% 600%}
/* 2026-11-13 業主畫的圓形按鈕（art/icons/pets.webp 第 3 列，tools/petart.mjs）：圖示本身就是按鈕（金框＋深紫底），不再疊方形底板 */
#petBtn,#idleBtn,#logBtn,#albumBtn{background:none!important}
.ic.i7{width:100%!important;height:100%!important;background:url(../art/icons/pets.webp) 0 100%/600% 300% no-repeat;border-radius:50%;filter:drop-shadow(0 1px 1.5px rgba(20,16,50,.55))}
/* 寵物用品圖示（同一張圖第 1、2 列）、面板裡的寵物圖（art/pets1|2|3.webp 切圖） */
.pic{display:inline-block;flex:none;background:url(../art/icons/pets.webp) 0 0/600% 300% no-repeat;vertical-align:middle}
small .pic{vertical-align:-4px}
.petFace{display:block;background-repeat:no-repeat;margin:auto}
.petImg{min-height:48px;align-items:center}
#rcol #petBtn,#rcol #idleBtn,#rcol #logBtn,#rcol #albumBtn{flex:none}
/* 直式手機由 HUD 改版（css/hud2.css、js/hud2.js）把整個 #rcol 搬進「更多」抽屜，這裡不另外排 */
/* 橫式手機：上方一排已經很擠，新的四個縮小 */
@media (orientation:landscape) and (max-height:540px){
  #rcol>#petBtn,#rcol>#idleBtn,#rcol>#logBtn,#rcol>#albumBtn{width:32px;height:32px}
  #rcol>#petBtn .ic,#rcol>#idleBtn .ic,#rcol>#logBtn .ic,#rcol>#albumBtn .ic{width:22px;height:22px}
  #rcol>#petBtn u,#rcol>#idleBtn u,#rcol>#logBtn u,#rcol>#albumBtn u{font-size:9px;letter-spacing:-.5px;left:-8px;right:-8px}
}
/* 桌機：右邊一欄放不下九個，新的四個排在左邊第二欄 */
html.pc #rcol{display:grid;grid-template-columns:auto auto;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:11px 12px}
html.pc #rcol>#petBtn,html.pc #rcol>#idleBtn,html.pc #rcol>#logBtn,html.pc #rcol>#albumBtn{grid-column:1}
html.pc #rcol>.rb:not(#petBtn):not(#idleBtn):not(#logBtn):not(#albumBtn){grid-column:2}
/* ---------- 寵物 ---------- */
.petRow{align-items:flex-start}
.petRow.on{background:rgba(255,190,90,.25);border-color:#e0a040}
.petRow .f>b{font-size:14px}
.petRow .pbar{height:14px}
.petRow .pbar span{font-size:10px;line-height:14px}
.petImg{width:48px;flex:none;display:flex;justify-content:center;padding-top:4px}
.petImg .mi{width:44px;height:44px;object-fit:contain}
.petBtns{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;align-items:center}
.petBtns.v{flex-direction:column;margin-top:0;flex:none}
.petBtns.v .gb{min-width:64px}
.petBtns .mini.w{background:linear-gradient(#ffb3a8,#e8645a);border-color:#8a2a22}
/* ---------- 掛機設定 ---------- */
.idleH{text-align:left;font-weight:900;color:#7a4e1e;margin:10px 2px 4px;font-size:12.5px}
.idleSel{flex:none;width:auto;height:28px;font-size:12px;padding:0 4px;margin-right:6px}
.idleBtns{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
#pnB .li .tog{flex:none}
/* ---------- 紀錄 ---------- */
.logSess .logG{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0 4px}
.logSess .logG span{background:rgba(255,255,255,.1);border-radius:8px;padding:3px 2px;text-align:center;font-size:10.5px;line-height:1.25;color:#cfd6ff}
.logSess .logG b{display:block;font-size:13px;color:#fff}
.logSess .logG i{display:block;font-style:normal;font-size:10px;color:#ffe38a}
.logRow{align-items:flex-start;padding:5px 7px}
.logRow .f{font-size:12.5px}
.logIc{flex:none;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:900;font-size:12px;line-height:24px;text-align:center;color:#fff;background:#6f7cc0;margin-top:1px}
.logIc.lgB{background:#e0602e}.logIc.lgO{background:#3fa86a}.logIc.lgX{background:#7a6a8a}
.logW{flex:none;text-align:right;font-size:10.5px;color:#8a6a4a;line-height:1.3;min-width:52px}
.logR{color:#d98200}
.logWin{background:rgba(255,200,80,.2)}
.logLose{background:rgba(120,100,140,.15)}
.logRare{background:rgba(255,170,230,.18);border-color:rgba(220,110,190,.45)}
.logTip{color:#2f7fd6!important}
/* ---------- 卡片圖鑑 ---------- */
.albHd.albGold{border-color:#ffd84a;box-shadow:0 0 0 2px #ffb52e inset,0 0 12px rgba(255,200,60,.6);background:linear-gradient(#5a4a1e,#3a2a10)}
.albTtl{display:inline-block;padding:0 7px;border-radius:9px;background:linear-gradient(#ffe38a,#e0a020);color:#4a2a00;font-size:11.5px;font-weight:900}
.albMs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.albMs span{background:rgba(255,255,255,.08);border-radius:8px;padding:3px 2px;text-align:center;font-size:10px;line-height:1.25;color:#aab;opacity:.75}
.albMs span b{display:block;font-size:12px;color:#ddd}
.albMs span i{display:block;font-style:normal;font-size:9.5px;color:#9aa}
.albMs span.on{background:rgba(255,200,80,.28);color:#fff;opacity:1}
.albMs span.on b{color:#ffe38a}
.albSil .mi,.albSil img{filter:brightness(0);opacity:.35}
.albC.albNo{background:linear-gradient(#efe6d6,#d8cbb2);border-color:#a89878}
.albC small{font-size:10px;line-height:1.2}