/* Floralia — รอยแยกนิลกาฬ (js/rift.js): the bar while inside, the full-screen page (#riftui, G.overlay 'rift'), the atlas mark.
   Obsidian + violet, the ranking / diamond shop's frame; numbers crisp, no glow round text. */

/* ---- the bar over the game while inside a rift floor ---- */
#riftbar { 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(26, 18, 40, 0.94), rgba(14, 10, 22, 0.94)); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.45);
  font-family: 'Mali', sans-serif; color: #efe6ff; white-space: nowrap; }
#riftbar[hidden] { display: none; }
#riftbar .rb-name { display: flex; align-items: center; gap: calc(6px * var(--u)); }
#riftbar .rb-name img { width: calc(30px * var(--u)); height: calc(30px * var(--u)); object-fit: contain; }
#riftbar .rb-name b { font: 800 calc(14px * var(--u))/1.1 Mali, sans-serif; color: #e5d8ff; }
#riftbar .rb-name small { font: 600 calc(11.5px * var(--u)) Mali, sans-serif; color: #b6a8d6; margin-left: calc(4px * var(--u)); }
#riftbar .rb-time, #riftbar .rb-bs { 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: #0b0911; box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.35); }
#riftbar .rb-time i { font-style: normal; font-size: calc(13px * var(--u)); }
#riftbar .rb-time b { font: 800 calc(15px * var(--u)) Fredoka, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
#riftbar .rb-time.low b { color: #ff8a7a; }
#riftbar .rb-bs { cursor: pointer; }
#riftbar .rb-bs img { width: calc(20px * var(--u)); height: calc(20px * var(--u)); object-fit: contain; }
#riftbar .rb-bs b { font: 700 calc(13px * var(--u)) Fredoka, sans-serif; color: #ddd2ff; font-variant-numeric: tabular-nums; }
#riftbar 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; }
#riftbar .rb-add { background: linear-gradient(#6a58a8, #43357a); color: #f3eeff; box-shadow: inset 0 0 0 1px #c8b6ff; }
#riftbar .rb-page { width: calc(26px * var(--u)); padding: 0; background: rgba(255, 255, 255, 0.08); color: #e5d8ff; box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.4); }
#riftbar .rb-out { background: rgba(255, 110, 100, 0.16); color: #ffc4bb; box-shadow: inset 0 0 0 1px rgba(255, 138, 122, 0.6); }
#riftbar button:hover, #riftbar button:focus-visible { filter: brightness(1.18); }

/* ---- the world atlas: the rift's mark on the capital's plate ---- */
#ui .bw-worldmap .wm-atlas.v2 .wm-rdg.rift { left: 3%; right: auto; top: -8%; width: 34px; height: 34px; animation: none; }

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

/* the banner (Codex, assets/icons_cur/rift_banner.jpg) */
#riftui .rf-banner { position: relative; height: 170px; margin-bottom: 14px; border-radius: 14px; background: #120f1c center right / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.5); overflow: hidden; }
#riftui .rf-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 9, 24, 0.92) 0%, rgba(14, 9, 24, 0.6) 34%, rgba(14, 9, 24, 0) 60%); }
#riftui .rf-banner div { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
#riftui .rf-banner b { font: 800 40px/1.05 Mali, sans-serif; color: #efe6ff; }
#riftui .rf-banner span { font: 600 16px/1.4 Mali, sans-serif; color: #cfc2ec; }
#riftui.rf-narrow .rf-banner { height: 110px; }
#riftui.rf-narrow .rf-banner b { font-size: 26px; }
#riftui.rf-narrow .rf-banner span { font-size: 13px; }

/* time, quota, charges */
#riftui .rf-time { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 14px; margin-bottom: 14px; }
#riftui .rf-time > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(#251c33, #17121f); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.35); }
#riftui .rf-time small { font: 600 13.5px Mali, sans-serif; color: #b6a8d6; }
#riftui .rf-clock b { font: 800 42px/1.05 Fredoka, sans-serif; color: #ffffff; font-variant-numeric: tabular-nums; }
#riftui .rf-clock.low b { color: #ff8a7a; }
#riftui .rf-time span { font: 500 12.5px/1.5 Mali, sans-serif; color: #a99bc9; }
#riftui .rf-quota { cursor: pointer; }
#riftui .rf-quota b { font: 800 30px/1.1 Fredoka, sans-serif; color: #ddd2ff; font-variant-numeric: tabular-nums; }
#riftui .rf-quota i { display: block; height: 8px; border-radius: 4px; background: #0b0911; box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.3); overflow: hidden; }
#riftui .rf-quota u { display: block; height: 100%; background: linear-gradient(90deg, #6a58a8, #c8b6ff); }
#riftui .rf-charge { flex-direction: row !important; align-items: center; gap: 14px !important; }
#riftui .rf-cic { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle, rgba(167, 123, 232, 0.35), rgba(0, 0, 0, 0) 70%); cursor: pointer; }
#riftui .rf-cic img { width: 68px; height: 68px; object-fit: contain; }
#riftui .rf-cic em { position: absolute; right: 2px; bottom: 0; padding: 0 6px; border-radius: 8px; background: #0b0911; font: 800 14px Fredoka, sans-serif; font-style: normal; color: #fff; }
#riftui .rf-charge b { font: 800 18px Mali, sans-serif; color: #efe6ff; }
#riftui .rf-cbtns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
#riftui .rf-cbtns button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer; font: 700 13.5px Mali, sans-serif; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.45); color: #ece4ff; }
#riftui .rf-cbtns button:first-child { background: linear-gradient(#6a58a8, #43357a); }
#riftui .rf-cbtns button:disabled { opacity: 0.45; cursor: default; }
#riftui .rf-cbtns button:hover:not(:disabled) { filter: brightness(1.15); }

