/* Floralia · the mount summon hall (js/summonfx.js, 2026-10-13, the user: "ทำระบบสุ่มพาหนะแบบ Mir4"). Full screen over the game:
   its own moonlit sky terrace, the gate of clouds (assets/fx/summon), the cards in the tier's metal frames, the violet orbs. */
#msummon { position: fixed; inset: 0; z-index: 950; overflow: hidden; font-family: 'Mali', sans-serif; color: #f2ead6; animation: msmIn 0.35s ease-out both; }
/* (its own place - a moonlit sky terrace above a sea of clouds, Codex: assets/ui_book/summon/summon_hall.jpg; the user:
   "เปลี่ยนฉากหลังได้ไหม มันเหมือนกับห้องแต่งตัว") */
#msummon .msm-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, rgba(60, 40, 110, 0.15), rgba(6, 4, 14, 0.55) 78%),
  url(../assets/ui_book/summon/summon_hall.jpg) center bottom / cover; }
#msummon .msm-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#msummon .msm-top { position: absolute; left: 0; right: 0; top: 2.6vh; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#msummon .msm-top h2 { margin: 0; font: 800 clamp(26px, 4.4vh, 48px)/1.1 'Mali', sans-serif; color: #ffe7a6; text-shadow: 0 3px 0 #3a2208, 0 0 22px rgba(255, 200, 90, 0.7); letter-spacing: 0.04em; }
#msummon .msm-have { display: flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(20, 12, 30, 0.7); border: 1px solid rgba(255, 220, 150, 0.45); font-size: 18px; }
#msummon .msm-have img { width: 32px; height: 32px; }
#msummon .msm-pity { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; text-shadow: 0 1px 2px #000; }
#msummon .msm-pity b { color: #ffe08a; }
#msummon .msm-pity i { display: block; width: 260px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.35); }
#msummon .msm-pity em { display: block; height: 100%; background: linear-gradient(90deg, #ffb340, #ffe39a); box-shadow: 0 0 10px rgba(255, 190, 80, 0.8); }

#msummon .msm-bottom { position: absolute; left: 0; right: 0; bottom: 5vh; display: flex; justify-content: center; gap: 22px; }
:is(#msummon, #fusionfx) .msm-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 210px; min-height: 66px; padding: 6px 22px; border-radius: 16px; cursor: pointer;
  font-family: 'Mali', sans-serif; color: #2c1a06; background: linear-gradient(180deg, #fff1c4, #f2b14a 60%, #d98a1f); border: 2px solid #fff4d0;
  box-shadow: 0 0 0 2px rgba(122, 76, 18, 0.7), 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 200, 90, 0.45); transition: transform 0.12s, filter 0.12s; }
