/* rift（2026-10-01.3）：由 index.html 在 style.css 後面載入 */
/* 異次元世界（js/rift.js）：紫、青、星空的配色；羊皮紙（淺色）＋夜戰；手機一欄、電腦兩欄，不能橫向捲動
   結果面板（openSheet）是掛在 body 底下的，所以顏色變數也放在 .rf-sheet 上 */
.rift-page, .rf-sheet {
  --rf: #6a3fc8; --rf-2: #11879b; --rf-ink: #4b2a98; --rf-soft: rgba(106, 63, 200, 0.09); --rf-line: rgba(106, 63, 200, 0.38);
  --rf-good: #2e8a57; --wb: #c0392b;
}
:root[data-theme="night"] .rift-page, :root[data-theme="night"] .rf-sheet {
  --rf: #b48cff; --rf-2: #5edcf0; --rf-ink: #d4bfff; --rf-soft: rgba(180, 140, 255, 0.11); --rf-line: rgba(180, 140, 255, 0.42);
  --rf-good: #5fd07a; --wb: #ff6a5a;
}
.rift-page .card h2::before { background: var(--rf); }
.rift-page .rf-boss h2::before { background: var(--wb); }

/* 版面：手機一欄（地圖 → 作戰 → 世界王 → 征服 → 隊伍 → 說明）；電腦兩欄（左：作戰、隊伍、說明；右：地圖、世界王、征服） */
.rf-grid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rf-col { display: contents; }
.rf-map-card { order: 1; }
.rf-stage { order: 2; }
.rf-boss { order: 3; }
.rf-conq { order: 4; }
.rf-party { order: 5; }
.rf-info { order: 6; }
@media (min-width: 1000px) {
  .rf-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .rf-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
}

