/* Floralia — หอรวมทรัพย์ (js/treasure.js): the bar inside a room (#thbar) and the full-screen page (#thui, G.overlay 'thall').
   Royal vault: deep blue + gold, the page layout C the user picked (rooms left, the picked room big on the right).
   Numbers crisp, no glow round text. */

/* ---- the bar over the game inside a room ---- */
#thbar { position: absolute; left: 50%; top: calc(88px * var(--u)); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: calc(8px * var(--u));
  padding: calc(5px * var(--u)) calc(8px * var(--u)) calc(5px * var(--u)) calc(6px * var(--u)); border-radius: calc(12px * var(--u)); pointer-events: auto;
  background: linear-gradient(rgba(20, 26, 52, 0.94), rgba(12, 14, 30, 0.94)); box-shadow: inset 0 0 0 1px var(--tc, #ffd36b), 0 4px 14px rgba(0, 0, 0, 0.45);
  font-family: 'Mali', sans-serif; color: #fff4dc; white-space: nowrap; }
#thbar[hidden] { display: none; }
#thbar .tb-name { display: flex; align-items: center; gap: calc(6px * var(--u)); }
#thbar .tb-name img { width: calc(30px * var(--u)); height: calc(30px * var(--u)); object-fit: contain; }
#thbar .tb-name b { font: 800 calc(14px * var(--u))/1.1 Mali, sans-serif; color: #ffe6a8; }
#thbar .tb-name small { font: 600 calc(11.5px * var(--u)) Mali, sans-serif; color: #c9bfa0; margin-left: calc(4px * var(--u)); }
#thbar .tb-time, #thbar .tb-got { display: flex; align-items: center; gap: calc(4px * var(--u)); padding: 0 calc(8px * var(--u)); height: calc(26px * var(--u)); border-radius: calc(6px * var(--u)); background: #0a0c18; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.35); }
#thbar .tb-time i { font-style: normal; font-size: calc(13px * var(--u)); }
#thbar .tb-time b { font: 800 calc(15px * var(--u)) Fredoka, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
#thbar .tb-time.low b { color: #ff8a7a; }
#thbar .tb-got img { width: calc(20px * var(--u)); height: calc(20px * var(--u)); object-fit: contain; }
#thbar .tb-got b { font: 700 calc(13px * var(--u)) Fredoka, 'Mali', sans-serif; color: #ffe6a8; font-variant-numeric: tabular-nums; }
#thbar button { height: calc(26px * var(--u)); padding: 0 calc(9px * var(--u)); border: 0; border-radius: calc(6px * var(--u)); cursor: pointer; font: 700 calc(12.5px * var(--u)) Mali, sans-serif; }
#thbar .tb-page { width: calc(26px * var(--u)); padding: 0; background: rgba(255, 255, 255, 0.08); color: #ffe6a8; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.4); }
#thbar .tb-out { background: rgba(255, 110, 100, 0.16); color: #ffc4bb; box-shadow: inset 0 0 0 1px rgba(255, 138, 122, 0.6); }
#thbar button:hover, #thbar button:focus-visible { filter: brightness(1.18); }

/* ================= the page (#thui) ================= */
#thui { position: fixed; inset: 0; z-index: 900; pointer-events: auto; overflow: hidden; user-select: none; font-family: 'Mali', sans-serif; color: #fff4dc;
  background: radial-gradient(ellipse 80% 70% at 55% 40%, #1f2a52 0%, #121831 60%, #0a0d1c 100%); animation: thIn 0.2s ease-out both; }
@keyframes thIn { from { opacity: 0; } to { opacity: 1; } }
#thui[hidden], #thui [hidden] { display: none !important; }
#thui button { font-family: 'Mali', sans-serif; color: inherit; }
#thui .th-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; }
#thui .th-top { flex: none; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 14px 0 20px; background: linear-gradient(#0b0e1e, #18203f); border-bottom: 1px solid rgba(255, 214, 120, 0.5); }
#thui .th-title { display: flex; align-items: center; gap: 10px; }
#thui .th-title img { width: 46px; height: 46px; object-fit: contain; }
#thui .th-title b { font: 800 27px/1 Mali, sans-serif; color: #ffe6a8; }
#thui .th-title small { font: 600 14px Fredoka, sans-serif; color: #b9ae8e; letter-spacing: 1px; }
#thui .th-cur { margin-left: auto; display: flex; gap: 8px; }
#thui .th-chip { display: flex; align-items: center; gap: 6px; height: 32px; min-width: 100px; padding: 0 12px 0 6px; border-radius: 6px; background: #090b16; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.45); cursor: pointer; }
#thui .th-chip img { width: 24px; height: 24px; object-fit: contain; }
#thui .th-chip em { margin-left: auto; font: 700 16px Fredoka, sans-serif; font-style: normal; color: #fff6e0; font-variant-numeric: tabular-nums; }
#thui .th-exit { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
#thui .th-exit i { width: 36px; height: 36px; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / contain no-repeat; }
#thui .th-exit:hover i, #thui .th-exit:focus-visible i { filter: brightness(1.2); transform: scale(1.08); }
#thui .th-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; display: flex; flex-direction: column; }

/* the banner (Codex, assets/icons_cur/th_banner.jpg) */
#thui .th-banner { flex: none; position: relative; height: 150px; margin-bottom: 14px; border-radius: 14px; background: #141a36 center right / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.5); overflow: hidden; }
#thui .th-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 13, 28, 0.92) 0%, rgba(10, 13, 28, 0.6) 36%, rgba(10, 13, 28, 0) 62%); }
#thui .th-banner div { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
#thui .th-banner b { font: 800 38px/1.05 Mali, sans-serif; color: #ffe6a8; }
#thui .th-banner span { font: 600 15.5px/1.4 Mali, sans-serif; color: #ddd2b4; }

/* rooms left, the picked one right */
#thui .th-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr; gap: 16px; }
#thui .th-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
#thui .th-room { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 6px 12px 6px 6px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(#1d2547, #141a33); box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.25); }
#thui .th-room img { flex: none; width: 50px; height: 50px; object-fit: contain; border-radius: 10px; background: radial-gradient(circle, rgba(255, 214, 120, 0.22), rgba(0, 0, 0, 0) 70%); }
#thui .th-room span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#thui .th-room b { font: 800 16px/1.15 Mali, sans-serif; color: #fff1cf; }
#thui .th-room small { font: 600 12.5px Mali, sans-serif; color: #b9ae8e; }
#thui .th-room i { margin-left: auto; font: 700 11.5px Mali, sans-serif; font-style: normal; color: #1b1405; background: #ffd36b; border-radius: 8px; padding: 1px 7px; }
#thui .th-room.on { background: linear-gradient(#36406e, #222a50); box-shadow: inset 0 0 0 2px var(--rc, #ffd36b); }
#thui .th-room.lock { opacity: 0.55; }
#thui .th-room:hover, #thui .th-room:focus-visible { filter: brightness(1.12); }
#thui .th-pane { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(#202a52, #131933); box-shadow: inset 0 0 0 1px var(--rc, #ffd36b); overflow-y: auto; }
#thui .th-art { position: relative; height: 210px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(ellipse at 50% 60%, rgba(255, 214, 120, 0.25), rgba(10, 13, 28, 0.9) 70%); box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.3); }
#thui .th-art img { max-height: 180px; max-width: 70%; object-fit: contain; }
#thui .th-art b { position: absolute; left: 16px; top: 12px; font: 800 24px/1.1 Mali, sans-serif; color: #fff1cf; }
#thui .th-art i { position: absolute; right: 14px; top: 14px; font: 700 13px Mali, sans-serif; font-style: normal; color: #1b1405; background: var(--rc, #ffd36b); border-radius: 10px; padding: 2px 10px; }
#thui .th-text { margin: 0; font: 600 15px/1.5 Mali, sans-serif; color: #e4dabd; }
#thui .th-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#thui .th-lbl { flex: none; width: 82px; font: 700 13px Mali, sans-serif; color: #b9ae8e; }
#thui .th-mob { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: #0d1124; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.35); }
#thui .th-mob img { width: 46px; height: 46px; object-fit: contain; }
#thui .th-mob.boss { width: auto; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 4px; }
#thui .th-mob.boss small { font: 700 13.5px Mali, sans-serif; color: #ffd0a0; }
#thui .th-rw { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border-radius: 8px; background: #0d1124; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.3); font: 600 13px Mali, sans-serif; color: #f2e7c8; cursor: pointer; }
#thui .th-rw img { width: 26px; height: 26px; object-fit: contain; }
#thui .th-act { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#thui .th-go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border: 0; border-radius: 12px; cursor: pointer;
  font: 800 22px Mali, sans-serif; color: #2a1d08 !important; background: linear-gradient(#ffe39a, #e2a93e); box-shadow: inset 0 0 0 2px #fff2c8, 0 4px 12px rgba(0, 0, 0, 0.4); }
#thui .th-go img { width: 40px; height: 40px; object-fit: contain; }
#thui .th-go.warp { background: linear-gradient(#ffe39a, #d79a2e 60%, #b07cff); }
#thui .th-go:disabled { opacity: 0.5; cursor: default; }
#thui .th-go:not(:disabled):hover, #thui .th-go:not(:disabled):focus-visible { filter: brightness(1.08); }
#thui .th-act small { font: 600 13px/1.4 Mali, sans-serif; color: #c9bfa0; text-align: center; }
#thui .th-mate { height: 44px; border: 0; border-radius: 10px; cursor: pointer; font: 700 15px Mali, sans-serif; background: linear-gradient(#4a5aa8, #2f3a78); box-shadow: inset 0 0 0 1px #b8c6ff; color: #eef2ff; }
#thui .th-link { align-self: center; border: 0; background: none; cursor: pointer; font: 600 13px Mali, sans-serif; color: #b9ae8e; text-decoration: underline; }
#thui .th-say { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 10px 18px; border-radius: 12px; background: rgba(8, 10, 22, 0.94); box-shadow: inset 0 0 0 1px #ffd36b; font: 700 15px Mali, sans-serif; color: #fff1cf; }
#thui .th-say.in { animation: thIn 0.2s ease-out both; }
/* phones: one column */
#thui.th-narrow .th-main { grid-template-columns: 1fr; }
#thui.th-narrow .th-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
#thui.th-narrow .th-room { flex: none; min-width: 190px; }
#thui.th-narrow .th-banner { height: 100px; }
#thui.th-narrow .th-banner b { font-size: 24px; }
#thui.th-narrow .th-banner span { font-size: 12px; }

/* ---- the warp button on the side of the screen (inside the hall and its rooms) ---- */
#thwarpbtn { position: absolute; right: calc(14px * var(--u)); top: 46%; z-index: 3; width: calc(78px * var(--u)); padding: calc(6px * var(--u)) 0 calc(5px * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(1px * var(--u)); border: 0; border-radius: calc(14px * var(--u)); cursor: pointer; pointer-events: auto;
  background: linear-gradient(rgba(30, 38, 74, 0.95), rgba(14, 18, 38, 0.95)); box-shadow: inset 0 0 0 calc(2px * var(--u)) #ffd36b, 0 4px 12px rgba(0, 0, 0, 0.45); color: #fff1cf; font-family: 'Mali', sans-serif; }
#thwarpbtn[hidden] { display: none; }
#thwarpbtn img { width: calc(46px * var(--u)); height: calc(46px * var(--u)); object-fit: contain; }
#thwarpbtn b { font: 800 calc(15px * var(--u))/1.1 Mali, sans-serif; }
#thwarpbtn small { font: 700 calc(11.5px * var(--u)) Fredoka, 'Mali', sans-serif; color: #ffe39a; }
#thwarpbtn i { position: absolute; inset: 0; display: none; place-items: center; border-radius: inherit; background: rgba(8, 10, 22, 0.7); font: 800 calc(28px * var(--u)) Fredoka, sans-serif; font-style: normal; color: #fff; }
#thwarpbtn.cd i { display: grid; }
#thwarpbtn:hover, #thwarpbtn:focus-visible { filter: brightness(1.12); }
/* the hall's ออก (js/treasure.js warpBtn): under the warp button, back to the capital */
#thleavebtn { position: absolute; right: calc(14px * var(--u)); top: calc(46% + 112px * var(--u)); z-index: 3; width: calc(78px * var(--u)); padding: calc(5px * var(--u)) 0; display: flex; align-items: center; justify-content: center; gap: calc(4px * var(--u));
  border: 0; border-radius: calc(12px * var(--u)); cursor: pointer; pointer-events: auto; background: linear-gradient(rgba(74, 26, 30, 0.95), rgba(38, 12, 16, 0.95)); box-shadow: inset 0 0 0 calc(2px * var(--u)) #e8826a, 0 4px 12px rgba(0, 0, 0, 0.45); color: #ffe6dc; }
#thleavebtn[hidden] { display: none; }
#thleavebtn i { font-style: normal; font-size: calc(16px * var(--u)); }
#thleavebtn b { font: 800 calc(14px * var(--u))/1.1 Mali, sans-serif; }
#thleavebtn:hover, #thleavebtn:focus-visible { filter: brightness(1.15); }