/* The titles page (ฉายา: the right page of ความสำเร็จ, js/lifewin.js achieveView; 2026-10-19, the user: "ดูยากมาก ทำให้ง่าย
   และสะอาด ใช้ง่าย เข้าใจง่าย"). One card for the title worn (the Codex plate assets/ui_life/title_<r>.png), then equal
   one-line rows: the name in its rarity colour, what it gives, a ใส่ pill or the ใส่อยู่ chip. The titles not got are folded
   under "ยังไม่ได้ (n)" (two-line rows: + how to get it and how far). The points bonuses are the same rows. Rarity colours
   = ACHIEVE_DATA.RARITY on the dark book; deeper shades on the light skins (:root[data-booklight], css/bookskins.css
   --bk-ink / --bk-ink2 / --bk-acc). Dimmed by colour, not opacity. No soft halos round text. */
#life .lft-row, #life .lft-now { --tc: #d9b48a; --tn: var(--tc); }
#life .r2:is(.lft-row, .lft-now) { --tc: #8fc8ff; }
#life .r3:is(.lft-row, .lft-now) { --tc: #c59bff; }
#life .r4:is(.lft-row, .lft-now) { --tc: #ffd76a; }

/* ---- the title worn ---- */
#life .lft-now { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 9px; border-radius: 9px; border: 1px solid rgba(217, 164, 67, 0.4); background: rgba(0, 0, 0, 0.32); }
#life .lft-cap { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
#life .lft-cap small { font: 700 12px Mali, sans-serif; color: #f6dc98; }
#life .lft-off { padding: 0 10px; min-height: 22px; border: 1px solid rgba(217, 164, 67, 0.45); border-radius: 11px; background: transparent; color: #d8cfb8; font: 600 11.5px Mali, sans-serif; cursor: pointer; }
#life .lft-off:hover { background: rgba(217, 164, 67, 0.15); }
#life .lft-now .lf-plate { height: 58px; }
#life .lft-now .lf-plate span { color: var(--tc); text-shadow: 0 1px 0 #000; font-size: 16px; }
#life .lft-now.none .lf-plate span { color: #a39a86; font-size: 14px; }
#life .lft-gain { display: block; text-align: center; font: 700 13px/1.35 Mali, sans-serif; color: #a8f09a; }
#life .lft-gain.dim { font-weight: 600; color: #cfc4ad; }
#life .lft-rule { display: block; margin-top: -4px; text-align: center; font: 500 11.5px/1.4 Mali, sans-serif; color: #b9b1a0; }

/* ---- the rows ---- */
#life .lft-list { display: flex; flex-direction: column; gap: 4px; }
#life .lft-row, #life .lft-mile { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; column-gap: 10px; width: 100%; box-sizing: border-box;
  min-height: 34px; margin: 0; padding: 0 6px 0 12px; border: 0; border-radius: 7px; background: rgba(0, 0, 0, 0.34); box-shadow: inset 3px 0 0 var(--tc);
  text-align: left; font-family: Mali, sans-serif; color: #e8dfc8; }
#life button.lft-row { cursor: pointer; }
#life button.lft-row:hover { background: rgba(242, 193, 78, 0.13); }
#life .lft-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.3 Mali, sans-serif; color: var(--tn); }
#life .lft-row span { white-space: nowrap; font: 600 11.5px/1.3 Mali, sans-serif; color: #a8f09a; text-align: right; }
#life .lft-row i { justify-self: end; font-style: normal; white-space: nowrap; border-radius: 12px; }
#life .lft-go { min-width: 46px; text-align: center; font: 700 12px/24px Mali, sans-serif; color: #2a1a05; background: linear-gradient(#f6d27a, #d9a443); box-shadow: inset 0 -2px 0 rgba(120, 70, 10, 0.45); }
#life button.lft-row:hover .lft-go { background: linear-gradient(#ffe39a, #e8b555); }
#life .lft-st { min-width: 46px; text-align: center; font: 700 11.5px/22px Mali, sans-serif; color: #10230b; background: #8be37b; }
#life .lft-row.on { background: rgba(139, 227, 123, 0.12); box-shadow: inset 3px 0 0 var(--tc), inset 0 0 0 1px rgba(139, 227, 123, 0.55); }