:is(#msummon, #fusionfx) .msm-btn b { font-size: 21px; }
:is(#msummon, #fusionfx) .msm-btn small { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
:is(#msummon, #fusionfx) .msm-btn small img { width: 20px; height: 20px; }
:is(#msummon, #fusionfx) .msm-btn.big { min-width: 260px; background: linear-gradient(180deg, #ffd6f0, #ff7aa8 55%, #c8357a); color: #fff; border-color: #ffe2f2; text-shadow: 0 1px 2px rgba(70, 0, 30, 0.8);
  box-shadow: 0 0 0 2px rgba(110, 20, 60, 0.7), 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 120, 180, 0.55); }
:is(#msummon, #fusionfx) .msm-btn:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.08); }
:is(#msummon, #fusionfx) .msm-btn:disabled { filter: grayscale(1) brightness(0.7); cursor: default; }
#msummon.msm-showing .msm-bottom { display: none; }
#msummon .msm-side { position: absolute; right: 2vw; top: 2.6vh; display: flex; gap: 8px; }
#msummon .msm-mini { padding: 8px 14px; border-radius: 12px; cursor: pointer; font: 700 15px 'Mali', sans-serif; color: #f2ead6; background: rgba(20, 12, 30, 0.75); border: 1px solid rgba(255, 220, 150, 0.45); }
#msummon .msm-odds { position: absolute; right: 2vw; top: calc(2.6vh + 48px); width: min(380px, 92vw); padding: 14px 16px; border-radius: 16px; background: rgba(16, 10, 26, 0.92); border: 1px solid rgba(255, 220, 150, 0.45); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
#msummon .msm-odds h3 { margin: 0 0 8px; color: #ffe7a6; font-size: 17px; }
#msummon .msm-odds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#msummon .msm-odds li { display: grid; grid-template-columns: 12px 64px 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
#msummon .msm-odds li i { width: 12px; height: 12px; border-radius: 50%; }
#msummon .msm-odds li em { color: #cfc6b4; font-style: normal; font-size: 12px; }
#msummon .msm-odds li b { color: #fff; }
#msummon .msm-odds p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #d8d0bd; }
#msummon .msm-skip { position: absolute; right: 2vw; bottom: 4vh; padding: 10px 20px; border-radius: 12px; cursor: pointer; font: 800 16px 'Mali', sans-serif; color: #f2ead6; background: rgba(20, 12, 30, 0.8); border: 1px solid rgba(255, 220, 150, 0.5); }

/* the cards */
#msummon .msm-results { position: absolute; inset: 15vh 4vw 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 14px; pointer-events: none; }
#msummon .msm-results > * { pointer-events: auto; }
#msummon .msm-card { width: var(--cw); aspect-ratio: 3 / 4; perspective: 900px; animation: msmDeal 0.35s ease-out both; }
#msummon .msm-results { --cw: clamp(110px, min(14vw, 19vh), 190px); }
#msummon .msm-results.ten { left: 50%; right: auto; width: calc(var(--cw) * 5 + 14px * 4); transform: translateX(-50%); }
#msummon .msm-results.ten .msm-card:nth-child(n) { animation-delay: calc(var(--i, 0) * 30ms); }
#msummon .msm-card.big { width: clamp(220px, 26vw, 330px); }
#msummon .msm-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }
#msummon .msm-card.open .msm-inner { transform: rotateY(180deg); }
#msummon .msm-back, #msummon .msm-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#msummon .msm-back { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #3a2a5c, #120c22 75%); border: 3px solid var(--gc);
  box-shadow: 0 0 14px var(--gc), 0 0 34px color-mix(in srgb, var(--gc) 60%, transparent), inset 0 0 22px rgba(0, 0, 0, 0.6); }
#msummon .msm-card.g0 .msm-back { box-shadow: 0 0 6px rgba(255, 255, 255, 0.3), inset 0 0 22px rgba(0, 0, 0, 0.6); }
#msummon .msm-back img { width: 54%; filter: drop-shadow(0 0 10px rgba(255, 150, 210, 0.7)); }
#msummon .msm-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 12% 10% 12%; text-align: center;
  background: center / 100% 100% no-repeat; isolation: isolate; }
/* (the tier's backdrop softened and darkened behind a pool of the tier's light, so the mount stands out - as the mount page's
   cards; the user: "แก้พวกนี้ด้วย") */
#msummon .msm-plate { position: absolute; inset: 9%; z-index: -1; border-radius: 6%; overflow: hidden; background: center 58% / cover no-repeat; filter: blur(2px) brightness(0.55) saturate(0.85); }
#msummon .msm-glow { position: absolute; z-index: 0; left: 50%; top: 40%; width: 100%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--gc) 80%, #fff 20%) 0%, color-mix(in srgb, var(--gc) 35%, transparent) 40%, transparent 70%); mix-blend-mode: screen; opacity: 0.9; }
#msummon .msm-pic { z-index: 1; }
#msummon .msm-pic { flex: 1; width: 100%; display: grid; place-items: center; }
/* (the mount inside the frame's window: the 384 x 256 picture's own margins trimmed by the box, never past the frame - the user: "ดูกรอบกับพาหนะ") */
#msummon .msm-pic { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
#msummon .msm-pic img { width: 100%; max-width: 100%; margin: 0; transform: scale(1.22); filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 7px var(--gc)) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)); }
#msummon .msm-front b { font-size: clamp(13px, 1.5vw, 18px); color: #fff; text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008; }
#msummon .msm-front small { font-size: 12px; font-weight: 700; color: var(--gc); text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#msummon .msm-front .msm-new, #msummon .msm-front .msm-dup { position: absolute; top: 5%; right: 5%; padding: 1px 8px; border-radius: 999px; font: 800 11px 'Mali', sans-serif; font-style: normal; }
#msummon .msm-front .msm-new { background: linear-gradient(180deg, #fff1a8, #ffb340); color: #3a2200; box-shadow: 0 0 10px rgba(255, 200, 80, 0.9); }
#msummon .msm-front .msm-dup { background: rgba(20, 14, 30, 0.85); color: #d8d0bd; }
#msummon .msm-card.big .msm-front { padding: 10% 10% 9%; }
#msummon .msm-card.big .msm-pic img { transform: scale(1.08); }
#msummon .msm-card.big .msm-front b { font-size: clamp(18px, 2.2vw, 26px); }
#msummon .msm-card.big .msm-front p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: #f2ead6; text-shadow: 0 1px 2px #000; }
#msummon .msm-card.big .msm-front .msm-sk { color: #ffe39a; }
#msummon .msm-card.open { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gc) 70%, transparent)); }
#msummon .msm-card.open.wow { animation: msmWow 0.9s ease-out; }
#msummon .msm-after { flex: 1 1 100%; display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
@keyframes msmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes msmDeal { from { opacity: 0; transform: scale(0.25) rotate(-10deg); filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.4); } to { opacity: 1; transform: none; filter: none; } }   /* (out of the gate of light) */
@keyframes msmWow { 0% { transform: scale(1); } 30% { transform: scale(1.18); filter: drop-shadow(0 0 30px var(--gc)) brightness(1.4); } 100% { transform: scale(1); } }
@media (max-width: 800px) { #msummon .msm-bottom { flex-direction: column; align-items: center; gap: 10px; } #msummon .msm-card { width: 28vw; } }

/* the details (the user: "เก็บรายละเอียดการสุ่มพาหนะ"): featured mounts, the history, a card's details, the summary */
#msummon .msm-feat { position: absolute; top: 20vh; width: 17vw; min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#msummon .msm-feat.l { left: 2.5vw; }
#msummon .msm-feat.r { right: 2.5vw; }
#msummon.msm-showing .msm-feat { opacity: 0; transition: opacity 0.3s; }
#msummon .msm-feat h4 { margin: 0 0 2px; font: 800 17px 'Mali', sans-serif; text-shadow: 0 1px 2px #000, 0 0 12px currentColor; }
#msummon .msm-ft { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; animation: msmFloat 3.6s ease-in-out infinite; }
#msummon .msm-ft:nth-child(odd) { animation-delay: -1.8s; }
#msummon .msm-ft img { width: 100%; filter: drop-shadow(0 0 10px var(--gc)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6)); }
#msummon .msm-ft span { margin-top: -10px; font: 700 13px 'Mali', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#msummon .msm-ft.own span::after { content: ' ✓'; color: #8be37b; }
#msummon .msm-ft-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
#msummon .msm-ft-grid .msm-ft img { width: 120%; margin: 0 -10%; }
#msummon .msm-ft-grid .msm-ft span { font-size: 11px; margin-top: -14px; }
#msummon .msm-log { max-height: 62vh; overflow-y: auto; }
#msummon .msm-loglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#msummon .msm-loglist li { display: grid; grid-template-columns: 74px 10px 52px 1fr auto; align-items: center; gap: 6px; font-size: 13px; padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#msummon .msm-loglist em { color: #a89f8e; font-style: normal; font-size: 11.5px; }
#msummon .msm-loglist i { width: 10px; height: 10px; border-radius: 50%; }
#msummon .msm-loglist small { font-weight: 800; color: #ffd36b; }
#msummon .msm-pop { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(6, 4, 14, 0.72); }
#msummon .msm-pop .msm-card { animation: msmDeal 0.25s ease-out both; }
#msummon .msm-pop .msm-after { flex: none; margin: 0; }
#msummon .msm-sum { flex: 1 1 100%; text-align: center; font-size: 15px; color: #f2ead6; text-shadow: 0 1px 2px #000; margin-top: 4px; }
#msummon .msm-sum b { color: #ffe39a; }
#msummon .msm-results.ten .msm-card.open { cursor: pointer; }
#msummon .msm-results.ten .msm-card.open:hover { transform: translateY(-4px); }
@keyframes msmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 1000px) { #msummon .msm-feat { display: none; } }
/* (the big card: your character riding the mount, js/mountview.js) */
#msummon .msm-card.big .msm-pic { min-height: 0; }
#msummon .msm-ride { width: 100%; height: 100%; min-height: 150px; display: block; }
/* (a summon video for the best tier, when there is one: assets/video/summon, docs/SUMMON_VIDEO.md) */
#msummon .msm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 6; background: #000; }
/* (the orbs: every ฮีโร่ / ตำนาน / เทพ pull waits as the same violet orb; a tap plays its scene - js/summonfx.js) */
#msummon .msm-orb { cursor: pointer; display: grid; place-items: center; }
#msummon .msm-orbin { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 16px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gc) 55%, transparent), rgba(20, 10, 40, 0.75) 62%); border: 2px solid color-mix(in srgb, var(--gc) 80%, #fff 20%);
  box-shadow: 0 0 18px var(--gc), inset 0 0 22px rgba(0, 0, 0, 0.5); animation: msmOrbPulse 1.6s ease-in-out infinite; }
#msummon .msm-orbin img { width: 62%; filter: drop-shadow(0 0 14px var(--gc)) drop-shadow(0 0 4px #fff); animation: msmOrbBob 2.2s ease-in-out infinite; }
#msummon .msm-orbin span { font: 800 clamp(12px, 1.3vw, 16px) 'Mali', sans-serif; color: #fff; text-shadow: 0 0 8px var(--gc), 0 1px 2px #000; }
#msummon .msm-orb:hover .msm-orbin { filter: brightness(1.2); transform: scale(1.04); }
#msummon .msm-orbbar { flex: 1 1 100%; display: flex; justify-content: center; align-items: center; gap: 12px; font: 800 17px 'Mali', sans-serif; color: #e6d4ff; text-shadow: 0 0 10px #c27bff, 0 1px 2px #000; }
#msummon.msm-cutting .msm-results, #msummon.msm-cutting .msm-top, #msummon.msm-cutting .msm-side { visibility: hidden; }
@keyframes msmOrbPulse { 0%, 100% { box-shadow: 0 0 12px var(--gc), inset 0 0 22px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 30px var(--gc), 0 0 50px color-mix(in srgb, var(--gc) 50%, transparent), inset 0 0 22px rgba(0, 0, 0, 0.5); } }
@keyframes msmOrbBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

/* the Space key shown on the buttons that it presses (2026-10-13); the cubit count shaking when there are not enough */
#msummon kbd { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; font: 800 11px/17px 'Mali', sans-serif; color: #2a1d10; background: linear-gradient(#fff6dc, #e8cf98); border: 1px solid #8a6a36; box-shadow: 0 1px 0 #5a4220; vertical-align: middle; }
#msummon .msm-have.nope { animation: msmNope 0.4s ease; border-color: #ff6a6a; }
@keyframes msmNope { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* auto summon (2026-10-13): its button, the settings panel, the bar counting the run */
:is(#msummon, #fusionfx) .msm-btn.auto { min-width: 190px; background: linear-gradient(180deg, #e9ddff, #9d7ae0 55%, #5b3aa0); color: #fff; border-color: #efe4ff; text-shadow: 0 1px 2px rgba(30, 0, 60, 0.8); }
#msummon .msm-autopan { position: absolute; left: 50%; bottom: calc(5vh + 84px); transform: translateX(-50%); z-index: 8; width: min(560px, 94vw); padding: 16px 18px; border-radius: 18px; background: rgba(16, 10, 30, 0.94); border: 1px solid rgba(220, 200, 255, 0.55); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(160, 120, 255, 0.25); color: #f2ead6; font: 700 15px 'Mali', sans-serif; }
#msummon .msm-autopan h3 { margin: 0 0 10px; text-align: center; font-size: 20px; color: #e6d4ff; }
#msummon .msm-autopan p { margin: 8px 0; font-size: 13px; color: #cfc4e6; text-align: center; }
#msummon .msm-arow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }
#msummon .msm-arow > span { min-width: 92px; color: #e6d4ff; }
#msummon .msm-chip { padding: 7px 14px; border-radius: 999px; cursor: pointer; font: 800 15px 'Mali', sans-serif; color: var(--gc, #f2ead6); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); }
#msummon .msm-chip.on { background: rgba(255, 255, 255, 0.16); border-color: var(--gc, #ffe7a6); box-shadow: 0 0 0 1px var(--gc, #ffe7a6), 0 0 14px rgba(255, 220, 150, 0.35); color: #fff; }
#msummon .msm-chip.on:not([style]) { color: #ffe7a6; }
#msummon .msm-autobar { position: relative; z-index: 8; pointer-events: auto; margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; max-width: 94vw; padding: 8px 16px; border-radius: 14px; background: rgba(16, 10, 30, 0.9); border: 1px solid rgba(220, 200, 255, 0.55); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); color: #f2ead6; font: 700 15px 'Mali', sans-serif; }
#msummon .msm-autobar.end { border-color: rgba(255, 220, 150, 0.7); }
#msummon .msm-spin { display: inline-block; font-style: normal; animation: msmSpin 1s linear infinite; }
@keyframes msmSpin { to { transform: rotate(360deg); } }
#msummon.msm-cutting .msm-autobar, #msummon.msm-cutting .msm-autopan { visibility: hidden; }

/* the details popup's card, large (2026-10-13, the user: "หมายถึงการ์ดนี้ให้ใหญ่ขึ้น", then "ลดลงอีก ใหญ่ไปนิด"): about
   470 px wide on a tall window (3 : 4, the buttons under it always fit), its words grown with it; its frame is the sharp
   3 : 4 one (frame34_g*) */
#msummon .msm-pop .msm-card.big { width: min(clamp(340px, 30vw, 470px), calc((100vh - 220px) * 0.75)); }
#msummon .msm-pop .msm-card.big .msm-front b { font-size: clamp(22px, 2.8vh, 34px); }
#msummon .msm-pop .msm-card.big .msm-front small { font-size: clamp(14px, 1.8vh, 19px); color: color-mix(in srgb, var(--gc) 58%, #ffffff); text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008; }
#msummon .msm-pop .msm-card.big .msm-front p { font-size: clamp(12px, 1.5vh, 16px); line-height: 1.42; }
#msummon .msm-pop .msm-card.big .msm-new, #msummon .msm-pop .msm-card.big .msm-dup { font-size: clamp(12px, 1.4vh, 15px); }
#msummon .msm-pop .msm-after .msm-btn { min-height: clamp(62px, 7vh, 80px); min-width: clamp(200px, 15vw, 240px); }


/* the big card's details (2026-10-13, the user: "เก็บรายละเอียดของกรอบและภาพในกรอบ"): the frame (frame34) laid over the
   picture so its edges tuck under the metal; a light sweeping along the metal only (masked by the frame, --frm set inline);
   the four corner diamonds glinting (the fx flash star); the backdrop sharper but kept down, with a vignette and a dark fade
   under the words; a line in the tier's colour above the name */
#msummon .msm-card.big .msm-front::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--frm) center / 100% 100% no-repeat; }
#msummon .msm-card.big .msm-front::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.75) 48%, rgba(255, 255, 255, 0) 58%) 120% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--frm) center / 100% 100% no-repeat; mask: var(--frm) center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: 0.55; animation: msmFrameSheen 4.8s ease-in-out infinite; }
#msummon .msm-card.big.g4 .msm-front::before, #msummon .msm-card.big.g5 .msm-front::before { opacity: 0.85; animation-duration: 3.6s; }
@keyframes msmFrameSheen { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -20% 0; } }
#msummon .msm-card.big .msm-gems { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: url(../assets/fx/flash_star.png) 7.4% 5.5% / 3.4% auto no-repeat, url(../assets/fx/flash_star.png) 92.6% 5.5% / 3.4% auto no-repeat,
    url(../assets/fx/flash_star.png) 7.4% 94.5% / 3.4% auto no-repeat, url(../assets/fx/flash_star.png) 92.6% 94.5% / 3.4% auto no-repeat;
  mix-blend-mode: screen; animation: msmGems 2.8s ease-in-out infinite; }
@keyframes msmGems { 0%, 100% { opacity: 0.1; } 45% { opacity: 0.7; } 55% { opacity: 0.4; } }   /* (small and soft: the user, "เปลี่ยนเพชรให้เล็กลง") */
#msummon .msm-card.big .msm-front .msm-new, #msummon .msm-card.big .msm-front .msm-dup { z-index: 5; top: 7.2%; right: 11%; }
#msummon .msm-card.big .msm-plate { inset: 5% 5.5%; border-radius: 4%; filter: blur(0.6px) brightness(0.62) saturate(0.9); }
#msummon .msm-card.big .msm-plate::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 60% at 50% 42%, rgba(0, 0, 0, 0) 55%, rgba(6, 4, 14, 0.55) 100%), linear-gradient(0deg, rgba(8, 5, 18, 0.88) 0%, rgba(8, 5, 18, 0.6) 22%, rgba(8, 5, 18, 0) 42%); }
#msummon .msm-card.big .msm-front b { position: relative; padding-top: 0.35em; }
#msummon .msm-card.big .msm-front b::before { content: ''; position: absolute; top: 0; left: -18%; right: -18%; height: 2px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--gc) 30%, #fff8e0 50%, var(--gc) 70%, rgba(0, 0, 0, 0)); box-shadow: 0 0 8px var(--gc); }
/* (the words inside the frame's opening: its side bars are 9.4 % of the width, its top / bottom bars 7.2 % of the height = 9.6 % of the width) */
#msummon .msm-card.big .msm-front { padding: 9.5% 11% 11.5%; }
#msummon .msm-card.big .msm-pic { min-height: 46%; }   /* (a long skill text never squeezes the picture small) */

/* lightning crackling round the big card (2026-10-13, the user: "อยากให้การ์ดนี้มีเอฟเฟคสายฟ้ายิบยับๆ"): the fx jolts
   (Codex art, assets/fx/jolt_0/1.png) used as masks lit white into the tier's colour, flickering at ten spots round the
   frame each on its own clock (a double flash, then dark), the frame's edge flashing now and then; fewer for the low
   tiers, all ten and faster for ตำนาน / เทพ */
#msummon .msm-card.big .msm-zaps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#msummon .msm-card.big .msm-zaps::before { content: ''; position: absolute; inset: 1.5%; border-radius: 5%; box-shadow: 0 0 16px 2px var(--gc), inset 0 0 12px 1px var(--gc); opacity: 0; animation: msmZapGlow 2.1s steps(1) infinite; }
#msummon .msm-card.big .msm-zaps i { position: absolute; width: 20%; aspect-ratio: 1; opacity: 0; background: linear-gradient(160deg, #ffffff 45%, var(--gc) 100%);
  -webkit-mask: url(../assets/fx/jolt_0.png) center / contain no-repeat; mask: url(../assets/fx/jolt_0.png) center / contain no-repeat;
  filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 4px var(--gc)) drop-shadow(0 0 11px var(--gc)); animation: msmZap var(--d, 1.9s) steps(1) var(--w, 0s) infinite; }
