/* Floralia · the character window (C, js/charinfo.js #charpanel) in the full-screen standard of the bag page (2026-10-22, the user
   with a picture of it: "เปลี่ยนนี้ด้วย"). Its layout stays (the 1536 × 1024 page scaled to the screen); the painted book, the
   ribbons, the page arrows and the painted buttons give way to the bag page's frame: two dark panels with gold corners, gold
   titles, Prompt, gold-underlined tabs. Loaded after css/style.css; js/charpage.js keeps a light book skin off while it is open. */
#charpanel.book { position: fixed; inset: 0; z-index: 60;
  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); }
#charpanel .bk { font-family: Prompt, Mali, sans-serif; }
/* the two pages: dark panels with the skill page's tile and corners */
#charpanel .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); pointer-events: none; }
#charpanel .bk-book.l { left: 214px; width: 572px; }
#charpanel .bk-book.r { left: 794px; width: 520px; }
#charpanel .bk-book::before, #charpanel .bk-book::after { content: ''; position: absolute; top: -6px; width: 40px; height: 40px; background: url(../assets/ui_skillpage/frame_corner.png) center / contain no-repeat; }
#charpanel .bk-book::before { left: -6px; } #charpanel .bk-book::after { right: -6px; transform: scaleX(-1); }
/* the book's own furniture goes: the ribbons, the side squares, the arrows and page numbers (the top menu leads elsewhere) */
#charpanel .bk-ribbon, #charpanel .bk-sqs, #charpanel .bk-arrow, #charpanel .bk-pageno, #charpanel .bk-esc { display: none !important; }
/* titles in gold */
#charpanel .bk-title { font: 700 30px/1 Prompt, Mali, sans-serif; background: linear-gradient(180deg, #fff6c8, #ffd36a 55%, #d99a2a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #3a2410); }
#charpanel .bk-title img { display: none; }
#charpanel .bk-title.l { left: 240px; top: 134px; } #charpanel .bk-title.r { left: 820px; top: 134px; }
#charpanel .bk-close { left: 1262px; top: 132px; width: 40px; height: 40px; border-radius: 10px !important; border: 1px solid #c9a24a !important; background: linear-gradient(180deg, #4a3418, #2a1c0c) !important; }
#charpanel .bk-close::before { content: '✕'; display: grid; place-items: center; height: 100%; color: #ffe08a; font: 800 18px Prompt, sans-serif; }
#charpanel .bk-pts { left: 1110px; top: 137px; width: 140px; border-radius: 99px; background: #241b2c !important; border: 1px solid #5a4320; font-family: Prompt, sans-serif; }
/* the CP strip: a dark glass bar, not the painted ribbon */
#charpanel .bk-cp { border-radius: 14px; background: linear-gradient(180deg, rgba(58, 42, 22, .95), rgba(30, 20, 10, .95)) !important; border: 1px solid #c9a24a !important; border-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, .25); color: #ffe9b0; padding: 2px 20px !important; height: 52px; font-family: Prompt, sans-serif; }
#charpanel .bk-cp-main i, #charpanel .bk-cp-main b { font-family: Prompt, sans-serif; color: #ffe08a; }
#charpanel .bk-cp-main u { color: #8fe67c; }
/* buttons as the bag page's */
#charpanel .bk-btn { border: 1px solid #8a6a2e !important; border-image: none !important; border-radius: 10px !important; background: linear-gradient(180deg, #34283c, #241b2c) !important; font: 600 17px/35px Prompt, sans-serif !important; }
#charpanel .bk-btn.gold { color: #2c1a08 !important; border-color: #fff0b0 !important; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
#charpanel .bk-best { border-radius: 10px !important; border: 1px solid #fff0b0 !important; border-image: none !important; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a) !important; color: #2c1a08 !important; font-family: Prompt, sans-serif !important; }
/* the tabs: the skill page's gold underline */
#charpanel .bk-tab { border: 0 !important; border-image: none !important; border-radius: 8px 8px 0 0 !important; background: none !important; padding: 0 12px !important; font: 600 15px/35px Prompt, sans-serif !important; color: #c9c0ae !important; }
#charpanel .bk-tab.on { color: #ffe08a !important; background: linear-gradient(180deg, rgba(90, 67, 24, .55), rgba(51, 36, 14, .15)) !important; box-shadow: inset 0 -3px 0 #ffb340; }
/* the rows and cards: quiet dark tiles with a thin gold line */
#charpanel .bk-card, #charpanel .bk-stat { border: 1px solid rgba(201, 162, 74, .3) !important; border-image: none !important; border-radius: 10px; background: rgba(0, 0, 0, .28) !important; font-family: Prompt, sans-serif; }
#charpanel .bgpick, #charpanel .bk-bgpick { font-family: Prompt, sans-serif; }
/* the side tabs (js/bookui.js sideTabs): dark tiles with a gold rim, the open one lit, not the cream paper */
#ui #charpanel .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 #charpanel .bk-stab:not(.on) { filter: none; opacity: .85; }
#ui #charpanel .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 #charpanel .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 #charpanel .bk-stab.off { opacity: .45; }