/* not got yet: two lines (+ how to get it, how far), names dimmed by colour */
#life .lft-row.lft-lock { --tn: color-mix(in srgb, var(--tc) 62%, #8a8270); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'n g' 'd p'; row-gap: 1px; padding: 5px 10px 5px 12px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tc) 45%, transparent); }
#life .lft-lock b { grid-area: n; }
#life .lft-lock span { grid-area: g; color: #8fbf86; }
#life .lft-lock small { grid-area: d; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.35 Mali, sans-serif; color: #a39a86; }
#life .lft-lock em { grid-area: p; font: 600 11px/1.35 Fredoka, Mali, sans-serif; font-style: normal; color: #a39a86; text-align: right; white-space: nowrap; }

/* the fold: ยังไม่ได้ (n) */
#life .lft-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 12px; border: 1px dashed rgba(217, 164, 67, 0.45); border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font-family: Mali, sans-serif; }
#life .lft-fold:hover { background: rgba(217, 164, 67, 0.1); }
#life .lft-fold b { font: 700 12.5px Mali, sans-serif; color: #e8dfc8; }
#life .lft-fold small { flex: 1; font: 500 11px Mali, sans-serif; color: #a39a86; }
#life .lft-fold i { width: 7px; height: 7px; margin: 0 2px 3px 0; border: solid #d9a443; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#life .lft-fold.open i { margin: 3px 2px 0 0; transform: rotate(-135deg); }

/* the points bonuses */
#life .lft-mile { grid-template-columns: 62px minmax(0, 1fr) auto; box-shadow: inset 3px 0 0 rgba(163, 154, 134, 0.35); }
#life .lft-mile b { font: 700 12px Fredoka, Mali, sans-serif; color: #a39a86; white-space: nowrap; }
#life .lft-mile span { font: 600 12px/1.3 Mali, sans-serif; color: #cfc4ad; }
#life .lft-mile i { font: 600 11.5px Mali, sans-serif; font-style: normal; color: #a39a86; white-space: nowrap; }
#life .lft-mile.got { box-shadow: inset 3px 0 0 #8be37b; }
#life .lft-mile.got b, #life .lft-mile.got i { color: #8be37b; }
#life .lft-mile.got span { color: #e8dfc8; }
#life .lft-mile.next { background: rgba(242, 193, 78, 0.1); box-shadow: inset 3px 0 0 #f2c14e, inset 0 0 0 1px rgba(242, 193, 78, 0.4); }
#life .lft-mile.next b, #life .lft-mile.next i { color: #f2c66a; }
#life .lft-mile.next span { color: #f2ead6; }