/* 主要按鈕：穿越（紫）、世界王（紅） */
.btn.rf-go { background: linear-gradient(180deg, #7d52dc, #5a31b4); border-color: #4a2596; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 3px 0 #33196e; }
.btn.rf-go:hover { background: linear-gradient(180deg, #8a62e6, #6238c0); border-color: #4a2596; }
.btn.rf-go:active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 1px 0 #33196e; }
:root[data-theme="night"] .btn.rf-go { background: linear-gradient(180deg, #a57cff, #7a4fe0); border-color: #6a40d0; box-shadow: 0 3px 0 #3e2396; }
:root[data-theme="night"] .btn.rf-go:hover { background: linear-gradient(180deg, #b28eff, #8459ea); }
.btn.rf-wb-go { background: linear-gradient(180deg, #e0503a, #a8281c); border-color: #7a1a12; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 200, 0.35), 0 3px 0 #5c130c; }
.btn.rf-wb-go:hover { background: linear-gradient(180deg, #ea5f48, #b52e20); border-color: #7a1a12; }
.btn.rf-wb-go:not(:disabled) { animation: rf-wb-pulse 1.8s ease-in-out infinite; }
:root[data-theme="night"] .btn.rf-wb-go { background: linear-gradient(180deg, #ff6a50, #c8321f); border-color: #a02818; box-shadow: 0 3px 0 #6a1a10; }

/* 🎁 可以領的獎勵 */
.rf-claim { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-color: var(--rf-line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--rf) 16%, var(--surface)), color-mix(in srgb, var(--rf-2) 14%, var(--surface))); }
.rf-claim-ico { font-size: 34px; line-height: 1; animation: rf-bob 1.4s ease-in-out infinite; }
.rf-claim-main { flex: 1 1 180px; display: grid; gap: 2px; line-height: 1.45; min-width: 0; }
.rf-claim-main b { font-size: 16px; color: var(--rf-ink); }
.rf-claim .rf-go { flex: 0 1 240px; }
@media (max-width: 560px) { .rf-claim .rf-go { flex: 1 1 100%; } }

/* 🌀 次元地圖（js/exp-map.js 的 riftMap） */
.rf-tier { font-weight: 800; color: var(--rf-ink); background: var(--rf-soft); border: 1px solid var(--rf-line); padding: 1px 10px; border-radius: 999px; white-space: nowrap; }
.rift-page .rift-box { max-width: 640px; margin: 0 auto; border: 2px solid #1c1238; border-radius: 10px; overflow: hidden; background: #0b0a18;
  box-shadow: 0 0 0 2px var(--rf-line), 0 10px 26px -14px color-mix(in srgb, var(--rf) 80%, transparent); }
.rift-page .rm-zone { pointer-events: auto; cursor: pointer; margin: 0; border: 0; font: 700 11px/1.25 var(--font); color: #efe6ff;
  background: rgba(22, 14, 44, 0.86); box-shadow: 0 0 0 1px rgba(200, 170, 255, 0.4); transition: transform 0.12s; }
.rift-page .rm-zone:hover { transform: translate(-50%, -50%) scale(1.06); }
.rift-page .rm-zone:focus-visible { outline: 2px solid #8af0ff; outline-offset: 2px; }
.rift-page .rm-zone.clear .em-n { color: #ffd54a; }
.rift-page .rm-zone.cur { background: #5a2aa8; color: #fff; box-shadow: 0 0 0 2px #8af0ff, 0 0 10px rgba(138, 240, 255, 0.6); }
.rift-page .rm-zone.cur .em-n { color: #bff6ff; }
.rift-page .rm-zone.locked { background: rgba(40, 44, 56, 0.84); color: #b4b9c8; cursor: not-allowed; }
.rift-page .rm-zone.sel { box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(255, 255, 255, 0.75); }
.rift-page .rm-zone.cur.sel { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #8af0ff, 0 0 12px rgba(138, 240, 255, 0.7); }
/* 手機：地圖小，已征服、還沒開放的區域名字縮成一行（「✓ 晶石荒原」「🔒 混沌王座」），征服中的那一區才寫百分比 */
@media (max-width: 560px) {
  .rift-page .rm-zone { padding: 1px 6px; }
  .rift-page .rm-zone:not(.cur) .em-n { display: none; }
  .rift-page .rm-zone.clear b::before { content: '✓ '; color: #ffd54a; }
  .rift-page .rm-zone.locked b::before { content: '🔒'; }
}
/* 你的隊伍在哪一區：riftMap 的紅色小旗子站在路上，常常被區域的名字蓋住 → 這一頁改成在選到的區域名字前面加 📍 */
.rift-page .riftmap .em-pin:not(.rm-boss-ico) { visibility: hidden; }
.rift-page .rm-zone.sel b::before { content: '📍'; margin-right: 1px; color: inherit; }
@media (min-width: 560px) { .rift-page .rm-zone { font-size: 13px; } }
.rift-page .rm-boss { z-index: 2; min-width: 66px; color: #ffe2da; background: rgba(70, 8, 14, 0.9); box-shadow: 0 0 0 1px #ff5a4a, 0 0 10px rgba(255, 60, 40, 0.55); }
.rift-page .rm-boss .em-n { color: #ffb4a8; }
.rift-page .rm-hp { display: block; width: 100%; height: 4px; margin-top: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.rift-page .rm-hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff3a2a, #ffb03a); }
.rift-page .rm-boss-ico { z-index: 1; filter: drop-shadow(0 0 1px #ff2a1a) drop-shadow(0 0 3px rgba(255, 40, 30, 0.9)); }
/* 世界王走到區域名字上面（js/rift.js 的 dimUnderBoss）：名字淡一點；移上去、選到就變回來 */
.rift-page .rm-zone.rf-under { opacity: 0.45; }
.rift-page .rm-zone.rf-under:hover, .rift-page .rm-zone.rf-under:focus-visible { opacity: 1; z-index: 3; }
/* 手機：地圖小，世界王的牌子常常蓋到區域的名字 → 藏起來，改看地圖下面那一行（名字、血量、倒數） */
@media (max-width: 560px) { .rift-page .rm-boss { display: none; } }
.rf-map-boss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 10px; border-radius: 10px; line-height: 1.55;
  border: 1px solid color-mix(in srgb, var(--wb) 35%, transparent); background: color-mix(in srgb, var(--wb) 8%, transparent); }
.rf-map-boss b { color: var(--wb); font-variant-numeric: tabular-nums; }
.rf-map-boss .rf-cd { font-weight: 800; font-variant-numeric: tabular-nums; }
.rf-map-boss.dead { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.rf-map-boss.dead b { color: var(--gold-ink); }
.rf-map-boss.gone { border-color: var(--rf-line); background: var(--rf-soft); }
.rf-map-boss.gone b { color: var(--rf-ink); }
.rf-jump { margin-left: auto; font-size: 13px; white-space: nowrap; }
.rf-map-info { display: grid; gap: 4px; margin-top: 10px; }
.rf-map-info p { margin: 0; }
.rf-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--text-2); }
.rf-legend span { white-space: nowrap; }

/* ⚔️ 作戰區：六區分頁 */
.rf-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.rf-tab { display: grid; justify-items: center; align-content: start; gap: 1px; min-width: 0; padding: 6px 2px 5px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--field); color: inherit; font: inherit; line-height: 1.25; cursor: pointer; }
.rf-tab:hover:not(:disabled) { border-color: var(--rf); }
.rf-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rf-tab.on { border-color: var(--rf); background: color-mix(in srgb, var(--rf) 14%, var(--field)); box-shadow: 0 0 0 1px var(--rf); }
.rf-tab:disabled { cursor: default; opacity: 0.5; }
.rf-tab.lock { border-style: dashed; }
.rf-tab-ico { font-size: 17px; line-height: 1.15; }
.rf-tab-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 12px; }
.rf-tab.on .rf-tab-name { color: var(--rf-ink); }
.rf-tab-st { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rf-tab.done .rf-tab-st { color: var(--rf-good); }
.rf-tab.cur .rf-tab-st { color: var(--rf); }
@media (max-width: 560px) { .rf-tab-l { display: none; } }

/* 實景 */
.rift-page .exp-scene { box-shadow: 0 0 0 2px var(--rf-line), 0 8px 24px -14px color-mix(in srgb, var(--rf) 85%, transparent); }
.rift-page .exp-scene.battling { box-shadow: 0 0 0 2px var(--rf), 0 0 18px -2px color-mix(in srgb, var(--rf) 70%, transparent); }
.rift-page .exp-scene.rf-wb-fight { box-shadow: 0 0 0 2px var(--wb), 0 0 22px -2px rgba(255, 40, 30, 0.7); }
.shrine-sign.rf-sign { background: #3a1f72; border-color: #1a0e3a; color: #f1e8ff; }

/* 下一場 */
.rf-fight { gap: 10px; }
.rf-fight p { margin: 0; }
.rf-mode { padding: 7px 10px; border-radius: 10px; line-height: 1.55; border: 1px solid var(--rf-line); background: var(--rf-soft); }
.rf-mode b { color: var(--rf-ink); }
.rf-mode.done { border-color: color-mix(in srgb, var(--rf-good) 45%, transparent); background: color-mix(in srgb, var(--rf-good) 9%, transparent); }
.rf-mode.done b { color: var(--rf-good); }
.rf-wave { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rf-wdots { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; }
.rf-wdot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); }
.rf-wdot.on { background: var(--rf); }
.rf-wdot.next { background: var(--rf-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-2) 30%, transparent); animation: rf-blink 0.9s ease-in-out infinite alternate; }
.rf-wdot.boss { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: color-mix(in srgb, #c0392b 40%, var(--line-2)); }
.rf-wdot.boss.next { background: #e0452e; box-shadow: 0 0 0 3px rgba(224, 69, 46, 0.3); }
.rf-guard { color: var(--wb); }
.rf-gain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; line-height: 1.6; }
.rf-gain b { color: var(--gold); font-variant-numeric: tabular-nums; }
.rf-sub-act { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-go-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.rf-go-row .rf-go { flex: 0 1 260px; }
.rf-day b { color: var(--rf-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .rf-go-row { justify-content: space-between; }
  .rf-go-row .rf-go { flex: 1 1 100%; }
}
.rf-lock { line-height: 1.6; }

/* 🚩 征服進度 */
.rf-conq { display: grid; gap: 8px; }
.rf-conq p { margin: 0; }
.rf-conq .card-head { margin-bottom: 4px; }
.rf-conq-now { font-size: 15px; }
.rf-conq-now b { color: var(--rf-ink); }
.rf-pbar { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.rf-pbar > span { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--rf-2), var(--rf), var(--rf-2)); background-size: 200% 100%;
  animation: rf-flow 3s linear infinite; transition: width 0.6s ease; }
.rf-pnum { font-variant-numeric: tabular-nums; }
.rf-pnum b { font-size: 20px; color: var(--rf-ink); }
.rf-mine { padding: 6px 10px; border-radius: 10px; background: var(--rf-soft); line-height: 1.55; }
.rf-mine b { color: var(--rf-ink); }
.rf-h3 { margin: 8px 0 0; font-size: 14px; }
.rf-rank li { min-width: 0; padding: 3px 6px; border-radius: 10px; }
.rf-rank li.me { background: var(--rf-soft); box-shadow: inset 0 0 0 1px var(--rf-line); }
.rf-rank .rf-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-rank .rf-val { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rf-rank li.top .er-no { font-size: 17px; }
.rf-you { flex: none; padding: 0 7px; border-radius: 999px; background: var(--rf); color: #fff; font: 800 11px/1.6 var(--font); }
:root[data-theme="night"] .rf-you { color: #1a1030; }
.rf-hist { display: grid; gap: 5px; }
.rf-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.5; }
.rf-hist-flag { flex: none; }

/* 👑 世界王：暗紅色的窗（兩種主題都一樣，要有壓迫感）；裡面是大家一起打的戰鬥畫面（js/expedition-scene.js 的世界王模式）、共用血條、我的次數、傷害排行 */
.rf-boss { display: grid; gap: 10px; }
.rf-boss .card-head { margin-bottom: 4px; }
.rf-boss p { margin: 0; }
.rf-wb-top { display: grid; gap: 8px; }
.rf-wb-stage { position: relative; isolation: isolate; display: grid; gap: 8px; padding: 8px 8px 12px; border-radius: 14px; overflow: hidden; color: #fbe9e6;
  background: radial-gradient(70% 60% at 50% 20%, rgba(255, 48, 32, 0.4), rgba(120, 0, 20, 0) 70%), linear-gradient(165deg, #1c0714, #3e0b18 55%, #140620);
  box-shadow: inset 0 0 0 1px rgba(255, 110, 90, 0.45), 0 10px 26px -14px rgba(200, 20, 10, 0.9); }
.rf-wb-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.85; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 12%, #ffd8d0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 86%, #ffb4a8 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 45%, #ffe8e0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 90%, #ffd0c8 50%, transparent 51%); }
/* 世界王的戰鬥畫面：首領血條放上面中間、快轉鈕放左下（上面沒有關卡牌子、小地圖） */
.rift-page .rf-raid { max-width: none; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 120, 100, 0.55), 0 0 18px -4px rgba(255, 40, 30, 0.6); }
.rift-page .rf-raid.battling { box-shadow: 0 0 0 2px #ff6a50, 0 0 22px -2px rgba(255, 40, 30, 0.75); }
.rf-raid .bt-boss { left: 0; right: 0; margin: 0 auto; width: min(66%, 400px); }
.rf-raid .exp-ctrl { top: auto; bottom: 8px; }
.rf-raid.gone .exp-canvas { filter: saturate(0.55) brightness(0.8); }
.rf-raid-mark { position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none; white-space: nowrap; line-height: 1.25; }
.rf-raid-mark[hidden] { display: none; }
.rf-raid-mark.dead { padding: 1px 12px; padding-left: calc(12px + 0.2em); border: 3px solid #ffd24a; border-radius: 8px; color: #ffd24a; background: rgba(40, 10, 10, 0.55);
  font: 900 clamp(20px, 6vw, 34px)/1.25 var(--serif); letter-spacing: 0.2em; text-shadow: 0 0 8px rgba(255, 200, 60, 0.8); animation: rf-stamp 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes rf-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.rf-raid-mark.gone { transform: translate(-50%, -50%); padding: 3px 14px; border-radius: 999px; color: #e6e0f8; background: rgba(20, 16, 40, 0.78);
  box-shadow: 0 0 0 1px rgba(180, 160, 220, 0.55); font: 800 clamp(13px, 3.6vw, 17px)/1.4 var(--font); }
.rf-wb-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; padding: 0 6px; }
.rf-wb-warn { font: 800 11px/1.3 var(--font); letter-spacing: 0.14em; color: #ff9a8a; }
.rf-wb-name { flex: 1 1 100%; order: 3; font-family: var(--serif); font-weight: 900; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.15; color: #fff3ee;
  text-shadow: 0 0 12px rgba(255, 60, 40, 0.85), 0 2px 0 #3a0808; overflow-wrap: anywhere; }
.rf-wb-sub { order: 4; color: #f0c8c0; }
.rf-wb-crowd { order: 5; color: #ffd8cc; }
.rf-wb-badge { order: 2; margin-left: auto; padding: 1px 10px; border-radius: 999px; font: 800 12px/1.7 var(--font); white-space: nowrap; }
.rf-wb-badge.alive { background: #d8301e; color: #fff; box-shadow: 0 0 10px rgba(255, 60, 40, 0.7); }
.rf-wb-badge.dead { background: #ffd24a; color: #3a2606; }
.rf-wb-badge.gone { background: #4a4266; color: #e6e0f8; }
.rf-wb-lap { display: grid; gap: 4px; padding: 0 6px; }
.rf-wb-left { font-weight: 800; font-size: 14px; color: #ffe2da; }
.rf-wb-left .rf-cd { color: #ffd24a; font-variant-numeric: tabular-nums; }
.rf-wb-lapbar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.rf-wb-lapbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb03a, #ff3a2a); }
.rf-wb-when { color: #e8b8ae; }
/* 被打倒了：金色的框；跑掉了：淡淡的紫灰 */
.rf-wb-stage.dead { background: radial-gradient(70% 60% at 50% 20%, rgba(255, 210, 74, 0.2), rgba(0, 0, 0, 0) 70%), linear-gradient(165deg, #171320, #2a2034 60%, #120e1c);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.45); }
.rf-wb-stage.gone { background: linear-gradient(165deg, #141222, #231c38 60%, #110d1c); box-shadow: inset 0 0 0 1px rgba(180, 160, 220, 0.35); }
.rf-wb-stage.dead .rf-wb-warn { color: #ffd24a; }
.rf-wb-stage.gone .rf-wb-warn { color: #b8aee0; }
.rf-wb-stage.dead .rf-wb-name, .rf-wb-stage.gone .rf-wb-name { color: #ece6f6; text-shadow: 0 2px 0 #000; }
.rf-wb-stage.dead .rf-wb-sub, .rf-wb-stage.gone .rf-wb-sub, .rf-wb-stage.gone .rf-wb-crowd { color: #bdb4d0; }
/* 💬 世界王底下的公會聊天（像遊戲裡的聊天框：深色、名字有顏色） */
.rf-chat { display: grid; gap: 6px; padding: 8px 10px 10px; border-radius: 12px; color: #f2ecff;
  background: linear-gradient(180deg, rgba(26, 18, 44, 0.96), rgba(16, 12, 30, 0.96)); box-shadow: inset 0 0 0 1px rgba(180, 140, 255, 0.35); }
.rf-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.rf-chat-head .link { color: #b9a4ff; }
.rf-chat-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 9.6em; overflow-y: auto; overscroll-behavior: contain; }
.rf-chat-msg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.5; }
.rf-chat-who { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7cf09a; }
.rf-chat-who::after { content: '：'; color: #8a80a8; }
.rf-chat-msg.me .rf-chat-who { color: #ffd84a; }
.rf-chat-text { overflow-wrap: anywhere; }
.rf-chat-at { font-size: 11px; color: #8a80a8; font-variant-numeric: tabular-nums; }
.rf-chat-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: #c8bce8; }
.rf-chat-note[hidden] { display: none; }
.rf-chat-row { display: flex; gap: 6px; }
.rf-chat-row[hidden] { display: none; }
.rf-chat-in { flex: 1 1 auto; min-width: 0; }
.rf-chat-send { flex: none; }
/* 共用血條 */
.rf-wb-hpbox { display: grid; gap: 4px; }
.rf-wb-hp { height: 16px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--wb) 14%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb) 45%, var(--line-2)); }
.rf-wb-hp > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8141a, #ff3a2a 55%, #ff9a3a);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.25); transition: width 0.6s ease; }
.rf-wb-hpnum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.rf-wb-hpnum b { color: var(--wb); }
.rf-wb-state { line-height: 1.6; }
.rf-wb-next { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1px dashed var(--rf-line); background: var(--rf-soft); line-height: 1.5; }
.rf-wb-next-ico { flex: none; line-height: 0; filter: brightness(0) drop-shadow(0 0 3px color-mix(in srgb, var(--rf) 85%, transparent)); opacity: 0.85; }
:root[data-theme="night"] .rf-wb-next-ico { filter: brightness(0) invert(0.22) drop-shadow(0 0 3px #b48cff); }
/* 我的次數、按鈕 */
.rf-wb-act { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.rf-wb-act .row-end { margin-top: 2px; }
.rf-wb-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rf-wb-mine b { font-variant-numeric: tabular-nums; }
.rf-pips { display: inline-flex; gap: 3px; }
.rf-pip { width: 9px; height: 16px; border-radius: 3px; background: var(--line-2); transform: skewX(-12deg); }
.rf-pip.on { background: linear-gradient(180deg, #ff6a4a, #c0281a); }
.rf-wb-act .rf-wb-go { min-width: 220px; }
@media (max-width: 560px) { .rf-wb-act .row-end > .rf-wb-go, .rf-wb-act .row-end > .rf-go { flex: 1 1 100%; } }
.rf-wb-rank { display: grid; gap: 6px; }
.rf-wb-rule { margin-top: 4px !important; padding: 8px 10px; border-radius: 10px; line-height: 1.6;
  background: color-mix(in srgb, var(--wb) 7%, transparent); border: 1px solid color-mix(in srgb, var(--wb) 28%, transparent); }

/* 結果面板 */
.rf-result { gap: 10px; }
.rf-result p { margin: 0; }
.rf-got h3 { margin: 4px 0 6px; }
.rf-loot-t { display: grid; line-height: 1.3; min-width: 0; }
.rf-egg-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; padding: 1px 3px; }
.rf-egg-ico svg { display: block; image-rendering: pixelated; }
.loot.rf-egg { padding-right: 10px; }
.idle-gain .rf-pts-chip b { color: var(--rf); }
.rf-hit { display: grid; justify-items: center; padding: 6px 0 0; }
.rf-hit-n { font: 900 clamp(40px, 11vw, 56px)/1.05 var(--serif); color: var(--wb); font-variant-numeric: tabular-nums; animation: rf-pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.rf-claim-list { display: grid; gap: 4px; }
.rf-top3 { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #ffd24a; color: #3a2606; font: 800 11px/1.6 var(--font); white-space: nowrap; }
.rf-sheet.rf-conquer .sheet-title { color: var(--rf-ink); }
/* 征服、打倒世界王的慶祝畫面 */
.rf-cele { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 4px; padding: 20px 14px 18px; border-radius: 14px; text-align: center; color: #fff;
  background: radial-gradient(80% 60% at 50% 0%, rgba(138, 240, 255, 0.4), rgba(0, 0, 0, 0) 70%), radial-gradient(60% 50% at 50% 100%, rgba(200, 120, 255, 0.35), rgba(0, 0, 0, 0) 70%),
    linear-gradient(170deg, #2c1670, #150b3a 60%, #0b0624);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 255, 0.55), 0 12px 30px -16px rgba(90, 40, 200, 0.9); }
.rf-cele.wb { background: radial-gradient(80% 60% at 50% 0%, rgba(255, 190, 80, 0.45), rgba(0, 0, 0, 0) 70%), radial-gradient(60% 50% at 50% 100%, rgba(255, 60, 40, 0.4), rgba(0, 0, 0, 0) 70%),
    linear-gradient(170deg, #5a0d16, #2a0610 60%, #14040a);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.55), 0 12px 30px -16px rgba(200, 30, 10, 0.9); }
.rf-cele-flag { font-size: 58px; line-height: 1.05; transform-origin: 40% 100%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); animation: rf-plant 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.rf-cele-title { font: 900 clamp(36px, 11vw, 54px)/1.1 var(--serif); letter-spacing: 0.14em; padding-left: 0.14em; color: #ffe27a;
  text-shadow: 0 0 14px rgba(255, 200, 70, 0.9), 0 3px 0 #6a3a08; animation: rf-zoom 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both; }
.rf-cele-sub { font-weight: 900; font-size: 17px; color: #f4ecff; }
.rf-cele.wb .rf-cele-sub { color: #ffeae4; }
.rf-cele-note { max-width: 34em; font-size: 13px; line-height: 1.55; color: #d9ccff; }
.rf-cele.wb .rf-cele-note { color: #ffd0c6; }
.rf-confetti { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rf-confetti i { position: absolute; top: -14px; width: 6px; height: 10px; border-radius: 1px; background: var(--c); opacity: 0.9; animation: rf-fall var(--t, 2.6s) linear var(--d, 0s) infinite; }

@keyframes rf-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes rf-blink { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes rf-flow { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes rf-wb-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12) drop-shadow(0 0 8px rgba(255, 60, 40, 0.6)); } }
@keyframes rf-plant { 0% { opacity: 0; transform: translateY(-40px) rotate(-30deg) scale(0.6); } 60% { opacity: 1; transform: translateY(4px) rotate(8deg) scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes rf-zoom { 0% { opacity: 0; transform: scale(2.2); } 100% { opacity: 1; transform: none; } }
@keyframes rf-pop { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: none; } }
@keyframes rf-fall { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(var(--x, 0px), 380px) rotate(var(--r, 180deg)); } }
@media (prefers-reduced-motion: reduce) {
  .rf-claim-ico, .rf-wdot.next, .rf-pbar > span, .rf-raid-mark, .btn.rf-wb-go:not(:disabled), .rf-cele-flag, .rf-cele-title, .rf-hit-n { animation: none; }
  .rf-confetti { display: none; }
}