/* Floralia · the life window (ความสำเร็จ · สมุดปลา · ทำอาหาร · กิจกรรมโลก, js/lifewin.js #life) full screen in the bag page's frame
   (2026-10-22, the user with a picture of the book: "แก้ ui นี้ด้วยเป็นมาตรฐานเดียวกัน"). No longer a book (js/bookui.js WINS);
   its own #life rules (css/style.css) dress the pages, this file the frame: top bar, tabs, two panels with gold corners. */
#life.overlay { position: fixed; inset: 0; z-index: 60; display: flex; padding: 0; background: rgba(6, 4, 12, .78); }
#life.overlay[hidden] { display: none; }
#life.overlay:not([hidden]) { align-items: center; justify-content: center; }
#life .panel.eco-panel { width: min(100vw, 177.78vh); height: min(100vh, 56.25vw); max-width: none; max-height: none; margin: 0; padding: 12px 16px 10px; gap: 10px; border-radius: 0; overflow: hidden;
  font-family: Prompt, Mali, sans-serif; color: #f3ead6;
  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%);
  border: 2px solid #c9a24a; box-shadow: inset 0 0 0 4px #1a1320, inset 0 0 0 5px #6a5026, inset 0 0 60px rgba(0, 0, 0, .55); }
#life .panel-head { display: flex; align-items: center; gap: .7em; padding: 0 .2em .6em; border-bottom: 1px solid rgba(201, 162, 74, .45); font-size: clamp(12px, 1vw, 16px); }
#life .panel-head h2 { margin: 0; font: 700 1.75em Prompt, Mali, sans-serif; background: linear-gradient(180deg, #fff6c8, #ffd36a 55%, #d99a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #3a2410); }
#life .panel-head h2 small { display: none; }
#life .eco-gold { margin-left: auto; padding: .2em .75em; border-radius: 99px; background: #241b2c; border: 1px solid #5a4320; }
#life .close-x { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: .75em; border: 1px solid #c9a24a; background: linear-gradient(180deg, #4a3418, #2a1c0c); color: #ffe08a; font: 800 1em Prompt, sans-serif; cursor: pointer; }
/* the tabs: the skill page's gold underline */
#life .eco-tabs { gap: 0; border-bottom: 1px solid rgba(201, 162, 74, .3); font-size: clamp(12px, 1vw, 16px); }
#life .eco-tab { padding: .45em 1.2em; border: 0; border-radius: .5em .5em 0 0; background: none; color: #c9c0ae; font: 600 1em Prompt, sans-serif; }
#life .eco-tab:hover { color: #fff3c0; background: rgba(255, 220, 140, .06); }
#life .eco-tab.on { color: #ffe08a; background: linear-gradient(180deg, rgba(90, 67, 24, .55), rgba(51, 36, 14, .15)); box-shadow: inset 0 -.18em 0 #ffb340; }
#life .eco-tab.lock { opacity: .5; }
/* two panels with the gold corners */
#life .eco-body { gap: 1.1em; padding-top: .4em; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
#life .eco-main, #life .eco-side { position: relative; padding: 16px 18px 14px; border-radius: 12px; border: 1px solid #7a5c26;
  background: linear-gradient(180deg, rgba(34, 26, 44, .92), rgba(18, 13, 24, .94)), url(../assets/ui_skillpage/panel_bg.jpg) center / 220px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .35); }