/* a tap on a title not got yet: its achievement lit on the left page for a moment */
#life .lf-ach.lft-flash { animation: lftFlash 1.6s ease-out 1; }
@keyframes lftFlash { 0%, 40% { box-shadow: inset 0 0 0 2px #f2c14e, 0 0 0 2px rgba(242, 193, 78, 0.5); } 100% { box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.08); } }

/* ---- the light book skins: dark ink on the light page, deeper rarity shades (the plate stays dark: its colours stay) ---- */
:root[data-booklight] #life .lft-row { --tn: #6b5640; }
:root[data-booklight] #life .lft-row.r2 { --tn: #1b5698; }
:root[data-booklight] #life .lft-row.r3 { --tn: #6326b8; }
:root[data-booklight] #life .lft-row.r4 { --tn: #9a5f00; }
:root[data-booklight] #life .lft-row.lft-lock { --tn: color-mix(in srgb, #6b5640 55%, var(--bk-ink2)); }
:root[data-booklight] #life .lft-row.lft-lock.r2 { --tn: color-mix(in srgb, #1b5698 55%, var(--bk-ink2)); }
:root[data-booklight] #life .lft-row.lft-lock.r3 { --tn: color-mix(in srgb, #6326b8 55%, var(--bk-ink2)); }
:root[data-booklight] #life .lft-row.lft-lock.r4 { --tn: color-mix(in srgb, #9a5f00 55%, var(--bk-ink2)); }
:root[data-booklight] #life .lft-now { background: color-mix(in srgb, var(--bk-acc) 8%, rgba(255, 255, 255, 0.3)); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); }
:root[data-booklight] #life .lft-cap small { color: var(--bk-acc); }
:root[data-booklight] #life .lft-off { color: var(--bk-ink); border-color: color-mix(in srgb, var(--bk-acc) 50%, transparent); }
:root[data-booklight] #life .lft-off:hover { background: color-mix(in srgb, var(--bk-acc) 12%, transparent); }
:root[data-booklight] #life .lft-gain { color: #2a7420; }
:root[data-booklight] #life .lft-gain.dim, :root[data-booklight] #life .lft-rule { color: var(--bk-ink2); }
:root[data-booklight] #life :is(.lft-row, .lft-mile) { color: var(--bk-ink); background: color-mix(in srgb, var(--bk-acc) 9%, rgba(255, 255, 255, 0.35)); }
:root[data-booklight] #life button.lft-row:hover { background: color-mix(in srgb, var(--bk-acc) 18%, rgba(255, 255, 255, 0.35)); }
:root[data-booklight] #life .lft-row span { color: #2a7420; }
:root[data-booklight] #life .lft-row.on { background: rgba(70, 160, 60, 0.16); box-shadow: inset 3px 0 0 var(--tc), inset 0 0 0 1px rgba(60, 140, 50, 0.6); }
:root[data-booklight] #life .lft-row.lft-lock { background: color-mix(in srgb, var(--bk-acc) 5%, rgba(255, 255, 255, 0.25)); }
:root[data-booklight] #life .lft-lock span { color: #4d7a46; }
:root[data-booklight] #life .lft-lock :is(small, em), :root[data-booklight] #life .lft-fold small { color: var(--bk-ink2); }
:root[data-booklight] #life .lft-fold { border-color: color-mix(in srgb, var(--bk-acc) 55%, transparent); }
:root[data-booklight] #life .lft-fold:hover { background: color-mix(in srgb, var(--bk-acc) 10%, transparent); }
:root[data-booklight] #life .lft-fold b { color: var(--bk-ink); }
:root[data-booklight] #life .lft-fold i { border-color: var(--bk-acc); }
:root[data-booklight] #life .lft-mile { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bk-ink2) 40%, transparent); }
:root[data-booklight] #life .lft-mile :is(b, i) { color: var(--bk-ink2); }
:root[data-booklight] #life .lft-mile span { color: var(--bk-ink); }
:root[data-booklight] #life .lft-mile.got { box-shadow: inset 3px 0 0 #3c9a32; }
:root[data-booklight] #life .lft-mile.got :is(b, i) { color: #2a7420; }
:root[data-booklight] #life .lft-mile.next { background: color-mix(in srgb, #e0a020 16%, rgba(255, 255, 255, 0.35)); box-shadow: inset 3px 0 0 #c48a12, inset 0 0 0 1px rgba(196, 138, 18, 0.5); }
:root[data-booklight] #life .lft-mile.next :is(b, i) { color: #8a5d00; }
#life .r5:is(.lft-row, .lft-now) { --tc: #ff5a6a; }   /* (เทพ: the season pass's เทพแห่งซีซั่น, 2026-10-26) */
:root[data-booklight] #life .lft-row.r5 { --tn: #b3122a; }