#msummon .msm-card.big .msm-zaps i:nth-child(even) { -webkit-mask-image: url(../assets/fx/jolt_1.png); mask-image: url(../assets/fx/jolt_1.png); }
#msummon .msm-card.big .msm-zaps i:nth-child(1) { left: -5%; top: 12%; rotate: -30deg; --d: 1.7s; --w: 0s; }
#msummon .msm-card.big .msm-zaps i:nth-child(2) { left: 30%; top: -6%; rotate: 80deg; --d: 2.3s; --w: 0.4s; }
#msummon .msm-card.big .msm-zaps i:nth-child(3) { right: -5%; top: 22%; rotate: 20deg; --d: 1.9s; --w: 0.9s; }
#msummon .msm-card.big .msm-zaps i:nth-child(4) { right: -4%; top: 58%; rotate: 160deg; --d: 2.6s; --w: 0.2s; }
#msummon .msm-card.big .msm-zaps i:nth-child(5) { left: -5%; top: 48%; rotate: 200deg; --d: 2.1s; --w: 1.3s; }
#msummon .msm-card.big .msm-zaps i:nth-child(6) { left: 60%; bottom: -6%; rotate: -100deg; --d: 1.6s; --w: 0.7s; }
#msummon .msm-card.big .msm-zaps i:nth-child(7) { left: 12%; bottom: -5%; rotate: 120deg; --d: 2.4s; --w: 1.6s; }
#msummon .msm-card.big .msm-zaps i:nth-child(8) { right: 16%; top: -5%; rotate: 60deg; --d: 1.8s; --w: 1.1s; }
#msummon .msm-card.big .msm-zaps i:nth-child(9) { left: -4%; top: 78%; rotate: -150deg; --d: 2.2s; --w: 0.5s; }
#msummon .msm-card.big .msm-zaps i:nth-child(10) { right: -5%; top: 84%; rotate: 30deg; --d: 1.5s; --w: 1.9s; }
/* (two long arcs down the sides: the tome hit's lightning, Codex art) */
#msummon .msm-card.big .msm-zaps i:nth-child(n+11) { width: 13%; height: 58%; aspect-ratio: auto; top: 20%; -webkit-mask-image: url(../assets/fx/tome_hit_thunder.png); mask-image: url(../assets/fx/tome_hit_thunder.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
#msummon .msm-card.big .msm-zaps i:nth-child(11) { left: -6%; rotate: 6deg; --d: 2.9s; --w: 0.6s; }
#msummon .msm-card.big .msm-zaps i:nth-child(12) { right: -6%; left: auto; rotate: -6deg; scale: -1 1; --d: 3.3s; --w: 1.8s; }
#msummon .msm-card.big:is(.g0, .g1, .g2) .msm-zaps i:nth-child(n+6), #msummon .msm-card.big.g3 .msm-zaps i:nth-child(n+9):not(:nth-child(11)) { display: none; }
#msummon .msm-card.big:is(.g4, .g5) .msm-zaps i:not(:nth-child(n+11)) { width: 22%; }
#msummon .msm-card.big:is(.g4, .g5) .msm-zaps i { animation-duration: calc(var(--d, 1.9s) * 0.7); }
#msummon .msm-card.big:is(.g4, .g5) .msm-zaps::before { animation-duration: 1.4s; }
@keyframes msmZap { 0% { opacity: 1; } 3% { opacity: 0.2; } 6% { opacity: 1; } 9% { opacity: 0.45; } 12% { opacity: 1; } 17% { opacity: 0; } 100% { opacity: 0; } }
@keyframes msmZapGlow { 0% { opacity: 0.85; } 4% { opacity: 0.2; } 7% { opacity: 0.7; } 11% { opacity: 0; } 100% { opacity: 0; } }
/* ตำนาน (gold): no bolts, only the frame's edge flashing (the user: "เอาสายฟ้าออกจากสีทอง ให้เหลือแต่ขอบกระพริบ") */
#msummon .msm-card.big.g4 .msm-zaps i { display: none; }
/* เทพ (red): real-looking lightning drawn on a canvas round the card instead of the jolt pictures (js/summonfx.js drawBolts;
   the user: "แก้ไขสายฟ้าของสีแดง ให้สมจริง"); the edge still flashes */
