/* /books/: My Treasures, Collection Book, Sparkling Book, Badge Wall. Big buttons, 390px-safe, reduced motion. */
.bk-crumbs { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; }
.bk-crumbs .lg-btn, .bk-crumbs .lg-tab { min-height:60px; }
.bk-crumb { display:inline-flex; align-items:center; text-decoration:none; }
.bk-ring { position:relative; display:inline-grid; place-items:center; width:84px; height:84px; flex:none; }
.bk-ring svg { position:absolute; inset:0; width:100%; height:100%; }
.bk-ring b { position:relative; font-size:19px; font-weight:900; }
.bk-bar { display:block; height:16px; }
.bk-pip { display:flex; gap:12px; align-items:center; margin:18px 0; padding:14px 18px; border-radius:20px; background:rgba(255,227,122,.12); border:2px solid rgba(255,227,122,.35); font-size:20px; font-weight:700; }
.bk-pip-i { width:48px; height:48px; flex:none; } .bk-pip-i svg { width:100%; height:100%; }
.bk-master { margin:14px 0 18px; }
.bk-master-top { display:flex; gap:18px; align-items:center; }
.bk-master-top > div { flex:1; min-width:0; }
.bk-master .bk-ring { width:120px; height:120px; } .bk-master .bk-ring b { font-size:26px; }
.bk-title { display:inline-block; margin:4px 4px 0 0; padding:4px 12px; border-radius:99px; background:linear-gradient(100deg,#ff9de2,#ffd36b); color:#14142a; font-weight:900; }
.bk-show { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-top:16px; }
.bk-show-i { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-height:96px; color:#fff; text-decoration:none; min-width:0; }
.bk-show-i .bw-svg { width:100%; max-width:84px; height:auto; }
.bk-show-i small { font-size:14px; line-height:1.2; overflow-wrap:anywhere; }
.bk-show-empty { justify-content:center; border:3px dashed rgba(255,255,255,.25); border-radius:20px; font-size:34px; font-weight:900; opacity:.7; }
.bk-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:14px; }
.bk-tile { display:flex; gap:14px; align-items:center; min-height:120px; padding:16px 18px; border-radius:22px; text-decoration:none; color:#fff; border:2px solid color-mix(in srgb, var(--c) 60%, transparent); background:linear-gradient(150deg, color-mix(in srgb, var(--c) 35%, transparent), rgba(20,14,44,.75)); }
.bk-tile:hover, .bk-tile:focus-visible { border-color:var(--c); }
.bk-tile-i { font-size:44px; flex:none; }
.bk-tile-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bk-tile-t b { font-size:24px; } .bk-tile-t small { font-size:17px; opacity:.9; }
.bk-next { color:#ffe27a; opacity:1 !important; }
.bk-grown { margin-top:18px; } .bk-grown summary { cursor:pointer; min-height:56px; display:flex; align-items:center; font-weight:800; font-size:20px; }
.bk-gals { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(46%, 180px), 1fr)); gap:12px; margin:16px 0; }
.bk-gal { display:flex; flex-direction:column; align-items:center; gap:6px; min-height:170px; padding:14px 8px; border-radius:22px; border:2px solid color-mix(in srgb, var(--c) 55%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--c) 40%, transparent), rgba(20,14,44,.7)); color:#fff; font:inherit; cursor:pointer; text-align:center; }
.bk-gal b { font-size:19px; line-height:1.2; } .bk-gal small { font-size:16px; opacity:.9; }
.bk-gal.done { box-shadow:0 0 0 3px #ffd36b, 0 0 22px rgba(255,211,107,.5); }
.bk-ten, .bk-rewards { margin:14px 0; }
.bk-rewards .lg-btn-big { font-size:22px; min-height:76px; white-space:normal; text-align:center; }
.bk-rules { margin:8px 0; }
.bk-modal .lg-modal-in { max-width:min(960px, 96vw); }
.bk-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; margin:14px 0; }
.bk-c { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; border-radius:14px; background:rgba(255,255,255,.06); text-align:center; }
.bk-c img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.bk-c:not(.got) img { filter:brightness(0) saturate(0); opacity:.55; }
.bk-c small { font-size:14px; line-height:1.15; overflow-wrap:anywhere; }
.bk-c-n { position:absolute; top:8px; left:8px; z-index:1; min-width:28px; padding:0 6px; border-radius:99px; background:rgba(0,0,0,.65); font-size:13px; font-weight:900; }
.bk-c-ph { display:grid; place-items:center; width:100%; aspect-ratio:4/3; font-size:30px; border-radius:10px; background:rgba(255,255,255,.08); }
.bk-c.got .bk-c-ph { color:#ffe27a; }
.bk-champ, .bk-legend, .bk-mastersec { margin:14px 0; }
.bk-spk .lg-bar { max-width:150px; }
.bk-spk.legend { box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent); }
.bk-spk.unmet .lg-spk-b { display:grid; place-items:center; font-size:30px; font-weight:900; color:#fff; }
.bk-nest { font-size:22px; font-weight:800; margin-top:10px; }
/* badge wall */
.bw-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(30%, 132px), 1fr)); gap:12px; margin:12px 0 18px; }
.bw-b { display:flex; flex-direction:column; align-items:center; gap:4px; min-height:150px; padding:10px 6px; border-radius:20px; border:2px solid rgba(255,255,255,.12); background:rgba(20,14,44,.6); color:#fff; font:inherit; cursor:pointer; text-align:center; min-width:0; }
.bw-b .bw-svg { width:84px; height:84px; }
.bw-b b { font-size:16px; line-height:1.2; overflow-wrap:anywhere; } .bw-b small { font-size:14px; opacity:.85; }
.bw-b:not(.got) { opacity:.75; }
.bw-rar { display:inline-block; padding:2px 10px; border-radius:99px; font-size:15px; font-weight:900; color:#14142a; background:#cfd3e0; margin:2px 0; }
.bw-rar.bw-r-shiny { background:#9de8ff; } .bw-rar.bw-r-rare { background:#ffd36b; } .bw-rar.bw-r-starburst { background:#ff9de2; }
.bw-rar.bw-r-supernova { background:linear-gradient(90deg,#ff9de2,#ffe27a,#9dffb0,#9de0ff,#c9a2ff); background-size:200% 100%; animation:bw-prism 4s linear infinite; }
.bw-b.got.bw-r-supernova .bw-svg, .bk-show-i.bw-r-supernova .bw-svg, .bw-sheet.bw-r-supernova .bw-big .bw-svg { animation:bw-glow 3s ease-in-out infinite; }
.bw-b.got.bw-r-starburst .bw-svg { filter:drop-shadow(0 0 8px rgba(255,157,226,.8)); }
@keyframes bw-prism { to { background-position:200% 0; } }
@keyframes bw-glow { 0%,100% { filter:drop-shadow(0 0 6px #ff9de2) hue-rotate(0deg); } 50% { filter:drop-shadow(0 0 14px #9de0ff) hue-rotate(60deg); } }
.bw-sheet { text-align:center; } .bw-big .bw-svg { width:160px; height:160px; }
.bw-sets { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:12px; }
.bw-set { padding:14px; border-radius:18px; background:rgba(255,255,255,.06); }
.bw-set.done { box-shadow:0 0 0 2px #ffd36b; }
.bw-set-h { display:flex; justify-content:space-between; gap:8px; font-size:19px; }
.bw-check { list-style:none; margin:8px 0; padding:0; font-size:17px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 10px; }
.bw-check li { opacity:.75; overflow-wrap:anywhere; } .bw-check li.got { opacity:1; }
.bw-path { margin:14px 0; }
.bw-trade { margin:18px 0; }
.bw-trade h3 { margin:14px 0 6px; font-size:21px; }
.bw-offers { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.bw-offers li { padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.07); }
.bw-code { font-family:ui-monospace, Menlo, monospace; letter-spacing:.04em; color:#ffe27a; overflow-wrap:anywhere; }
.bw-pick, .bw-keys { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.bw-pick .lg-tab, .bw-keys .lg-tab { min-height:56px; }
.bw-keys .lg-tab { min-width:56px; }
.lg-left { justify-content:flex-start; }
@media (max-width:520px) {
  .bk-master-top { flex-direction:column; text-align:center; }
  .bk-tile { min-height:110px; } .bk-tile-i { font-size:36px; } .bk-tile .bk-ring { width:70px; height:70px; }
  .bw-check { grid-template-columns:1fr; }
  .bk-crumbs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .bk-crumbs .lg-btn, .bk-crumbs .lg-tab { min-height:56px; padding:8px 10px; font-size:18px; justify-content:center; }
  .bk-show { gap:6px; } .bk-show-i small { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bw-rar.bw-r-supernova, .bw-b.got.bw-r-supernova .bw-svg, .bk-show-i.bw-r-supernova .bw-svg, .bw-sheet.bw-r-supernova .bw-big .bw-svg { animation:none; }
}

/* ===== Batch 1 item 5 books: Collector Rank, Shiny Checklist, Wishlist, Binder Cover ===== */
button.bk-c { border:0; color:inherit; font:inherit; cursor:pointer; min-height:96px; }
button.bk-c:not(.got) { border:2px dashed rgba(201,162,255,.6); }
.bk-c.wished { box-shadow:inset 0 0 0 3px #c9a2ff; background:rgba(201,162,255,.16); }
.bk-rank { text-align:center; border:3px solid var(--rc, #ffd36b); }
.bk-rank-i { font-size:64px; margin:0; line-height:1.1; }
.bk-rank h2 { font-size:28px; margin:6px 0; overflow-wrap:anywhere; }
.bk-ranks { list-style:none; padding:0; margin:18px 0; display:grid; gap:10px; }
.bk-rk { display:flex; align-items:center; gap:14px; min-height:72px; padding:10px 16px; border-radius:20px; background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.12); opacity:.8; }
.bk-rk.got { opacity:1; border-color:var(--rc); background:rgba(255,255,255,.09); }
.bk-rk.now { box-shadow:0 0 0 3px var(--rc), 0 0 22px var(--rc); }
.bk-rk-i { font-size:34px; flex:0 0 auto; }
.bk-rk-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.bk-rk-t b { font-size:20px; }
.bk-rk-t small { font-size:15px; opacity:.85; }
.bk-rk-ok { font-size:26px; font-weight:900; color:#5dffa0; }
.bk-shgal { border-left:6px solid var(--c, #8fb4ff); }
.bk-shgal summary { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:20px; cursor:pointer; }
.bk-shc.got { box-shadow:inset 0 0 0 3px #9de0ff; background:rgba(157,224,255,.14); }
.bk-shc:not(.got) img { filter:brightness(0) saturate(0); opacity:.5; }
.bk-wishes { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:16px 0; }
.bk-wish { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; border-radius:20px; background:rgba(255,255,255,.07); border:3px solid var(--c, #c9a2ff); text-align:center; color:#fff; }
.bk-wish-empty { min-height:200px; justify-content:center; border-style:dashed; border-color:rgba(255,255,255,.3); cursor:pointer; font:inherit; font-weight:800; font-size:18px; }
.bk-wish-art { position:relative; width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.3); display:grid; place-items:center; }
.bk-wish-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0) saturate(0); opacity:.5; }
.bk-wish-i { position:relative; font-size:40px; }
.bk-wish small { opacity:.85; font-size:15px; }
.bk-wish-x { min-height:56px; padding:0 14px; font-size:17px; width:100%; }
.bk-coverwrap { margin:14px 0; }
.bk-cover-big { flex-direction:column; align-items:stretch; padding:18px; }
.bk-spots { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:420px; width:100%; margin:0 auto; }
.bk-spot { aspect-ratio:1; min-height:64px; border-radius:50%; border:3px dashed rgba(255,255,255,.55); background:rgba(0,0,0,.18); font-size:clamp(34px, 9vw, 56px); cursor:pointer; color:#fff; }
.bk-cover-big .lg-cover-name { text-align:center; font-size:24px; margin-top:10px; }
.bk-stks { display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:10px; margin:10px 0 18px; }
.bk-stk { min-height:76px; border-radius:20px; border:3px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:36px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px; }
.bk-stk small { font-size:12px; font-weight:800; line-height:1.1; }
.bk-stk.on { border-color:#ffd36b; box-shadow:0 0 0 3px #ffd36b; background:rgba(255,211,107,.2); }
.bk-stk:disabled, .bk-cvb:disabled { opacity:.5; cursor:not-allowed; }
.bk-covers { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:10px 0 18px; }
.bk-cvb { min-height:96px; border-radius:20px; border:3px solid rgba(255,255,255,.25); color:#fff; font:inherit; font-size:18px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; text-shadow:0 2px 6px rgba(0,0,0,.6); padding:8px; }
.bk-cvb[aria-pressed="true"] { border-color:#fff; box-shadow:0 0 0 4px #ffd36b; }
.bk-cvb small { font-size:14px; }