/* 🔮 魔法環（2026-10-10.108；js/mring.js）：酒館冒險者資料的「魔法環」分頁（深色面板裡）、突破的演出、魔晶、名冊卡片的環數 */
.mj-ico { display: inline-block; width: 12px; height: 14px; vertical-align: -2px; flex: none;
  clip-path: polygon(50% 0, 100% 32%, 82% 100%, 18% 100%, 0 32%);
  background: linear-gradient(160deg, #f4ecff 0 12%, #b896ff 30%, #7a52e0 58%, #3a1e9a 100%); filter: drop-shadow(0 0 2px rgba(160, 120, 255, 0.8)); }
.mj-amt { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.mj-amt b { font-weight: 800; }
.mr-badge { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px 0 3px; border-radius: 999px; font-size: 11px; line-height: 16px; vertical-align: middle;
  background: linear-gradient(135deg, #3a1e80, #6a3ad0); color: #f4ecff; border: 1px solid #9a7aff; box-shadow: 0 0 6px rgba(150, 110, 255, 0.55); }
.mr-badge i { font-style: normal; font-size: 10px; }
.mr-badge b { font-weight: 800; }

.mr-tab { display: grid; gap: 10px; }
.mr-head { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid #3e3352;
  background: radial-gradient(ellipse 70% 90% at 10% 50%, rgba(140, 100, 255, 0.22), transparent 70%), #120e18; }
.mr-ht { display: grid; gap: 3px; min-width: 0; }
.mr-title { font: 900 18px/1.2 var(--serif); color: #f0e6ff; text-shadow: 0 0 8px rgba(160, 120, 255, 0.7); }
.mr-circle { width: 76px; height: 76px; flex: none; display: block; }
.mr-circle.dim { opacity: 0.45; filter: grayscale(0.6); }
.mr-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mr-svg circle { fill: none; stroke-width: 1.1; }
.mr-svg circle.off { stroke: rgba(160, 140, 200, 0.22); }
.mr-svg circle.on { stroke: hsl(calc(265 - var(--i) * 18), 90%, 72%); filter: drop-shadow(0 0 1.5px hsl(calc(265 - var(--i) * 18), 90%, 65%)); }
.mr-svg line { stroke: rgba(210, 190, 255, 0.55); stroke-width: 1; }
.mr-svg polygon { fill: none; stroke: rgba(200, 170, 255, 0.55); stroke-width: 0.9; }
.mr-svg .mr-num { font: 900 22px/1 var(--serif); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #2a1260; stroke-width: 3px; }
.mr-svg .mr-spin { transform-origin: 50% 50%; animation: mr-spin 30s linear infinite; }
.mr-svg .mr-spin2 { transform-origin: 50% 50%; animation: mr-spin 18s linear infinite reverse; }
.mr-circle.dim .mr-spin, .mr-circle.dim .mr-spin2 { animation: none; }
@keyframes mr-spin { to { transform: rotate(360deg); } }
.mr-bonus b { color: #d8c8ff; }
/* 2026-10-10.160 魔法的優點、缺點；還沒發現的魔法 */
.mr-pc { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.mr-pro { color: #5ac88a; }
.mr-con { color: #e08a6a; }
.mr-unknown { margin: 4px 0 0; padding: 6px 10px; border-radius: 8px; border: 1px dashed rgba(160, 130, 255, 0.45); color: #b8a8e0; background: rgba(120, 90, 220, 0.08); }
/* 2026-10-10.160 升環的品級（--gc＝品級的顏色） */
.mr-grades { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #120e18; border: 1px solid #3e3352; color: #e8e0f8; }
.mr-grades .hs2-star-t { margin: 0; }
.mr-gr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.mr-gr { display: grid; gap: 1px; min-width: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gc) 60%, transparent); background: color-mix(in srgb, var(--gc) 16%, #120e18); }
.mr-gr.off { opacity: 0.45; }
.mr-gr-n { font-size: 12px; color: #c8b8e8; }
.mr-gr-g { color: var(--gc); font-weight: 800; }
.mr-gr.old .mr-gr-g { color: #b8b0c8; }
.mr-gr .muted { color: #a898c8; }
.mr-res-grade { margin: 4px 0 0; }
.mr-title-g { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 13px; vertical-align: middle; color: var(--gc); border: 1px solid color-mix(in srgb, var(--gc) 60%, transparent); background: color-mix(in srgb, var(--gc) 16%, #120e18); }
.mr-res-grade .mr-gr-g { filter: brightness(0.9); }
.mr-intro { padding: 8px 10px; border-radius: 10px; background: rgba(120, 90, 220, 0.12); border: 1px dashed rgba(160, 130, 255, 0.4); }
.mr-src { line-height: 1.6; }

.mr-try { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #120e18; border: 1px solid #3e3352; }
.mr-bar { position: relative; height: 12px; border-radius: 999px; background: #241c33; border: 1px solid #4a3a6a; overflow: hidden; }
.mr-bar-in { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4a2aa8, #8a5aff, #c8a8ff); box-shadow: 0 0 8px rgba(150, 110, 255, 0.8); }
.mr-bar-over { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #ffd84a, #fff2b0); box-shadow: 0 0 8px rgba(255, 220, 90, 0.8); }
.mr-bar-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #fff; opacity: 0.8; }
.mr-bar-t { margin: 0; }
.mr-over-t { color: #ffd84a; }
.mr-req .su-lbl { display: inline-flex; align-items: center; gap: 4px; }
.mr-go { background: linear-gradient(135deg, #5a2ad0, #8a4aff); border-color: #b49aff; }

.mr-slots { display: grid; gap: 6px; }
.mr-slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.mr-slot { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; border: 1px dashed #5a4a7a; background: #16121e; color: var(--text); cursor: pointer; font: inherit; }
.mr-slot.on { border-style: solid; border-color: #8a6ae0; background: radial-gradient(circle at 50% 30%, rgba(140, 100, 255, 0.22), transparent 70%), #16121e; }
.mr-slot b { font-size: 13px; }
.mr-slot-plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px dashed #6a5a8a; color: #b8a8e0; font-size: 18px; }
.mr-slots-none { margin: 0; }

.mr-books { display: grid; gap: 8px; }
.mr-ring { display: grid; gap: 4px; }
.mr-ring.locked .mr-row { opacity: 0.62; }
.mr-ring-h { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 14px; color: #e8dcff; }
.mr-ring-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 900;
  background: radial-gradient(circle at 35% 30%, #e8d8ff, #7a52e0 60%, #3a1e80); color: #fff; border: 1px solid #1a0e30; }
.mr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #15111c; border: 1px solid #2e2640; }
.mr-row.got { border-color: #5a4a8a; }
.mr-row-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.mr-row-t b { font-size: 14px; }
.mr-lv { color: #c8b0ff; font-weight: 800; font-size: 12px; }
.mr-desc { flex-basis: 100%; }
.mr-row-t .mr-pc { flex-basis: 100%; }
.mr-salv { margin-left: 6px; }
@media (max-width: 480px) { .mr-row { grid-template-columns: auto 1fr; } .mr-row > .btn { grid-column: 1 / -1; justify-self: end; } }

.mr-pick-list { display: grid; gap: 6px; }
.mr-pick-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid #3e3352; background: #15111c; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.mr-pick-row.on { border-color: #9a7aff; }
.mr-pick-t { display: grid; gap: 2px; min-width: 0; }
.mr-pick-chk { font-style: normal; color: #b8f0a0; font-weight: 900; }

/* 突破的演出 */
.mrfx { position: fixed; inset: 0; z-index: 9985; cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.mrfx.out { animation: su-out 0.26s ease-in both; }
.mrfx-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(130, 90, 255, 0.4), transparent 62%), rgba(8, 4, 20, 0.94); animation: su-in 0.25s ease-out both; }
.mrfx.lose .mrfx-bg { background: radial-gradient(circle at 50% 45%, rgba(255, 60, 90, 0.35), transparent 60%), rgba(18, 2, 10, 0.95); }
.mrfx-circle { position: relative; width: min(64vmin, 360px); height: min(64vmin, 360px); margin-top: -8vh; animation: mrfx-grow 1.1s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.mrfx-circle .mr-spin { animation-duration: 4s; }
.mrfx-circle .mr-spin2 { animation-duration: 3s; }
.mrfx.win .mrfx-circle { filter: drop-shadow(0 0 12px rgba(170, 130, 255, 0.9)); }
.mrfx.win .mrfx-circle .mr-svg circle.on:last-of-type { animation: mrfx-flash 0.6s ease-out 1.1s 2; }
.mrfx.lose .mrfx-circle { animation: mrfx-grow 1.1s cubic-bezier(0.2, 1.2, 0.4, 1) both, mrfx-break 0.5s ease-in 1.2s both; }
.mrfx-txt { position: absolute; left: 0; right: 0; bottom: 18vh; display: grid; justify-items: center; gap: 2px; color: #fff; opacity: 0; text-align: center;
  text-shadow: 0 0 10px rgba(170, 130, 255, 1), 0 2px 0 rgba(0, 0, 0, 0.6); animation: su-txt 0.45s ease-out 1.25s both; }
.mrfx.lose .mrfx-txt { text-shadow: 0 0 10px rgba(255, 70, 90, 1), 0 2px 0 rgba(0, 0, 0, 0.6); }
.mrfx-txt b { font: 900 34px/1.2 var(--serif); letter-spacing: 4px; }
.mrfx-txt small { font-size: 14px; font-weight: 700; opacity: 0.92; }
@keyframes mrfx-grow { from { opacity: 0; transform: scale(0.3) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes mrfx-flash { 0% { stroke-width: 1.1; } 50% { stroke-width: 3.5; stroke: #fff; } 100% { stroke-width: 1.1; } }
@keyframes mrfx-break { to { opacity: 0.25; transform: scale(1.15) rotate(25deg); filter: grayscale(1) blur(1px); } }
@media (prefers-reduced-motion: reduce) { .mrfx { display: none; } .mr-svg .mr-spin, .mr-svg .mr-spin2 { animation: none; } }

/* 魔力湧現的提示（js/app.js 收 gp:mluck） */
.mluck-toast b { color: #e8d8ff; }
.skill-line.skill-magic .skill-book-tag.magic { background: linear-gradient(135deg, #3a1e80, #6a3ad0); color: #f4ecff; }
.skill-line.mr-replaced { opacity: 0.5; }
.skill-line.mr-replaced > b { text-decoration: line-through; }
.mr-rep-t { color: #b8a8e0; }
.mb-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.mb-cell { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; text-align: center; }
/* 冒險者資料的分頁多了「🔮 魔法環」：7 格（修仙弟子沒有這一格，照舊 6 格） */
.hs2-tabs:has(> .hs2-tab:nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
@media (max-width: 420px) { .hs2-tabs:has(> .hs2-tab:nth-child(7)) .hs2-tab { font-size: 10.5px; letter-spacing: -0.3px; } }
.mr-req .su-lbl { white-space: nowrap; }
.mr-books-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 2026-10-10.108 魔劍士（mc-msw，劍芒、暖色）、魔法師（mc-mag，法陣、紫藍）的稱號 */
.mr-badge.mc-msw { background: linear-gradient(135deg, #6a2410, #c8602a); border-color: #ffb46a; box-shadow: 0 0 6px rgba(255, 150, 80, 0.55); color: #fff4e8; }
.mr-badge.hs2-mr { font-size: 12px; line-height: 20px; padding: 0 9px 0 6px; gap: 4px; }

/* 人物背後的光環（mrHalo）：mh1～mh10（一～十環），mh-msw／mh-mag 兩套顏色；--mc 主色、--mc2 亮色 */
.mr-halo { position: absolute; z-index: 0; pointer-events: none; display: block; --mc: #c8d2e0; --mc2: #ffffff;
  filter: drop-shadow(0 0 3px var(--mc)); }
.mr-halo::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--mc) 55%, transparent), transparent 75%); opacity: 0.55; }
.mr-halo svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.mr-halo circle, .mr-halo polygon { fill: none; stroke: var(--mc); stroke-width: 1.2; }
.mr-halo line { stroke: var(--mc); stroke-width: 1.2; stroke-linecap: round; }
.mr-halo .mh-o { stroke-width: 1.6; stroke: var(--mc2); opacity: 0.9; }
.mr-halo .mh-d { stroke-dasharray: 3 2.2; stroke-width: 1.4; }
.mr-halo .mh-i { opacity: 0.75; }
.mr-halo .mh-bl { fill: color-mix(in srgb, var(--mc) 55%, transparent); stroke: var(--mc2); stroke-width: 0.8; }
.mr-halo .mh-bl.s { opacity: 0.7; }
.mr-halo .mh-tri { stroke: var(--mc2); stroke-width: 1; opacity: 0.85; }
.mr-halo .mh-orb circle { fill: var(--mc2); stroke: none; }
.mr-halo .mh-ray line { stroke: var(--mc2); stroke-width: 1; opacity: 0.8; }
.mr-halo .mh-o2 { stroke: var(--mc); stroke-width: 0.8; opacity: 0.7; }
.mr-halo .mh-rb { stroke: #ffd45a; stroke-width: 2; }
.mr-halo .mh-spin, .mr-halo .mh-orb, .mr-halo .mh-ray { transform-origin: 50% 50%; animation: mr-spin 24s linear infinite; }
.mr-halo .mh-spin2 { transform-origin: 50% 50%; animation: mr-spin 40s linear infinite reverse; }
.mr-halo .mh-orb { animation-duration: 9s; }
.mr-halo.mh-msw.mh1 { --mc: #b8c4d6; --mc2: #e8eef8; }
.mr-halo.mh-msw.mh2 { --mc: #8fb8ff; --mc2: #dceaff; }
.mr-halo.mh-msw.mh3 { --mc: #6ad8ff; --mc2: #d8f8ff; }
.mr-halo.mh-msw.mh4 { --mc: #ffb46a; --mc2: #fff0d8; }
.mr-halo.mh-msw.mh5 { --mc: #ff8a4a; --mc2: #ffe2c8; }
.mr-halo.mh-msw.mh6 { --mc: #ff5a4a; --mc2: #ffd8c8; }
.mr-halo.mh-msw.mh7 { --mc: #ff4a8a; --mc2: #ffd0e4; }
.mr-halo.mh-msw.mh8 { --mc: #ffc83a; --mc2: #fff4c0; }
.mr-halo.mh-msw.mh9 { --mc: #ffe27a; --mc2: #ffffff; }
.mr-halo.mh-mag.mh1 { --mc: #c8beff; --mc2: #efeaff; }
.mr-halo.mh-mag.mh2 { --mc: #ae94ff; --mc2: #e8deff; }
.mr-halo.mh-mag.mh3 { --mc: #9478ff; --mc2: #ddd2ff; }
.mr-halo.mh-mag.mh4 { --mc: #78c8ff; --mc2: #dff2ff; }
.mr-halo.mh-mag.mh5 { --mc: #4ae0d0; --mc2: #d4fff8; }
.mr-halo.mh-mag.mh6 { --mc: #c070ff; --mc2: #f0dcff; }
.mr-halo.mh-mag.mh7 { --mc: #ff6ad8; --mc2: #ffdcf4; }
.mr-halo.mh-mag.mh8 { --mc: #ffd45a; --mc2: #fff6c8; }
.mr-halo.mh-mag.mh9 { --mc: #fff0a0; --mc2: #ffffff; }
.mr-halo.mh10 { --mc: #ffffff; --mc2: #ffffff; filter: drop-shadow(0 0 3px #ff8ad8) drop-shadow(0 0 6px #8ad8ff); }
.mr-halo.mh10 .mh-rb { stroke: #ffd45a; animation: mh-rb 4s linear infinite; }
.mr-halo .mh-star { fill: none; stroke: #ffe8a0; stroke-width: 0.9; opacity: 0.9; } /* 2026-10-10.233 十一環 */
.mr-halo.mh11 { --mc: #ffffff; --mc2: #ffffff; filter: drop-shadow(0 0 3px #ffd45a) drop-shadow(0 0 7px #ff8ad8) drop-shadow(0 0 10px #8ad8ff); }
.mr-halo.mh11 .mh-rb { stroke: #ffd45a; animation: mh-rb 3s linear infinite; }
.mr-halo.mh11 .mh-rb2 { stroke-width: 1.4; animation-delay: -1.5s; }
@keyframes mh-rb { 0% { stroke: #ff5a8a; } 20% { stroke: #ffb04a; } 40% { stroke: #fff06a; } 60% { stroke: #7aff9a; } 80% { stroke: #5ad8ff; } 100% { stroke: #ff5a8a; } }
.mr-halo.mh7, .mr-halo.mh8, .mr-halo.mh9 { filter: drop-shadow(0 0 4px var(--mc)) drop-shadow(0 0 8px var(--mc)); }
/* 名冊卡片：人物上半身後面；資料舞台：大一點 */
.mr-halo.mh-tc { left: 50%; top: 46%; width: 122%; aspect-ratio: 1; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 2px var(--mc)) drop-shadow(0 0 5px var(--mc)); }
.mr-halo.mh-tc::before { inset: 4%; opacity: 0.95; background: radial-gradient(closest-side, color-mix(in srgb, var(--mc) 70%, transparent), color-mix(in srgb, var(--mc) 25%, transparent) 70%, transparent); }
.mr-halo.mh-tc circle, .mr-halo.mh-tc polygon, .mr-halo.mh-tc line { stroke-width: 2.2; }
.mr-halo.mh-tc .mh-o { stroke-width: 2.8; }
.mr-halo.mh-tc .mh-orb circle { r: 2.6; }
.mr-halo.mh-stage { left: 50%; bottom: 34px; width: 200px; height: 200px; margin-left: -100px; }
.hs2-hero > .mr-halo + .hero-doll, .hs2-hero > .mr-halo ~ * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mr-halo *, .mr-halo .mh-rb { animation: none !important; } }

/* 升環試煉 */
.mr-trial-rule { margin: 0; padding: 7px 9px; border-radius: 9px; background: rgba(120, 90, 220, 0.12); border: 1px solid rgba(160, 130, 255, 0.3); line-height: 1.55; }
.mr-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mr-sim-out { margin: 0; min-height: 0; }
.mr-sim-out:empty { display: none; }
.mr-sim-out.good { color: #7ae08a; }
.mr-sim-out.mid { color: #ffd84a; }
.mr-sim-out.bad { color: #ff8a7a; }
.mr-res-halo { position: relative; width: 120px; height: 120px; margin: 2px auto -4px; }
.mr-waves i.on { background: linear-gradient(180deg, #a87aff, #5a2ab8); box-shadow: 0 0 6px rgba(150, 110, 255, 0.6); }
.mr-waves i.need { outline: 2px solid #ffd84a; outline-offset: 1px; }
.mr-res-up { background: rgba(120, 80, 220, 0.1); border-color: rgba(150, 110, 255, 0.4); }
.mr-res-t { font: 900 20px/1.2 var(--serif); color: #7a4ae0; }
.mr-res-gear { display: flex; align-items: center; gap: 8px; text-align: left; }
.mr-res-gi { flex: none; }
.mr-drop-gear b { font-weight: 800; }
.xg-mrg { color: #b07aff; }
/* 升環試煉從冒險者資料（sheet，z-index 100）開：重播要蓋在上面 */
.xw-battle:has(.mr-trial-bt) { z-index: 120; }
/* 2026-10-10.109 魔法套路／魔法心法的小標籤 */
.mr-type { display: inline-block; padding: 0 5px; margin-right: 2px; border-radius: 4px; font-size: 10.5px; font-weight: 800; line-height: 16px; vertical-align: 1px; }
.mr-type.tao { background: #4a2a7a; color: #f0e6ff; }
.mr-type.xin { background: #1e5a4a; color: #d8fff0; }
.mr-slot.xin { border-color: #4ad0a0; }
/* 2026-10-10.131 條件那幾行：「🔮 魔晶」比較寬，第一欄不要擠在 26px 裡 */
.mr-req .su-row { grid-template-columns: minmax(44px, auto) 1fr 20px; }
/* 2026-10-10.162 🧪 魔力藥水 */
.mr-pot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 8px 0; padding: 6px 10px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, #6a8ae8 45%, var(--line-2)); background: color-mix(in srgb, #6a8ae8 8%, var(--surface)); }
.mr-pot-t { min-width: 0; overflow-wrap: anywhere; }
/* 2026-10-10.165 ⚗️ 頂級魔力藥水：金色框 */
.mr-pot2 { border-color: color-mix(in srgb, #d9a520 55%, var(--line-2)); background: color-mix(in srgb, #d9a520 9%, var(--surface)); }
/* 2026-10-10.166 🔻 退環藥水：紅框 */
.mr-drop { border-color: color-mix(in srgb, #d0485a 50%, var(--line-2)); background: color-mix(in srgb, #d0485a 7%, var(--surface)); }