/* 🧸 魔法娃娃視窗改版（伺服器本機改動第 132 項；站長 2026-10-23「娃娃介面麻煩做精緻……合成畫面使出你的功力」；js/dolls.js）
   dolls.css 是第一版（按鈕顏色、說明小視窗沿用），這裡是新的：階級顏色、我的娃娃、買袋子、合成台與動畫、圖鑑。
   階級顏色：[data-t="1～6"] 給 --tc（主色）、--tg（光暈）、--tb（底色）；一般灰白、高級綠、稀有藍、英雄紫、傳說橘、神話紅金。
   動畫的長短跟 js/dolls.js altarStart 對得上（匯聚約 1.5 秒＋每格 0.11 秒；揭曉約 1.2 秒）；系統「減少動態效果」整個不演 */

/* ── 階級顏色 ── */
.dw [data-t="1"], .dw-iw [data-t="1"], .dw-iw .box[data-t="1"] { --tc: #d9dfe8; --tg: rgba(217,223,232,.42); --tb: rgba(160,170,186,.12); }
.dw [data-t="2"], .dw-iw [data-t="2"], .dw-iw .box[data-t="2"] { --tc: #5fe08f; --tg: rgba(74,222,128,.5); --tb: rgba(34,197,94,.12); }
.dw [data-t="3"], .dw-iw [data-t="3"], .dw-iw .box[data-t="3"] { --tc: #5cb2ff; --tg: rgba(56,152,255,.55); --tb: rgba(37,99,235,.14); }
.dw [data-t="4"], .dw-iw [data-t="4"], .dw-iw .box[data-t="4"] { --tc: #c792ff; --tg: rgba(168,85,247,.58); --tb: rgba(126,34,206,.15); }
.dw [data-t="5"], .dw-iw [data-t="5"], .dw-iw .box[data-t="5"] { --tc: #ffab4f; --tg: rgba(251,146,60,.62); --tb: rgba(234,88,12,.15); }
.dw [data-t="6"], .dw-iw [data-t="6"], .dw-iw .box[data-t="6"] { --tc: #ffd862; --tc2: #ff5a44; --tg: rgba(255,170,60,.7); --tb: rgba(220,38,38,.16); }

.dw .box { max-width: 580px; }
.dw .bd { gap: 10px; font-size: 14px; color: #d6cdb8; container-type: inline-size; }
.dw .bd > * { flex-shrink: 0; }   /* .lmui-ov .bd 是直排 flex：內容多時不要把卡片壓扁 */

/* 標籤、名字 */
.dw-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 8px; height: 19px; border-radius: 10px; font: 700 11.5px/1 "Microsoft JhengHei", "PingFang TC", sans-serif; letter-spacing: 1px; white-space: nowrap; vertical-align: 2px;
  color: var(--tc); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 22%, transparent), color-mix(in srgb, var(--tc) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); box-shadow: 0 0 6px -1px var(--tg), inset 0 1px 0 rgba(255,255,255,.12); }
.dw-tag[data-t="6"] { color: #fff3c4; background: linear-gradient(100deg, rgba(255,90,68,.45), rgba(255,216,98,.35)); border-color: #ffcf5a; text-shadow: 0 0 4px rgba(255,120,40,.9); }
.dw-nm { font-weight: 700; color: var(--tc); text-shadow: 0 0 8px var(--tg), 0 1px 1px #000; }
.dw-nm[data-t="6"] { background: linear-gradient(90deg, #ff6a4d, #ffd862 45%, #fff2b8 55%, #ff6a4d); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 5px rgba(255,140,40,.6)); }

/* 頭像框：階級色的邊、光暈、深色石底 */
.dw-fr { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 10px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc) 22%, #1a140e) 0%, #120e0a 70%);
  border: 1.5px solid var(--tc); box-shadow: 0 0 10px -2px var(--tg), inset 0 0 12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.6); }
.dw-fr img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.dw-fr.sm { width: 40px; height: 40px; border-radius: 8px; }
.dw-fr.md { width: 56px; height: 56px; }
.dw-fr.lg { width: 84px; height: 84px; border-radius: 14px; border-width: 2px; }
.dw-fr.xl { width: 74px; height: 74px; border-radius: 12px; border-width: 2px; }
.dw-fr[data-t="6"] { border-color: #ffd862; box-shadow: 0 0 14px -2px rgba(255,120,40,.85), 0 0 0 1px rgba(255,90,68,.6), inset 0 0 12px rgba(0,0,0,.7); }
.dw-fr[data-t="5"], .dw-fr[data-t="6"] { animation: dw-breathe 2.6s ease-in-out infinite; }
@keyframes dw-breathe { 50% { box-shadow: 0 0 20px 0 var(--tg), inset 0 0 12px rgba(0,0,0,.7); } }

/* 金幣 */
.dw-coin { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0 12%, #ffd451 30%, #c98a16 72%, #8a5a08 100%); box-shadow: 0 0 0 1px #6b4506, 0 0 5px rgba(255,200,60,.5); }

/* ── 我的娃娃 ── */
.dw-worn:not(.none) { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tc) 55%, #3a2e20); border-radius: 10px;
  background: radial-gradient(120% 140% at 0% 50%, var(--tb), transparent 60%), linear-gradient(rgba(36,28,20,.95), rgba(14,10,7,.95)); box-shadow: 0 0 16px -6px var(--tg), inset 0 0 18px rgba(0,0,0,.6); }
.dw-worn.none { border-style: dashed; color: #9a8f7a; }
.dw-big { flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.dw-worn .dw-nm { font-size: 17px; }
.dw-worn .dl-wtx { min-width: 0; }
.dw-worn .dl-fxc { white-space: normal; }
@container (max-width: 420px) { .dw-worn:not(.none) { flex-wrap: wrap; } .dw-worn > .dl-b { flex: 1 1 100%; } }
.dw .dl-show { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12.5px; color: #9a8f7a; }

/* 買袋子 */
.dw-shop { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid #6b5326; border-radius: 10px;
  background: radial-gradient(140% 120% at 100% 0%, rgba(251,191,36,.12), transparent 55%), linear-gradient(#251c11, #120d08); box-shadow: inset 0 1px 0 rgba(255,220,140,.08), 0 2px 8px rgba(0,0,0,.4); }
.dw-shop-hd { display: flex; align-items: center; gap: 10px; }
.dw-shop-hd > img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.dw-shop-t { display: flex; flex-direction: column; line-height: 1.25; }
.dw-shop-t b { color: #fde68a; font-size: 15px; }
.dw-price { display: inline-flex; align-items: center; color: #ffe08a; font-weight: 700; font-size: 14px; }
.dw-left { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.dw-left small { font-size: 12px; color: #b7a98c; } .dw-left small b { color: #86efac; font-size: 14px; } .dw-left small b.no { color: #f87171; }
.dw-pips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.dw-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #8a6a2a; background: #1a130b; }
.dw-pips i.on { background: #4a3a1e; border-color: #5a4630; opacity: .55; }
.dw-pips i:not(.on) { background: radial-gradient(circle at 35% 30%, #fff1b0, #f2b632 60%, #a8700e); box-shadow: 0 0 4px rgba(255,200,60,.6); border-color: #c98a16; }
.dw-btn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-btn2 .dl-b { padding: 8px; font-size: 14px; }
.dw-btn2 .dl-b:only-child { grid-column: 1 / -1; }
.dl-b.dw-gold { background: linear-gradient(#b7791f, #8a5a12); border-color: #f2c14e; color: #fff8e1; text-shadow: 0 1px 1px #000; }
.dl-b.dw-gold2 { background: linear-gradient(#7a4f10, #5c3b0b); border-color: #d9a43a; color: #fde68a; }
.dw-own img { filter: drop-shadow(0 2px 2px #000); }

/* 擁有的娃娃、材料 */
.dw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
.dw-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; min-width: 0; padding: 4px 2px; font-family: inherit; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tc) 70%, #000); border-radius: 9px; background: radial-gradient(circle at 50% 35%, var(--tb), transparent 70%), linear-gradient(#262019, #120e0a);
  box-shadow: inset 0 0 10px -2px var(--tg), 0 1px 3px rgba(0,0,0,.5); transition: transform .12s, box-shadow .12s; }
.dw-cell:not([disabled]):hover { transform: translateY(-1px); box-shadow: inset 0 0 14px -2px var(--tg), 0 0 10px -3px var(--tg); }
.dw-cell img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.dw-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--tc); }
.dw-cell i { position: absolute; right: 4px; bottom: 2px; font: 700 13px/1 sans-serif; font-style: normal; color: #fde68a; text-shadow: 0 1px 1px #000, 0 0 3px #000; }
.dw-cell[data-t="6"] { border-color: #ffcf5a; }

/* ── 合成 ── */
.dw-route { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.dw-route::-webkit-scrollbar { display: none; }
.dw-rt { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 9px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #b9ad98; cursor: pointer; white-space: nowrap;
  border: 1px solid #4a3a26; border-radius: 16px; background: linear-gradient(#1d1710, #120e09); }
.dw-rt i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 5px var(--tg); }
.dw-rt i[data-t="6"] { background: linear-gradient(135deg, #ff5a44, #ffd862); }
.dw-rt em { font-style: normal; color: #6f6250; margin: 0 1px; }
.dw-rt.on { color: #fff3d0; border-color: #d4a24c; background: linear-gradient(#3e2d16, #24190c); box-shadow: 0 0 10px -3px rgba(255,190,80,.7), inset 0 1px 0 rgba(255,230,170,.15); }
.dw-dot { position: absolute; top: -2px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; border: 1px solid #0b3; }

.dw-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px 10px; border: 1px solid #3a2e20; border-radius: 12px;
  background: radial-gradient(90% 70% at 50% 32%, rgba(80,60,120,.22), transparent 70%), linear-gradient(#17120d, #0b0806); box-shadow: inset 0 0 30px rgba(0,0,0,.75); }
.dw-altar { --A: min(290px, 84cqw); position: relative; flex: none; width: var(--A); height: var(--A); margin-top: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0) 28%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 72%),
    radial-gradient(circle, color-mix(in srgb, var(--nc) 10%, #19130d) 0 36%, #120d09 37% 68%, #1c150e 69% 71%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(110,85,50,.45), 0 0 30px -10px var(--ng), inset 0 0 40px rgba(0,0,0,.8); }
.dw-altar[data-next="2"] { --nc: #5fe08f; --ng: rgba(74,222,128,.55); }
.dw-altar[data-next="3"] { --nc: #5cb2ff; --ng: rgba(56,152,255,.6); }
.dw-altar[data-next="4"] { --nc: #c792ff; --ng: rgba(168,85,247,.6); }
.dw-altar[data-next="5"] { --nc: #ffab4f; --ng: rgba(251,146,60,.65); }
.dw-altar[data-next="6"] { --nc: #ffcf5a; --ng: rgba(255,140,50,.7); }
.dw-ring { position: absolute; inset: 3%; pointer-events: none; }
.dw-ring svg { width: 100%; height: 100%; overflow: visible; animation: dw-spin 48s linear infinite; }
.dw-ring circle { fill: none; }
.dw-ring .r1 { stroke: color-mix(in srgb, var(--nc) 55%, #6b5326); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: .8; }
.dw-ring .r2 { stroke: rgba(201,164,99,.5); stroke-width: .8; }
.dw-ring .r3 { stroke: color-mix(in srgb, var(--nc) 35%, transparent); stroke-width: .7; stroke-dasharray: 14 6; }
.dw-ring text { fill: color-mix(in srgb, var(--nc) 45%, #c9a463); font-size: 11px; text-anchor: middle; opacity: .75; }
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-core { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nc) 55%, #fff) 0%, color-mix(in srgb, var(--nc) 35%, transparent) 30%, transparent 70%); opacity: .5; }
.dw-core i { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--nc) 70%, transparent); box-shadow: 0 0 14px var(--ng), inset 0 0 10px var(--ng); animation: dw-orb 3s ease-in-out infinite; }
@keyframes dw-orb { 50% { transform: scale(1.12); opacity: .7; } }
.dw-target { position: absolute; left: 50%; top: 0; transform: translate(-50%, -62%); z-index: 3; display: flex; align-items: center; gap: 6px; padding: 3px 14px; border-radius: 14px;
  background: linear-gradient(#2a1f12, #140e08); border: 1px solid var(--tc); box-shadow: 0 0 14px -2px var(--tg), 0 0 0 3px rgba(0,0,0,.45); }
.dw-target b { white-space: nowrap; color: var(--tc); font-size: 15px; letter-spacing: 3px; text-shadow: 0 0 8px var(--tg); }
.dw-target[data-t="6"] b { background: linear-gradient(90deg, #ff6a4d, #ffe48a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.dw-target::before, .dw-target::after { content: ""; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, var(--tc)); }
.dw-target::after { transform: scaleX(-1); }

.dw-slot { --S: calc(var(--A) * .2); position: absolute; left: 50%; top: 50%; z-index: 2; width: var(--S); height: var(--S); margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2); padding: 0;
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--A) * -.375)) rotate(calc(-1 * var(--a, 0deg)));
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-family: inherit;
  border: 1.5px dashed rgba(201,164,99,.45); background: radial-gradient(circle, rgba(40,30,18,.9), rgba(10,8,5,.95)); box-shadow: inset 0 0 10px rgba(0,0,0,.8); transition: border-color .2s, box-shadow .2s; }
.dw-slot span { color: rgba(201,164,99,.55); font-size: calc(var(--S) * .38); line-height: 1; }
.dw-slot.full { border: 1.5px solid var(--tc); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc) 25%, #1a140e), #0e0a07 75%); box-shadow: 0 0 12px -2px var(--tg), inset 0 0 10px rgba(0,0,0,.6); }
.dw-slot img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.dw-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

/* 右邊（手機在下面）：成功率、手續費、保底、合成鈕 */
.dw-panel { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.dw-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-rate, .dw-fee { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; border: 1px solid #3f3122; border-radius: 9px; background: rgba(0,0,0,.35); }
.dw-stat small { font-size: 11.5px; color: #9a8f7a; letter-spacing: 1px; }
.dw-rate b { font: 800 32px/1.05 "Bahnschrift SemiBold", "Segoe UI", Arial, sans-serif; background: linear-gradient(#fff6d0, #f6c453 55%, #c98a16); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(255,190,60,.35)); }
.dw-rate b em { font-style: normal; font-size: 17px; }
.dw-fee b { display: inline-flex; align-items: center; white-space: nowrap; font-size: 18px; color: #ffe08a; line-height: 1.6; }
.dw-fee.poor b { color: #f87171; }
.dw-fee.poor { border-color: #7f1d1d; }
.dw-pity { display: flex; align-items: center; gap: 10px; justify-content: center; }
.dw-pity-box { display: flex; gap: 4px; }
.dw-pity-box i { width: 16px; height: 10px; border-radius: 3px; border: 1px solid #5a4630; background: #15100b; transform: skewX(-18deg); }
.dw-pity-box i.on { background: linear-gradient(#ffe58a, #e09a1e); border-color: #ffd26a; box-shadow: 0 0 6px rgba(255,190,60,.7); }
.dw-pity-box i.new { animation: dw-pip .9s .7s both; }
@keyframes dw-pip { 0% { background: #15100b; box-shadow: none; } 40% { transform: skewX(-18deg) scale(1.6); box-shadow: 0 0 14px #ffd26a; } 100% { transform: skewX(-18deg); } }
.dw-pity-t { font-size: 12.5px; color: #b7a98c; } .dw-pity-t b { color: #fde68a; font-size: 14px; }
.dw-note { text-align: center; font-size: 12px; color: #8a7f6c; }
.dw-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-b.dw-ghost { padding: 7px 8px; font-size: 13px; background: linear-gradient(#2a2117, #17110b); border-color: #6b5326; color: #e9dcc0; }
.dw-go { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 20px; letter-spacing: 6px; color: #fff8e6; text-shadow: 0 1px 2px #000, 0 0 8px rgba(255,200,100,.6);
  border: 1px solid #f2c14e; background: linear-gradient(180deg, #8f5bd6 0%, #5b2aa0 48%, #3d1673 52%, #5b2aa0 100%); box-shadow: 0 0 16px -4px rgba(170,110,255,.8), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.4); }
.dw-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: dw-shine 2.8s ease-in-out infinite 1s; }
@keyframes dw-shine { 60%, 100% { transform: translateX(120%); } }
.dw-go:not(.off):active { filter: brightness(1.2); transform: translateY(1px); }
.dw-go.off { cursor: default; letter-spacing: 2px; font-size: 15px; color: #a8997a; text-shadow: none; border-color: #4a3f30; background: linear-gradient(#2a2420, #1a1612); box-shadow: none; }
.dw-go.off::after { display: none; }
.dw-go small { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #f87171; }
.dw-all { justify-self: center; }

.dw-mats { display: flex; flex-direction: column; gap: 7px; }
.dw-mats-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #b7a98c; } .dw-mats-hd .dw-tag { margin-left: 0; } .dw-mats-hd small { margin-left: auto; color: #8a7f6c; }
.dw-mgrid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.dw-mat.used { opacity: .35; filter: grayscale(.7); cursor: default; }
.dw-reroll { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,170,60,.3); border-radius: 9px; background: linear-gradient(90deg, rgba(220,38,38,.1), rgba(0,0,0,.3)); }
.dw-reroll > span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dw-reroll .dw-tag { margin-left: 0; } .dw-reroll b { color: #fde68a; } .dw-reroll small { color: #8a7f6c; font-size: 12px; }

/* ── 合成動畫：匯聚 ── */
.dw-busy .dw-panel { opacity: .55; transition: opacity .3s; }
.dw-charge .dw-ring svg { animation-duration: 2.4s; filter: drop-shadow(0 0 4px var(--nc)); transition: filter .5s; }
.dw-charge .dw-ring .r1 { stroke: var(--nc); opacity: 1; }
.dw-charge .dw-core { animation: dw-grow 1.9s ease-in forwards; }
.dw-full .dw-core { animation: dw-hum .32s ease-in-out infinite alternate; opacity: 1; width: 50%; height: 50%; box-shadow: 0 0 46px 12px var(--ng); }
@keyframes dw-grow { to { opacity: 1; width: 50%; height: 50%; box-shadow: 0 0 46px 12px var(--ng); } }
.dw-charge .dw-core { background: radial-gradient(circle, #fff 0 8%, color-mix(in srgb, var(--nc) 80%, #fff) 18%, color-mix(in srgb, var(--nc) 45%, transparent) 42%, transparent 70%); }
.dw-full .dw-slot { border-color: var(--nc); box-shadow: 0 0 18px 2px var(--ng); }
@keyframes dw-hum { from { filter: brightness(1); } to { filter: brightness(1.6); } }
.dw-charge .dw-core i { animation-duration: .45s; }
.dw-slot.fly { border-color: var(--nc); box-shadow: 0 0 16px var(--ng); transition: box-shadow .3s var(--d), border-color .3s var(--d), opacity .4s calc(var(--d) + .5s); opacity: .25; }
.dw-slot.fly img { transition: transform .62s cubic-bezier(.55,0,.8,.2) var(--d), opacity .25s calc(var(--d) + .45s); transform: translate(var(--dx), var(--dy)) scale(.3) rotate(260deg); opacity: 0; }
.dw-mote { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--nc);
  animation: dw-in 1.15s cubic-bezier(.4,0,.9,.6) var(--d) infinite; opacity: 0; }
@keyframes dw-in { 0% { transform: rotate(var(--a)) translateY(calc(var(--A) * var(--r) / -100)) scale(1.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(0) scale(.2); opacity: 0; } }

/* 成功 */
.dw-win .dw-ring svg { animation-duration: 9s; }
.dw-win .dw-core { opacity: 0; transition: opacity .4s; }
.dw-win .dw-slot { opacity: 0; transition: opacity .2s; }
.dw-flash { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; margin: -75% 0 0 -75%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 6%, var(--tc) 18%, color-mix(in srgb, var(--tc) 40%, transparent) 38%, transparent 66%); animation: dw-flash 1.1s ease-out forwards; }
@keyframes dw-flash { 0% { transform: scale(.15); opacity: 1; } 35% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.dw-wave { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; border: 3px solid var(--tc); box-shadow: 0 0 18px var(--tg), inset 0 0 18px var(--tg);
  animation: dw-wave .9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes dw-wave { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.dw-rays { position: absolute; left: 50%; top: 50%; width: 220%; height: 220%; margin: -110% 0 0 -110%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 55%, transparent) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%); animation: dw-rays 3.2s ease-out forwards; }
@keyframes dw-rays { 0% { transform: rotate(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: rotate(80deg) scale(1); opacity: 0; } }
.dw-sparks { position: absolute; inset: 0; }
.dw-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 6px 2px var(--tc);
  animation: dw-out 1.15s cubic-bezier(.1,.75,.3,1) var(--d) both; }
@keyframes dw-out { 0% { transform: rotate(var(--a)) translateY(0) scale(var(--s)) rotate(45deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--A, 280px) * var(--r) / -100)) scale(calc(var(--s) * .3)) rotate(45deg); opacity: 0; } }
.dw-card { position: absolute; left: 50%; top: 50%; width: 46%; height: 60%; margin: -32% 0 0 -23%; perspective: 700px; }
.dw-cin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: dw-flip .85s cubic-bezier(.3,1.4,.5,1) .3s both; }
@keyframes dw-flip { 0% { transform: rotateY(180deg) scale(.2); } 55% { transform: rotateY(-12deg) scale(1.06); } 100% { transform: rotateY(0) scale(1); } }
.dw-back, .dw-front { position: absolute; inset: 0; border-radius: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dw-back { transform: rotateY(180deg); border: 2px solid var(--tc); background: repeating-linear-gradient(45deg, #2a1f12 0 6px, #1a120a 6px 12px); box-shadow: 0 0 18px var(--tg); }
.dw-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; border: 2px solid var(--tc);
  background: radial-gradient(circle at 50% 35%, var(--tb), transparent 70%), linear-gradient(#251c12, #0f0b07); box-shadow: 0 0 26px -2px var(--tg), inset 0 0 18px rgba(0,0,0,.7); }
.dw-front .dw-nm { font-size: 15px; text-align: center; line-height: 1.2; }
.dw-front .dw-tag { margin-left: 0; }
.dw-front .dw-fr { width: 62%; height: auto; aspect-ratio: 1; }
.dw-res { position: absolute; left: 0; right: 0; bottom: -4%; text-align: center; font-weight: 800; font-size: 20px; letter-spacing: 6px; animation: dw-rise .6s .7s both; }
.dw-res.ok { color: var(--tc); text-shadow: 0 0 10px var(--tg), 0 2px 2px #000; }
.dw-res[data-t="6"] { color: #ffe08a; text-shadow: 0 0 12px #ff6a3c, 0 2px 2px #000; }
.dw-res.ng { color: #b8bcc4; text-shadow: 0 2px 2px #000; bottom: 8%; }
.dw-res small { display: block; letter-spacing: 1px; font-size: 13px; font-weight: 700; color: #e9dcc0; }
@keyframes dw-rise { from { transform: translateY(8px); opacity: 0; } }

/* 傳說、神話：整個畫面金光、震動 */
.dw.dw-epic::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 50% 45%, rgba(255,240,190,.9), rgba(255,170,60,.45) 30%, rgba(255,120,40,.12) 60%, transparent 80%); animation: dw-screen 1.6s ease-out forwards; }
.dw.dw-epic[data-epic="6"]::after { background: radial-gradient(circle at 50% 45%, rgba(255,250,220,.95), rgba(255,200,80,.55) 25%, rgba(255,70,50,.25) 55%, transparent 80%); }
@keyframes dw-screen { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.dw.dw-epic .box { animation: dw-shake .55s cubic-bezier(.36,.07,.19,.97) .05s both; }
@keyframes dw-shake { 10%, 90% { transform: translate(-1px, 1px); } 20%, 80% { transform: translate(3px, -2px); } 30%, 50%, 70% { transform: translate(-5px, 2px); } 40%, 60% { transform: translate(5px, -2px); } }

/* 失敗：碎裂、暗下來、退回的那隻飛回去 */
.dw-lose .dw-ring svg { animation-duration: 30s; filter: grayscale(1) brightness(.55); transition: filter .6s; }
.dw-lose .dw-core { opacity: .15; filter: grayscale(1); transition: opacity .8s, filter .3s; }
.dw-lose .dw-slot { opacity: .3; }
.dw-lose { box-shadow: 0 0 0 1px rgba(80,70,60,.5), inset 0 0 50px rgba(0,0,0,.95); transition: box-shadow .6s; }
.dw-crack { position: absolute; left: 50%; top: 50%; width: 48%; height: 48%; margin: -24% 0 0 -24%; border-radius: 50%;
  background: repeating-conic-gradient(from 10deg, rgba(230,230,240,.9) 0 1.2deg, transparent 1.2deg 37deg), radial-gradient(circle, rgba(255,255,255,.7), transparent 60%);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 10% 68%, transparent 72%); mask: radial-gradient(circle, transparent 8%, #000 10% 68%, transparent 72%); animation: dw-crack .9s ease-out forwards; }
@keyframes dw-crack { 0% { transform: scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.dw-shard { position: absolute; left: 50%; top: 50%; width: 9px; height: 13px; margin: -6px -4px; background: linear-gradient(#e9e6f2, #6b6878); clip-path: polygon(50% 0, 100% 70%, 30% 100%, 0 40%);
  animation: dw-shard 1s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes dw-shard { 0% { transform: rotate(var(--a)) translateY(0) rotate(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--A, 280px) * var(--r) / -100)) rotate(var(--rot)) translateY(30px); opacity: 0; } }
.dw-back-fly { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; animation: dw-backfly .8s cubic-bezier(.3,.8,.4,1) .55s forwards; }
@keyframes dw-backfly { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.75); opacity: 1; } }

/* ── 開袋子 ── */
.dw .box { position: relative; }
.dw-pop { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(5,3,2,.72); border-radius: inherit; animation: dw-fadein .2s both; }
@keyframes dw-fadein { from { opacity: 0; } }
.dw-pop-in { --A: 260px; position: relative; width: var(--A); height: var(--A); display: flex; align-items: center; justify-content: center; }
.dw-pop-bag { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 8px #000) drop-shadow(0 0 10px rgba(255,200,120,.4)); animation: dw-jiggle .7s ease-in-out both; }
@keyframes dw-jiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg) scale(1.05); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg) scale(1.1); } 60% { transform: rotate(7deg); } 80% { transform: scale(1.25); } }
.dw-pop-got { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: dw-popin .6s cubic-bezier(.3,1.5,.5,1) .1s both; }
.dw-pop-got .dw-nm { font-size: 17px; } .dw-pop-got .dw-tag { margin-left: 0; }
@keyframes dw-popin { from { transform: scale(.2) translateY(20px); opacity: 0; } }

/* ── 圖鑑 ── */
.dw-bk-top { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #e9dcc0; } .dw-bk-top b { font-size: 17px; color: #fde68a; } .dw-bk-top .dw-bar { flex: 1; }
.dw-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: #1a140e; box-shadow: inset 0 0 0 1px #3a2e20; overflow: hidden; }
.dw-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, color-mix(in srgb, var(--tc, #fde68a) 50%, #000), var(--tc, #fde68a)); box-shadow: 0 0 6px var(--tg, rgba(255,220,120,.5)); border-radius: 3px; }
.dw-bk { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #3a2e20; border-left: 3px solid color-mix(in srgb, var(--tc) 70%, #000); border-radius: 10px;
  background: linear-gradient(90deg, var(--tb), rgba(0,0,0,.2) 60%); }
.dw-bk.done { border-color: color-mix(in srgb, var(--tc) 60%, #3a2e20); box-shadow: 0 0 16px -6px var(--tg), inset 0 0 20px -10px var(--tg); }
.dw-bk-hd { display: flex; align-items: center; gap: 10px; } .dw-bk-hd .dw-tag { margin-left: 0; font-size: 13px; height: 22px; padding: 0 10px; }
.dw-bk-n { font-size: 13px; color: #9a8f7a; white-space: nowrap; } .dw-bk-n b { font-size: 16px; color: var(--tc); }
.dw-bk-hd .dw-bar { flex: 1; }
.dw-bonus { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #7d7464; }
.dw-bonus small { flex: none; padding: 1px 6px; border: 1px solid #4a3f30; border-radius: 4px; font-size: 11px; color: #8a7f6c; }
.dw-bk.done .dw-bonus { color: var(--tc); font-weight: 700; text-shadow: 0 0 6px var(--tg); }
.dw-bk.done .dw-bonus b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tc); color: #111; font-size: 12px; text-shadow: none; box-shadow: 0 0 8px var(--tg); }
.dw-bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.dw-bkc { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; min-width: 0; font-family: inherit; cursor: pointer; border-radius: 8px;
  border: 1px solid #2c241a; background: rgba(10,8,6,.55); }
.dw-bkc.got { border-color: color-mix(in srgb, var(--tc) 55%, #2c241a); background: radial-gradient(circle at 50% 35%, var(--tb), rgba(10,8,6,.6) 70%); }
.dw-bkc img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.dw-bkc img.sil { filter: brightness(0) saturate(0); opacity: .45; }
.dw-bkc span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #5d564a; }
.dw-bkc.got span { color: var(--tc); }

/* 說明小視窗 */
.dw-iw .box { border-color: var(--tc); }
.dw-iw .hd .dw-nm { flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }

/* ── 版面：電腦、平板（視窗夠寬）合成台左、資訊右；手機橫式（矮）一樣左右排、合成台縮小；手機直式上下排 ── */
@container (min-width: 500px) {
  .dw-stage { flex-direction: row; justify-content: center; align-items: center; gap: 18px; padding: 18px 12px 14px; }
  .dw-altar { --A: 268px; margin-top: 14px; }
  .dw-panel { flex: 1; max-width: 230px; }
}
@media (orientation: landscape) and (max-height: 520px) {   /* 手機橫式：視窗矮又窄，合成台縮小放左邊、資訊擠在右邊 */
  .dw-stage { flex-direction: row; align-items: center; gap: 8px; padding: 14px 6px 8px; }
  .dw-altar { --A: min(176px, 54cqw); margin-top: 8px; }
  .dw-panel { flex: 1; min-width: 0; gap: 5px; }
  .dw-stat { gap: 5px; } .dw-rate, .dw-fee { padding: 3px 2px; } .dw-fee b { font-size: 13px; } .dw-fee .dw-coin { width: 11px; height: 11px; margin-right: 2px; } .dw-rate b { font-size: 22px; }
  .dw-pity { flex-direction: column; gap: 3px; } .dw-pity-box i { width: 12px; height: 8px; }
  .dw-acts .dl-b { padding: 5px 4px; font-size: 12px; }
  .dw-target { padding: 1px 10px; } .dw-target::before, .dw-target::after { width: 8px; }
  .dw-res { font-size: 15px; letter-spacing: 3px; }
  .dw-rate b { font-size: 26px; }
  .dw-go { min-height: 42px; font-size: 17px; }
  .dw-target b { font-size: 13px; }
}
@media (max-width: 420px) {
  .dw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .dw-mgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dw-bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dw-rt { padding: 6px 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw *, .dw *::before, .dw *::after, .dw::after { animation: none !important; transition: none !important; }
}

/* 魔法結晶體剩餘時間（伺服器本機改動第 136 項）：裝著的那隻、娃娃說明 */
.dw-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; font-size: 13.5px; color: #e9d9b0; }
.dw-time b { color: #fde68a; font-variant-numeric: tabular-nums; }
.dw-time small { color: #a8a08a; font-size: 12.5px; }

/* 圖鑑每一階：召喚一次要幾顆魔法結晶體（站長 2026-10-24） */
.dw-bk-cost { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; color: #c9b88f; }
.dw-bk-cost img { width: 20px; height: 20px; object-fit: contain; }

/* 選魔法娃娃（設定 → 召喚「沒有娃娃時自動召喚」的圖示框；js/dollpick.js，站長 2026-10-24「做成法師召喚表那樣比較精緻」）
   外觀跟召喚表（lmui.css #lmui-summon）同一套：暗色舞台畫站姿、金框＝目前選的；階級顏色同娃娃視窗（[data-t] → --tc 主色、--tg 光暈）
   .dp-hero＝目前選的大卡；.dp-grp＝階級分組；.dp-card＝一隻（.cur 金框光暈、.dp-go 點了亮一下）；.dp-more＝最下面「更多娃娃」 */
#lmui-dollpick [data-t="1"] { --tc: #d9dfe8; --tg: rgba(217,223,232,.42); }
#lmui-dollpick [data-t="2"] { --tc: #5fe08f; --tg: rgba(74,222,128,.5); }
#lmui-dollpick [data-t="3"] { --tc: #5cb2ff; --tg: rgba(56,152,255,.55); }
#lmui-dollpick [data-t="4"] { --tc: #c792ff; --tg: rgba(168,85,247,.58); }
#lmui-dollpick [data-t="5"] { --tc: #ffab4f; --tg: rgba(251,146,60,.62); }
#lmui-dollpick [data-t="6"] { --tc: #ffd862; --tg: rgba(255,170,60,.7); }
#lmui-dollpick .box { height: auto; max-height: 100%; max-width: 460px; }
#lmui-dollpick .bd { padding: 6px 8px 10px; gap: 8px; }
#lmui-dollpick .bd > * { flex-shrink: 0; }
#lmui-dollpick .dw-tag { margin-left: 0; }
/* 站姿舞台（同 .sm-pic） */
#lmui-dollpick .dp-pic { position: relative; height: 80px; border-radius: 5px; overflow: hidden; border: 1px solid #2c2318; background: #0a0806; }
#lmui-dollpick .dp-pic canvas { display: block; width: 100%; height: 100%; }
#lmui-dollpick .dp-pic::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--tc, #e8c46a) 22%, transparent), transparent 70%); }
#lmui-dollpick .dp-curt { position: absolute; right: 3px; top: 3px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 15px; color: #1a1206;
  background: linear-gradient(#fde68a, #e0a93b); box-shadow: 0 0 8px rgba(242,193,78,.7); }
#lmui-dollpick .dp-n { position: absolute; left: 3px; top: 3px; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 15px; color: #f0e2c0;
  background: rgba(10,8,6,.78); border: 1px solid rgba(138,106,58,.6); }
/* 大卡：目前選的那隻 */
#lmui-dollpick .dp-hero { position: relative; display: flex; gap: 10px; padding: 6px; border: 1px solid #e6b54a; border-radius: 9px;
  background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 60%), linear-gradient(#33240f, #160f08);
  box-shadow: 0 0 0 1px rgba(253,230,138,.35), 0 0 14px rgba(242,193,78,.45), inset 0 0 12px rgba(242,193,78,.15); animation: smGlow 2.4s ease-in-out infinite; }
#lmui-dollpick .dp-hero .dp-pic { flex: none; width: 116px; height: 116px; border-color: #8a6a2a; }
#lmui-dollpick .dp-hinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
#lmui-dollpick .dp-hnm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#lmui-dollpick .dp-hnm b { font-size: 18px; line-height: 1.25; }
#lmui-dollpick .dp-hcost { display: flex; align-items: center; flex-wrap: wrap; gap: 0 3px; font-size: 13px; color: #d6cdbd; }
#lmui-dollpick .dp-hcost > span { white-space: nowrap; }
#lmui-dollpick .dp-hcost b { font-size: 15px; color: #fcd34d; }
#lmui-dollpick .dp-hmin { font-size: 12px; color: #9c8f78; }
#lmui-dollpick .dp-fx { gap: 3px; }
#lmui-dollpick .dp-fx .dl-fxc { font-size: 12px; white-space: normal; }
#lmui-dollpick .dp-ci { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
#lmui-dollpick .dp-none { justify-content: center; align-items: center; min-height: 64px; color: #e8d7ad; font-size: 14px; border-style: dashed; animation: none; box-shadow: none; background: rgba(10,8,6,.5); }
/* 階級分組 */
#lmui-dollpick .dp-grp { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#lmui-dollpick .dp-grp small { font-size: 11px; color: #7d705b; }
#lmui-dollpick .dp-grp::after { content: ""; flex: 1 1 auto; border-top: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); }
#lmui-dollpick .dp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
/* 一隻 */
#lmui-dollpick .dp-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 4px 4px 6px; min-width: 0; cursor: pointer; border-radius: 7px; color: #d6cdbd;
  border: 1px solid color-mix(in srgb, var(--tc) 38%, #4d3e2a); background: linear-gradient(#1d1610, #120d09);
  box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 2px 4px rgba(0,0,0,.5); transition: transform .12s, border-color .12s; -webkit-tap-highlight-color: transparent; }
#lmui-dollpick .dp-card:hover { border-color: var(--tc); box-shadow: 0 0 8px -2px var(--tg), 0 2px 4px rgba(0,0,0,.5); }
#lmui-dollpick .dp-card:active { transform: scale(.97); }
#lmui-dollpick .dp-card:focus-visible { outline: 2px solid #fde68a; outline-offset: 1px; }
#lmui-dollpick .dp-card.cur { border-color: #e6b54a; background: linear-gradient(#33240f, #160f08); animation: smGlow 2.4s ease-in-out infinite; }
#lmui-dollpick .dp-card.cur .dp-pic { border-color: #8a6a2a; }
#lmui-dollpick .dp-nm { padding: 0 2px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lmui-dollpick .dp-cost { display: flex; align-items: center; gap: 3px; padding: 0 2px; font-size: 11px; color: #9c8f78; white-space: nowrap; }
#lmui-dollpick .dp-cost b { font-size: 13px; color: #f2c14e; }
#lmui-dollpick .dp-cost .dp-ci { width: 14px; height: 14px; }
#lmui-dollpick .dp-free { color: #7d705b; }
#lmui-dollpick .dp-card.dp-go { border-color: #fde68a; animation: smGo .38s ease-out forwards; }
#lmui-dollpick .dp-card.dp-go .dp-pic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, rgba(255,243,196,.9), rgba(242,193,78,.35) 40%, transparent 70%); animation: smFlash .38s ease-out forwards; }
/* 最下面：更多娃娃 */
#lmui-dollpick .dp-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 6px 4px 0 6px; border-top: 1px dashed #3d3021; font-size: 12px; color: #8c7f68; }
#lmui-dollpick .dp-more button { flex: none; padding: 4px 12px; border-radius: 999px; border: 1px solid #5a4630; background: #17120c; color: #e8c46a; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#lmui-dollpick .dp-more button:hover { border-color: #b7862f; }
#lmui-dollpick .dp-empty { padding: 22px 8px; text-align: center; color: #9c8f78; font-size: 13px; border: 1px dashed #3d3021; border-radius: 8px; }
@media (max-width: 360px) {
  #lmui-dollpick .dp-hero .dp-pic { width: 100px; height: 100px; }
  #lmui-dollpick .dp-cards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { #lmui-dollpick :is(.dp-hero, .dp-card.cur, .dp-card.dp-go) { animation: none; } }
/* 選魔法娃娃：單擊預覽、右下「使用」、點兩下選定（站長 2026-10-24）
   .dp-hero.dp-pv＝預覽中的大卡（藍框、標「預覽」）；.dp-card.sel＝正在預覽的小卡（藍框，跟目前的金框分開）；.dp-use＝右下使用鈕（目前那隻是灰的「使用中」） */
#lmui-dollpick .dp-cards { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
#lmui-dollpick .dp-card { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#lmui-dollpick .dp-card.sel { border-color: #7cc4ff; background: linear-gradient(#14202e, #0d1118); box-shadow: 0 0 0 1px rgba(124,196,255,.45), 0 0 10px rgba(92,178,255,.5); }
#lmui-dollpick .dp-card.sel .dp-pic { border-color: #3d6a92; }
#lmui-dollpick .dp-cost { justify-content: space-between; gap: 4px; padding-right: 0; }
#lmui-dollpick .dp-cl { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
#lmui-dollpick .dp-use { flex: none; padding: 2px 7px; border-radius: 999px; border: 1px solid #b7862f; background: linear-gradient(#5a3f14, #2c1f0c); color: #fde68a;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 16px; cursor: pointer; touch-action: manipulation; }
#lmui-dollpick .dp-use:hover { border-color: #fde68a; }
#lmui-dollpick .dp-use:active { transform: scale(.94); }
#lmui-dollpick .dp-use.dp-using { padding: 2px 4px; border-color: transparent; background: none; color: #7d705b; font-weight: 400; cursor: default; }
#lmui-dollpick .dp-hero.dp-pv { border-color: #7cc4ff; animation: none;
  background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 60%), linear-gradient(#14202e, #0d1118);
  box-shadow: 0 0 0 1px rgba(124,196,255,.35), 0 0 14px rgba(92,178,255,.4); }
#lmui-dollpick .dp-hero.dp-pv .dp-pic { border-color: #3d6a92; }
#lmui-dollpick .dp-pv .dp-curt { color: #06121e; background: linear-gradient(#cfe9ff, #6fb6f2); box-shadow: 0 0 8px rgba(92,178,255,.7); }
#lmui-dollpick .dp-card { container-type: inline-size; }
#lmui-dollpick .dp-narrow { display: none; }
@container (max-width: 110px) { #lmui-dollpick .dp-wide { display: none; } #lmui-dollpick .dp-narrow { display: inline; } }
/* 第 280 項：登入圖鑑——圖鑑格「可登入」（有、還沒登入）、我的娃娃「有 N 種還沒登入」入口、詢問視窗一隻一行、四階以上的儀式徽章 */
.dw-bkc.can { position: relative; border-color: #d97706; box-shadow: 0 0 8px rgba(217,119,6,.45); }
.dw-bkc.can img { filter: saturate(.55) brightness(.85); }
.dw-bkc .dw-can { position: absolute; top: 2px; right: 2px; padding: 1px 4px; border-radius: 4px; background: #92400e; color: #ffe7b3; font: 700 10px/1.2 "Microsoft JhengHei", "PingFang TC", sans-serif; font-style: normal; }
.dw-regall { width: 100%; padding: 9px 10px; border: 1px solid #d97706; border-radius: 8px; background: linear-gradient(#5a3410, #2e1a06); color: #ffe7b3; font: 700 14px/1.2 "Microsoft JhengHei", "PingFang TC", sans-serif; cursor: pointer; }
#doll-reg .bd { gap: 6px; }
#doll-reg .dw-reg-note { font-size: 13px; color: #c9b58a; margin-bottom: 2px; }
#doll-reg .dw-reg-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgba(110,90,60,.45); border-radius: 8px; background: rgba(20,15,10,.6); }
#doll-reg .dw-reg-row .dw-tag { margin-left: 0; }
#doll-reg .dw-reg-fee { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: #f3d48a; font-size: 13px; white-space: nowrap; }
#doll-reg .dw-reg-fee img { width: 16px; height: 16px; }
.dw-cer .dw-cer-ic { display: flex; justify-content: center; }
.dw-cer .dw-cer-ic .dw-fr { transform: scale(1.25); box-shadow: 0 0 24px var(--g); }
.dw-cer [data-t="4"] { --tc: #c792ff; --tg: rgba(168,85,247,.58); --tb: rgba(126,34,206,.15); }
.dw-cer [data-t="5"] { --tc: #ffab4f; --tg: rgba(251,146,60,.62); --tb: rgba(234,88,12,.15); }
.dw-cer [data-t="6"] { --tc: #ffd862; --tc2: #ff5a44; --tg: rgba(255,170,60,.7); --tb: rgba(220,38,38,.16); }
#doll-reg .dw-reg-row .dw-nm { white-space: nowrap; }
/* 第 426 項（doll423 測試報告）：合成材料、台上材料格標「未登入」（還沒登入圖鑑，合成掉就沒了）；動畫中收起來 */
.dw-unreg { position: absolute; left: 50%; top: -6px; z-index: 1; transform: translateX(-50%); white-space: nowrap; padding: 1px 4px; border-radius: 4px; background: #92400e; color: #ffe7b3; font: 700 10px/1.2 "Microsoft JhengHei", "PingFang TC", sans-serif; font-style: normal; pointer-events: none; }
.dw-slot .dw-unreg { top: auto; bottom: -7px; box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.dw-slot.fly .dw-unreg, .dw-win .dw-unreg, .dw-lose .dw-unreg { opacity: 0; }
.dl-askov .cl-ask b.dw-warn { color: #fb923c; }
#doll-ask .cl-ask span { white-space: nowrap; }
/* 圖鑑：還沒登入、只有身上裝著的那隻（顯示名字與圖，標卸下後才能登入） */
.dw-bkc.wear { position: relative; border-color: #475569; background: radial-gradient(circle at 50% 35%, var(--tb), rgba(10,8,6,.6) 70%); }
.dw-bkc.wear img { filter: saturate(.55) brightness(.85); }
.dw-bkc.wear span { color: var(--tc); }
.dw-bkc .dw-can.dw-wear-tag { left: 50%; right: auto; top: -7px; transform: translateX(-50%); white-space: nowrap; background: #334155; color: #e2e8f0; font-size: 9px; }
.dw-iw .dw-reg-hint { margin-bottom: 6px; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(148,163,184,.35); background: rgba(51,65,85,.35); color: #cbd5e1; font-size: 13px; }
/* 我的娃娃：自動召喚卸下暫停（開關不亮，這行換成卸下中） */
#doll-window .dw-set .dw-auto-note.paused { color: #fbbf24; }