/* the floors */
#riftui .rf-floors { display: flex; flex-direction: column; gap: 12px; }
#riftui .rf-floor { display: flex; align-items: stretch; gap: 16px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 55%, transparent), inset 4px 0 0 var(--fc); }
#riftui .rf-floor.lock { opacity: 0.62; }
#riftui .rf-floor.here { box-shadow: inset 0 0 0 2px var(--fc), inset 4px 0 0 var(--fc), 0 0 0 1px rgba(255, 255, 255, 0.08); }
#riftui .rf-fart { position: relative; flex: none; width: 150px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--fc) 35%, transparent), rgba(0, 0, 0, 0) 70%); }
#riftui .rf-fart img { width: 132px; height: 112px; object-fit: contain; }
#riftui .rf-fart b { position: absolute; left: 6px; top: 4px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #0b0911; box-shadow: inset 0 0 0 2px var(--fc); font: 800 19px Fredoka, sans-serif; color: #fff; }
#riftui .rf-fmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#riftui .rf-fhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#riftui .rf-fhead b { font: 800 20px/1.2 Mali, sans-serif; color: #f2ecff; }
#riftui .rf-fhead i { padding: 1px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.35); font: 700 13px/1.5 Mali, sans-serif; font-style: normal; color: #ddd2ff; }
#riftui .rf-fhead i.cp { color: #ffd98a; }
#riftui .rf-fhead i.now { background: #1f5a2a; box-shadow: inset 0 0 0 1px #9be37b; color: #e6ffd9; }
#riftui .rf-story { margin: 0; font: 500 13px/1.5 Mali, sans-serif; color: #b9aed0; }
#riftui .rf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#riftui .rf-lbl { min-width: 70px; font: 700 12.5px Mali, sans-serif; color: #a99bc9; }
#riftui .rf-mob { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 3px; border: 0; border-radius: 9px; cursor: pointer; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.3); }
#riftui .rf-mob img { width: 36px; height: 36px; object-fit: contain; }
#riftui .rf-mob.boss { padding-right: 10px; box-shadow: inset 0 0 0 1px #e07a7a; }
#riftui .rf-mob.boss small { font: 700 12.5px Mali, sans-serif; color: #ffc4bb; }
#riftui .rf-mob:hover, #riftui .rf-rw:hover, #riftui .rf-card:hover { filter: brightness(1.18); }
#riftui .rf-rw { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px 0 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.3); font: 700 12.5px Mali, sans-serif; color: #e7dcff; cursor: pointer; }
#riftui .rf-rw img { width: 24px; height: 24px; object-fit: contain; }
#riftui .rf-card { width: 32px; height: 40px; display: grid; place-items: center; border-radius: 5px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 217, 138, 0.5); }
#riftui .rf-card img { width: 30px; height: 38px; object-fit: contain; }
#riftui .rf-fgo { flex: none; display: flex; align-items: center; }
#riftui .rf-enter { min-width: 150px; height: 56px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer; font: 800 19px Mali, sans-serif; background: linear-gradient(#8a6be0, #4d3794); color: #fbf7ff; box-shadow: inset 0 0 0 1px #d9c9ff, 0 4px 12px rgba(0, 0, 0, 0.35); }
#riftui .rf-enter:hover:not(:disabled), #riftui .rf-enter:focus-visible { filter: brightness(1.15); }
#riftui .rf-enter:disabled { cursor: default; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.3); color: #a99bc9; font-size: 16px; }
#riftui .rf-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(200, 182, 255, 0.25); font: 500 13.5px/1.6 Mali, sans-serif; color: #c4bad8; }
#riftui .rf-link { padding: 0 4px; border: 0; background: none; color: #ffb0a4; font: 700 13.5px Mali, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#riftui .rf-say { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 6; padding: 10px 22px; border-radius: 10px; background: rgba(10, 8, 14, 0.95); box-shadow: inset 0 0 0 1px #c8b6ff;
  font: 700 16px/1.4 Mali, sans-serif; color: #efe6ff; pointer-events: none; white-space: nowrap; }
#riftui .rf-say.in { animation: rfSay 0.25s ease-out both; }
@keyframes rfSay { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* a phone */
#riftui.rf-narrow .rf-top { height: auto; flex-wrap: wrap; padding: 8px 52px 8px 10px; position: relative; }
#riftui.rf-narrow .rf-exit { position: absolute; right: 4px; top: 4px; }
#riftui.rf-narrow .rf-title b { font-size: 20px; }
#riftui.rf-narrow .rf-title small { display: none; }
#riftui.rf-narrow .rf-body { padding: 10px; }
#riftui.rf-narrow .rf-time { grid-template-columns: 1fr; }
#riftui.rf-narrow .rf-floor { flex-direction: column; }
#riftui.rf-narrow .rf-fart { width: auto; height: 90px; }
#riftui.rf-narrow .rf-fart img { height: 86px; }
#riftui.rf-narrow .rf-enter { width: 100%; }
#riftui.rf-narrow .rf-say { white-space: normal; width: 90%; text-align: center; }