#life .eco-main::-webkit-scrollbar, #life .eco-side::-webkit-scrollbar { width: 8px; }
#life .eco-main::-webkit-scrollbar-thumb, #life .eco-side::-webkit-scrollbar-thumb { background: #5a4320; border-radius: 8px; }
#life .eco-body { position: relative; }
#life .eco-body::before, #life .eco-body::after { content: ''; position: absolute; top: calc(.4em - 5px); width: 34px; height: 34px; background: url(../assets/ui_skillpage/frame_corner.png) center / contain no-repeat; z-index: 3; pointer-events: none; }
#life .eco-body::before { left: -5px; } #life .eco-body::after { right: -5px; transform: scaleX(-1); }
#life .lf-h { font-family: Prompt, Mali, sans-serif; font-weight: 600; }
#life .lf-note { font-family: Prompt, Mali, sans-serif; font-size: 12.5px; color: #c9c0ae; }
@media (max-width: 900px) { #life .eco-body { grid-template-columns: 1fr; overflow-y: auto; } }

/* ---- achievements, picture first (the user: "หน้านี้ยังดูรกอยุ่มาก"): one clean row each - medal, name, goal, a bar with its
   count and points, the rewards as small pictures with numbers, the title as a coloured pill, a claim button when ready;
   the long words in tooltips ---- */
#life .lf-ach2 { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 52px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(201, 162, 74, .18); }
#life .lf-ach2 + .lf-ach2 { margin-top: 6px; }
#life .lf-ach2.done:not(.got) { border-color: rgba(143, 230, 124, .55); background: linear-gradient(90deg, rgba(70, 160, 80, .14), rgba(0, 0, 0, .2)); }
#life .lf-ach2.got { opacity: .6; }
#life .lf-ach2 .lf-medal { width: 44px; height: 44px; object-fit: contain; }
#life .lf-ach2 .lf-an { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#life .lf-ach2 .lf-an > b { font: 600 15px/1.25 Prompt, Mali, sans-serif; color: #f6e4b4; }
#life .lf-ach2 .lf-an > small { font: 400 12.5px/1.3 Prompt, Mali, sans-serif; color: #b9b1a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#life .lf-pg { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
#life .lf-pg .lf-bar { flex: 1; max-width: 260px; height: 6px; margin: 0; }
#life .lf-pg em { font: 500 11.5px Prompt, sans-serif; font-style: normal; color: #c9c0ae; }
#life .lf-pg .lf-pts { font: 600 11px Prompt, sans-serif; font-style: normal; color: #ffd76a; }
#life .lf-ach2 .lf-rw { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
#life .lf-rt { position: relative; display: block; flex: none; width: 38px; height: 38px; border-radius: 9px; background: radial-gradient(circle at 50% 40%, #2c2433, #17121c 75%); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .35); }
#life .lf-rt img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
#life .lf-rt u { position: absolute; right: -3px; bottom: -4px; padding: 0 4px; border-radius: 6px; background: rgba(14, 10, 18, .9); color: #fff3d6; font: 600 10.5px/1.4 Prompt, sans-serif; text-decoration: none; }
#life .lf-tt { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--tc); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); font: 600 11.5px Prompt, sans-serif; cursor: help; }
#life .lf-ach2 .lf-ok { justify-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(143, 230, 124, .18); color: #8fe67c; font: 700 15px Prompt, sans-serif; }
#life .lf-ach2 .lf-claim { justify-self: center; min-width: 52px; }
#life .lf-ach2 .lf-an { grid-column: 2; overflow: hidden; }
#life .lf-ach2 .lf-rw { position: static; grid-column: 3; margin: 0; max-width: none; }
#life .lf-ach2 .lf-pg .lf-bar { max-width: 200px; }

/* ---- cooking and world events, easier on the eyes (the user: "ทำให้ดูง่ายสะบายตาด้วย") ---- */
#life .lf-dish { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(201, 162, 74, .18); }
#life .lf-dish + .lf-dish { margin-top: 6px; }
#life .lf-dish.no { opacity: .78; }
#life .lf-dish .lf-di { width: 56px; height: 56px; object-fit: contain; }
#life .lf-dish .lf-an > b { font: 600 15px/1.25 Prompt, Mali, sans-serif; color: #f6e4b4; }
#life .lf-dish .lf-buff { font: 500 12.5px/1.35 Prompt, sans-serif; color: #9ce38c; }
#life .lf-needs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
#life .lf-need.pic { position: relative; display: block; width: 36px; height: 36px; padding: 0; border-radius: 9px; background: radial-gradient(circle at 50% 40%, #2c2433, #17121c 75%); box-shadow: inset 0 0 0 1px rgba(255, 138, 106, .55); }
#life .lf-need.pic.ok { box-shadow: inset 0 0 0 1px rgba(143, 230, 124, .6); }
#life .lf-need.pic img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
#life .lf-need.pic u { position: absolute; right: -4px; bottom: -5px; padding: 0 4px; border-radius: 6px; background: rgba(14, 10, 18, .9); color: #ff9a8a; font: 600 10px/1.4 Prompt, sans-serif; text-decoration: none; white-space: nowrap; }
#life .lf-need.pic.ok u { color: #8fe67c; }
#life .lf-ev { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(201, 162, 74, .18); border-left: 3px solid var(--ec); }
#life .lf-ev + .lf-ev { margin-top: 6px; }
#life .lf-ev.now { background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 16%, transparent), rgba(0, 0, 0, .2)); border-color: color-mix(in srgb, var(--ec) 70%, transparent); }
#life .lf-ev > img { width: 46px; height: 46px; object-fit: contain; }
#life .lf-ev .lf-an > b { font: 600 15px/1.25 Prompt, Mali, sans-serif; color: var(--ec); }
#life .lf-ev .lf-map { font: 400 12.5px Prompt, sans-serif; color: #c9c0ae; }
#life .lf-evt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-family: Prompt, sans-serif; }
#life .lf-evt b { font: 600 17px/1.1 Prompt, sans-serif; color: #f3ead6; }
#life .lf-evt b.live { color: #8fe67c; }
#life .lf-evt small { font: 400 11.5px Prompt, sans-serif; color: #a89e8a; }
/* the fishing page's right side (2026-10-25, the user: "แก้ ui ให้อ่านง่ายที่สุดดูง่าย"; js/lifewin.js fishView): one card per job,
   plain upright text, the rewards as pictures, got / next / locked told apart by colour, a mark and a bar */
#life .lfx-card { display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 74, .35); }
#life .lfx-me > img { width: 68px; height: 68px; flex: none; object-fit: contain; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #2c2433, #17121c 75%); }
#life .lfx-me > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#life .lfx-me > div > b { font: 700 24px/1.1 Prompt, sans-serif; color: #ffe08a; }
#life .lfx-xp { display: flex; align-items: center; gap: 10px; }
#life .lfx-xp .lf-bar { flex: 1; height: 10px; margin: 0; }
#life .lfx-xp small { flex: none; font: 600 16px Prompt, sans-serif; color: #e9dfc8; }
#life .lfx-stat { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 17px Prompt, sans-serif; color: #d6ccb6; }
#life .lfx-stat b { color: #fff3d6; font-weight: 600; }
#life .lf-gofish { margin: 10px 0 8px; padding: 9px; font: 700 21px Prompt, sans-serif; }
#life .lfx-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#life .lfx-how > span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 6px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 74, .2); text-align: center; cursor: help; }
#life .lfx-how kbd { min-width: 34px; padding: 2px 10px; border-radius: 7px; border: 1px solid #c9a24a; border-bottom-width: 3px; background: #2a2030; color: #ffe08a; font: 700 17px/1.5 Prompt, sans-serif; }
#life .lfx-how small { font: 400 16px/1.3 Prompt, sans-serif; color: #e3d9c3; }
#life .lfx-where { margin-top: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(110, 200, 120, .1); font: 400 17px Prompt, sans-serif; color: #c9ebc0; }
#life .lfx-where b { color: #fff; font-weight: 600; }
#life .lfx-where.red { background: rgba(255, 110, 90, .1); color: #ffb3a6; }
#life .lfx-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 7px; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 162, 74, .35); font: 600 20px Prompt, sans-serif; color: #ffd98a; }
#life .lfx-h small { font: 400 15.5px Prompt, sans-serif; color: #b3a993; }
#life .lfx-miles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#life .lfx-miles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#life .lfx-mile { display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); }
#life .lfx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
#life .lfx-need { font: 700 20px/1.1 Prompt, sans-serif; color: #f3ead6; white-space: nowrap; }
#life .lfx-need small { font: 400 15px Prompt, sans-serif; color: #b3a993; }
#life .lfx-st { font: 600 15.5px Prompt, sans-serif; font-style: normal; color: #9a917f; white-space: nowrap; }
#life .lfx-mile .lf-bar { height: 6px; margin: 0; }
#life .lfx-pics { display: flex; flex-wrap: wrap; gap: 6px 5px; }
#life .lfx-pics .lf-rt { width: 38px; height: 38px; }
#life .lfx-pics .lf-rt u { font-size: 13px; }
#life .lfx-txt { font: 500 16.5px/1.35 Prompt, sans-serif; color: #f0e6cf; }
#life .lfx-mile.got { background: rgba(110, 200, 120, .1); border-color: rgba(143, 230, 124, .4); }
#life .lfx-mile.got .lfx-need, #life .lfx-mile.got .lfx-st { color: #9ee98c; }
#life .lfx-mile.next { background: rgba(255, 200, 80, .12); border-color: rgba(255, 200, 80, .7); }
#life .lfx-mile.next .lfx-need, #life .lfx-mile.next .lfx-st { color: #ffd76a; }
#life .lfx-mile.lock .lfx-pics, #life .lfx-mile.lock .lfx-txt { opacity: .55; }
#life .lfx-now { margin-left: auto; padding: 2px 10px; border-radius: 99px; background: rgba(255, 200, 80, .1); font: 400 16px Prompt, sans-serif; color: #d6ccb6; }
#life .lfx-now b { margin-left: 4px; color: #ffe08a; font-weight: 600; }
#life .lfx-use { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font: 400 16.5px Prompt, sans-serif; color: #b3a993; cursor: help; }
#life .lfx-use span { padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: #e3d9c3; }
/* (the left page bigger too, the user: "ทำตัวหนังสือให้ใหญ่กว่านี้ได้ไหมจ๊ะ") */
#life .lf-maph { font-size: 18px; }
#life .lf-maph small { font-size: 14px; }
#life .lf-maph em { font-size: 13px; }
#life .lf-fish b { font: 600 15px/1.25 Prompt, Mali, sans-serif; }
#life .lf-fish small { font: 400 13px/1.25 Prompt, Mali, sans-serif; color: #cfc6b2; }
#life .lf-fdet b { font: 700 18px Prompt, Mali, sans-serif; }
#life .lf-fdet small { font: 400 14.5px/1.45 Prompt, Mali, sans-serif; color: #ddd4c0; }