/* Card stats v3 (2026-10-17): the trait line, clickable card lines and their explanation pop-up, the card's power block on
   item pages (js/cards.js lnHtml / C.lineInfo / C.itemStats, js/cardsocket.js). Crisp colours only - no soft text halos. */

/* a card line: click for what it does */
.cd-ln { cursor: help; text-decoration: underline dotted rgba(255, 217, 138, 0.45); text-underline-offset: 3px; }
.cd-ln:hover { text-decoration-color: #ffd98a; }
.cd-ln .cd-lv { font-weight: 700; }
.cd-trn { color: #dcbcff; font-weight: 700; }
:root[data-booklight] .bookwin .cd-trn { color: var(--bk-acc); }
:root[data-booklight] .bookwin .cd-ln { text-decoration-color: color-mix(in srgb, var(--bk-acc) 55%, transparent); }

/* the deck summary: the traits working now */
#ui .bookwin .cd-trs { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#ui .bookwin .cd-trs h5 { margin: 4px 0 2px; font: 700 14px/1.4 'Mali', sans-serif; color: #dcbcff; }
#ui .bookwin .cd-trs h5 small { font-weight: 500; font-size: 12px; color: #b9b1a0; }
#ui .bookwin .cd-trs .cd-ln { display: block; padding: 3px 8px; border-left: 3px solid #b783ff; border-radius: 6px; background: rgba(183, 131, 255, 0.1); font: 500 13px/1.45 'Mali', sans-serif; color: #e9e2cf; }
:root[data-booklight] #ui .bookwin .cd-trs h5 { color: var(--bk-acc); }
:root[data-booklight] #ui .bookwin .cd-trs h5 small { color: var(--bk-ink); }
:root[data-booklight] #ui .bookwin .cd-trs .cd-ln { color: var(--bk-ink); background: color-mix(in srgb, var(--bk-acc) 10%, #fffdf8); border-left-color: var(--bk-acc); }

/* the explanation pop-up */
.cd-lpop { position: fixed; z-index: 100000; max-width: min(340px, 92vw); padding: 10px 30px 10px 12px; border-radius: 12px; background: #1d1a14; border: 2px solid #d9a443; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); color: #f1ead6; font: 500 13px/1.55 'Mali', sans-serif; }
.cd-lpop b { color: #ffd98a; }
.cd-lpop .cd-trn { color: #dcbcff; }
.cd-lpop .cd-sp { color: #f6d77a; }
.cd-lpop p { margin: 4px 0; }
.cd-lpop small { display: block; color: #c9c0aa; font-size: 12px; }
.cd-lpop small b { color: #8fe08a; }
.cd-lpop .cd-lpt { font-size: 12.5px; color: #e3d8bd; border-top: 1px solid rgba(217, 164, 67, 0.3); padding-top: 4px; }
.cd-lpop .cd-lpx { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.8); background: #1c160e; color: #ffd98a; font: 700 13px/1 sans-serif; cursor: pointer; }

/* the card's power on an item page (the info pop-up, the bag's detail) */
.cd-istat { margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid rgba(217, 164, 67, 0.45); background: rgba(0, 0, 0, 0.22); }
.cd-istat h5 { margin: 0 0 4px; font: 700 14px/1.4 'Mali', sans-serif; color: #ffd98a; }
.cd-istat h5 small { font-weight: 500; font-size: 12px; color: #c9c0aa; }
.cd-istat ul { list-style: none; margin: 0; padding: 0; }
.cd-istat li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed rgba(217, 164, 67, 0.22); font: 500 13px/1.45 'Mali', sans-serif; color: #f1ead6; }
.cd-istat li:last-child { border-bottom: 0; }
.cd-istat li > b { white-space: nowrap; color: #fff3cf; }
.cd-istat li > b small { color: #c9c0aa; font-weight: 500; }
.cd-istat li.cd-itr { display: block; }
.cd-istat li small { color: #c9c0aa; }
.cd-istat .cd-ihint { display: block; margin-top: 4px; font: 500 11.5px/1.4 'Mali', sans-serif; color: #b9b1a0; }
:root[data-booklight] .bookwin .cd-istat { background: color-mix(in srgb, var(--bk-acc) 8%, #fffdf8); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); }
:root[data-booklight] .bookwin .cd-istat :is(h5, li, li > b) { color: var(--bk-ink); }
:root[data-booklight] .bookwin .cd-istat :is(h5 small, li small, li > b small, .cd-ihint) { color: color-mix(in srgb, var(--bk-ink) 70%, transparent); }
/* the card skill (js/cardskill.js): its icon on the line, its picture in the explanation, its icon on the deck's cards
   (2026-10-23, the user: "ให้เห็นว่าเป็นสกิลไหนด้วย") */
.cd-skic { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(255, 215, 106, .7); vertical-align: -6px; margin-right: 4px; object-fit: cover; background: #111; }
.cd-lpop .cs-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.cd-lpop .cs-head img { width: 56px; height: 56px; border-radius: 10px; border: 2px solid #d9a443; object-fit: cover; background: #111; flex: none; }
.cd-lpop .cs-head small { display: block; color: #cbbf9f; }
.cd-lpop .cs-sum { margin: 4px 0; color: #e8f3d0; }
.cd-lpop .cs-more summary { cursor: pointer; color: #ffd98a; }
.cd-lpop .cs-more p { margin: 4px 0 6px; font-size: 12px; color: #d8cfbb; max-height: 160px; overflow: auto; }
#ui #cardp .cb-slot { position: relative; }
#ui #cardp .cb-slot .cb-skbadge { position: absolute; right: -5px; top: -5px; width: 42%; aspect-ratio: 1; border-radius: 8px; border: 2px solid #ffd76a; background: #111; object-fit: cover; box-shadow: 0 2px 6px #000; pointer-events: none; z-index: 2; }
/* the card page's power as rows (2026-10-24, the user: "แก้ ui ให้อ่านง่าย"): name left, value big right; the card skill its
   own row with chips; trait / special rows with their text under the name (js/cards.js gainRows) */
#ui .bookwin .cd-gain .gr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 14px Prompt, sans-serif; color: #a8f09a; }
#ui .bookwin .cd-gain .gr-h em { font-style: normal; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 215, 106, .18); color: #ffd76a; }
#ui .bookwin .gr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#ui .bookwin .gr li { border-radius: 8px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); cursor: pointer; }
#ui .bookwin .gr li:hover { border-color: rgba(255, 215, 106, .45); }
#ui .bookwin .gr .gr-st { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
#ui .bookwin .gr .gr-st span { font: 500 13.5px Prompt, sans-serif; color: #e8e2d4; }
#ui .bookwin .gr .gr-st b { font: 700 17px Prompt, sans-serif; color: #b6e388; white-space: nowrap; }
#ui .bookwin .gr .gr-sk { display: flex; align-items: center; gap: 10px; padding: 6px 8px; flex-wrap: wrap; background: rgba(120, 170, 220, .08); border-color: rgba(120, 170, 220, .3); }
#ui .bookwin .gr .gr-ic { width: 40px; height: 40px; border-radius: 8px; border: 2px solid rgba(255, 215, 106, .7); object-fit: cover; background: #111; flex: none; }
#ui .bookwin .gr .gr-skn { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#ui .bookwin .gr .gr-skn b { font: 700 15px Prompt, sans-serif; color: #f3ead6; }
#ui .bookwin .gr .gr-skn small { display: block !important; font: 500 12px Prompt, sans-serif; color: #9fc4e8; }
#ui .bookwin .gr .gr-chips { display: flex; gap: 5px; flex-wrap: wrap; }
#ui .bookwin .gr .gr-chips i { font: 500 13px/1.5 Prompt, sans-serif; font-style: normal; padding: 2px 9px; border-radius: 99px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 215, 106, .35); color: #ffe3a0; white-space: nowrap; }
#ui .bookwin .gr .gr-tx { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
#ui .bookwin .gr .gr-tx b { font: 700 14px Prompt, sans-serif; }
#ui .bookwin .gr .gr-tx small { display: block !important; font: 500 12.5px/1.4 Prompt, sans-serif; color: #cfc6b4; }
#ui .bookwin .cd-gain .gr-src { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(255, 215, 106, .07); font: 500 13px Prompt, sans-serif; }
#ui .bookwin .cd-gain .gr-src span { color: #a9a294; } #ui .bookwin .cd-gain .gr-src b { color: #ffe3a0; font-weight: 600; text-align: right; }
/* the card guide, short (2026-10-24, the user: "แก้ไขข้อมูลวิธีเล่นใหม่ ต้องอ่านง่าย ไม่ยาว เข้าใจง่าย"): five small sections,
   chips in place of sentences, the tiers as a strip (js/cards.js guideHtml) */
#ui .bookwin .cg { display: flex; flex-direction: column; gap: 8px; }
#ui .bookwin .cg-s { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); }
#ui .bookwin .cg-s h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 700 15px Prompt, sans-serif; color: #ffe3a0; }
#ui .bookwin .cg-s h5 span { font-size: 17px; }
#ui .bookwin .cg-cs { display: flex; flex-wrap: wrap; gap: 5px; }
#ui .bookwin .cg-c { font: 500 12.5px/1.5 Prompt, sans-serif; font-style: normal; padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 215, 106, .28); color: #f3ead6; }
#ui .bookwin .cg-c.g { border-color: rgba(143, 216, 138, .45); color: #c6efb4; }
#ui .bookwin .cg-l { margin: 6px 0 0; font: 500 13px/1.45 Prompt, sans-serif; color: #cfc6b4; }
#ui .bookwin .cg-l b { color: #ffe3a0; }
#ui .bookwin .cg-ts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
#ui .bookwin .cg-t { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px; border-radius: 8px; background: rgba(255, 215, 106, .07); border: 1px solid rgba(255, 215, 106, .25); text-align: center; }
#ui .bookwin .cg-t.t5 { background: rgba(255, 215, 106, .16); border-color: #ffd76a; }
#ui .bookwin .cg-t b { font: 700 14px Prompt, sans-serif; color: #ffd76a; }
#ui .bookwin .cg-t em { font: 700 16px Prompt, sans-serif; font-style: normal; color: #b6e388; }
#ui .bookwin .cg-t small { display: block !important; font: 500 11px Prompt, sans-serif; color: #a9a294; }
#ui .bookwin .cg-t i { font: 500 10.5px/1.3 Prompt, sans-serif; font-style: normal; color: #e8d6a8; }
/* "เลื่อนเป็น T(n)": the same rows, now → next (js/cards.js nextRows) */
#ui .bookwin .cd-gain .gr-h.up { margin-top: 10px; color: #ffd76a; }
#ui .bookwin .cd-gain .gr-h em.ok { background: rgba(143, 216, 138, .25); color: #b6e388; }
#ui .bookwin .gr .gr-st b s { text-decoration: none; font-size: 13px; font-weight: 500; color: #a9a294; }
#ui .bookwin .gr .gr-new { background: rgba(255, 215, 106, .08); border-color: rgba(255, 215, 106, .35); }
#ui .bookwin .gr .gr-new b { color: #ffe3a0; }
#ui .bookwin .gr .gr-ic.s { width: 22px; height: 22px; border-width: 1px; border-radius: 5px; vertical-align: -6px; margin-left: 4px; }
/* the card skill's explanation: what the skill does (js/cardskill.js infoHtml) */
.cd-lpop .cs-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.cd-lpop .cs-chips i { font: 600 12px/1.5 Prompt, sans-serif; font-style: normal; padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(217, 164, 67, .55); color: #ffe3a0; }
.cd-lpop .cs-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; margin: 0 0 6px; }
.cd-lpop .cs-nums span { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; color: #cfc6b4; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cd-lpop .cs-nums b { color: #b6e388; }
.cd-lpop .cs-desc { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: #e8e2d4; max-height: 190px; overflow: auto; white-space: pre-line; }
.cd-lpop .cs-foot { display: block; color: #a9a294; font-size: 11.5px; }
/* the card skill's pop-up bigger and easier to read (2026-10-25, the user: "ปรับตัวหนังสือให้อ่านง่ายและใหญ่ขึ้น"; js/cardskill.js
   CS.infoHtml): wider, Prompt, each line of the skill's text its own paragraph with room between */
.cd-lpop:has(.cs-head) { max-width: min(460px, 94vw); width: 460px; padding: 14px 36px 12px 16px; font: 400 15px/1.6 Prompt, Mali, sans-serif; }
.cd-lpop:has(.cs-head) .cd-lpx { width: 26px; height: 26px; font-size: 15px; }
.cd-lpop .cs-head { gap: 12px; margin-bottom: 10px; }
.cd-lpop .cs-head img { width: 64px; height: 64px; }
.cd-lpop .cs-head b { font: 700 20px/1.25 Prompt, sans-serif; }
.cd-lpop .cs-head small { font: 400 14px Prompt, sans-serif; color: #d6cbb0; }
.cd-lpop .cs-chips { gap: 6px; margin: 0 0 10px; }
.cd-lpop .cs-chips i { font: 600 14.5px/1.6 Prompt, sans-serif; padding: 2px 11px; }
.cd-lpop .cs-nums { gap: 4px 16px; margin: 0 0 10px; }
.cd-lpop .cs-nums span { font: 400 15px/1.6 Prompt, sans-serif; color: #ddd4c0; }
.cd-lpop .cs-nums b { font-weight: 600; }
.cd-lpop .cs-desc { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .28); font: 400 15px/1.65 Prompt, Mali, sans-serif; color: #f0eadc; max-height: min(320px, 46vh); overflow: auto; white-space: normal; }
.cd-lpop .cs-desc p { margin: 0; }
.cd-lpop .cs-desc p + p { margin-top: 8px; }
.cd-lpop .cs-desc b { color: #ffd98a; font-weight: 600; }
.cd-lpop .cs-foot { font: 400 13.5px/1.5 Prompt, sans-serif; color: #b9b2a3; }