/* PT TOWN — หน้าสมุดสะสม (pb-*) */
.pb-cover{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,#8a4b2c,#b8653a);color:#fff;box-shadow:var(--sh);position:relative;overflow:hidden}
.pb-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(180deg,#6d3a20 0 8px,#7c4428 8px 16px)}
.pb-ring{--p:0;flex:none;width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:6px;
  background:radial-gradient(closest-side,#fff8ee 76%,transparent 77%),conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.25) 0)}
.pb-ring b{font-size:22px;line-height:1;color:#7a3c18}
.pb-ring small{font-size:11px;color:#9a6a4a}
.pb-cover-t{min-width:0}
.pb-cover h1{margin:0;font-size:19px}
.pb-cover p{margin:4px 0 0;font-size:13px;opacity:.95}
.pb-legend{display:flex;flex-wrap:wrap;gap:6px}
.pb-lg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.18)}
.pb-lg::before{content:"";width:10px;height:10px;border-radius:3px;background:#fff}
.pb-lg.is-miss::before{background:#5b4a44}
.pb-lg.is-sec::before{background:#b28cff}

.pb-tabs{margin-top:12px}
.pb-tabs button{display:inline-flex;align-items:center;gap:6px}
.pb-tabs button small{font-size:11px;font-weight:600;color:var(--muted)}
.pb-tabs button.on small{color:#ffd9a8}
.pb-tabs button.is-sec{border-color:#cdb4ff;color:var(--secret);background:var(--secret-wash)}
.pb-tabs button.is-sec.on{background:var(--secret);border-color:var(--secret);color:#fff}
.pb-tabs button.is-done small{color:var(--ok)}

.pb-book{margin-top:4px;padding:14px;border-radius:var(--r);background:#fffaf1;border:1px solid #efdcc0;box-shadow:var(--sh);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(222,196,160,.25) 31px 32px)}
.pb-page-h{display:flex;align-items:center;gap:10px}
.pb-ic{flex:none;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid #efdcc0;display:flex;align-items:center;justify-content:center;font-size:22px}
.pb-page-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pb-page-t b{font-size:17px}
.pb-page-t small{font-size:12px;color:var(--muted)}
.pb-cnt{flex:none;font-weight:700;font-size:18px;color:var(--brand)}
.pb-bar{height:10px;margin:10px 0 12px;border-radius:99px;background:#f0e2cf;overflow:hidden}
.pb-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffb347,var(--brand));transition:width .4s}
.pb-book.is-sec .pb-bar i{background:linear-gradient(90deg,#b28cff,var(--secret))}
.pb-book.is-sec .pb-cnt{color:var(--secret)}

.pb-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.pb-rw{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.pb-rw b{font-size:13.5px}
.pb-rw small{font-size:12px;color:var(--muted);min-height:16px}
.pb-rw .ptm-btn{padding:8px 10px;font-size:13.5px;width:100%}
.pb-rw.is-ready{border-color:var(--gold);background:#fff9e6}
.pb-rw.is-got{opacity:.8}
.pb-rw.is-got .ptm-btn{background:#e9f6ee;color:var(--ok)}

.pb-filter{display:flex;gap:6px;margin-bottom:10px}
.pb-filter button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink2)}
.pb-filter button.on{background:var(--brand-wash);border-color:var(--brand);color:var(--brand-ink)}

.pb-sub{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-weight:700;font-size:14.5px;color:var(--secret)}
.pb-sub small{font-weight:600;font-size:12px;color:var(--muted)}
.pb-sub:first-child{margin-top:0}
.pb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(min-width:560px){.pb-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:900px){.pb-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.pb-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;min-width:0;font:inherit;color:inherit}
.pb-slot:hover{border-color:var(--brand)}
.pb-th{position:relative;width:100%;aspect-ratio:1/1;border-radius:9px;background:#fff3e4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pb-th img{width:100%;height:100%;object-fit:contain;display:block}
.pb-th .pb-emo{font-size:32px;line-height:1}
.pb-nm{width:100%;font-size:11.5px;line-height:1.25;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-slot .ptm-tag{top:3px;left:3px;padding:1px 6px;font-size:10px;z-index:1}
/* ยังไม่มี = เงาดำ + เครื่องหมายคำถาม */
.pb-slot.is-miss .pb-th{background:#efe6dc}
.pb-slot.is-miss .pb-th img,.pb-slot.is-miss .pb-th .pb-emo{filter:brightness(0);opacity:.28}
.pb-slot.is-miss .pb-th::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#8a7466}
.pb-slot.is-miss .pb-nm{color:var(--muted)}
/* ของลับ secret */
.pb-slot.is-sec{border-color:#cdb4ff}
.pb-slot.is-sec .pb-th{background:var(--secret-wash)}
.pb-slot.is-lock{background:linear-gradient(160deg,#5a2fb0,#7b3fe4);border-color:#5a2fb0;color:#fff}
.pb-slot.is-lock .pb-th{background:rgba(255,255,255,.12)}
.pb-slot.is-lock .pb-th::after{content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px}
.pb-slot.is-lock .pb-nm{color:#e6d9ff;font-weight:700;letter-spacing:.5px}
.pb-empty{padding:20px;text-align:center;color:var(--muted)}

/* กล่องรายละเอียดของ */
.pb-dt{display:flex;flex-direction:column;align-items:center;gap:10px}
.pb-dt .pb-th{width:140px;border:1px solid var(--line)}
.pb-dt .pb-th .pb-emo{font-size:64px}
.pb-dt.is-miss .pb-th img,.pb-dt.is-miss .pb-th .pb-emo{filter:brightness(0);opacity:.3}
.pb-dt.is-lock .pb-th{background:linear-gradient(160deg,#5a2fb0,#7b3fe4)}
.pb-dt.is-lock .pb-th::after{content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px}
.pb-dt .ptm-rows{width:100%}
.pb-dt .ptm-rows b{text-align:right}
.pb-where{width:100%;padding:10px 12px;border-radius:12px;background:var(--brand-wash);color:var(--brand-ink);font-size:13.5px}
.pb-dt.is-lock .pb-where{background:var(--secret-wash);color:var(--secret)}
.ptm-dlg-f a.ptm-btn,.ptm-dlg-f a.ptm-btn:hover{color:#fff;text-decoration:none}
.ptm-dlg-f .ptm-btn{flex:1}
.pb-rw .ptm-btn[disabled]{background:#f1ebe4;color:var(--muted);opacity:1}
.pb-rw.is-got .ptm-btn[disabled]{background:#e9f6ee;color:var(--ok)}
.pb-th img:not([src]){visibility:hidden}