/* Floralia — ถ้ำ EXP (js/expcave.js): the bar while inside, the full-screen page (#xcui, G.overlay 'xcave'), the boss menu's
   weekly rows. Deep cave navy + the game's gold frame, each floor's own colour (--fc / --fc2) as the accent; numbers crisp,
   no glow round text. */

/* ---- the chip while inside a cave floor: a small pill under the minimap, beside the scan button (js/expcave.js place) ---- */
#xcbar { --fc: #5ff0e0; position: absolute; z-index: 3; display: flex; align-items: center; gap: calc(5px * var(--u)); height: calc(26px * var(--u));
  padding: 0 calc(3px * var(--u)) 0 calc(4px * var(--u)); border: 0; border-radius: 999px; pointer-events: auto; white-space: nowrap;
  background: rgba(8, 12, 22, 0.82); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 55%, transparent), 0 2px 6px rgba(0, 0, 0, 0.35);
  font: 700 calc(12.5px * var(--u)) 'Mali', sans-serif; color: #e8f4ff; }
#xcbar[hidden], #xcbar [hidden] { display: none; }
#xcbar .xb-main { display: flex; align-items: center; gap: calc(5px * var(--u)); height: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; white-space: nowrap; }
#xcbar .xb-main:hover, #xcbar .xb-main:focus-visible { filter: brightness(1.15); outline: none; }
#xcbar .xb-exit { height: calc(20px * var(--u)); margin-left: calc(2px * var(--u)); padding: 0 calc(8px * var(--u)); border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 110, 100, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 138, 122, 0.7); font: 700 calc(11.5px * var(--u)) 'Mali', sans-serif; color: #ffc4bb; }
#xcbar .xb-exit:hover, #xcbar .xb-exit:focus-visible { background: rgba(255, 110, 100, 0.32); outline: none; }
#xcbar.asking .xb-main, #xcbar.asking .xb-exit { display: none; }
#xcbar .xb-ask { display: flex; align-items: center; gap: calc(6px * var(--u)); padding-left: calc(6px * var(--u)); }
#xcbar .xb-ask b { font: 700 calc(12px * var(--u)) 'Mali', sans-serif; color: #fff; }
#xcbar .xb-ask small { font-weight: 500; color: #b9c6d6; }
#xcbar .xb-ask button { height: calc(20px * var(--u)); padding: 0 calc(9px * var(--u)); border: 0; border-radius: 999px; cursor: pointer; font: 700 calc(11.5px * var(--u)) 'Mali', sans-serif; }
#xcbar .xb-yes { background: linear-gradient(#ff8a7a, #d9483a); color: #fff; }
#xcbar .xb-no { background: rgba(255, 255, 255, 0.12); color: #e2efff; }
#xcbar img { width: calc(20px * var(--u)); height: calc(20px * var(--u)); object-fit: contain; }
#xcbar .xb-f { font: 800 calc(12.5px * var(--u)) 'Mali', sans-serif; color: var(--fc); }
#xcbar .xb-time { display: flex; align-items: center; gap: calc(2px * var(--u)); }
#xcbar .xb-time i { font-style: normal; font-size: calc(11px * var(--u)); }
#xcbar .xb-time b { font: 700 calc(13.5px * var(--u)) Fredoka, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
#xcbar .xb-time.low b { color: #ff7a6a; }
#xcbar .xb-boss { padding-left: calc(6px * var(--u)); border-left: 1px solid rgba(255, 255, 255, 0.18); font: 700 calc(12px * var(--u)) 'Mali', sans-serif; color: #ffe08a; font-variant-numeric: tabular-nums; }
#xcbar .xb-boss.live { color: #ffb0a6; animation: xbLive 1.6s ease-in-out infinite; }
@keyframes xbLive { 50% { filter: brightness(1.35); } }

