/* ═══════════════════════════════════════════════════════════
   glow.css（徐博士化學篇 v1.6）：寶物發光＋穿戴流光。
   ・抽到寶物（#reward-dialog）：開場閃光、擴散光環、旋轉光芒、脈動光暈、寶物本體漂浮＋流光掃過、星芒粒子。
   ・穿戴之後（.character-stage[data-wear]）：角色背後的套裝光暈、飄浮光點、衣服上每隔幾秒掃過一道流光；
     36 格裝備欄已穿戴的格子脈動發光＋流光；配件徽章、坐騎一起發光；剛穿上時整個舞台爆一次光。
   顏色一律跟稀有度走（--rarity／--wear），強度跟 --glow-k 走（普通 .55 → 隱藏 1.4）。
   不改任何圖檔；圖檔網址帶 ?v= 版本戳記（stamp_loot_assets.py 會自動更新）。
   ═══════════════════════════════════════════════════════════ */
:root { --glow-k: .8; }
[data-rarity="0"] { --glow-k: .7; }
[data-rarity="1"] { --glow-k: .82; }
[data-rarity="2"] { --glow-k: .94; }
[data-rarity="3"] { --glow-k: 1.06; }
[data-rarity="4"] { --glow-k: 1.24; }
[data-rarity="5"] { --glow-k: 1.42; }
.character-stage[data-wear="0"] { --glow-k: .7; }
.character-stage[data-wear="1"] { --glow-k: .82; }
.character-stage[data-wear="2"] { --glow-k: .94; }
.character-stage[data-wear="3"] { --glow-k: 1.06; }
.character-stage[data-wear="4"] { --glow-k: 1.24; }
.character-stage[data-wear="5"] { --glow-k: 1.42; }

