.sbk{--sb-pap: #f5ecd6;--sb-pap2: #e8dbb9;--sb-ink: #2b2013;--sb-ink2: #4a3820;--sb-rule: #b79f6c;--sb-gold: #8a6a26;--sb-gold2: #c9a75a;--sb-leather: #2c1d13;--sb-leather2: #3d2a1b;--sb-leather3: #1b110a;--sb-thread: rgba(233, 214, 166, .5);--sb-col: 64px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;margin:0 0 var(--sp-3)}.sbk:has(.sbk-pages.is-single){max-width:720px}.sbk-board{position:relative;grid-column:1;grid-row:1;min-width:0;padding:18px 18px 12px;border-radius:12px;background:radial-gradient(120% 80% at 50% -10%,rgba(120,80,45,.45),transparent 60%),radial-gradient(90% 70% at 50% 120%,rgba(0,0,0,.45),transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(160deg,var(--sb-leather2),var(--sb-leather) 45%,var(--sb-leather3));box-shadow:0 22px 50px -24px #000000d9,inset 0 1px #ffffff14,inset 0 0 0 1px #c9a75a47,inset 0 0 24px #00000080}.sbk-board:before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--sb-thread);border-radius:8px;opacity:.55;pointer-events:none}.sbk-board:after{--g: linear-gradient(135deg, color-mix(in srgb, var(--sb-gold2) 45%, #fff), var(--sb-gold2) 45%, var(--sb-gold));--r: radial-gradient(circle at 50% 40%, #fff3c4 0, var(--sb-gold2) 35%, var(--sb-gold) 70%, transparent 74%);content:"";position:absolute;inset:0;border-radius:12px;background:var(--r) 7px 7px / 9px 9px no-repeat,var(--r) right 7px top 7px / 9px 9px no-repeat,var(--r) 7px bottom 7px / 9px 9px no-repeat,var(--r) right 7px bottom 7px / 9px 9px no-repeat,var(--g) 0 0 / 30px 4px no-repeat,var(--g) 0 0 / 4px 30px no-repeat,var(--g) right 0 top 0 / 30px 4px no-repeat,var(--g) right 0 top 0 / 4px 30px no-repeat,var(--g) 0 bottom 0 / 30px 4px no-repeat,var(--g) 0 bottom 0 / 4px 30px no-repeat,var(--g) right 0 bottom 0 / 30px 4px no-repeat,var(--g) right 0 bottom 0 / 4px 30px no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));pointer-events:none}.sbk-pages{position:relative;z-index:1;isolation:isolate;min-height:200px;padding:22px 34px 26px;border-radius:4px;color:var(--sb-ink);background:url(/game-art/ui/book-page-left.webp) left top / 50% 100% no-repeat,url(/game-art/ui/book-page-right.webp) right top / 50% 100% no-repeat,linear-gradient(var(--sb-pap2),color-mix(in srgb,var(--sb-pap2) 60%,var(--sb-gold2)));box-shadow:0 2px #0006,0 0 0 1px #00000080;touch-action:pan-y}.sbk-pages:before{content:"";position:absolute;top:0;bottom:0;left:50%;z-index:-1;width:var(--sb-col);margin-left:calc(var(--sb-col) / -2);background:repeating-linear-gradient(180deg,rgba(74,56,32,.75) 0 7px,transparent 7px 13px) center / 2px 100% no-repeat,linear-gradient(90deg,transparent,rgba(90,58,22,.28) 38%,rgba(40,24,8,.6) 50%,rgba(90,58,22,.28) 62%,transparent);pointer-events:none}.sbk-pages.is-single{background:url(/game-art/ui/book-page-right.webp) 0 0 / 100% 100% no-repeat,linear-gradient(var(--sb-pap2),color-mix(in srgb,var(--sb-pap2) 60%,var(--sb-gold2)))}.sbk-pages.is-single:before{content:none}.sbk-curl{display:none;position:absolute;right:0;bottom:0;width:44px;height:44px;background:url(/game-art/ui/book-corner.webp) 0 0 / 100% 100% no-repeat;pointer-events:none}.sbk-pages[data-more] .sbk-curl{display:block}.sbk-head{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding-bottom:10px;background:url(/game-art/ui/book-divider.webp) left bottom / 100% 6px no-repeat}.sbk-pages:not(.is-single) .sbk-head{width:calc(50% - var(--sb-col) / 2)}.sbk-head-ic{flex:none;width:28px;height:28px;border:1px solid #000;border-radius:3px;box-shadow:0 0 0 1px var(--sb-gold2),0 1px 3px #00000073}.sbk-title{margin:0;font:600 19px/1.2 var(--font-display);font-synthesis:none;letter-spacing:.03em;color:var(--sb-ink)}.sbk-count{padding:1px 7px;border-radius:var(--radius-round);font:600 12px/1.3 var(--font-num);font-variant-numeric:tabular-nums;color:var(--sb-ink);box-shadow:inset 0 0 0 1px #4a382073}.sbk-spread{columns:2;column-gap:var(--sb-col)}.sbk-pages.is-single .sbk-spread{columns:1}.sbk-pages.is-in-next .sbk-spread{animation:sbk-in-next .22s var(--ease-out, ease-out)}.sbk-pages.is-in-prev .sbk-spread{animation:sbk-in-prev .22s var(--ease-out, ease-out)}@keyframes sbk-in-next{0%{opacity:.2;transform:translate(28px)}}@keyframes sbk-in-prev{0%{opacity:.2;transform:translate(-28px)}}@media(prefers-reduced-motion:reduce){.sbk-pages.is-in-next .sbk-spread,.sbk-pages.is-in-prev .sbk-spread{animation:none}}[data-js] .sbk [data-off],.sbk-row[hidden],.sbk-empty[hidden]{display:none}.sbk-band-h{margin:10px 0 2px;padding:0 0 7px;font:600 12px/1.3 var(--font-display);font-synthesis:none;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-ink);background:url(/game-art/ui/book-divider.webp) left bottom / 100% 5px no-repeat;break-after:avoid}.sbk-band:first-child .sbk-band-h,[data-js] .sbk-band[data-off]+.sbk-band:not([data-off]) .sbk-band-h{margin-top:0}.sbk-empty{margin:12px 0;font-style:italic;color:var(--sb-ink)}.sbk-row{position:relative;display:block;break-inside:avoid;border-bottom:1px solid rgba(110,76,34,.28)}.sbk .sbk-sum{flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;min-height:52px;padding:6px 6px 6px 20px;border-radius:var(--r-ctl);text-align:left}@media(hover:hover)and (pointer:fine){.sbk .sbk-sum:hover{background:#ffecbe52}}.sbk .sbk-row[open]>.sbk-sum{background:#ffecbe66;box-shadow:inset 0 0 0 1px var(--sb-gold)}.sbk .sbk-sum:focus-visible{outline:2px solid var(--sb-ink);outline-offset:1px;box-shadow:none}.sbk-ic{position:relative;display:inline-flex;flex:none}.sbk-ic .icon-m{box-shadow:none}.sbk-ic:after{content:"";position:absolute;left:-16px;top:-6px;width:58px;height:55px;z-index:2;background:url(/game-art/ui/book-iconframe.webp) 0 0 / 100% 100% no-repeat;pointer-events:none}.sbk-say{display:flex;flex:1 1 auto;flex-direction:column;gap:4px;min-width:0}.sbk-top{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px}.sbk-name{font:600 14.5px/1.2 var(--font-display);font-synthesis:none;letter-spacing:.02em;color:var(--sb-ink);overflow-wrap:anywhere}.sbk .bdg{background:color-mix(in srgb,var(--bdg-h) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bdg-h) 55%,var(--sb-ink));color:color-mix(in srgb,var(--bdg-h) 40%,var(--sb-ink))}.sbk .bdg-info{--bdg-h: var(--sb-gold)}.sbk-tree-ic{flex:none;align-self:flex-start;margin-top:4px;width:18px;height:18px;border:1px solid #000;border-radius:2px;box-shadow:0 0 0 1px #8a6a26b3;opacity:.9}.sbk[data-tree-on] .sbk-tree-ic{display:none}.sbk-chips{display:flex;flex-wrap:wrap;gap:3px}.sbk-chip{min-width:24px;padding:1px 5px 0;border-radius:4px 4px 2px 2px;font:600 11px/15px var(--font-num);font-variant-numeric:tabular-nums;text-align:center;color:var(--sb-ink);text-shadow:0 1px 0 rgba(255,240,205,.45);background:linear-gradient(180deg,#6e481a33,#6e481a14);box-shadow:inset 0 1px 2px #3c230a80,inset 0 -1px #fff0cd66,0 1px #fff0cd59}.sbk-chip.is-new{color:color-mix(in srgb,var(--new) 45%,#000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--new) 85%,#000),inset 0 1px 2px #143c3759}.sbk-chip.is-on{color:#fff3c4;text-shadow:0 1px 0 rgba(0,0,0,.6);background:linear-gradient(180deg,var(--sb-leather2),var(--sb-leather3));box-shadow:inset 0 0 0 1px var(--sb-gold2),inset 0 1px #ffecbe4d,0 1px 1px #00000059}.sbk-chip.is-on.is-new{color:var(--new-on);text-shadow:none;background:linear-gradient(180deg,color-mix(in srgb,var(--new) 55%,#fff),var(--new));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--new) 70%,#000),0 1px 1px #0000004d}.sbk-tabs{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:6px;margin:40px 0 0 -2px}.sbk-tab{position:relative;display:grid;place-items:center;width:54px;height:50px;padding:0 4px 0 0;border:0;border-radius:0 var(--r-ctl) var(--r-ctl) 0;background:linear-gradient(90deg,var(--sb-leather3),var(--sb-leather2) 60%,var(--sb-leather));box-shadow:inset 0 0 0 1px #c9a75a47,3px 3px 8px -2px #0009;cursor:pointer;transition:transform .15s var(--ease-out, ease-out)}.sbk-tab-ic{position:relative;display:block;width:32px;height:32px;background:#000}.sbk-tab-ic img{display:block;width:32px;height:32px}.sbk-tab-ic:after{content:"";position:absolute;left:-9px;top:-10px;width:47px;height:42px;background:url(/game-art/ui/book-tab.webp) 0 0 / 100% 100% no-repeat;pointer-events:none}.sbk-tab[aria-pressed=true]{transform:translate(3px);background:linear-gradient(90deg,var(--sb-leather2),color-mix(in srgb,var(--sb-leather2) 70%,var(--sb-gold2)) 60%,var(--sb-leather2));box-shadow:inset 0 0 0 1px var(--sb-gold2),3px 3px 10px -2px #000000b3}.sbk-tab[aria-pressed=true] .sbk-tab-ic:after{background-image:url(/game-art/ui/book-tab-glow.webp),url(/game-art/ui/book-tab.webp);background-size:100% 100%}.sbk-tab[aria-pressed=false] .sbk-tab-ic img{filter:saturate(.7) brightness(.85)}@media(hover:hover)and (pointer:fine){.sbk-tab:hover .sbk-tab-ic img{filter:none}.sbk-tab:hover{box-shadow:inset 0 0 0 1px #c9a75ab3,3px 3px 8px -2px #0009}}.sbk-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(prefers-reduced-motion:reduce){.sbk-tab{transition:none}}.sbk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 4px 0}.sbk-levels{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.sbk-levels-h{margin-right:4px;font:600 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#e9d6a6}.sbk-levels a{display:inline-grid;place-items:center;min-width:36px;height:32px;padding:0 6px;border-radius:var(--r-ctl);font:600 12px/1 var(--font-num);font-variant-numeric:tabular-nums;color:#e9d6a6;text-decoration:none;background:linear-gradient(160deg,#3d2a1b,#1d1309);box-shadow:inset 0 0 0 1px #c9a75a59}.sbk-levels a[aria-current]{color:#fff3c4;box-shadow:inset 0 0 0 1px var(--sb-gold2),0 0 8px -2px #ffd10080}.sbk-levels a[data-none]{opacity:.4}.sbk-levels a:hover{color:#fff3c4}.sbk-levels a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.sbk-turn{display:flex;align-items:center;gap:8px;margin-left:auto}.sbk-turn[hidden]{display:none}.sbk-pg{min-width:82px;font:600 12px/1 var(--font);font-variant-numeric:tabular-nums;text-align:center;color:#e9d6a6}.sbk-tbtn{width:36px;height:36px;padding:0;border:0;border-radius:var(--r-ctl);background:url(/game-art/ui/book-prev.webp) center / 100% 100% no-repeat;cursor:pointer}.sbk-tbtn.is-next{background-image:url(/game-art/ui/book-next.webp)}.sbk-tbtn:active{background-image:url(/game-art/ui/book-prev-down.webp)}.sbk-tbtn.is-next:active{background-image:url(/game-art/ui/book-next-down.webp)}.sbk-tbtn[disabled]{background-image:url(/game-art/ui/book-prev-off.webp);cursor:default}.sbk-tbtn.is-next[disabled]{background-image:url(/game-art/ui/book-next-off.webp)}.sbk-tbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(pointer:coarse),(max-width:767px){.sbk-tbtn{width:44px;height:44px}.sbk-levels a{min-width:44px;height:44px}}@media(max-width:767px){.sbk{grid-template-columns:minmax(0,1fr)}.sbk-tabs{grid-column:1;grid-row:1;flex-direction:row;margin:0 0 -3px 14px}.sbk-tab{width:52px;height:48px;padding:0 0 4px;border-radius:var(--r-ctl) var(--r-ctl) 0 0}.sbk-tab[aria-pressed=true]{transform:translateY(-3px)}.sbk-board{grid-row:2;padding:10px 8px 8px}.sbk-board:before{inset:4px}.sbk-pages,.sbk-pages.is-single{padding:16px 14px 20px;background:url(/game-art/ui/book-page-right.webp) 0 0 / 100% 100% no-repeat,linear-gradient(var(--sb-pap2),color-mix(in srgb,var(--sb-pap2) 60%,var(--sb-gold2)))}.sbk-pages:before{content:none}.sbk-pages:not(.is-single) .sbk-head{width:auto}.sbk-spread{columns:1}.sbk .sbk-sum{padding-right:2px}.sbk-foot{padding:8px 2px 0}.sbk-turn{width:100%;justify-content:space-between}}@media(max-width:419px){.sbk-tree-ic,.sbk-levels-h{display:none}.sbk-title{font-size:17px}.sbk .sbk-sum{gap:8px;padding-left:18px}}