#msummon .msm-card.big.g5 .msm-zaps i { display: none; }
#msummon .msm-card.big .msm-bolts { position: absolute; left: -7%; top: -7%; width: 114%; height: 114%; z-index: 4; pointer-events: none; }

/* fusion (2026-10-13, the user: "เพิ่มระบบหลอมรวมพาหนะ ที่มีซ้ำ เอามาหลอมเพื่อลุ้นตัวใหม่"): its button, its panel (the gauge view's
   rules below), the "up a tier" ribbon on a card */
:is(#msummon, #fusionfx) .msm-btn.fuse { min-width: 190px; background: linear-gradient(180deg, #d8fff1, #4fc7a0 55%, #1d7d63); color: #fff; border-color: #e2fff4; text-shadow: 0 1px 2px rgba(0, 40, 30, 0.8); }
#msummon .msm-fusepan { position: absolute; left: 50%; bottom: calc(5vh + 84px); transform: translateX(-50%); z-index: 8; width: min(980px, 96vw); max-height: calc(100vh - 5vh - 84px - 130px); overflow: auto; padding: 16px 18px; border-radius: 18px; background: rgba(12, 18, 24, 0.95); border: 1px solid rgba(160, 255, 220, 0.55); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(80, 220, 170, 0.22); color: #f2ead6; font: 700 15px 'Mali', sans-serif; }
#msummon .msm-fusepan h3 { margin: 0 0 6px; text-align: center; font-size: 22px; color: #c8ffe9; }
#msummon .msm-fusepan > p { margin: 0 0 10px; font-size: 13px; color: #cfe6dc; text-align: center; }
#msummon .msm-mini.hot:not(:disabled) { background: linear-gradient(180deg, #5fe0b4, #1f8c6c); color: #fff; border-color: #c8ffe9; }
#msummon .msm-mini.dim { font-size: 12px; opacity: 0.8; }
#msummon .msm-mini:disabled { opacity: 0.4; cursor: default; }
#msummon .msm-fgold { margin-right: auto; color: #ffe39a; }
#msummon .msm-front .msm-upb { position: absolute; top: 5%; left: 5%; z-index: 5; padding: 1px 8px; border-radius: 999px; font: 800 11px 'Mali', sans-serif; font-style: normal; color: #06261c; background: linear-gradient(180deg, #d8fff1, #5fe0b4); box-shadow: 0 0 10px rgba(95, 224, 180, 0.9); }
#msummon .msm-card.big .msm-front .msm-upb { top: 7.2%; left: 11%; }
#msummon.msm-cutting .msm-fusepan { visibility: hidden; }

/* the fusion view: Lordnine's synthesis layout in the summon hall's own look (2026-10-13, the user: "ปรับแก้หน้าหลอมรวมใหม่
   ให้เหมือนกับ Lordnine ที่สุด", then "ใส่รายละเอียดและปรับให้เข้ากับสไตล์การสุ่ม"): the hall's night sky and clouds, glassy
   violet panels with a soft gold edge (as the odds / history panels), the metal tier frames on every card, the hall's
   glossy buttons, the golden sphere round the winged orb */
:is(#msummon, #fusionfx).msm-fzmode .msm-top, :is(#msummon, #fusionfx).msm-fzmode .msm-side, :is(#msummon, #fusionfx).msm-fzmode .msm-bottom, :is(#msummon, #fusionfx).msm-fzmode .msm-feat { display: none; }
:is(#msummon, #fusionfx) .msm-fzv { position: absolute; inset: 0; z-index: 7; pointer-events: none; font: 700 14px 'Mali', sans-serif; color: #f2ead6; }
:is(#msummon, #fusionfx) .msm-fzv > * { pointer-events: auto; }
:is(#msummon, #fusionfx) .msm-fzv button { font-family: 'Mali', sans-serif; cursor: pointer; }
:is(#msummon, #fusionfx) .msm-fzv button:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.6); }
:is(#msummon, #fusionfx) .fz-top { position: absolute; left: 0; right: 0; top: 0; padding: 12px 2vw 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
:is(#msummon, #fusionfx) .fz-tabs { width: 100%; display: flex; align-items: center; gap: 8px; }
:is(#msummon, #fusionfx) .fz-tabs h2 { flex: 1; margin: 0; text-align: center; font: 800 clamp(24px, 4vh, 42px)/1.1 'Mali', sans-serif; color: #ffe7a6; text-shadow: 0 3px 0 #3a2208, 0 0 22px rgba(255, 200, 90, 0.7); letter-spacing: 0.04em; }
:is(#msummon, #fusionfx) .fz-tabs .msm-mini.on { background: linear-gradient(180deg, #d8fff1, #4fc7a0 55%, #1d7d63); color: #fff; border-color: #e2fff4; text-shadow: 0 1px 2px rgba(0, 40, 30, 0.8); }
:is(#msummon, #fusionfx) .fz-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; align-items: center; padding: 6px 16px; border-radius: 999px; background: rgba(16, 10, 30, 0.75); border: 1px solid rgba(255, 220, 150, 0.4); }
:is(#msummon, #fusionfx) .fz-ptt { color: #ffe7a6; font-size: 13px; }
:is(#msummon, #fusionfx) .fz-pt { display: flex; align-items: center; gap: 6px; font-size: 13px; }
:is(#msummon, #fusionfx) .fz-pt span { color: var(--gc); text-shadow: 0 1px 2px #000; }
:is(#msummon, #fusionfx) .fz-pt em { display: block; width: 84px; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.3); }
:is(#msummon, #fusionfx) .fz-pt u { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 70%, #000), var(--gc), #fff8e0); box-shadow: 0 0 8px var(--gc); }
:is(#msummon, #fusionfx) .fz-pt b { color: #f2ead6; font-size: 12px; }
:is(#msummon, #fusionfx) .fz-pt button { padding: 1px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff1a8, #ffb340); border: 0; color: #3a2200; font-weight: 800; font-size: 11px; box-shadow: 0 0 10px rgba(255, 200, 80, 0.9); animation: msmPtPulse 1.2s ease-in-out infinite alternate; }
@keyframes msmPtPulse { to { transform: scale(1.08); } }
:is(#msummon, #fusionfx) .fz-left, :is(#msummon, #fusionfx) .fz-right { position: absolute; top: 21vh; padding: 14px; border-radius: 16px; background: rgba(16, 10, 30, 0.88); border: 1px solid rgba(255, 220, 150, 0.45); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04); backdrop-filter: blur(3px); }
:is(#msummon, #fusionfx) .fz-left { left: 2vw; width: min(270px, 24vw); text-align: center; }
:is(#msummon, #fusionfx) .fz-left h4, :is(#msummon, #fusionfx) .fz-right h4 { margin: 0 0 10px; color: #ffe7a6; font-size: 16px; text-align: center; text-shadow: 0 2px 0 #3a2208; }
:is(#msummon, #fusionfx) .fz-slot { position: relative; width: 132px; aspect-ratio: 3 / 4; margin: 2px auto 0; background: center / 100% 100% no-repeat; isolation: isolate; display: grid; place-items: center; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px color-mix(in srgb, var(--gc) 45%, transparent)); }
:is(#msummon, #fusionfx) .fz-plate { position: absolute; inset: 7% 8%; z-index: -1; border-radius: 6%; background: center / cover no-repeat; filter: blur(1.5px) brightness(0.55); }
:is(#msummon, #fusionfx) .fz-pool { position: absolute; inset: 20% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 55%, transparent), transparent 70%); }
:is(#msummon, #fusionfx) .fz-slot img { width: 118%; max-width: none; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px var(--gc)) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)); animation: msmFzBob 2.4s ease-in-out infinite; }
@keyframes msmFzBob { 50% { transform: translateY(-5px); } }
:is(#msummon, #fusionfx) .fz-slot > b { font-size: 44px; color: rgba(255, 231, 166, 0.7); text-shadow: 0 0 12px rgba(255, 200, 90, 0.6); }
:is(#msummon, #fusionfx) .fz-n { margin: 8px auto 0; display: inline-flex; gap: 6px; align-items: center; padding: 2px 14px; border-radius: 999px; background: rgba(20, 12, 30, 0.8); border: 1px solid rgba(255, 220, 150, 0.5); font-size: 15px; color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-n img { width: 22px; height: 22px; }
:is(#msummon, #fusionfx) .fz-hint { color: #c9bfd6; font-size: 12px; margin: 8px 0; }
:is(#msummon, #fusionfx) .fz-grade { font-size: 13px; margin: 8px 0 0; }
:is(#msummon, #fusionfx) .fz-left h5 { margin: 12px 0 6px; color: #ffe7a6; font-size: 13px; border-top: 1px solid rgba(255, 220, 150, 0.25); padding-top: 8px; }
:is(#msummon, #fusionfx) .fz-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
:is(#msummon, #fusionfx) .fz-steps li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 13px; }
:is(#msummon, #fusionfx) .fz-steps li i { width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-size: 11px; transform: rotate(45deg); border-radius: 4px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 220, 150, 0.45); }
:is(#msummon, #fusionfx) .fz-steps li i::first-letter { display: inline-block; }
:is(#msummon, #fusionfx) .fz-steps li span { flex: 1; text-align: left; }
:is(#msummon, #fusionfx) .fz-steps li b { color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-steps li.done i { background: linear-gradient(135deg, #fff, var(--gc)); border-color: #fff; color: #1a1206; box-shadow: 0 0 8px var(--gc); }
:is(#msummon, #fusionfx) .fz-steps li.cur { background: color-mix(in srgb, var(--gc) 22%, transparent); box-shadow: inset 0 0 0 1px var(--gc), 0 0 10px color-mix(in srgb, var(--gc) 40%, transparent); }
:is(#msummon, #fusionfx) .fz-run { margin: 8px 0 0; font-size: 12px; color: #c9bfd6; }
:is(#msummon, #fusionfx) .fz-run b { color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-cost { font-size: 12px; color: #ffe7a6; margin: 6px 0 0; }
:is(#msummon, #fusionfx) .fz-cost small { color: #c9bfd6; }
:is(#msummon, #fusionfx) .fz-right { right: 2vw; bottom: 14vh; width: min(400px, 32vw); display: flex; flex-direction: column; }
:is(#msummon, #fusionfx) .fz-body { flex: 1; display: flex; gap: 8px; min-height: 0; }
:is(#msummon, #fusionfx) .fz-list { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; overflow: auto; padding: 4px; }
:is(#msummon, #fusionfx) .fz-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0 6% 9%; background: center / 100% 100% no-repeat; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform 0.12s; }
:is(#msummon, #fusionfx) .fz-card:hover { transform: translateY(-2px); }
:is(#msummon, #fusionfx) .fz-card img { position: absolute; top: 20%; left: 4%; width: 92%; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px var(--gc)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
:is(#msummon, #fusionfx) .fz-card b { position: relative; font-size: 10px; line-height: 1.15; color: #fff; text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008; }
:is(#msummon, #fusionfx) .fz-card em { position: absolute; top: 9%; right: 10%; padding: 0 6px; border-radius: 999px; background: rgba(20, 14, 30, 0.85); font-size: 11px; font-style: normal; color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-card em.new { left: 10%; right: auto; background: linear-gradient(180deg, #fff1a8, #ffb340); color: #3a2200; }
:is(#msummon, #fusionfx) .fz-card .fz-tick { position: absolute; top: 9%; left: 10%; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: linear-gradient(180deg, #d8fff1, #4fc7a0); color: #06261c; box-shadow: 0 0 8px rgba(95, 224, 180, 0.9); }
:is(#msummon, #fusionfx) .fz-card.on { filter: drop-shadow(0 0 6px #5fe0b4) drop-shadow(0 0 2px #fff); }
:is(#msummon, #fusionfx) .fz-none { grid-column: 1 / -1; color: #c9bfd6; font-size: 13px; text-align: center; }
:is(#msummon, #fusionfx) .fz-tiers { width: 64px; display: flex; flex-direction: column; gap: 4px; }
:is(#msummon, #fusionfx) .fz-tiers button { padding: 6px 2px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 220, 150, 0.25); color: var(--gc); display: flex; flex-direction: column; align-items: center; font-size: 12px; text-shadow: 0 1px 2px #000; }
:is(#msummon, #fusionfx) .fz-tiers button small { color: #c9bfd6; font-size: 10px; }
:is(#msummon, #fusionfx) .fz-tiers button.on { background: color-mix(in srgb, var(--gc) 22%, rgba(16, 10, 30, 0.9)); border-color: var(--gc); box-shadow: 0 0 10px color-mix(in srgb, var(--gc) 50%, transparent); }
:is(#msummon, #fusionfx) .fz-rbtns { display: flex; gap: 6px; margin-top: 10px; }
:is(#msummon, #fusionfx) .fz-rbtns .msm-mini { flex: 1; font-size: 13px; padding: 8px 6px; }
:is(#msummon, #fusionfx) .fz-rbtns .msm-mini.dim { flex: none; font-size: 12px; opacity: 0.85; }
:is(#msummon, #fusionfx) .fz-bottom { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; }
:is(#msummon, #fusionfx) .fz-bottom .msm-btn.fz-go { min-width: 280px; }
:is(#msummon, #fusionfx) .fz-spin { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); color: #ffe7a6; font-size: 20px; letter-spacing: 0.1em; text-shadow: 0 2px 0 #3a2208, 0 0 14px rgba(255, 210, 120, 0.8); animation: msmSpinTxt 0.8s ease-in-out infinite alternate; }
@keyframes msmSpinTxt { from { opacity: 0.55; } to { opacity: 1; } }
:is(#msummon, #fusionfx) .fz-info { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 4, 14, 0.6); }
:is(#msummon, #fusionfx) .fz-info-in { width: min(640px, 92vw); padding: 18px 22px; border-radius: 16px; background: rgba(16, 10, 30, 0.95); border: 1px solid rgba(255, 220, 150, 0.5); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 1.55; }
:is(#msummon, #fusionfx) .fz-info-in h4 { margin: 0 0 8px; color: #ffe7a6; font-size: 18px; text-align: center; }
:is(#msummon, #fusionfx) .fz-info-in p { margin: 4px 0; color: #e6dcf0; }
:is(#msummon, #fusionfx) .fz-info-in table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 13px; }
:is(#msummon, #fusionfx) .fz-info-in th, :is(#msummon, #fusionfx) .fz-info-in td { padding: 4px 6px; border-bottom: 1px solid rgba(255, 220, 150, 0.2); text-align: center; }
:is(#msummon, #fusionfx) .fz-info-in th { color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-info-in .fz-btn { display: block; width: 160px; margin: 6px auto 0; padding: 8px; border-radius: 12px; background: rgba(20, 12, 30, 0.75); border: 1px solid rgba(255, 220, 150, 0.45); color: #f2ead6; }
:is(#msummon, #fusionfx) .fz-res { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 4vh; gap: 8px; }
:is(#msummon, #fusionfx) .fz-res-h { display: flex; flex-direction: column; align-items: center; gap: 4px; }
:is(#msummon, #fusionfx) .fz-res-h i { width: 42px; height: 42px; display: grid; place-items: center; font-style: normal; font-size: 20px; color: #3a2200; background: linear-gradient(180deg, #fff1a8, #ffb340); border-radius: 50%; box-shadow: 0 0 16px rgba(255, 200, 80, 0.9); }
:is(#msummon, #fusionfx) .fz-res-h b { font: 800 clamp(28px, 4.6vh, 50px)/1.1 'Mali', sans-serif; color: #ffe7a6; text-shadow: 0 3px 0 #3a2208, 0 0 22px rgba(255, 200, 90, 0.8); }
:is(#msummon, #fusionfx) .fz-res-mat { font-size: 14px; color: #e6dcf0; }
:is(#msummon, #fusionfx) .fz-res-mat span { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 12px; border-radius: 99px; background: rgba(20, 12, 30, 0.8); border: 1px solid rgba(255, 220, 150, 0.5); color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-res-mat img { width: 20px; height: 20px; }
:is(#msummon, #fusionfx) .fz-res-row { display: flex; gap: 22px; padding: 6px 26px; border-radius: 999px; background: rgba(16, 10, 30, 0.8); border: 1px solid rgba(255, 220, 150, 0.35); font-size: 14px; }
:is(#msummon, #fusionfx) .fz-res-row span { display: inline-flex; align-items: center; gap: 6px; }
:is(#msummon, #fusionfx) .fz-res-row i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #1a1206; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }
:is(#msummon, #fusionfx) .fz-res-row b { color: #fff3d0; font-size: 16px; }
:is(#msummon, #fusionfx) .fz-res-pt { font-size: 13px; color: #c9bfd6; }
:is(#msummon, #fusionfx) .fz-res-pt b { color: #ffe7a6; }
:is(#msummon, #fusionfx) .fz-res-got { margin-top: auto; margin-bottom: 2vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: min(900px, 94vw); }
:is(#msummon, #fusionfx) .fz-res-got .fz-card { width: clamp(82px, 7vw, 116px); animation: msmDeal 0.35s ease-out both; animation-delay: calc(var(--i) * 0.06s); }
:is(#msummon, #fusionfx) .fz-res-got .fz-card.up { filter: drop-shadow(0 0 8px var(--gc)) drop-shadow(0 0 2px #fff); }
:is(#msummon, #fusionfx) .fz-res-got .fz-upb { position: absolute; top: 8%; right: 9%; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: linear-gradient(180deg, #d8fff1, #5fe0b4); color: #06261c; }
:is(#msummon, #fusionfx) .fz-res-got p { color: #c9bfd6; padding: 8px 16px; border-radius: 999px; background: rgba(16, 10, 30, 0.75); }
:is(#msummon, #fusionfx) .fz-res-b { display: flex; gap: 12px; margin-bottom: 4vh; }
@media (max-width: 900px) { :is(#msummon, #fusionfx) .fz-left { top: auto; bottom: 14vh; width: 44vw; } :is(#msummon, #fusionfx) .fz-right { width: 46vw; top: 21vh; bottom: 42vh; } }

/* fusion: design 10 "the clockwork wonder machine" (2026-10-13, the user's pick: "เลือก10"): the Codex parts
   (assets/ui_book/fuse10) on a 1920 x 1080 stage scaled to the screen (js/summonfx.js fzFit), the workshop backdrop
   covering the rest; the hall's own canvas, top and sides hidden; sizes below are stage px */
:is(#msummon, #fusionfx).msm-fzmode .msm-cv { visibility: hidden; }
:is(#msummon, #fusionfx) .fz10-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
:is(#msummon, #fusionfx) .fz10-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
:is(#msummon, #fusionfx) .fz10-stage > * { position: absolute; }
:is(#msummon, #fusionfx) .fz10-stage img { user-select: none; -webkit-user-drag: none; }
:is(#msummon, #fusionfx) .fz10-stage button { padding: 0; border: 0; background: none; cursor: pointer; font-family: 'Mali', sans-serif; }
:is(#msummon, #fusionfx) .fz10-stage button img { width: 100%; height: 100%; display: block; }
:is(#msummon, #fusionfx) .fz10-stage button:not(.off):hover > img { filter: brightness(1.12); }
:is(#msummon, #fusionfx) .fz-gear_top { animation: fz10Spin 16s linear infinite; }
:is(#msummon, #fusionfx) .fz-cog_a { animation: fz10Spin 7s linear infinite; }
:is(#msummon, #fusionfx) .fz-cog_b { animation: fz10Spin 8s linear infinite reverse; }
:is(#msummon, #fusionfx) .fz10-stage.busy .fz-gear_top { animation-duration: 1.6s; }
:is(#msummon, #fusionfx) .fz10-stage.busy .fz-cog_a { animation-duration: 0.8s; }
:is(#msummon, #fusionfx) .fz10-stage.busy .fz-cog_b { animation-duration: 0.9s; }
:is(#msummon, #fusionfx) .fz10-stage.run .fz-gear_top { animation-duration: 0.7s; }
@keyframes fz10Spin { to { transform: rotate(360deg); } }
:is(#msummon, #fusionfx) .fz-arrow { animation: fz10Arrow 1.2s ease-in-out infinite; }
@keyframes fz10Arrow { 50% { transform: translateX(12px); filter: brightness(1.45) drop-shadow(0 0 10px #ffe080); } }
:is(#msummon, #fusionfx) .fz-needle { transform-origin: 50% 100%; transition: transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
:is(#msummon, #fusionfx) .fz-bulb { transition: filter 0.2s; }
:is(#msummon, #fusionfx) .fz-bulb.on { filter: drop-shadow(0 0 16px rgba(255, 214, 110, 0.95)); }
:is(#msummon, #fusionfx) .fz-bulb.pop { animation: fz10Pop 0.55s ease-out; }
:is(#msummon, #fusionfx) .fz-bulb.flick { animation: fz10Flick 0.42s ease-in 1 both; }
@keyframes fz10Pop { 0% { transform: scale(1.5); filter: brightness(2.2) drop-shadow(0 0 30px #ffd76a); } 100% { transform: scale(1); } }
@keyframes fz10Flick { 0% { filter: brightness(1.5) drop-shadow(0 0 14px #ff6a7a); } 100% { filter: brightness(0.45); } }
:is(#msummon, #fusionfx) .fz-tieron { pointer-events: none; transition: left 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); animation: fz10Glow 1.4s ease-in-out infinite alternate; }
@keyframes fz10Glow { to { filter: brightness(1.35) drop-shadow(0 0 10px #fff2b0); } }
:is(#msummon, #fusionfx) .fz10-tier.dim > img { filter: grayscale(0.6) brightness(0.8); }
:is(#msummon, #fusionfx) .fz10-tier em { position: absolute; right: -4px; bottom: -4px; min-width: 30px; padding: 0 7px; border-radius: 999px; font: 800 18px/28px 'Mali', sans-serif; font-style: normal; color: #fff8e6; background: #3a2412; border: 2px solid #d9a85a; text-align: center; }
:is(#msummon, #fusionfx) .fz10-tlab, :is(#msummon, #fusionfx) .fz10-glab, :is(#msummon, #fusionfx) .fz10-plab, :is(#msummon, #fusionfx) .fz10-lvlab { display: flex; align-items: center; justify-content: center; font: 800 20px 'Mali', sans-serif; color: #fff4d6; text-shadow: 2px 0 0 #3a2412, -2px 0 0 #3a2412, 0 2px 0 #3a2412, 0 -2px 0 #3a2412; pointer-events: none; white-space: nowrap; }
:is(#msummon, #fusionfx) .fz10-tlab b, :is(#msummon, #fusionfx) .fz10-bhead b { margin: 0 6px; }
:is(#msummon, #fusionfx) .fz10-title { display: none; }
:is(#msummon, #fusionfx) .fz10-gnum, :is(#msummon, #fusionfx) .fz10-plate { display: flex; align-items: center; justify-content: center; font: 800 40px 'Mali', sans-serif; color: #fff7e0; text-shadow: 2px 0 0 #2a1608, -2px 0 0 #2a1608, 0 2px 0 #2a1608, 0 -2px 0 #2a1608, 0 0 14px rgba(255, 210, 120, 0.7); pointer-events: none; }
:is(#msummon, #fusionfx) .fz10-pts { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 800 17px 'Mali', sans-serif; color: #fff4d6; text-shadow: 1px 0 0 #3a2412, -1px 0 0 #3a2412, 0 1px 0 #3a2412, 0 -1px 0 #3a2412; }
:is(#msummon, #fusionfx) .fz10-pts i { display: block; width: 230px; height: 14px; border-radius: 99px; background: #2a1a0c; border: 2px solid #c9974e; overflow: hidden; }
:is(#msummon, #fusionfx) .fz10-pts u { display: block; height: 100%; background: linear-gradient(90deg, #ff7ab8, #ffd0e6); box-shadow: 0 0 10px #ff9ccb; }
:is(#msummon, #fusionfx) .fz10-pts button { position: absolute; right: -170px; top: 8px; padding: 6px 14px !important; border-radius: 999px !important; font: 800 17px 'Mali', sans-serif; color: #3a2200; background: linear-gradient(180deg, #fff1a8, #ffb340) !important; box-shadow: 0 0 14px rgba(255, 200, 80, 0.9); animation: msmPtPulse 1.2s ease-in-out infinite alternate; }
:is(#msummon, #fusionfx) .fz10-go .l, :is(#msummon, #fusionfx) .fz10-go .r { position: absolute; top: 50%; transform: translateY(-50%); font: 800 34px 'Mali', sans-serif; color: #fff; text-shadow: 2px 0 0 #0c4a46, -2px 0 0 #0c4a46, 0 2px 0 #0c4a46, 0 -2px 0 #0c4a46; pointer-events: none; }
:is(#msummon, #fusionfx) .fz10-go .l { left: 92px; }
:is(#msummon, #fusionfx) .fz10-go .r { right: 70px; font-size: 24px; color: #fff3c4; }
:is(#msummon, #fusionfx) .fz10-go.off { cursor: default; }
:is(#msummon, #fusionfx) .fz10-go.off > img, :is(#msummon, #fusionfx) .fz10-lever.off > img { filter: grayscale(0.75) brightness(0.75); }
:is(#msummon, #fusionfx) .fz10-go:not(.off) { animation: fz10Beat 1.6s ease-in-out infinite; }
@keyframes fz10Beat { 50% { transform: scale(1.025); filter: drop-shadow(0 0 14px rgba(120, 255, 230, 0.7)); } }
:is(#msummon, #fusionfx) .fz10-lever.off { cursor: default; }
:is(#msummon, #fusionfx) .fz10-card { display: grid; place-items: stretch; }
:is(#msummon, #fusionfx) .fz10-empty { display: grid; place-items: center; text-align: center; font: 800 20px 'Mali', sans-serif; color: #f2e2c0; text-shadow: 0 2px 2px #000; border-radius: 14px; background: rgba(20, 12, 8, 0.4); }
:is(#msummon, #fusionfx) .fz10-mc { position: relative; width: 100%; aspect-ratio: 3 / 4; background: center / 100% 100% no-repeat; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 8% 11%; box-sizing: border-box; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
:is(#msummon, #fusionfx) .fz10-mc.big { height: 100%; padding: 0 10% 12%; }
:is(#msummon, #fusionfx) .fz10-plate-bg { position: absolute; inset: 6% 7%; z-index: -1; border-radius: 6%; background: center / cover no-repeat; filter: blur(1px) brightness(0.78); }
:is(#msummon, #fusionfx) .fz10-mc img { position: absolute; top: 16%; left: -4%; width: 108%; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px var(--gc)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
:is(#msummon, #fusionfx) .fz10-mc.big img { animation: msmFzBob 2.4s ease-in-out infinite; }
:is(#msummon, #fusionfx) .fz10-mc b { position: relative; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font: 800 14px/1.15 'Mali', sans-serif; color: #fff; text-align: center; text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008; }
:is(#msummon, #fusionfx) .fz10-mc.big b { font-size: 20px; }
:is(#msummon, #fusionfx) .fz10-mc em { position: absolute; right: 7%; top: 5%; z-index: 2; padding: 0 8px; border-radius: 999px; font: 800 15px/22px 'Mali', sans-serif; font-style: normal; color: #fff; background: rgba(20, 12, 8, 0.85); border: 1px solid #c9974e; }
:is(#msummon, #fusionfx) .fz10-mc.big em { font-size: 19px; line-height: 26px; }
:is(#msummon, #fusionfx) .fz10-mc.on { filter: drop-shadow(0 0 8px #7fffe0) drop-shadow(0 0 2px #fff); }
:is(#msummon, #fusionfx) .fz10-bhead { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 19px 'Mali', sans-serif; color: #fff4d6; text-shadow: 1px 0 0 #3a2412, -1px 0 0 #3a2412, 0 1px 0 #3a2412, 0 -1px 0 #3a2412; }
:is(#msummon, #fusionfx) .fz10-bhead button { padding: 3px 10px !important; border-radius: 999px !important; font: 700 13px 'Mali', sans-serif; color: #f2ead6; background: rgba(20, 12, 8, 0.8) !important; border: 1px solid #c9974e !important; }
:is(#msummon, #fusionfx) .fz10-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; overflow-y: auto; overflow-x: hidden; padding: 4px; scrollbar-width: thin; }
:is(#msummon, #fusionfx) .fz10-list > button { display: block; width: 100%; transition: transform 0.12s; }
:is(#msummon, #fusionfx) .fz10-list > button:hover { transform: translateY(-3px); }
:is(#msummon, #fusionfx) .fz10-none { grid-column: 1 / -1; margin-top: 60px; text-align: center; font: 800 20px 'Mali', sans-serif; color: #e8d6b4; }
:is(#msummon, #fusionfx) .fz10-fly { pointer-events: none; animation: fz10Fly 0.55s cubic-bezier(0.5, 0, 0.75, 0.4) both; }
@keyframes fz10Fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 55% { transform: translate(300px, 30px) scale(0.6) rotate(8deg); opacity: 1; } 100% { transform: translate(590px, 60px) scale(0.12) rotate(30deg); opacity: 0; } }
:is(#msummon, #fusionfx) .fz10-steam { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
:is(#msummon, #fusionfx) .fz10-steam img { position: absolute; width: 180px; opacity: 0; filter: grayscale(0.6) brightness(1.2); }
:is(#msummon, #fusionfx) .fz10-steam.go img { animation: fz10Steam 1.1s ease-out both; }
@keyframes fz10Steam { 0% { opacity: 0; transform: translateY(20px) scale(0.5); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-110px) scale(1.4); } }
:is(#msummon, #fusionfx) .fz10-msg { left: 610px; top: 170px; width: 700px; padding: 10px 24px; border-radius: 26px; background: rgba(34, 18, 8, 0.72); box-shadow: 0 0 0 2px rgba(217, 168, 90, 0.7); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; opacity: 0; font: 800 44px 'Mali', sans-serif; color: #ffe7a6; text-shadow: 0 4px 0 #3a2208, 0 0 22px rgba(255, 200, 90, 0.85); }
:is(#msummon, #fusionfx) .fz10-msg small { font-size: 26px; color: #fff4d6; text-shadow: 2px 0 0 #3a2412, -2px 0 0 #3a2412, 0 2px 0 #3a2412, 0 -2px 0 #3a2412; }
:is(#msummon, #fusionfx) .fz10-msg b.no { color: #ff8a98; }
:is(#msummon, #fusionfx) .fz10-msg.go { animation: fz10Msg 1.6s ease-out both; }
@keyframes fz10Msg { 0% { opacity: 0; transform: translateY(30px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.06); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
:is(#msummon, #fusionfx) .fz10-flash { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 38%, var(--fc, #fff), transparent 60%); mix-blend-mode: screen; }
:is(#msummon, #fusionfx) .fz10-flash.go { animation: fz10Flash 0.7s ease-out both; }
@keyframes fz10Flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
:is(#msummon, #fusionfx) .fz10-over { position: absolute; inset: 0; pointer-events: none; }
:is(#msummon, #fusionfx) .fz10-over > * { pointer-events: auto; }
:is(#msummon, #fusionfx) .fz10-ask p { font-size: 15px; }
:is(#msummon, #fusionfx) .fz10-askb { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
:is(#msummon, #fusionfx) .fz10-over .fz-res { background: radial-gradient(ellipse at 50% 40%, rgba(16, 10, 30, 0.55), rgba(10, 6, 20, 0.82)); }   /* (a run's result: the machine dimmed behind it) */
/* a try's heartbeats v2 (2026-10-13, "การเต้นเป็นจังหวะหัวใจมันกระพริบแปลกๆ" + "เพิ่มจังหวะให้ตื่นเต้นมากกว่านี้"): drawn every frame
   by fzBeat (js/summonfx.js) on one smooth lub-dub envelope - the machine group leans in, the bulb being tried throbs (its glow
   on top); no dark edges (a dark box over the screen). A miss: the bulb rises once and dies, then the lights go out (eased, no strobe) */
:is(#msummon, #fusionfx) .fz10-mach { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; transform-origin: 960px 470px; will-change: transform; }   /* (its own layer, kept as painted while it leans in: no repaint each frame, no black flashes) */
:is(#msummon, #fusionfx) .fz10-mach > * { position: absolute; }
:is(#msummon, #fusionfx) .fz10-stage.run .fz10-mach { animation: fz10Rumble 0.12s linear infinite; }
@keyframes fz10Rumble { 25% { translate: 1px -1px; } 75% { translate: -1px 1px; } }
:is(#msummon, #fusionfx) .fz10-bglow { top: 634px; width: 200px; height: 200px; opacity: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 200, 0.95) 0%, rgba(255, 212, 100, 0.55) 30%, rgba(255, 170, 60, 0) 70%); mix-blend-mode: screen; }
:is(#msummon, #fusionfx) .fz-bulb.nearmiss { animation: fz10Near 0.38s ease-in 1 both; }
@keyframes fz10Near { 0% { filter: brightness(1.7) drop-shadow(0 0 24px #ffd76a); } 45% { filter: brightness(1.25) drop-shadow(0 0 14px #ffd76a); } 100% { filter: brightness(0.55); } }
/* the board's head on one line; the break button under the cards (2026-10-13: it squeezed the head into four lines) */
:is(#msummon, #fusionfx) .fz10-bhead { white-space: nowrap; gap: 0; }
:is(#msummon, #fusionfx) .fz10-brk { display: flex; align-items: center; justify-content: center; }
:is(#msummon, #fusionfx) .fz10-stage .fz10-brk button { padding: 5px 16px; border-radius: 999px; white-space: nowrap; font: 700 15px 'Mali', sans-serif; color: #f2ead6; background: rgba(20, 12, 8, 0.85); border: 1px solid #c9974e; }
:is(#msummon, #fusionfx) .fz10-stage .fz10-brk button[data-sure="1"] { color: #fff; background: #a8323e; border-color: #ffb0b8; }
/* the mount book link (2026-10-13, "ทำปุ่มลิงก์ไปหาหน้าของสมุดพาหนะด้วย"): the machine's empty brass plate (Codex,
   assets/ui_book/fuse10/plate.png) over the stack of books at the bottom left; in the hall, a corner button */
:is(#msummon, #fusionfx) .fz10-stage .fz10-book { background: url(../assets/ui_book/fuse10/plate.png) center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); transition: transform 0.12s, filter 0.12s; }
:is(#msummon, #fusionfx) .fz10-stage .fz10-book span { font: 800 21px 'Mali', sans-serif; color: #fff4d6; text-shadow: 2px 0 0 #2a1608, -2px 0 0 #2a1608, 0 2px 0 #2a1608, 0 -2px 0 #2a1608; white-space: nowrap; pointer-events: none; }
:is(#msummon, #fusionfx) .fz10-stage .fz10-book:hover { transform: translateY(-2px); filter: brightness(1.12) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }

/* the board's small cards: the mount in its true shape (they sit in buttons, whose images are stretched to fill: the mounts
   came out tall) and above its name (up to two lines), not under it */
:is(#msummon, #fusionfx) .fz10-list .fz10-mc img { top: 6%; left: -8%; width: 116%; height: auto; }
:is(#msummon, #fusionfx) .fz10-mc:not(.big) b { font-size: 13px; }


/* the "ข้ามอนิเมชัน" switch in the side row (js/summonfx.js fastLabel; the setting: js/gacha.js Gacha.fast) */
#msummon .msm-mini.msm-fast { position: absolute; right: 0; top: calc(100% + 8px); white-space: nowrap; }   /* (under the row: the row stays clear of the title) */
#msummon .msm-mini.msm-fast b { padding: 0 6px; border-radius: 999px; background: #5d566a; color: #e8e2f0; }
#msummon .msm-mini.msm-fast.on b { background: #2fb866; color: #fff; }