/* ===== Meow Battle · MY CARDS (1920 x 1080 canvas scaled to fit) ===== */
#mcScr { position: absolute; inset: 0; z-index: 42; opacity: 0; transition: opacity .45s ease; background: #08050a; overflow: hidden; pointer-events: auto; }
#mcScr.on { opacity: 1; }
#mcScr[hidden] { display: none !important; }
#mcScr, #mcScr * { box-sizing: border-box; }
.mc-cvs { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; color: #efe3c6; font-family: Barlow, sans-serif; }
.mc-bg { position: absolute; inset: -2px 0; background: url(mc_bg.webp) center/cover no-repeat; }
.mc-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 4, 10, .78) 0, rgba(8, 4, 10, .2) 22%, rgba(8, 4, 10, 0) 70%, rgba(8, 4, 10, .55) 100%), radial-gradient(ellipse 75% 70% at 50% 55%, rgba(0, 0, 0, 0) 55%, rgba(4, 2, 6, .55) 100%); }

/* header */
.mc-back { position: absolute; left: 44px; top: 40px; width: 66px; height: 62px; border: 0; padding: 0 0 3px; cursor: pointer; background: url(../st/s2_btn2.webp) center/contain no-repeat; display: grid; place-items: center; color: #f1d48a; transition: transform .2s, filter .2s; }
.mc-back svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 2px #000); }
.mc-back:hover { transform: translateY(-2px); filter: brightness(1.15); }
.mc-head { position: absolute; left: 134px; top: 36px; }
.mc-title { font: 900 50px/1 Cinzel, serif; letter-spacing: .05em; 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)); }
.mc-tot { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: 600 14px/1 Barlow, sans-serif; letter-spacing: .14em; color: #d9c9a6; text-shadow: 0 1px 3px #000; }
.mc-tot b { font: 800 19px/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; color: #fff1cf; margin-right: 5px; }
.mc-tot span { display: inline-flex; align-items: center; }
.mc-tot svg { width: 16px; height: 16px; margin-right: 6px; }
.mc-tot .t b { color: #ffd77a; }
.mc-tot .n { color: #b9b2c4; } .mc-tot .n svg { color: #b9b2c4; } .mc-tot .n b { color: #e2dcea; }
.mc-tot i { width: 5px; height: 5px; transform: rotate(45deg); background: #c9973c; }

.mc-bar { position: absolute; right: 60px; top: 46px; display: flex; align-items: center; gap: 18px; }
.mc-tabs { display: flex; gap: 6px; }
.mc-tab { height: 56px; padding: 0 22px 1px; cursor: pointer; background: none; border-style: solid; border-width: 8px 17px 9px 17px; border-image: url(../st/s2_btn1.webp) 30 60 32 60 fill stretch;
  font: 700 14px/1 Cinzel, serif; letter-spacing: .14em; color: #a8936c; transition: color .2s, filter .2s; }
.mc-tab:hover { color: #f1dfae; }
.mc-tab.on { color: #ffe7a6; filter: brightness(1.25) saturate(1.1); text-shadow: 0 0 10px rgba(255, 210, 120, .5); }
.mc-gems { display: flex; gap: 8px; padding: 0 4px; }
.mc-gem { width: 34px; height: 34px; border: 0; padding: 0; cursor: pointer; background: none; position: relative; }
.mc-gem::before { content: ""; position: absolute; inset: 9px; transform: rotate(45deg); border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: .55; transition: opacity .2s, transform .2s; }
.mc-gem:hover::before { opacity: .9; }
.mc-gem.on::before { opacity: 1; transform: rotate(45deg) scale(1.25); box-shadow: 0 0 14px var(--c), 0 0 0 2px #1a1020, 0 0 0 3.5px #ffe7a6; }
.mc-sort { height: 44px; padding: 0 16px; border-radius: 6px; cursor: pointer; background: rgba(12, 8, 16, .7); border: 1px solid rgba(232, 199, 122, .4); font: 600 12px/1 Barlow, sans-serif; letter-spacing: .18em; color: #a8936c; }
.mc-sort b { color: #f1dfae; margin-left: 6px; letter-spacing: .14em; }
.mc-sort:hover { border-color: #e8c77a; }

/* grid of whole cards */
.mc-grid { position: absolute; left: 150px; top: 176px; width: 1620px; display: grid; grid-template-columns: repeat(6, 230px); justify-content: space-between; row-gap: 16px; }
.mc-cell { position: relative; width: 230px; height: 410px; padding: 0; cursor: pointer; text-align: center; background: none; border-style: solid; border-width: 25px 16px 107px 16px; border-image: url(mc_slot.webp) 55 35 234 35 fill stretch; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); transition: filter .25s; animation: mcIn .45s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i) * 30ms); }
.mc-grid.in-r .mc-cell { animation-name: mcInR; } .mc-grid.in-l .mc-cell { animation-name: mcInL; }
@keyframes mcIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes mcInR { from { opacity: 0; transform: translateX(40px); } }
@keyframes mcInL { from { opacity: 0; transform: translateX(-40px); } }
.mc-card { position: absolute; left: 2px; top: 6px; width: 194px; aspect-ratio: 1200 / 1678; transition: transform .25s cubic-bezier(.2, .8, .3, 1.3); }
.mc-card img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.mc-card::after { content: ""; position: absolute; inset: 2%; border-radius: 6%; box-shadow: 0 0 22px 2px var(--c); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mc-cell:hover { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) 45%, transparent)); }
.mc-cell:hover .mc-card { transform: translateY(-6px) scale(1.03); }
.mc-cell:hover .mc-card::after { opacity: .55; }
.mc-qty { position: absolute; right: -10px; top: -12px; min-width: 38px; height: 30px; padding: 0 7px; border-radius: 15px; display: grid; place-items: center;
  font: 800 19px/1 'Barlow Condensed', sans-serif; color: #2a1606; background: linear-gradient(180deg, #fff1bf, #f0c45a 55%, #b47a1e); box-shadow: 0 0 0 2px #3a2208, 0 4px 10px rgba(0, 0, 0, .6); }
.mc-st { position: absolute; left: -16px; right: -16px; top: 315px; height: 47px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.mc-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 6px; border-radius: 11px; font: 700 10.5px/1 Barlow, sans-serif; letter-spacing: .12em; white-space: nowrap; }
.mc-pill svg { width: 13px; height: 13px; flex: none; }
.mc-pill em { font: 800 14px/1 'Barlow Condensed', sans-serif; font-style: normal; letter-spacing: .02em; margin-left: 2px; }
.mc-pill.t { color: #ffe3a1; background: linear-gradient(180deg, rgba(120, 78, 16, .92), rgba(70, 42, 8, .92)); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .7); }
.mc-pill.t em { color: #fff3cf; }
.mc-pill.n { color: #cfc8da; background: rgba(36, 30, 44, .92); box-shadow: inset 0 0 0 1px rgba(190, 180, 205, .45); }
.mc-pill.n svg { color: #a59db3; }
.mc-pill.n em { color: #f0ebf6; }

/* paging */
.mc-pg { position: absolute; top: 560px; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #f1d48a;
  background: radial-gradient(circle at 50% 35%, #3a2440, #160c1a); box-shadow: inset 0 0 0 2px #c9973c, inset 0 0 0 5px rgba(12, 8, 16, .9), inset 0 0 0 6px rgba(232, 199, 122, .4), 0 8px 18px rgba(0, 0, 0, .6); transition: transform .2s, filter .2s, opacity .2s; }
.mc-pg svg { width: 26px; height: 26px; }
.mc-pg.l { left: 52px; } .mc-pg.r { right: 52px; }
.mc-pg:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.2); }
.mc-pg:disabled { opacity: .25; cursor: default; }
.mc-page { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 10px; }
.mc-page i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #c9973c; background: rgba(20, 12, 24, .9); }
.mc-page i.on { background: linear-gradient(135deg, #fff3c4, #c9973c); box-shadow: 0 0 8px rgba(255, 210, 120, .7); }
.mc-empty { position: absolute; left: 0; right: 0; top: 500px; text-align: center; font: 700 20px/1 Cinzel, serif; letter-spacing: .16em; color: #a8936c; opacity: 0; transition: opacity .3s; pointer-events: none; }
.mc-empty.on { opacity: 1; }

/* detail */
.mc-detail { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 80px; background: rgba(6, 3, 9, .94); opacity: 0; transition: opacity .3s; }
.mc-detail.on { opacity: 1; }
.mc-dcard { width: 470px; aspect-ratio: 1200 / 1678; transform: translateY(16px) scale(.96); transition: transform .45s cubic-bezier(.2, .8, .3, 1.2); }
.mc-detail.on .mc-dcard { transform: none; }
.mc-dcard img { width: 100%; height: 100%; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--c) 55%, transparent)) drop-shadow(0 24px 40px rgba(0, 0, 0, .7)); }
.mc-dinfo { width: 560px; }
.mc-dname { font: 900 48px/1.05 Cinzel, serif; background: linear-gradient(180deg, #fff4cf 0%, #f0cf7f 45%, #b9862f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.mc-drar { display: flex; align-items: center; gap: 10px; margin: 14px 0 30px; font: 600 15px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #cdbd9c; }
.mc-drar i { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mc-drow { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 10px; margin-bottom: 14px; }
.mc-drow svg { width: 34px; height: 34px; flex: none; }
.mc-drow div { flex: 1; } .mc-drow b { display: block; font: 700 17px/1 Cinzel, serif; letter-spacing: .14em; } .mc-drow span { display: block; margin-top: 7px; font: 500 15px/1.3 Barlow, sans-serif; opacity: .85; }
.mc-drow em { font: 800 40px/1 'Barlow Condensed', sans-serif; font-style: normal; }
.mc-drow.t { color: #ffe3a1; background: linear-gradient(180deg, rgba(110, 72, 16, .55), rgba(60, 36, 8, .55)); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .6); }
.mc-drow.n { color: #d8d1e3; background: rgba(36, 30, 44, .75); box-shadow: inset 0 0 0 1px rgba(190, 180, 205, .4); } .mc-drow.n svg { color: #a59db3; }
.mc-drow.zero { opacity: .45; }
.mc-dtot { margin: 8px 4px 26px; font: 700 15px/1 Cinzel, serif; letter-spacing: .2em; color: #cdbd9c; } .mc-dtot b { font: 800 26px/1 'Barlow Condensed', sans-serif; color: #fff1cf; letter-spacing: .02em; margin-left: 8px; }
.mc-sell { width: 400px; height: 98px; border: 0; padding: 0 0 4px; background: url(../st/s2_btn0.webp) center/100% 100% no-repeat; font: 900 22px/1 Cinzel, serif; letter-spacing: .14em; color: #fff6dc; text-shadow: 0 2px 3px rgba(30, 0, 50, .9); }
.mc-sell:disabled { filter: grayscale(.55) brightness(.75); cursor: default; }
.mc-detail .mc-soon { margin: 10px 0 0 4px; font: 600 13px/1 Barlow, sans-serif; letter-spacing: .14em; color: #9d8f78; text-transform: uppercase; }
.mc-x { position: absolute; right: 60px; top: 50px; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #f1d48a; background: rgba(20, 12, 24, .9); box-shadow: inset 0 0 0 2px #c9973c; }
.mc-x svg { width: 22px; height: 22px; } .mc-x:hover { filter: brightness(1.25); }
@media (prefers-reduced-motion: reduce) { #mcScr * { animation: none !important; } }

/* empty TRADEABLE tab: send the player to the store */
.mc-cta { position: absolute; left: 50%; top: 545px; width: 1240px; height: 560px; transform: translate(-50%, -50%) scale(.97); display: flex; align-items: center; gap: 70px; opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .3, 1.2); }
.mc-cta.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.mc-cta .packs { position: relative; width: 520px; height: 520px; flex: none; }
.mc-cta .packs::before { content: ""; position: absolute; left: 50%; top: 52%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 110, .45), rgba(190, 110, 255, .18) 40%, rgba(0, 0, 0, 0) 68%); animation: mcGlow 3.2s ease-in-out infinite; }
@keyframes mcGlow { 50% { opacity: .65; transform: translate(-50%, -50%) scale(.94); } }
.mc-cta .packs img { position: absolute; height: 330px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.mc-cta .p1 { left: 20px; top: 120px; transform: rotate(-12deg); animation: mcF1 5s ease-in-out infinite; }
.mc-cta .p2 { right: 20px; top: 120px; transform: rotate(12deg); animation: mcF2 5.4s ease-in-out infinite; }
.mc-cta .p3 { left: 50%; top: 60px; height: 400px; transform: translateX(-50%); z-index: 1; animation: mcF3 4.6s ease-in-out infinite; }
@keyframes mcF1 { 50% { transform: rotate(-12deg) translateY(-12px); } }
@keyframes mcF2 { 50% { transform: rotate(12deg) translateY(-10px); } }
@keyframes mcF3 { 50% { transform: translateX(-50%) translateY(-16px); } }
.mc-cta .txt { flex: 1; }
.mc-cta .ed { display: flex; align-items: center; gap: 12px; }
.mc-cta .rib { position: relative; padding: 9px 22px 8px 18px; font: 900 15px/1 Cinzel, serif; letter-spacing: .2em; color: #2a1606;
  background: linear-gradient(180deg, #fff1bf, #f0c45a 55%, #b47a1e); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.mc-cta .lim { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: 800 13px/1 Barlow, sans-serif; letter-spacing: .2em; color: #ffd9d9;
  background: rgba(150, 20, 40, .55); box-shadow: inset 0 0 0 1px rgba(255, 120, 130, .7), 0 0 16px rgba(255, 60, 80, .35); animation: mcLim 1.6s ease-in-out infinite; }
.mc-cta .lim i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 8px #ff5a6e; }
@keyframes mcLim { 50% { box-shadow: inset 0 0 0 1px rgba(255, 150, 160, .95), 0 0 26px rgba(255, 60, 80, .6); } }
.mc-cta .h { margin-top: 22px; max-width: 620px; font: 900 58px/1.04 Cinzel, serif; 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)); }
.mc-cta p { margin: 18px 0 24px; max-width: 600px; font: 500 22px/1.5 Barlow, sans-serif; color: #f2ece4; text-shadow: 0 2px 6px rgba(0, 0, 0, .85); }
.mc-cta p b { color: #fff; font-weight: 700; }
.mc-cta p em { font-style: normal; font-weight: 700; color: #ffcf6a; }
.mc-cta .bar { max-width: 600px; padding: 14px 16px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(232, 199, 122, .25); }
.mc-cta .bar .row { display: flex; justify-content: space-between; font: 700 13px/1 Cinzel, serif; letter-spacing: .18em; color: #d8c49a; }
.mc-cta .bar .row b { font: 700 16px/1 Barlow, sans-serif; letter-spacing: .04em; color: #fff1cf; }
.mc-cta .trk { margin-top: 10px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mc-cta .trk u { display: block; width: 67.4%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8a5f22, #f3d78e); box-shadow: 0 0 10px rgba(255, 210, 120, .5); transform-origin: 0 50%; animation: mcBar 1.2s cubic-bezier(.2, .8, .3, 1) both .3s; }
@keyframes mcBar { from { transform: scaleX(0); } }
.mc-cta .buy { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
.mc-cta .price { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mc-cta .price small { font: 700 16px/1 Cinzel, serif; letter-spacing: .2em; color: #d8c49a; }
.mc-cta .price b { font: 800 84px/0.9 'Barlow Condensed', sans-serif; color: #fff4d6; letter-spacing: .01em; text-shadow: 0 3px 6px #000, 0 0 24px rgba(255, 200, 110, .35); }
.mc-cta .price span { font: 800 22px/1 Barlow, sans-serif; letter-spacing: .14em; color: #ffd77a; }
.mc-cta .go { position: relative; width: 360px; height: 104px; border: 0; padding: 9px 0 0; cursor: pointer; background: url(mc_cta.webp) center/100% 100% no-repeat; font: 900 26px/1 Cinzel, serif; letter-spacing: .16em; color: #3a1a02;
  text-shadow: 0 1px 0 rgba(255, 245, 210, .7); transition: transform .2s cubic-bezier(.2, .8, .3, 1.3), filter .2s; animation: mcPulse 2s ease-in-out infinite; }
@keyframes mcPulse { 50% { filter: brightness(1.12) drop-shadow(0 0 20px rgba(255, 200, 110, .6)); } }
.mc-cta .go:hover { transform: translateY(-3px) scale(1.03); }
.mc-cvs:has(.mc-cta.on) .mc-pg, .mc-cvs:has(.mc-cta.on) .mc-page { visibility: hidden; }
.mc-gem[data-r="god"]::before { background: radial-gradient(circle at 35% 30%, #fff, #fff1b8 45%, #e8c77a); box-shadow: 0 0 10px #fff1b8, 0 0 18px rgba(255, 230, 160, .6); }

/* ===== NEW badges (homepage: My Cards tile, Decks, Missions) — set by mc/inv.js after opening a pack ===== */
.mb-new { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 1px 11px 0 9px; border-radius: 999px; box-sizing: border-box; font: 800 13px/1 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .16em; color: #fff; text-shadow: 0 1px 0 rgba(110, 0, 40, .55);
  background: linear-gradient(180deg, #ff6a9a, #d4175a); box-shadow: inset 0 0 0 1px rgba(255, 218, 150, .8), inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(212, 23, 90, .5); pointer-events: none; }
.mb-new .d { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #fff4c8; box-shadow: 0 0 6px #fff4c8; }
.mb-new .d::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #fff4c8; animation: mbNewPing 1.8s ease-out infinite; }
@keyframes mbNewPing { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.mb-new.pop { animation: mbNewPop .7s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes mbNewPop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mb-mib > .mb-new { margin-left: auto; }
#vids .mc-tile > .mb-new { position: absolute; right: 14px; top: 14px; z-index: 2; height: 30px; padding: 1px 14px 0 11px; font-size: 15px; }

/* NEW inside My Cards and Decks */
.mc-nw, .dk-slot .nw { position: absolute; z-index: 3; padding: 5px 9px 4px; border-radius: 6px; transform: rotate(-8deg); font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 0 rgba(110, 0, 40, .55);
  background: linear-gradient(180deg, #ff6a9a, #d4175a); box-shadow: inset 0 0 0 1px rgba(255, 218, 150, .8), 0 3px 10px rgba(0, 0, 0, .45); pointer-events: none; animation: mbNewPop .6s cubic-bezier(.2, 1.7, .4, 1) .25s both; }
.mc-nw { left: -8px; top: -10px; }
.dk-slot .nw { left: 2px; top: -6px; font-size: 11px; padding: 4px 7px 3px; }
.mc-cell.new { filter: drop-shadow(0 0 14px rgba(255, 106, 154, .35)) drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }