/* Fantasy Book (battle_pass_window + pages), prefab units on a 720×1280 stage. Prefix fb-. */
.fantasy-book-view{container-type:inline-size;--u:calc(100cqw / 720);position:relative;background:#f7f2f6;color:#4b4a6e;overflow:hidden}
.fantasy-book-view[hidden]{display:none}
.fb-stage{position:relative;width:100%;height:calc(1280 * var(--u));overflow:hidden}.fb-stage>*{position:absolute;box-sizing:border-box}
.fb-abs{pointer-events:none;max-width:none}
.fb-nav{background:center/100% 100% no-repeat;z-index:4}.fb-tab{position:absolute;border:0;background:center/100% 100% no-repeat;color:#6e7394;font-weight:bold;font-size:calc(24 * var(--u));cursor:pointer}.fb-tab.on{color:#fff;text-shadow:0 1px 2px #3d6fb5}
.fb-top{display:flex;align-items:center;justify-content:center;gap:calc(16 * var(--u));z-index:6;background:linear-gradient(#f8fbff,#e3ebf8)}
.fb-res{display:flex;align-items:center;gap:calc(8 * var(--u));min-width:calc(230 * var(--u));height:calc(44 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(4 * var(--u));background:#fff;border:calc(2 * var(--u)) solid #b9c8e3;border-radius:calc(24 * var(--u))}
.fb-res img{width:calc(40 * var(--u))}.fb-res b{flex:1;text-align:center;font-size:calc(22 * var(--u))}
.fb-back{border:0;background:none;padding:0;width:calc(80 * var(--u));cursor:pointer}.fb-back img{width:100%}
.fb-stage .fb-bnav{position:absolute!important;left:0;right:0;bottom:0;z-index:6}
.fb-logo{z-index:1}.fb-countwrap{background:center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;z-index:1}.fb-count{color:#ffe38a;font-size:calc(18 * var(--u));text-shadow:0 1px 2px #6b3b10}
.fb-sublogo,.fb-tip{margin:0;text-align:center;font-size:calc(19 * var(--u));color:#4b4a6e;text-shadow:0 0 3px #fff,0 0 3px #fff;height:auto!important;z-index:1}.fb-tip{text-align:left}
.fb-buy{border:0;background:center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));color:#fff;font-weight:bold;font-size:calc(20 * var(--u));cursor:pointer;text-shadow:0 1px 2px #1f7a45;z-index:1}.fb-buy img{width:calc(50 * var(--u))}
.fb-help{border:0;background:none;padding:0;cursor:pointer;z-index:2}.fb-help img{width:100%}
.fb-lev{background:center/100% 100% no-repeat;display:flex;align-items:center;gap:calc(14 * var(--u));padding:0 calc(24 * var(--u));z-index:2}
.fb-lvbadge{position:relative;width:calc(120 * var(--u));height:calc(70 * var(--u));background:center/contain no-repeat;display:grid;place-items:center;color:#fff}.fb-lvbadge small{position:absolute;top:calc(2 * var(--u));font-size:calc(15 * var(--u))}.fb-lvbadge b{font-size:calc(32 * var(--u));margin-top:calc(10 * var(--u));text-shadow:0 1px 2px #5a3c9a}
.fb-levmid{flex:1;display:grid;gap:calc(6 * var(--u))}.fb-levhead{display:flex;justify-content:space-between;color:#fff;font-size:calc(21 * var(--u));text-shadow:0 1px 2px #33416f}
.fb-bar{height:calc(14 * var(--u));border-radius:calc(8 * var(--u));background:#2e3a66;overflow:hidden}.fb-bar i{display:block;height:100%;background:linear-gradient(90deg,#7ee4ff,#4fb5ff)}
.fb-plus{width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;border:calc(3 * var(--u)) solid #fff;background:#4c8de6;color:#fff;font-weight:bold;font-size:calc(26 * var(--u));cursor:pointer;padding:0}.fb-plus:disabled{opacity:.4}
.fb-title{background:center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;z-index:2}.fb-title b{font-size:calc(22 * var(--u));color:#5b4f6e}
.fb-rows{overflow-y:auto;scrollbar-width:none;z-index:1;background:linear-gradient(90deg,#efe9ef 0 22%,#faf8fa 22% 56%,#fff8dc 56%)}
.fb-row{display:grid;grid-template-columns:calc(120 * var(--u)) calc(280 * var(--u)) calc(320 * var(--u));height:calc(114 * var(--u));align-items:center;border-bottom:1px solid #e6dfe8}
.fb-rlv{justify-self:center;width:calc(64 * var(--u));height:calc(64 * var(--u));background:center/contain no-repeat;display:grid;place-items:center}.fb-rlv b{font-size:calc(24 * var(--u));color:#b9853a}
.fb-row:not(.reached) .fb-rlv{filter:grayscale(1);opacity:.6}
.fb-rfree,.fb-rpaid{display:flex;justify-content:center;gap:calc(10 * var(--u))}
.fb-item{position:relative;display:inline-grid;place-items:center;width:calc(84 * var(--u));height:calc(84 * var(--u));border-radius:calc(10 * var(--u));background:#fff;box-shadow:0 0 0 calc(2 * var(--u)) #d9d2e2}
.fb-item>img:first-child{width:86%;height:86%;object-fit:contain}.fb-item>b{position:absolute;right:calc(4 * var(--u));bottom:0;font-size:calc(17 * var(--u));color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.fb-item.can{cursor:pointer;box-shadow:0 0 0 calc(3 * var(--u)) #ffd24a,0 0 calc(12 * var(--u)) #ffcf3a;animation:fbglow 1.2s ease-in-out infinite alternate}@keyframes fbglow{to{box-shadow:0 0 0 calc(3 * var(--u)) #ffe98a,0 0 calc(20 * var(--u)) #ffdf6a}}
.fb-item.got{filter:grayscale(.8);opacity:.55}.fb-item.got::after{content:'✔';position:absolute;inset:0;display:grid;place-items:center;color:#4fae3f;font-size:calc(40 * var(--u));font-weight:bold}
.fb-item.locked>img:first-child{filter:grayscale(.3);opacity:.8}.fb-lock{position:absolute;width:calc(34 * var(--u));height:calc(40 * var(--u));left:50%;top:50%;translate:-50% -50%}
.fb-claimall{border:0;border-radius:calc(20 * var(--u));background:linear-gradient(#ffd66b,#f5a623);color:#6b3b10;font-weight:bold;font-size:calc(20 * var(--u));cursor:pointer;z-index:3}
.fb-subtabs{display:flex;justify-content:center;gap:calc(4 * var(--u));z-index:2}.fb-subtab{width:calc(232 * var(--u));height:calc(55 * var(--u));border:0;background:center/100% 100% no-repeat;color:#6e7394;font-weight:bold;font-size:calc(24 * var(--u));cursor:pointer}.fb-subtab.on{color:#4b4a6e}
.fb-refresh{display:flex;justify-content:center;gap:calc(8 * var(--u));font-size:calc(21 * var(--u));color:#4b4a6e;z-index:2}
.fb-tasks{overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));padding:calc(8 * var(--u)) 0 calc(80 * var(--u));z-index:1}
.fb-task{flex:none;position:relative;width:calc(688 * var(--u));min-height:calc(108 * var(--u));display:grid;grid-template-columns:1fr auto calc(170 * var(--u));align-items:center;gap:calc(10 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u));box-sizing:border-box;border:calc(14 * var(--u)) solid transparent;border-image:url('/assets/fantasy-book/9gongge17.png') 20 fill / calc(14 * var(--u)) stretch}
.fb-task.done{filter:saturate(.8)}.fb-tdesc{display:grid;gap:calc(6 * var(--u))}.fb-tdesc b{font-size:calc(21 * var(--u));color:#4b4a6e}.fb-tdesc em{font-size:calc(15 * var(--u));color:#b0869a}
.fb-tbar{position:relative;height:calc(20 * var(--u));border-radius:calc(10 * var(--u));background:#d8dbe7;overflow:hidden}.fb-tbar i{display:block;height:100%;background:linear-gradient(90deg,#8de26a,#4fbe45)}.fb-tbar small{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(15 * var(--u));color:#fff;text-shadow:0 0 2px #000}
.fb-titems{display:flex;gap:calc(6 * var(--u))}.fb-titems .fb-item{width:calc(70 * var(--u));height:calc(70 * var(--u))}
.fb-claim{justify-self:center;width:calc(158 * var(--u));height:calc(54 * var(--u));border:0;background:center/100% 100% no-repeat;color:#fff;font-weight:bold;font-size:calc(22 * var(--u));cursor:pointer;text-shadow:0 1px 2px #1f4c8a}.fb-claim:disabled{filter:grayscale(1);opacity:.6;cursor:default}
.fb-stamp{justify-self:center;width:calc(112 * var(--u))}
.fb-shopnav{background:center/100% 100% no-repeat;z-index:2}.fb-stab{position:absolute;border:0;background:center/100% 100% no-repeat;color:#6e7394;font-weight:bold;font-size:calc(22 * var(--u));cursor:pointer;height:calc(55 * var(--u));width:calc(232 * var(--u))}.fb-stab.on{color:#4b4a6e}
.fb-cost{background:center/100% 100% no-repeat;display:flex;align-items:center;gap:calc(10 * var(--u));padding:0 calc(20 * var(--u));z-index:2}.fb-cost img{width:calc(56 * var(--u))}.fb-cost b{flex:1;text-align:center;font-size:calc(26 * var(--u))}
.fb-shop{overflow-y:auto;scrollbar-width:none;display:grid;grid-template-columns:repeat(3,calc(210 * var(--u)));justify-content:center;align-content:start;gap:calc(12 * var(--u));padding-bottom:calc(90 * var(--u));z-index:1}
.fb-sitem{height:calc(249 * var(--u));background:center/100% 100% no-repeat;display:grid;justify-items:center;align-content:space-between;padding:calc(10 * var(--u)) 0 calc(14 * var(--u))}
.fb-sname{font-size:calc(17 * var(--u));color:#6e6480;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-sitem small{font-size:calc(15 * var(--u));color:#e07a2a}
.fb-sbuy{width:88%;height:calc(46 * var(--u));border:0;border-radius:calc(8 * var(--u));background:#6682c7;color:#fff;display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));font-size:calc(22 * var(--u));cursor:pointer}.fb-sbuy img{width:calc(38 * var(--u))}.fb-sbuy:disabled{background:#b8bccb}
.fb-sitem.sold{filter:grayscale(.6);opacity:.75}
.fb-check{border:0;background:none;padding:0;cursor:pointer;z-index:2}.fb-check img{width:100%}
.fb-draw{border:0;background:center/100% 100% no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));font-size:calc(22 * var(--u));font-weight:bold;cursor:pointer;z-index:2}.fb-draw img{width:calc(40 * var(--u))}.fb-draw small{font-size:calc(16 * var(--u))}
.fb-note{text-align:center;color:#c0392b;font-weight:bold;background:#fffffff0;border-radius:8px;padding:6px;height:auto!important;z-index:8}
.fb-prev{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0}.fb-prev .fb-item{width:54px;height:54px}.fb-prev .fb-item>b{font-size:11px}
.fb-ptitle{display:block;text-align:center;color:#4c6aa5}.fb-step{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0}.fb-step button{width:34px;height:34px;border-radius:50%;border:2px solid #6d8fd0;background:#fff;color:#4c6aa5;font-weight:bold;font-size:18px;cursor:pointer}
.fb-gembtn{display:flex!important;align-items:center;justify-content:center;gap:6px;margin:0 auto}.fb-gembtn img{width:22px}.fb-pnote{font-size:12px;color:#6b7390;text-align:center;margin:8px 0 0}.fb-pnote.warn{color:#b0506a}
.fb-tab{color:#fff7e6;text-shadow:0 1px 2px #6b3b10}.fb-tab.on{color:#7a4a12;text-shadow:none}
.fb-exlogo{object-fit:contain}.fb-logo{object-fit:contain}

.fb-load-error{min-height:100%;display:grid;place-content:center;gap:12px;text-align:center;padding:24px;box-sizing:border-box;background:linear-gradient(#e9f3ff,#f8f0ff);color:#48597a}.fb-load-error h2{margin:0;font-size:28px}.fb-load-error p{margin:0;max-width:420px}
html.gxb-mobile .fantasy-book-view{width:100%!important;height:100%!important;min-height:100%!important;overflow:auto!important;background:#edf4ff}
html.gxb-mobile .fantasy-book-view .fb-stage{width:100%!important;min-height:100%!important}


/* Phone: preserve the original 720x1280 book canvas, center it inside the
   real WebView and paint the remaining tall-screen area with the book scene
   instead of exposing the desktop/body background. */
html.gxb-mobile .fantasy-book-view{
 container-type:size!important;
 --u:min(calc(100cqw / 720),calc(100cqh / 1280))!important;
 display:grid!important;place-items:center!important;
 background:linear-gradient(#dcecff,#f8eff8)!important
}
html.gxb-mobile .fantasy-book-view .fb-stage{
 width:calc(720 * var(--u))!important;
 height:calc(1280 * var(--u))!important;
 min-height:0!important;max-height:none!important;
 position:relative!important;margin:0 auto!important;overflow:hidden!important
}

/* Vietnamese title cards replace title sprites containing embedded English text. */
.fantasy-book-view .fb-logo-vi,.fantasy-book-view .fb-exlogo-vi{
 display:flex;align-items:center;justify-content:center;box-sizing:border-box;
 padding:calc(16 * var(--u));margin:0;text-align:center;text-wrap:balance;
 font:bold calc(43 * var(--u))/1.17 system-ui,sans-serif;
 color:#fff3c3;text-shadow:0 calc(3 * var(--u)) calc(5 * var(--u)) #6b3978,0 0 calc(9 * var(--u)) #3d418f;
 background:radial-gradient(ellipse at center,#9474d4bf 12%,#6543a074 65%,transparent 78%);
}
.fantasy-book-view .fb-exlogo-vi{font-size:calc(39 * var(--u));color:#fff3c2}
.fantasy-book-view .fb-stamp-vi{
 display:flex;align-items:center;justify-content:center;box-sizing:border-box;
 min-height:calc(56 * var(--u));border:calc(3 * var(--u)) solid #8dba82;
 border-radius:calc(7 * var(--u));background:#d6e9d5;
 color:#37743a;font-size:calc(20 * var(--u));font-weight:900;text-align:center;transform:rotate(-7deg)
}