/* Floralia · every remaining book window (js/bookui.js .bookwin: the Esc menu and settings, ตีบวก / ร้านค้า / คราฟต์ / ย่อย,
   the quest book, the skill tree, the world map ...) in the full-screen standard of the bag page (2026-10-22, the user: "หน้าเมนูนี้ด้วย
   ออกแบบใหม่", "ปรับแก้ ui ทั้งหมด ... มาตรฐานเดียวกัน"). The pages keep their layout (the 1536 × 1024 book scaled to the screen);
   the painted book, its ribbons, side squares, page arrows and numbers give way to the bag page's frame: a dark full screen,
   two dark panels with the skill page's tile and gold corners, gold titles, Prompt, dark gold side tabs. Loaded after
   css/style.css, css/escmenu.css and the book skins; js/charpage.js keeps a light book skin off while a book is open. */
#ui .overlay.bookwin { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 200, 110, .10), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(140, 90, 200, .10), transparent 70%), linear-gradient(180deg, #221a2c 0%, #16111e 55%, #100c16 100%);
  box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 0 6px #1a1320, inset 0 0 0 7px #6a5026, inset 0 0 80px rgba(0, 0, 0, .55); }
#ui .overlay.bookwin .panel.bkx { font-family: Prompt, Mali, sans-serif; }
#ui .overlay.bookwin .bkd .bk-book { top: 112px; height: 812px; border-radius: 14px; border: 1px solid #7a5c26;
  background: linear-gradient(180deg, rgba(34, 26, 44, .94), rgba(18, 13, 24, .96)), url(../assets/ui_skillpage/panel_bg.jpg) center / 220px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 22px rgba(0, 0, 0, .4); }
#ui .overlay.bookwin .bkd .bk-book.l { left: 214px; width: 572px; }
#ui .overlay.bookwin .bkd .bk-book.r { left: 794px; width: 520px; }
#ui .overlay.bookwin .bkd .bk-book::before, #ui .overlay.bookwin .bkd .bk-book::after { content: ''; position: absolute; top: -6px; width: 40px; height: 40px; background: url(../assets/ui_skillpage/frame_corner.png) center / contain no-repeat; }
#ui .overlay.bookwin .bkd .bk-book::before { left: -6px; } #ui .overlay.bookwin .bkd .bk-book::after { right: -6px; transform: scaleX(-1); }
#ui .overlay.bookwin .bkd-top .bk-ribbon, #ui .overlay.bookwin .bkd-top .bk-sqs, #ui .overlay.bookwin .bkd-top .bk-arrow, #ui .overlay.bookwin .bkd-top .bk-pageno, #ui .overlay.bookwin .bkd-top .bk-esc { display: none !important; }
/* titles in gold */
#ui .overlay.bookwin .panel-head h2, #ui .overlay.bookwin .bk-title { font-family: Prompt, Mali, sans-serif !important; font-weight: 700; background: linear-gradient(180deg, #fff6c8, #ffd36a 55%, #d99a2a); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 2px 0 #3a2410); }
#ui .overlay.bookwin .panel-head h2 > img, #ui .overlay.bookwin .bk-title > img:not(.bkd-ic) { display: none; }
/* the side tabs: dark tiles with a gold rim, the open one lit */
#ui .overlay.bookwin .bk-stab { left: 70px; width: 150px; padding: 0 12px; border-radius: 12px; font: 600 15px/1.1 Prompt, Mali, sans-serif; color: #e9dcc0;
  background: linear-gradient(180deg, rgba(40, 30, 50, .95), rgba(20, 14, 26, .95)); box-shadow: inset 3px 0 0 var(--sc), 0 0 0 1px rgba(201, 162, 74, .5), 0 3px 6px rgba(0, 0, 0, .5); }
#ui .overlay.bookwin .bk-stab:not(.on) { filter: none; opacity: .85; }
#ui .overlay.bookwin .bk-stab:not(.on):hover { left: 64px; opacity: 1; box-shadow: inset 3px 0 0 var(--sc), 0 0 0 1px #ffd76a, 0 0 10px rgba(255, 215, 106, .4); }
#ui .overlay.bookwin .bk-stab.on { left: 56px; width: 164px; color: #2c1a08; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a); box-shadow: 0 0 0 1px #fff0b0, 0 0 14px rgba(255, 214, 110, .7); }
#ui .overlay.bookwin .bk-stab.off { opacity: .45; }

