/* ===== Meow Battle · MISSIONS (1920 x 1080 canvas scaled to fit) ===== */
#miScr { position: absolute; inset: 0; z-index: 42; opacity: 0; transition: opacity .45s ease; background: #08050a; overflow: clip; pointer-events: auto; }
#miScr.on { opacity: 1; }
#miScr[hidden] { display: none !important; }
#miScr, #miScr * { box-sizing: border-box; }
#miScr img { max-width: none; }
.mi-cvs { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: clip; color: #efe3c6; font-family: Barlow, sans-serif; }
.mi-bg { position: absolute; inset: -2px 0; background: url(mi_bg.webp) center/cover no-repeat; }
.mi-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 5, 6, .6) 0, rgba(10, 5, 6, .3) 32%, rgba(10, 5, 6, 0) 44%), linear-gradient(180deg, rgba(10, 5, 6, .5) 0, rgba(10, 5, 6, 0) 14%, rgba(10, 5, 6, 0) 86%, rgba(10, 5, 6, .45) 100%); }
.mi-st, .mi-cvs .st { flex: none; }

/* header */
.mi-title { position: absolute; left: 112px; top: 24px; width: 380px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }

/* ---------- missions column ---------- */
.mi-col { position: absolute; left: 50px; top: 124px; width: 680px; }
.mi-sec { position: relative; display: flex; align-items: center; height: 52px; margin: 0 4px 4px 0; }
.mi-sec img { width: 190px; margin-left: -6px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.mi-sec .mi-t { margin-left: auto; margin-right: 8px; font: 600 14px/1 Barlow, sans-serif; letter-spacing: .1em; color: #e6d7b6; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.mi-list { display: grid; row-gap: 6px; margin-bottom: 10px; }

.mi-row { position: relative; display: flex; align-items: center; gap: 10px; height: 88px; animation: miIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes miIn { from { opacity: 0; transform: translateX(-24px); } }
.mi-plt { position: relative; flex: 1; height: 88px; display: flex; align-items: center; border-style: solid; border-width: 0 63px 0 68px; border-image: url(row2.webp) 0 126 0 135 fill stretch; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mi-ic { position: absolute; left: -57px; top: 50%; width: 58px; height: 58px; margin-top: -30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.mi-txt { flex: 1; min-width: 0; padding: 0 12px 0 10px; }
.mi-name { display: flex; align-items: center; gap: 8px; font: 700 17px/1.1 Barlow, sans-serif; color: #3a2412; white-space: nowrap; }
.mi-note { margin-top: 3px; font: 600 12px/1 Barlow, sans-serif; font-style: italic; color: #8a6a44; }
.mi-up { font: 800 13px/1 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .06em; color: #fff; padding: 4px 7px 3px; border-radius: 999px; background: linear-gradient(180deg, #ff6a9a, #d4175a); box-shadow: inset 0 0 0 1px rgba(255, 218, 150, .7); }
.mi-prog { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mi-prog .trk { position: relative; flex: 1; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(80, 48, 16, .2); box-shadow: inset 0 1px 2px rgba(60, 30, 5, .45); }
.mi-prog u { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(180deg, #ffe39a, #e2a43a 60%, #b7761c); transform-origin: left; transform: scaleX(var(--a)); animation: miBar 1s cubic-bezier(.3, .8, .3, 1) .45s forwards; }
@keyframes miBar { to { transform: scaleX(var(--b)); } }
.mi-prog span { min-width: 52px; font: 700 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; color: #6a4a26; text-align: right; }
/* reward sits in the painted walnut slot on the right of the plate */
.mi-rw { position: absolute; right: -52px; top: 50%; width: 40px; margin-top: -21px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mi-rw .st { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.mi-rw b { font: 800 16px/1 "Barlow Condensed", sans-serif; color: #ffe2a0; text-shadow: 0 1px 2px #000; }

.mi-btn { flex: none; width: 140px; height: 46px; padding: 0 0 1px; cursor: pointer; background: none; border-style: solid; border-width: 0 26px; border-image: url(b_green.webp) 0 64 0 64 fill stretch;
  font: 700 15px/1 Cinzel, serif; letter-spacing: .12em; color: #f6ffef; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .35); white-space: nowrap; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); transition: transform .15s, filter .2s; }
.mi-btn.purple { border-image-source: url(b_purple.webp); color: #fbefff; }
.mi-btn.gold { border-image-source: url(b_gold.webp); color: #3a2006; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); font-weight: 900; }
.mi-btn:hover { transform: translateY(-2px); filter: brightness(1.15) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.mi-btn.claim { animation: miPulse 1.6s ease-in-out infinite; }
@keyframes miPulse { 50% { filter: brightness(1.18) drop-shadow(0 0 12px rgba(255, 210, 110, .9)); } }
.mi-btn:disabled { pointer-events: none; opacity: .6; animation: none; }
.mi-done { flex: none; width: 140px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px/1 Cinzel, serif; letter-spacing: .14em; color: #b9d98a; text-shadow: 0 1px 3px #000; }
.mi-done svg { width: 20px; height: 20px; }
.mi-row.claimed .mi-plt { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)) saturate(.5) brightness(.75); }
.mi-row.ready .mi-plt::after { content: ""; position: absolute; inset: 4px -58px 4px -62px; border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 2px rgba(255, 214, 120, .85), 0 0 22px rgba(255, 200, 90, .55); }

/* ---------- Genesis Road ---------- */
.mi-road { position: absolute; inset: 0; pointer-events: none; }
.mi-road > * { pointer-events: auto; }
.mi-rtitle { position: absolute; left: 1000px; top: 6px; width: 500px; pointer-events: none !important; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); }
.mi-rsub { position: absolute; left: 1250px; top: 44px; transform: translateX(-50%); height: 34px; padding: 0 18px; display: flex; align-items: center; gap: 6px; border-radius: 14px; white-space: nowrap; font: 700 13px/1 Barlow, sans-serif; letter-spacing: .16em; color: #e6d7b6; background: rgba(20, 13, 24, .82); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .45); }
.mi-rsub b { color: #ffe2a0; letter-spacing: .08em; }
.mi-path { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none !important; }
.mi-path circle { fill: rgba(70, 40, 14, .5); stroke: rgba(255, 244, 220, .55); stroke-width: 1.5; transition: fill .25s, r .25s; }
.mi-path circle.on { fill: #ffd968; stroke: #fff6d6; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255, 200, 80, .95)); }
.mi-path circle.tip { r: 7.5; animation: miTip 1.2s ease-in-out infinite; }
@keyframes miTip { 50% { fill: #fff3c0; } }
.mi-port { position: absolute; left: 862px; top: 752px; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #fff1c4, #d9a240); box-shadow: 0 0 0 3px rgba(90, 50, 12, .7), 0 0 16px rgba(255, 200, 90, .6); }
.mi-port span { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); font: 700 12px/1 Cinzel, serif; letter-spacing: .18em; color: #6a3f12; white-space: nowrap; }

.mi-node { --w: 80px; position: absolute; width: var(--w); height: var(--w); margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) * -.82); padding: 0; border: 0; background: none; cursor: default; }
.mi-node.t1 { --w: 86px; } .mi-node.t2 { --w: 92px; } .mi-node.t3 { --w: 100px; } .mi-node.t4 { --w: 172px; }
.mi-node .ch { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 6px rgba(40, 20, 0, .45)); transition: transform .2s; }
.mi-node .rays { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -170px 0 0 -165px; opacity: .55; animation: miSpin 24s linear infinite; pointer-events: none; }
@keyframes miSpin { to { transform: rotate(360deg); } }
.mi-node .at { position: absolute; z-index: 2; left: 50%; top: 100%; transform: translate(-50%, -4px); display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px 0 4px; border-radius: 12px; white-space: nowrap; font: 800 15px/1 "Barlow Condensed", sans-serif; color: #ffe9b8; background: rgba(22, 13, 24, .88); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .5); }
.mi-node .at .st { width: 18px; height: 18px; }
.mi-node.t4 .at { height: 30px; padding: 0 13px 0 6px; font-size: 19px; transform: translate(-50%, -14px); }
.mi-node.t4 .at .st { width: 22px; height: 22px; }
/* what's inside: a little badge on the chest */
.mi-node .bdg { position: absolute; z-index: 3; right: -16px; top: -8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #2a1c34, #140c1a); box-shadow: 0 0 0 2px #e8c77a, 0 3px 8px rgba(0, 0, 0, .5); overflow: hidden; }
.mi-node.t4 .bdg { right: 4px; top: 4px; width: 48px; height: 48px; }
.mi-node .bdg .rp { width: 100%; height: 100%; }
.mi-node.locked .ch { filter: drop-shadow(0 8px 6px rgba(40, 20, 0, .45)) saturate(.6) brightness(.86); }
.mi-node.ready { cursor: pointer; }
.mi-node.ready .ch { animation: miBob 1.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 214, 110, .95)) drop-shadow(0 8px 6px rgba(40, 20, 0, .4)); }
@keyframes miBob { 50% { transform: translateY(-7px) rotate(-2deg); } }
.mi-node .go { position: absolute; z-index: 4; left: 50%; top: -18px; transform: translateX(-50%); font: 900 13px/1 Cinzel, serif; letter-spacing: .12em; color: #fff; padding: 6px 10px 5px; border-radius: 8px; background: linear-gradient(180deg, #ff6a9a, #d4175a); box-shadow: inset 0 0 0 1px rgba(255, 218, 150, .8), 0 3px 8px rgba(0, 0, 0, .45); animation: miBob 1.4s ease-in-out infinite reverse; }
.mi-node.claimed .ch { opacity: .5; filter: grayscale(.7) brightness(.9); }
.mi-node.claimed .bdg { opacity: .55; }
.mi-node .ok { position: absolute; z-index: 4; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #8fc24a, #4e8a1c); box-shadow: 0 0 0 2px #f6e0a0, 0 3px 8px rgba(0, 0, 0, .5); }
.mi-node .ok svg { width: 20px; height: 20px; }
.mi-node:hover .ch { transform: scale(1.06); }

/* reward pictures */
.rp { display: block; }
.rp.em { object-fit: contain; }
.rp.av { border-radius: 50%; background-size: 150% auto; background-position: 50% 15%; box-shadow: inset 0 0 0 2px rgba(255, 230, 170, .6); }
.rp.fr { position: relative; }
.rp.fr i { position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8d7aa6, #3a2c4c); }
.rp.fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rp.back { position: relative; display: grid; place-items: center; }
.rp.back img { width: 62%; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--rc, #4f8dff), 0 0 8px var(--rc, #4f8dff); }
.rp.back.r-rara { --rc: #4f8dff; } .rp.back.r-epica { --rc: #c07aff; }
.rp.cd { object-fit: contain; }

/* bottom plate: stars of the season */
.mi-plate { position: absolute; left: 800px; top: 950px; width: 690px; height: 106px; padding: 0 30px; border-style: solid; border-width: 22px; border-image: url(p_plaque.webp) 80 fill stretch;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 8px; align-content: center; align-items: center; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.mi-plate .tot { display: flex; align-items: center; gap: 8px; }
.mi-plate .tot .st { width: 38px; height: 38px; }
.mi-plate .tot b { font: 900 30px/1 Cinzel, serif; color: #ffe7a6; text-shadow: 0 2px 3px #000; }
.mi-plate .tot span { font: 700 17px/1 "Barlow Condensed", sans-serif; color: #b9a684; margin-left: 2px; }
.mi-plate .nx { justify-self: end; display: inline-flex; align-items: center; gap: 5px; font: 600 15px/1 Barlow, sans-serif; color: #d8c8a6; }
.mi-plate .nx b { color: #ffe2a0; }
.mi-plate .nx .st { width: 20px; height: 20px; }
.mi-plate .trk { grid-column: 1 / -1; position: relative; height: 22px; border-style: solid; border-width: 0 18px; border-image: url(p_bar.webp) 0 50 0 50 fill stretch; }
.mi-plate .trk u { position: absolute; left: -10px; right: -10px; top: 6px; bottom: 6px; border-radius: 5px; background: linear-gradient(180deg, #fff0b0, #ffcf5a 50%, #d9952a); box-shadow: 0 0 8px rgba(255, 200, 80, .6); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.mi-plate.hit { animation: miHit .6s ease; }
@keyframes miHit { 30% { transform: scale(1.04); } }

.mi-tip { position: absolute; z-index: 30; transform: translateX(-50%); min-width: 240px; padding: 14px 16px 12px; border-radius: 12px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: rgba(16, 10, 20, .96); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .55), 0 8px 20px rgba(0, 0, 0, .55); }
.mi-tip.on { opacity: 1; }
.mi-tip > b { display: block; font: 700 15px/1 Cinzel, serif; letter-spacing: .1em; color: #ffe7a6; }
.mi-tip .its { display: grid; gap: 8px; margin-top: 10px; text-align: left; }
.mi-tip .its > div { display: flex; align-items: center; gap: 10px; }
.mi-tip .its .rp { width: 44px; height: 44px; flex: none; }
.mi-tip .its span { font: 600 16px/1.15 Barlow, sans-serif; color: #f3eadb; }
.mi-tip .its small { display: block; margin-top: 3px; font: 700 10px/1 Barlow, sans-serif; letter-spacing: .16em; color: #a9977a; }
.mi-tip .st2 { display: block; margin-top: 10px; font: 600 11px/1 Barlow, sans-serif; letter-spacing: .14em; color: #a9977a; }

.mi-fly { position: absolute; z-index: 50; width: 34px; height: 34px; pointer-events: none; }
.mi-fly .st { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255, 210, 100, .9)); }

/* ---------- chest reward ---------- */
.mi-modal { position: absolute; inset: 0; z-index: 60; background: rgba(6, 3, 9, .9); opacity: 0; transition: opacity .35s; }
.mi-modal.on { opacity: 1; }
.mi-modal .box { position: absolute; left: 960px; top: 470px; width: 0; height: 0; }
.mi-modal .box .rays { position: absolute; width: 900px; height: 900px; left: -450px; top: -450px; opacity: .7; animation: miSpin 30s linear infinite; }
.mi-modal .box .ch { position: absolute; width: 300px; left: -150px; top: -170px; filter: drop-shadow(0 0 30px rgba(255, 210, 110, .7)); animation: miShake .9s ease-in-out both; }
.mi-modal.t4 .box .ch { width: 360px; left: -180px; top: -200px; }
@keyframes miShake { 0% { transform: scale(.5); opacity: 0; } 25% { transform: scale(1.05); opacity: 1; } 40% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 60% { transform: rotate(-8deg) scale(1.05); } 70% { transform: rotate(8deg) scale(1.1); } 85% { transform: rotate(0) scale(1.15); } 100% { transform: scale(1.12); } }
.mi-modal .flash { position: absolute; width: 1200px; height: 1200px; left: -600px; top: -600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 248, 220, .95), rgba(255, 220, 140, .4) 25%, rgba(255, 220, 140, 0) 55%); opacity: 0; transform: scale(.2); }
.mi-modal.pop .flash { animation: miFlash .7s ease-out forwards; }
@keyframes miFlash { 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
.mi-modal.pop .box .ch { animation: miGone .45s ease-in forwards; }
@keyframes miGone { from { transform: scale(1.12); } to { transform: scale(1.5); opacity: 0; } }
.mi-modal.pop .box .rays { opacity: .35; transition: opacity .6s; }
.mi-modal .got { position: absolute; left: 0; right: 0; top: 170px; display: flex; flex-direction: column; align-items: center; opacity: 0; pointer-events: none; }
.mi-modal.pop .got { opacity: 1; pointer-events: auto; transition: opacity .3s .2s; }
.mi-modal .got .h { font: 900 40px/1 Cinzel, serif; letter-spacing: .12em; background: linear-gradient(180deg, #fff4cf 0%, #f0cf7f 45%, #b9862f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .8)); }
.mi-modal .items { display: flex; align-items: flex-end; gap: 60px; margin-top: 40px; }
.mi-modal .it { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(120px) scale(.4) rotate(-8deg); }
.mi-modal.pop .it { animation: miCard .7s cubic-bezier(.2, 1.4, .4, 1) forwards; animation-delay: calc(.25s + var(--i) * .16s); }
@keyframes miCard { to { opacity: 1; transform: none; } }
.mi-modal .it .rp { width: 260px; height: 260px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.mi-modal .it.card .rp { width: 250px; height: auto; }
.mi-modal .it.avatar .rp { box-shadow: 0 0 0 6px #e8c77a, 0 0 0 9px #5a3510, 0 18px 30px rgba(0, 0, 0, .6); filter: none; width: 230px; height: 230px; }
.mi-modal .it b { margin-top: 22px; font: 700 24px/1 Cinzel, serif; color: #ffe7a6; }
.mi-modal .it small { margin-top: 8px; font: 700 12px/1 Barlow, sans-serif; letter-spacing: .2em; color: #b5a6c6; }
.mi-modal .pill { margin-top: 30px; font: 700 13px/1 Barlow, sans-serif; letter-spacing: .2em; color: #d9d3e4; }
.mi-modal .mi-btn.big { margin-top: 24px; width: 280px; height: 70px; border-width: 0 40px; font-size: 20px; }

/* second reward badge, pack of emotes, card count */
.mi-node .bdg.b1 { top: 30px; right: -22px; }
.mi-node.t4 .bdg.b1 { top: 58px; right: -6px; }
.rp.ep { position: relative; }
.rp.ep img { position: absolute; width: 74%; height: 74%; object-fit: contain; }
.rp.ep img:first-child { left: 0; top: 4%; transform: rotate(-8deg); }
.rp.ep img:last-child { right: 0; bottom: 4%; transform: rotate(8deg); }
.rp.back.r-comun { --rc: #d9d3e4; }
.rp.back em { position: absolute; right: 2px; bottom: 2px; font: 800 12px/1 "Barlow Condensed", sans-serif; font-style: normal; color: #fff; padding: 2px 4px 1px; border-radius: 5px; background: rgba(20, 12, 24, .9); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .6); }
.mi-tip .its .rp.back em { font-size: 13px; }
.mi-modal .it.emote .rp { width: 230px; height: 230px; }