/* ================= the page (#xcui) ================= */
#xcui { --fc: #5ff0e0; --fc2: #3ab8ff; --gold: #e8c46a; --gold2: #b8913a; --ink: #e8f0fa; --dim: #9fb0c4; --panel: rgba(10, 16, 28, 0.92);
  position: fixed; inset: 0; z-index: 900; pointer-events: auto; overflow: hidden; user-select: none; font-family: 'Mali', sans-serif; color: var(--ink);
  background: radial-gradient(ellipse 85% 70% at 60% 35%, color-mix(in srgb, var(--fc) 14%, #14203a) 0%, #0c1324 55%, #060a14 100%); animation: xcIn 0.2s ease-out both; }
@keyframes xcIn { from { opacity: 0; } to { opacity: 1; } }
#xcui[hidden], #xcui [hidden] { display: none !important; }
#xcui button { font-family: 'Mali', sans-serif; color: inherit; }
#xcui .xc-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; }
#xcui .xc-top { flex: none; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 14px 0 20px; background: linear-gradient(#070b14, #111a2c); border-bottom: 1px solid rgba(232, 196, 106, 0.55); }
#xcui .xc-title { display: flex; align-items: center; gap: 10px; }
#xcui .xc-title img { width: 46px; height: 46px; object-fit: contain; }
#xcui .xc-title b { font: 800 27px/1 Mali, sans-serif; color: var(--gold); }
#xcui .xc-title small { font: 600 14px Fredoka, sans-serif; color: var(--dim); letter-spacing: 1px; }
#xcui .xc-cur { margin-left: auto; display: flex; gap: 8px; }
#xcui .xc-chip { display: flex; align-items: center; gap: 6px; height: 32px; min-width: 90px; padding: 0 12px 0 6px; border-radius: 6px; background: #05080f; box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.45); cursor: pointer; }
#xcui .xc-chip.gold { cursor: default; }
#xcui .xc-chip img { width: 24px; height: 24px; object-fit: contain; }
#xcui .xc-chip em { margin-left: auto; font: 700 16px Fredoka, sans-serif; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
#xcui .xc-exit { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
#xcui .xc-exit i { width: 36px; height: 36px; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / contain no-repeat; }
#xcui .xc-exit:hover i, #xcui .xc-exit:focus-visible i { filter: brightness(1.2); transform: scale(1.08); }
#xcui .xc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; }

/* the banner (Codex, assets/icons_expcave/expcave_banner.jpg) */
#xcui .xc-banner { position: relative; height: 150px; margin-bottom: 14px; border-radius: 14px; background: #0b1222 center right / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.5); overflow: hidden; }
#xcui .xc-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 20, 0.94) 0%, rgba(6, 10, 20, 0.66) 36%, rgba(6, 10, 20, 0) 64%); }
#xcui .xc-banner div { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
#xcui .xc-banner b { font: 800 38px/1.05 Mali, sans-serif; color: #fff; }
#xcui .xc-banner span { font: 600 15px/1.4 Mali, sans-serif; color: #d6e2f0; max-width: 560px; }

#xcui .xc-main { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; }
#xcui .xc-left { display: flex; flex-direction: column; gap: 12px; }

/* today's time */
#xcui .xc-time { padding: 12px 14px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.4); display: flex; flex-direction: column; gap: 6px; }
#xcui .xc-time small { font: 700 13px Mali, sans-serif; color: var(--dim); }
#xcui .xc-time b { font: 800 34px/1 Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#xcui .xc-time.low b { color: #ff8a7a; }
#xcui .xc-track { display: block; height: 8px; border-radius: 4px; background: #04070d; box-shadow: inset 0 0 0 1px rgba(170, 200, 230, 0.25); overflow: hidden; }
#xcui .xc-track u { display: block; height: 100%; background: linear-gradient(90deg, var(--fc2), var(--fc)); }
#xcui .xc-time span { font: 500 12px/1.45 Mali, sans-serif; color: var(--dim); }

/* the three floors */
#xcui .xc-tabs { display: flex; flex-direction: column; gap: 8px; }
#xcui .xc-tab { --tc: #5ff0e0; position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 14%, #0c1424), #0a101c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); transition: transform 0.12s; }
#xcui .xc-tab:hover, #xcui .xc-tab:focus-visible { transform: translateX(3px); }
#xcui .xc-tab.on { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 30%, #0e1828), #0c1424); box-shadow: inset 0 0 0 2px var(--tc), 0 0 0 1px rgba(0, 0, 0, 0.6); }
#xcui .xc-tab.lock { filter: saturate(0.5); }
#xcui .xc-tab.lock .xc-tpic img { filter: grayscale(0.7) brightness(0.7); }
#xcui .xc-tpic { position: relative; flex: none; width: 70px; height: 70px; border-radius: 10px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tc) 30%, #10192c), #070b14); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent); }
#xcui .xc-tpic img { max-width: 92%; max-height: 92%; object-fit: contain; }
#xcui .xc-tpic i { position: absolute; left: 4px; top: 2px; font: 800 20px/1 Fredoka, sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 3px #0a0f1a; paint-order: stroke; }
#xcui .xc-tnm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#xcui .xc-tnm b { font: 800 16px/1.2 Mali, sans-serif; color: var(--tc); }
#xcui .xc-tnm small { font: 600 12.5px Mali, sans-serif; color: var(--dim); }
#xcui .xc-tnm em { font: 700 12px Mali, sans-serif; font-style: normal; color: #e0cfa0; }
#xcui .xc-tnm em.live { color: #ffb0a6; }
#xcui .xc-tab u { position: absolute; right: 8px; top: 6px; text-decoration: none; font: 700 10.5px Mali, sans-serif; color: #0a0f1a; background: var(--tc); border-radius: 8px; padding: 1px 7px; }


/* the picked floor */
#xcui .xc-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#xcui .xc-hero { --tc: #5ff0e0; position: relative; display: grid; grid-template-columns: 210px 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 22%, #0c1526) 0%, #0a111e 55%, #080d17 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent), 0 6px 18px rgba(0, 0, 0, 0.35); }
#xcui .xc-hart { width: 210px; height: 160px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--tc) 35%, #12203a), #070b14 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); overflow: hidden; }
#xcui .xc-hart img { width: 88%; height: 88%; object-fit: contain; }
#xcui .xc-htxt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#xcui .xc-htxt > small { font: 700 13px Fredoka, sans-serif; color: var(--tc); letter-spacing: 1px; }
#xcui .xc-htxt > b { font: 800 30px/1.1 Mali, sans-serif; color: #fff; }
#xcui .xc-htxt p { margin: 0; font: 500 13.5px/1.55 Mali, sans-serif; color: #c4d2e2; }
#xcui .xc-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#xcui .xc-facts span { display: flex; flex-direction: column; gap: 1px; padding: 5px 12px; border-radius: 8px; background: #050910; box-shadow: inset 0 0 0 1px rgba(170, 200, 230, 0.25); }
#xcui .xc-facts small { font: 600 11px Mali, sans-serif; color: var(--dim); }
#xcui .xc-facts b { font: 800 17px Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#xcui .xc-go { display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: end; }
#xcui .xc-enter { min-width: 210px; height: 56px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer; font: 800 18px Mali, sans-serif; color: #2a1c06 !important;
  background: linear-gradient(#ffe8a0, #e8b84a 55%, #c08a2a); box-shadow: inset 0 0 0 2px #fff2c8, inset 0 -3px 0 rgba(120, 70, 10, 0.4), 0 4px 14px rgba(0, 0, 0, 0.4); }
#xcui .xc-enter:hover:not(:disabled), #xcui .xc-enter:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
#xcui .xc-enter:disabled { cursor: default; color: #9aa6b4 !important; background: linear-gradient(#2a3446, #1a2232); box-shadow: inset 0 0 0 1px rgba(170, 200, 230, 0.3); }
#xcui .xc-link { border: 0; background: none; cursor: pointer; font: 600 12.5px Mali, sans-serif; color: #ffb4aa; text-decoration: underline; }
#xcui .xc-leave { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 210px; padding: 8px 18px; border: 0; border-radius: 12px; cursor: pointer; font: 800 15px Mali, sans-serif; color: #ffd6d0 !important;
  background: linear-gradient(#5a1c1a, #3a100e); box-shadow: inset 0 0 0 1.5px #ff8a7a, 0 3px 10px rgba(0, 0, 0, 0.35); }
#xcui .xc-leave small { font: 500 11px Mali, sans-serif; color: #e8b8b0; }
#xcui .xc-leave:hover, #xcui .xc-leave:focus-visible { filter: brightness(1.15); }

#xcui .xc-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: start; }
#xcui .xc-card { padding: 14px 16px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.35); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#xcui .xc-card h4 { margin: 4px 0 0; font: 800 15px Mali, sans-serif; color: var(--gold); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#xcui .xc-card h4 small { font: 500 11.5px Mali, sans-serif; color: var(--dim); }
#xcui .xc-mobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#xcui .xc-mob { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 0; border-radius: 10px; cursor: pointer; background: #060a12; box-shadow: inset 0 0 0 1px rgba(170, 200, 230, 0.22); }
#xcui .xc-mob img { width: 52px; height: 52px; object-fit: contain; }
#xcui .xc-mob .xc-ph { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, rgba(170, 200, 230, 0.16), transparent 70%); }
#xcui .xc-mob small { font: 600 11px/1.2 Mali, sans-serif; color: #cfdbe8; text-align: center; }
#xcui .xc-mob.el { box-shadow: inset 0 0 0 1px #ffb347; }
#xcui .xc-mob.mini { box-shadow: inset 0 0 0 1px #ff9ab8; }
#xcui .xc-mob:hover, #xcui .xc-mob:focus-visible { background: #0d1626; }
#xcui .xc-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font: 500 13px/1.45 Mali, sans-serif; color: #c9d6e4; }
#xcui .xc-list b { color: var(--gold); }

/* the weekly boss */
#xcui .xc-bosscard { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 55%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 12%, #0b1322), rgba(10, 16, 28, 0.95) 45%); }
#xcui .xc-bhead { display: flex; gap: 12px; align-items: center; width: 100%; padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; }
#xcui .xc-bhead:hover, #xcui .xc-bhead:focus-visible { background: rgba(255, 255, 255, 0.05); }
#xcui .xc-bhead .xc-more { margin-left: auto; font: 800 26px/1 Fredoka, sans-serif; font-style: normal; color: var(--gold); }
#xcui .xc-bhead img { flex: none; width: 84px; height: 84px; object-fit: contain; border-radius: 12px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fc) 30%, #10192c), #060a12); box-shadow: inset 0 0 0 2px var(--gold2); }
#xcui .xc-bhead div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#xcui .xc-bhead small { font: 700 12px Mali, sans-serif; color: var(--fc); }
#xcui .xc-bhead b { font: 800 22px/1.15 Mali, sans-serif; color: #fff; }
#xcui .xc-bhead span { font: 600 12.5px Mali, sans-serif; color: #d9c48e; }
#xcui .xc-bclock { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 12px; background: #04070d; box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.45); text-align: center; }
#xcui .xc-bclock small { font: 700 12px Mali, sans-serif; color: var(--dim); }
#xcui .xc-bclock b { font: 800 32px/1.1 Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#xcui .xc-bclock span { font: 600 12.5px Mali, sans-serif; color: #d9c48e; }
#xcui .xc-bclock.live { background: linear-gradient(#5a1418, #2e0a0e); box-shadow: inset 0 0 0 2px #ff8a7a; }
#xcui .xc-bclock.live b { color: #ffd2cc; }
#xcui .xc-raid { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 120, 90, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 150, 120, 0.35); font: 600 12.5px/1.45 Mali, sans-serif; color: #f2d6cc; }
#xcui .xc-raid b { color: #fff; }
.xc-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xc-g { --gc: #fff; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; background: #05080f; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent); }
.xc-g i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--gc); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }
.xc-g b { font: 800 14px Mali, sans-serif; color: var(--gc); }
.xc-g em { margin-left: auto; font: 800 17px Fredoka, sans-serif; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.xc-g.g5 { background: linear-gradient(#2a0c12, #12060a); box-shadow: inset 0 0 0 2px var(--gc); animation: xcMyth 2.2s ease-in-out infinite; }
@keyframes xcMyth { 50% { filter: brightness(1.3); } }
.xc-g:hover, .xc-g:focus-visible { filter: brightness(1.2); }
#xcui .xc-chest { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#xcui .xc-chest li { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: start; padding: 7px 10px; border-radius: 10px; background: #060a12; box-shadow: inset 0 0 0 1px rgba(170, 200, 230, 0.2); }
#xcui .xc-chest span { font: 800 13px Mali, sans-serif; color: var(--gold); }
#xcui .xc-chest p { margin: 0; font: 500 12.5px/1.5 Mali, sans-serif; color: #cfdbe8; }
.xc-myth { color: #ff6a78; }

#xcui .xc-say { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: rgba(6, 10, 18, 0.95); box-shadow: inset 0 0 0 1px var(--gold); font: 700 15px Mali, sans-serif; color: #fff; }
#xcui .xc-say.in { animation: xcSay 0.25s ease-out both; }
@keyframes xcSay { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* phone width */
#xcui.xc-narrow .xc-body { padding: 10px 12px 18px; }
#xcui.xc-narrow .xc-title small, #xcui.xc-narrow .xc-chip.gold { display: none; }
#xcui.xc-narrow .xc-chip { min-width: 0; }
#xcui.xc-narrow .xc-banner { height: 110px; }
#xcui.xc-narrow .xc-banner b { font-size: 28px; }
#xcui.xc-narrow .xc-banner span { font-size: 12.5px; max-width: 70%; }
#xcui.xc-narrow .xc-main, #xcui.xc-narrow .xc-cols { grid-template-columns: 1fr; }
#xcui.xc-narrow .xc-hero { grid-template-columns: 1fr; }
#xcui.xc-narrow .xc-hart { width: 100%; height: 130px; }
#xcui.xc-narrow .xc-enter { width: 100%; }
#xcui.xc-narrow .xc-mobs { grid-template-columns: repeat(3, 1fr); }

/* ---- the weekly boss's card over the page (the monster card's look, css/localmap.css .lmp) ---- */
#xcpop { position: fixed; z-index: 956; right: 2vw; top: 50%; width: 360px; max-height: calc((100vh - 40px) / var(--k, 1)); pointer-events: auto;
  transform: translateY(-50%) scale(var(--k, 1)); transform-origin: right center; animation: lmpIn 0.18s ease-out both; }
#xcpop .lmp-info { padding-right: 0; }
#xcpop .xc-pl { font: 700 13px Mali, sans-serif; color: #ffe08a; }
#xcpop .xc-pl.live { color: #ffb0a6; }
#xcpop .xc-pbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #6b5a3a transparent; }
#xcpop .xc-pskills { margin: 0; padding: 6px 14px 6px 32px; display: flex; flex-direction: column; gap: 3px; font: 600 12.5px/1.4 Mali, sans-serif; color: #e9e2cf; }
#xcpop .xc-pskills small { color: #ff9a8a; font-weight: 500; }
#xcpop .xc-pgrades { padding: 8px 10px; }
#xcpop .xc-pgrades .xc-g { padding: 6px 8px; }
#xcpop .xc-pgrades .xc-g b { font-size: 12.5px; }
#xcpop .xc-pgrades .xc-g em { font-size: 15px; }
#xcpop .xc-pchest { margin: 0; padding: 8px 10px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#xcpop .xc-pchest li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #0c0b0f; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.25); }
#xcpop .xc-pchest span { font: 800 12.5px Mali, sans-serif; color: #f6dc98; }
#xcpop .xc-pchest p { margin: 0; font: 500 12px/1.45 Mali, sans-serif; color: #e0d8c4; }

/* ---- the picked floor's own time crystal, above its enter button ---- */
#xcui .xc-cry { --tc: #5ff0e0; width: 0; min-width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 12px; background: #060a12; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); }
#xcui .xc-cic { position: relative; width: 40px; height: 40px; cursor: pointer; }
#xcui .xc-cic img { width: 40px; height: 40px; object-fit: contain; }
#xcui .xc-cic em { position: absolute; right: -2px; bottom: -2px; font: 800 12px Fredoka, sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 3px #05080f; paint-order: stroke; }
#xcui .xc-cnm { display: flex; flex-direction: column; min-width: 0; }
#xcui .xc-cnm b { font: 800 13px Mali, sans-serif; color: var(--tc); }
#xcui .xc-cic.none img { filter: grayscale(1) brightness(0.7); }
#xcui .xc-cnm small { font: 600 11px/1.35 Mali, sans-serif; color: var(--dim); }
#xcui .xc-cuse { grid-column: 1 / -1; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer; font: 700 13px Mali, sans-serif; color: #2a1c06 !important; background: linear-gradient(#ffe8a0, #e8b84a); box-shadow: inset 0 0 0 1px #fff2c8; }
#xcui .xc-cuse:hover:not(:disabled), #xcui .xc-cuse:focus-visible { filter: brightness(1.08); }
#xcui .xc-cuse:disabled { cursor: default; color: #8a96a6 !important; background: #1a2232; box-shadow: inset 0 0 0 1px rgba(170, 200, 230, 0.25); }
#xcui .xc-crule { grid-column: 1 / -1; margin: -2px 0 0; text-align: center; font: 600 11px/1.3 Mali, sans-serif; color: var(--dim); }
#xcui .xc-crule u { text-decoration: none; color: #ffe08a; }

/* ---- "ดรอปพิเศษในถ้ำ": the cave bosses' best things first (page, boss menu, boss card, monster card) ---- */
.xc-sps { display: flex; flex-direction: column; gap: 5px; }
.xc-sp { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, rgba(232, 196, 106, 0.12), rgba(6, 10, 18, 0.9) 60%); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.35); }
.xc-sp.top { background: linear-gradient(90deg, rgba(255, 179, 64, 0.22), rgba(6, 10, 18, 0.9) 70%); box-shadow: inset 0 0 0 1.5px #ffb340; }
.xc-sp img { width: 40px; height: 40px; object-fit: contain; }
.xc-sp span { display: flex; flex-direction: column; min-width: 0; }
.xc-sp b { font: 800 13px Mali, sans-serif; color: #fff2d0; }
.xc-sp small { font: 500 11.5px/1.4 Mali, sans-serif; color: #d6cbb0; }
.xc-sp small i { font-style: normal; font-weight: 700; }
.xc-sp em { font: 800 12.5px Fredoka, Mali, sans-serif; font-style: normal; color: #ffe08a; white-space: nowrap; }
.xc-sp:hover, .xc-sp:focus-visible { filter: brightness(1.15); outline: none; }
/* (the boss's weapons row: the title + grades, then one picture per weapon; your class ringed in gold) */
.xc-sp.xc-wrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.xc-wps { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-wp { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); cursor: pointer; }
.xc-wp img { width: 40px; height: 40px; object-fit: contain; }
.xc-wp.own { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 8px rgba(255, 215, 106, .6); }
.xc-wp:hover, .xc-wp:focus-visible { filter: brightness(1.2); outline: none; }
.xc-spnote { margin: 2px 2px 0; font: 500 11px Mali, sans-serif; color: #a9b6c6; }
#xcui .xc-sph { color: #ffcf6a; }
.lmp-sph { margin: 6px 4px 4px; font: 800 13px Mali, sans-serif; color: #ffcf6a; }
.lmp-sph small { font: 500 11px Mali, sans-serif; color: #a89e8a; margin-left: 4px; }
#xcpop .xc-pgrades .xc-sps { margin-bottom: 8px; }
/* the bag's greyed "ใช้" with its reason */
.btn[data-act="xcUse"] small { display: block; font-size: 0.72em; font-weight: 500; opacity: 0.85; }