/* ---- the Esc menu: the systems as gold-ringed round icons (the top bar's), gold section titles with the divider ---- */
#ui #pause.bw-pause .hub-page .hub-sec h3 { font: 600 18px/27px Prompt, Mali, sans-serif; color: #ffe08a !important; border-bottom: 0 !important; position: relative; padding-bottom: 10px; }
#ui #pause.bw-pause .hub-page .hub-sec h3::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 12px; background: url(../assets/ui_skillpage/divider.png) center / 100% 100% no-repeat; }
#ui #pause.bw-pause .hub-page .hub-tile { font: 500 14px/1.2 Prompt, Mali, sans-serif; color: #f3ead6; }
#ui #pause.bw-pause .hub-page .hub-tile .hub-ic { width: 58px; height: 58px; padding: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid transparent;
  background: radial-gradient(circle at 50% 38%, #4a3858, #1c1424 72%) padding-box, linear-gradient(160deg, #fff0b0, #d9a443 45%, #7a5218 100%) border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55), inset 0 -3px 6px rgba(0, 0, 0, .45); transition: box-shadow .15s, transform .12s; }
#ui #pause.bw-pause .hub-page .hub-tile:hover:not(.off):not(.lock) { background: none; }
#ui #pause.bw-pause .hub-page .hub-tile:hover:not(.off):not(.lock) .hub-ic { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, .5), 0 0 12px rgba(255, 215, 106, .6); }
#ui #pause.bw-pause .hub-page .hub-tile:hover:not(.off):not(.lock) .hub-ic img { transform: none; }
#ui #pause.bw-pause .hub-page .hub-tile .hub-badge:not(.net) { top: -6px; right: -8px; background: radial-gradient(circle at 35% 30%, #ff8a9a, #e8384f 55%, #a01830); color: #fff; font: 600 11.5px/20px Prompt, sans-serif;
  box-shadow: 0 0 0 1.5px #fff3e0, 0 0 0 3px #2a0f14; }
#ui #pause.bw-pause .hub-page .hub-tile .hub-badge.net { font-family: Prompt, sans-serif; }
#ui #pause.bw-pause .hub-page .hub-tile kbd { top: 0; left: 2px; border-radius: 4px; background: linear-gradient(180deg, #fff8e4, #f2d89a); color: #2c2533; box-shadow: 0 0 0 1px #3a2610; font: 600 10px/17px Prompt, sans-serif; z-index: 2; }
#ui #pause.bw-pause .hub-page .hub-tile:is(.off, .lock) .hub-ic { filter: grayscale(.9) brightness(.7); }
#ui #pause .hub-act .btn, #ui #pause .pause-actions .btn { font-family: Prompt, sans-serif; }
/* no side tabs (the user: "เอาแท็บด้านข้างออกเลย"): the top menu bar stays above every page for going elsewhere */
#ui .overlay.bookwin .bk-side, #ui #charpanel .bk-side { display: none !important; }

/* ---- calmer, classier (the user: "สวยกว่านี้ได้อีก ดูเรียบง่ายแต่มีระดับ"): no book sparkles over the pages (js/bookfx.js),
   quieter panel rims with a fine top light, a gold divider under each page title, tighter titles ---- */
#ui .overlay.bookwin .bkfx, #ui #charpanel .bkfx { display: none !important; }
#ui .overlay.bookwin { background: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(255, 210, 130, .07), transparent 70%), linear-gradient(180deg, #1e1727 0%, #141019 60%, #0f0c14 100%); }
#ui .overlay.bookwin .bkd .bk-book, #charpanel .bk-book { border-color: rgba(201, 162, 74, .38) !important;
  background: url(../assets/ui_skillpage/divider.png) center 74px / 88% 12px no-repeat, linear-gradient(180deg, rgba(36, 28, 46, .96), rgba(19, 14, 25, .97)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), inset 0 0 0 1px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .45) !important; }
#ui .overlay.bookwin .bkd .bk-book::before, #ui .overlay.bookwin .bkd .bk-book::after, #charpanel .bk-book::before, #charpanel .bk-book::after { width: 30px; height: 30px; top: -4px; opacity: .9; }
#ui .overlay.bookwin .bkd .bk-book::before, #charpanel .bk-book::before { left: -4px; }
#ui .overlay.bookwin .bkd .bk-book::after, #charpanel .bk-book::after { right: -4px; }
#ui .overlay.bookwin .panel-head h2, #ui .overlay.bookwin .bk-title, #charpanel .bk-title { font-size: 27px !important; letter-spacing: .03em; filter: drop-shadow(0 1px 0 #2a1a08); }
#ui #charpanel.book { background: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(255, 210, 130, .07), transparent 70%), linear-gradient(180deg, #1e1727 0%, #141019 60%, #0f0c14 100%); }
/* the enhance page fits its two pages without scrolling (the user: "ออกแบบให้พอดีหน้า"): its parts a little smaller */
#ui .overlay.bookwin .eco-main[data-tab="smith"] > *, #ui .overlay.bookwin .eco-main[data-tab="smith"] + .eco-side > * { zoom: .86; }
/* the pages' content runs to the panels' foot (the old book stopped at 852 for its page numbers, gone now): ~70px more */
#ui .overlay.bookwin .eco-main, #ui .overlay.bookwin .eco-side { height: 712px !important; }
#ui .overlay.bookwin .fz-body > * { zoom: .8; }   /* (the forge page: its dial and rows fit without scrolling) */
/* the daily dungeon's right page, simpler (the user: "ออกแบบให้ดูง่ายกว่านี้"): the foes as pictures (their names in the tooltip),
   the tips behind the 💡 on the heading, the rewards in tidy tiles */
#ui .overlay.bookwin .dgx-mobs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#ui .overlay.bookwin .dgx-mob > b, #ui .overlay.bookwin .dgx-mob > small { display: none; }
#ui .overlay.bookwin .dgx-mob { padding: 4px; aspect-ratio: 1; justify-content: center; }
#ui .overlay.bookwin .dgx-mob .ddg-mpic { width: 52px; height: 50px; }
#ui .overlay.bookwin .dgx-tipi { font-style: normal; cursor: help; margin-left: 4px; }
#ui .overlay.bookwin .dgx-sec h5 { font-family: Prompt, Mali, sans-serif; }