/* ── 寶物揭曉彈窗 ── */
.reward-fx { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.reward-fx i { position: absolute; left: 50%; top: 168px; display: block; transform: translate(-50%, -50%); border-radius: 50%; }
.reward-fx .fx-aura {
  width: 360px; height: 360px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 62%, transparent) 0, color-mix(in srgb, var(--rarity) 26%, transparent) 30%, transparent 68%);
  filter: blur(6px); opacity: calc(.8 * var(--glow-k));
  animation: fx-aura-pulse 2.6s ease-in-out infinite;
}
.reward-fx .fx-bloom {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--rarity) 70%, #fff) 22%, color-mix(in srgb, var(--rarity) 45%, transparent) 50%, transparent 72%);
  filter: blur(4px); opacity: calc(.6 * var(--glow-k));
  animation: fx-aura-pulse 1.9s ease-in-out infinite reverse;
}
.reward-fx .fx-rays {
  width: 440px; height: 440px;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rarity) 42%, transparent) 0 5deg, transparent 5deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%);
  opacity: calc(.8 * var(--glow-k));
  animation: fx-rays-spin 18s linear infinite;
}
.reward-fx .fx-rays-b {
  width: 400px; height: 400px;
  background: repeating-conic-gradient(from 11deg, color-mix(in srgb, var(--rarity) 30%, #fff8) 0 3deg, transparent 3deg 31deg);
  opacity: calc(.55 * var(--glow-k));
  animation: fx-rays-spin 26s linear infinite reverse;
}
.reward-fx .fx-ring {
  width: 70px; height: 70px; border: 2px solid var(--rarity); opacity: 0;
  box-shadow: 0 0 18px var(--rarity), inset 0 0 14px color-mix(in srgb, var(--rarity) 60%, transparent);
}
.reward-fx .fx-flash {
  left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; opacity: 0;
  background: radial-gradient(circle at 50% 30%, #fff 0, color-mix(in srgb, var(--rarity) 55%, #fff) 18%, color-mix(in srgb, var(--rarity) 35%, transparent) 40%, transparent 70%);
}
.reward-dialog.revealing .fx-ring { animation: fx-ring-burst 1.15s cubic-bezier(.2, .7, .2, 1) forwards; }
.reward-dialog.revealing .fx-ring-b { animation-delay: .17s; animation-duration: 1.35s; }
.reward-dialog.revealing .fx-flash { animation: fx-flash .95s ease-out forwards; }
.reward-dialog.revealing .reward-art { animation: fx-art-pop .7s cubic-bezier(.2, .9, .3, 1.4) both, fx-art-float 3.2s ease-in-out .7s infinite; }
.reward-art { position: relative; filter: drop-shadow(0 0 12px var(--rarity)) drop-shadow(0 0 34px color-mix(in srgb, var(--rarity) 75%, transparent)) drop-shadow(0 0 6px #fff8); animation: fx-art-float 3.2s ease-in-out infinite; }
.reward-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%, transparent 68%);
  background-size: 280% 100%;
  -webkit-mask: var(--art-img) var(--art-pos, 0 0) / var(--art-size, 600% 600%) no-repeat; mask: var(--art-img) var(--art-pos, 0 0) / var(--art-size, 600% 600%) no-repeat;
  opacity: calc(.6 + .3 * var(--glow-k));
  animation: fx-sweep 2.8s ease-in-out infinite;
}
.item-art { --art-img: url('assets/male-gear-atlas.png?v=03be4025'); }   /* v57：星曜新裝備圖集（預設角色圖集也是它） */
body[data-role="female"] .item-art { --art-img: url('assets/female-atlas.png?v=c56c641e'); }
/* v2.1／v2.3：五位角色各自的圖集（app.js 的 art() 會在圖上加 .female / .knight / .elf / .mage） */
.item-art.female { --art-img: url('assets/female-atlas.png?v=c56c641e'); }
.item-art.female[data-tier="0"] { --art-img: url('assets/female-gear-atlas-0.png?v=ac4b6f12'); }   /* v58：星澄初裝圖集 */
.item-art.knight { --art-img: url('assets/male2-gear-atlas.png?v=6d4dd238'); }   /* v28：星珩 v22 參考包的裝備圖 */
.item-art.scholar { --art-img: url('assets/female4-gear-atlas.png?v=ab727604'); }   /* v28：知棠 v26 */
.item-art.snow { --art-img: radial-gradient(circle, #000 0 64%, transparent 66%); }   /* v42：雪鈴的 36 件裝備圖示移除 → 圓章（流光遮罩也是圓的） */

.item-art.sea { --art-img: url('assets/female6-gear-atlas.png?v=9edf5ff1'); }
.item-art.jade { --art-img: url('assets/male3-gear-atlas.png?v=32a0d7fa'); }
.item-art.oasis { --art-img: url('assets/female7-gear-atlas.png?v=8bacec8c'); }   /* v59：小昭圖集 */
.item-art.elf { --art-img: url('assets/elf-atlas.png?v=2322d125'); }
.item-art.mage { --art-img: url('assets/mage-atlas.png?v=02bc6bb4'); }   /* v2.3：法姬・星汐（v1.11） */
.item-art[data-equipment-role="male"] { --art-img: url('assets/male-gear-atlas.png?v=03be4025'); }   /* v57 */
.reward-dialog[data-rarity="4"] .fx-aura, .reward-dialog[data-rarity="5"] .fx-aura { filter: blur(8px) saturate(1.25); }
.reward-dialog[data-rarity="5"] .fx-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rarity) 45%, transparent) 0 4deg, transparent 4deg 12deg, #83ffdc55 12deg 15deg, transparent 15deg 24deg); }
.reward-dialog .rarity-label { box-shadow: 0 0 14px color-mix(in srgb, var(--rarity) 55%, transparent); background: color-mix(in srgb, var(--rarity) 12%, transparent); }
.reward-dialog h2 { text-shadow: 0 0 18px color-mix(in srgb, var(--rarity) 55%, transparent); }
/* 星芒粒子：四角星，邊升邊閃 */
.spark { width: 7px; height: 7px; border-radius: 0; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); background: #fff; box-shadow: none; animation: spark-rise 1.9s ease-out infinite, fx-twinkle .55s ease-in-out infinite alternate; }
.spark::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 80%, #fff) 0, transparent 70%); z-index: -1; }
.spark:nth-child(3n) { width: 5px; height: 5px; animation-duration: 2.3s, .7s; }
.spark:nth-child(4n+1) { width: 9px; height: 9px; animation-duration: 1.6s, .45s; }
.glint { position: absolute; left: 50%; top: 168px; width: 6px; height: 6px; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); background: #fff; pointer-events: none; opacity: 0; animation: fx-glint 1.1s cubic-bezier(.1, .7, .3, 1) forwards; filter: drop-shadow(0 0 4px var(--rarity)); }

/* ── 角色舞台：穿戴後的光暈、光點、流光 ── */
.character-stage { --wear: var(--gold, #e6c282); --wear-sheen: color-mix(in srgb, var(--wear) 62%, #fff); }
.stage-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.stage-fx.fx-over { z-index: 6; }
.stage-fx i { position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.stage-fx .fx-aura {
  width: 370px; height: 560px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--wear) 70%, #fff) 0, color-mix(in srgb, var(--wear) 60%, transparent) 22%, color-mix(in srgb, var(--wear) 25%, transparent) 46%, transparent 72%);
  filter: blur(10px); opacity: calc(.85 * var(--glow-k));
  animation: fx-aura-pulse 3.8s ease-in-out infinite;
}
/* 女生的舞台是淺色紙面：白光看不出來，改成帶顏色的光暈（正片疊底），顏色一樣跟稀有度走 */
.character-stage { --wear-ink: color-mix(in srgb, var(--wear) 72%, #3d6fa3); }
body[data-role="female"] .stage-fx .fx-aura , body[data-role="knight"] .stage-fx .fx-aura , body[data-role="elf"] .stage-fx .fx-aura , body[data-role="mage"] .stage-fx .fx-aura { mix-blend-mode: multiply; opacity: calc(.95 * var(--glow-k)); filter: blur(12px); background: radial-gradient(ellipse, var(--wear-ink) 0, color-mix(in srgb, var(--wear) 55%, #c9d6e4) 30%, color-mix(in srgb, var(--wear) 25%, #fff) 52%, #fff 74%); }
.stage-fx .fx-motes {
  left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0;
  background-image:
    radial-gradient(circle, #fff 0 1px, color-mix(in srgb, var(--wear) 90%, #fff) 1.6px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--wear) 85%, #fff) 0 1.2px, transparent 2.6px),
    radial-gradient(circle, #fff 0 .8px, transparent 2px);
  background-size: 97px 173px, 131px 229px, 71px 149px;
  background-position: 13px 0, 47px 0, 29px 0;
  -webkit-mask: radial-gradient(ellipse 42% 50% at 50% 50%, #000 30%, transparent 100%); mask: radial-gradient(ellipse 42% 50% at 50% 50%, #000 30%, transparent 100%);
  opacity: calc(.75 * var(--glow-k));
  animation: fx-motes 11s linear infinite;
}
body[data-role="female"] .stage-fx .fx-motes , body[data-role="knight"] .stage-fx .fx-motes , body[data-role="elf"] .stage-fx .fx-motes , body[data-role="mage"] .stage-fx .fx-motes { background-image:
    radial-gradient(circle, var(--wear-ink) 0 1.4px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--wear-ink) 70%, #fff) 0 1.1px, transparent 2.6px),
    radial-gradient(circle, var(--wear-ink) 0 .9px, transparent 2.2px); opacity: calc(1 * var(--glow-k)); }
.stage-fx .fx-ring { width: 120px; height: 160px; border: 2px solid var(--wear); opacity: 0; box-shadow: 0 0 22px var(--wear), inset 0 0 16px color-mix(in srgb, var(--wear) 55%, transparent); }
body[data-role="female"] .stage-fx .fx-ring , body[data-role="knight"] .stage-fx .fx-ring , body[data-role="elf"] .stage-fx .fx-ring , body[data-role="mage"] .stage-fx .fx-ring { border: 3px solid var(--wear-ink); mix-blend-mode: multiply; box-shadow: 0 0 22px var(--wear-ink), inset 0 0 16px color-mix(in srgb, var(--wear-ink) 55%, transparent); }
.stage-fx .fx-flash { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; opacity: 0; background: radial-gradient(ellipse at 50% 45%, #fff 0, color-mix(in srgb, var(--wear) 55%, #fff) 20%, transparent 65%); }
body[data-role="female"] .stage-fx .fx-flash , body[data-role="knight"] .stage-fx .fx-flash , body[data-role="elf"] .stage-fx .fx-flash , body[data-role="mage"] .stage-fx .fx-flash { mix-blend-mode: multiply; background: radial-gradient(ellipse at 50% 45%, var(--wear-ink) 0, color-mix(in srgb, var(--wear) 50%, #fff) 32%, #fff 70%); }
.character-stage:not([data-wear]) .stage-fx .fx-aura, .character-stage:not([data-wear]) .stage-fx .fx-motes { display: none; }
.character-stage.equipping .stage-fx .fx-ring { animation: fx-ring-burst 1.2s cubic-bezier(.2, .7, .2, 1) forwards; }
.character-stage.equipping .stage-fx .fx-ring-b { animation-delay: .2s; animation-duration: 1.4s; }
.character-stage.equipping .stage-fx .fx-flash { animation: fx-flash 1s ease-out forwards; }
.stage-fx .glint { top: 50%; width: 7px; height: 7px; filter: drop-shadow(0 0 5px var(--wear)); }
body[data-role="female"] .stage-fx .glint , body[data-role="knight"] .stage-fx .glint , body[data-role="elf"] .stage-fx .glint , body[data-role="mage"] .stage-fx .glint { background: var(--wear-ink) !important; filter: drop-shadow(0 0 4px var(--wear-ink)); }
/* v1.7：衣服上的流光已取消（徐博士：看起來像影子流過身體）；光暈、光點、裝備格發光保留 */
/* 36 格裝備欄：已穿戴的格子脈動發光＋每 6 秒掃過一道流光（逐格錯開） */
.slot-button { overflow: hidden; }
.slot-button.owned { box-shadow: 0 0 9px color-mix(in srgb, var(--rarity) 55%, transparent), inset 0 0 7px color-mix(in srgb, var(--rarity) 28%, transparent); animation: fx-slot-pulse 2.9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.21s); }
.slot-button.owned .item-art { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rarity) 85%, #fff)); }
.slot-button.owned::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0) 45%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 55%, transparent 64%); background-size: 280% 100%; animation: fx-sweep 6.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .17s); }
.slot-button.just-equipped { animation: fx-slot-pop 1.1s cubic-bezier(.2, .8, .2, 1) both; z-index: 2; }
/* 舞台上的配件徽章、坐騎 */
.gear-pin { animation: fx-pin-pulse 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s); overflow: hidden; }
.gear-pin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0) 45%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 55%, transparent 64%); background-size: 280% 100%; animation: fx-sweep 5.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.mount-companion .item-art { animation: fx-mount-pulse 3.4s ease-in-out infinite; }
.item-card .card-equipped { box-shadow: 0 0 10px #8ce4be88; animation: fx-badge-pulse 2.4s ease-in-out infinite; }

@keyframes fx-aura-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: calc(.55 * var(--glow-k)); } 50% { transform: translate(-50%, -50%) scale(1.07); opacity: calc(.85 * var(--glow-k)); } }
@keyframes fx-rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes fx-ring-burst { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; } }
@keyframes fx-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes fx-art-pop { 0% { transform: scale(.4) rotate(-8deg); filter: brightness(2.2) drop-shadow(0 0 40px var(--rarity)); } 100% { transform: scale(1) rotate(0); } }
@keyframes fx-art-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.025); } }
@keyframes fx-sweep { 0%, 58% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes fx-twinkle { from { opacity: .35; transform: scale(.7); } to { opacity: 1; transform: scale(1.2); } }
@keyframes fx-glint { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -120px))) scale(1.1) rotate(90deg); } }
@keyframes fx-motes { 0% { background-position: 13px 0, 47px 0, 29px 0; } 100% { background-position: 13px -173px, 47px -229px, 29px -149px; } }
@keyframes fx-slot-pulse { 0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--rarity) 40%, transparent), inset 0 0 5px color-mix(in srgb, var(--rarity) 18%, transparent); } 50% { box-shadow: 0 0 15px color-mix(in srgb, var(--rarity) 80%, transparent), inset 0 0 10px color-mix(in srgb, var(--rarity) 38%, transparent); } }
@keyframes fx-slot-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rarity) 90%, #fff); } 35% { transform: scale(1.22); } 100% { transform: scale(1); box-shadow: 0 0 0 16px transparent; } }
@keyframes fx-pin-pulse { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--rarity) 45%, transparent); } 50% { box-shadow: 0 0 20px color-mix(in srgb, var(--rarity) 85%, transparent), 0 0 4px #fff8; } }
@keyframes fx-mount-pulse { 0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wear, #e6c282) 50%, transparent)); } 50% { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--wear, #e6c282) 90%, #fff)); } }
@keyframes fx-badge-pulse { 50% { box-shadow: 0 0 18px #8ce4becc; } }
@media (max-width: 760px) {
  .reward-fx i { top: 150px; }
  .glint { top: 150px; }
  .stage-fx .fx-aura { width: 260px; height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-fx .fx-rays, .reward-fx .fx-rays-b, .stage-fx .fx-motes, .slot-button.owned::after, .gear-pin::after, .reward-art::after { display: none !important; }
}