/* ============================================================
   MGM Shop — effects layer styles (pairs with public/js/mgm-shop-fx.js)
   ============================================================ */

/* ── line icons (replaced the emoji) ─────────────────────────── */
.mgms-ico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; flex: none; }
.mgms-shop-title .mgms-ico { width: 30px; height: 30px; color: var(--mgms-purple); margin-right: 4px; }
.mgms-view-btn .mgms-ico { width: 19px; height: 19px; }
.mgms-cart-toggle { display: inline-flex; align-items: center; justify-content: center; }
.mgms-cart-toggle .mgms-ico { width: 24px; height: 24px; color: var(--mgms-purple-light); }
.mgms-item-icon-placeholder .mgms-ico { width: 58px; height: 58px; color: var(--mgms-purple-light); }
.mgms-item-game-emoji .mgms-ico { width: 16px; height: 16px; color: var(--mgms-purple-light); vertical-align: middle; }
.mgms-game-tab-emoji .mgms-ico { width: 30px; height: 30px; color: var(--mgms-purple-light); }
.mgms-cat-pill-icon .mgms-ico { width: 16px; height: 16px; }
.mgms-item-delivery .mgms-ico { width: 15px; height: 15px; color: var(--mgms-purple); }
.mgms-redeem-locked .mgms-ico { width: 15px; height: 15px; }
.mgms-cart-line-emoji .mgms-ico { width: 28px; height: 28px; color: var(--mgms-purple-light); }
.mgms-hist-icon-ph .mgms-ico { width: 22px; height: 22px; color: var(--mgms-purple-light); }
.mgms-modal-item-icon .mgms-ico { width: 46px; height: 46px; color: var(--mgms-purple-light); }
.mgms-detail-ph .mgms-ico { width: 120px; height: 120px; color: var(--mgms-purple-light); }
.mgms-cart-head h3 .mgms-ico, .mgms-inv-header h3 .mgms-ico { width: 22px; height: 22px; color: var(--mgms-purple); }
#mgms-redeem-nolink .mgms-ico { width: 16px; height: 16px; color: var(--mgms-purple); }
.mgmsfx-redeem-img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(232,201,107,.6)); }

/* ── the flight layer ─────────────────────────────────────────── */
.mgmsfx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; overflow: hidden; }
.mgmsfx-flyer { position: fixed; left: 0; top: 0; display: grid; place-items: center; will-change: transform;
    filter: drop-shadow(0 0 14px rgba(232,201,107,.85)) drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.mgmsfx-flyer img { width: 100%; height: 100%; object-fit: contain; }
.mgmsfx-flyer svg { width: 100%; height: 100%; color: #f0d47b; }
.mgmsfx-flyer--item { border-radius: 16px; padding: 7px; background: radial-gradient(circle at 50% 35%, rgba(52,44,92,.96), rgba(14,14,26,.96)); box-shadow: 0 0 0 2px #e8c96b, 0 0 30px rgba(232,201,107,.55); }
.mgmsfx-spark { position: fixed; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 0 6px rgba(232,201,107,.95)); }
.mgmsfx-spark svg { width: 100%; height: 100%; display: block; }
.mgmsfx-spark--big { filter: drop-shadow(0 0 10px rgba(255,230,150,1)); }
.mgmsfx-ring { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #f6de94;
    box-shadow: 0 0 22px rgba(232,201,107,.85), inset 0 0 12px rgba(232,201,107,.6); animation: mgmsfxRing .75s ease-out forwards; }
.mgmsfx-ring--big { animation-duration: 1s; border-width: 4px; }
@keyframes mgmsfxRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.mgmsfx-float { position: fixed; transform: translate(-50%, 0); white-space: nowrap; font: 800 20px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: .02em; color: #fff; text-shadow: 0 2px 10px #000, 0 0 16px rgba(0,0,0,.8); animation: mgmsfxFloat 1.5s ease-out forwards; }
.mgmsfx-float--gold { color: #f6de94; }
.mgmsfx-float--spend { color: #ff9a8f; }
.mgmsfx-float--big { font-size: 22px; padding: 12px 18px; border-radius: 12px; background: rgba(14,14,26,.92); box-shadow: 0 0 0 1px #e8c96b, 0 0 36px rgba(232,201,107,.55); }
@keyframes mgmsfxFloat { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -56px) scale(1); } }
.mgmsfx-beam { position: fixed; top: 0; width: 150px; margin-left: -75px; border-radius: 75px 75px 0 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(0deg, rgba(255,246,210,.98), rgba(232,201,107,.6) 26%, rgba(161,141,255,.32) 64%, transparent);
    box-shadow: 0 0 60px rgba(232,201,107,.6); transform-origin: bottom; animation: mgmsfxBeam 1.45s ease-out forwards; }
@keyframes mgmsfxBeam { 0% { transform: scaleY(0) scaleX(.25); opacity: 0; } 22% { transform: scaleY(1) scaleX(1); opacity: 1; }
    100% { transform: scaleY(1) scaleX(.08); opacity: 0; } }

/* ── micro-interactions ───────────────────────────────────────── */
.mgmsfx-pop { animation: mgmsfxPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes mgmsfxPop { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
.mgmsfx-gulp { animation: mgmsfxGulp .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes mgmsfxGulp { 0% { transform: scale(1); } 30% { transform: scale(.82); } 62% { transform: scale(1.16); } 100% { transform: scale(1); } }
.mgmsfx-press { animation: mgmsfxPress .28s ease; }
@keyframes mgmsfxPress { 50% { transform: scale(.9); } }
.mgmsfx-shake { animation: mgmsfxShake .45s ease; }
@keyframes mgmsfxShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.mgmsfx-tick { animation: mgmsfxTick .45s ease; display: inline-block; }
@keyframes mgmsfxTick { 40% { transform: translateY(-3px) scale(1.18); color: #fff; } }
.mgmsfx-card-kick { animation: mgmsfxKick .45s ease; }
@keyframes mgmsfxKick { 30% { box-shadow: 0 0 0 2px #e8c96b, 0 0 40px rgba(232,201,107,.55); } }

/* add-to-cart success state */
.mgms-addcart-btn.mgmsfx-added { background: linear-gradient(180deg, #5de39a, #27a860) !important; color: #04140a !important; border-color: transparent !important; }
.mgms-addcart-btn.mgmsfx-added::before { content: ""; display: inline-block; width: 12px; height: 6px; margin: 0 8px 3px 0; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor;
    transform: rotate(-45deg); animation: mgmsfxCheck .35s ease both; }
@keyframes mgmsfxCheck { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* balance */
.mgmsfx-counting { text-shadow: 0 0 18px rgba(232,201,107,.9); }
.mgms-shard-crystal svg { transition: transform .4s; }
.mgms-shard-crystal { animation: mgmsfxCrystal 5s ease-in-out infinite; }
@keyframes mgmsfxCrystal { 50% { transform: translateY(-4px); filter: drop-shadow(0 0 16px rgba(232,201,107,.55)); } }
.mgmsfx-charge { animation: mgmsfxCharge .9s ease; }
@keyframes mgmsfxCharge { 30% { transform: scale(1.3) rotate(8deg); filter: drop-shadow(0 0 30px rgba(255,230,150,1)); } }
.mgmsfx-drain { animation: mgmsfxDrain .9s ease; }
@keyframes mgmsfxDrain { 25% { transform: scale(.8) rotate(-10deg); } 55% { transform: scale(1.15); filter: drop-shadow(0 0 26px rgba(255,160,140,.9)); } }
.mgmsfx-fadein { animation: mgmsfxFade 1.2s ease both .6s; }
@keyframes mgmsfxFade { from { opacity: 0; } }

/* ── hero ─────────────────────────────────────────────────────── */
.mgms-hero .mgmsfx-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mgms-hero > *:not(.mgmsfx-field) { position: relative; z-index: 1; }
.mgmsfx-drift { position: absolute; bottom: -70px; opacity: 0; filter: blur(var(--blur, 0)) drop-shadow(0 0 8px rgba(232,201,107,.6)); animation: mgmsfxDrift var(--d, 14s) linear var(--dl, 0s) infinite; }
.mgmsfx-drift svg { width: 100%; height: 100%; display: block; }
@keyframes mgmsfxDrift { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: var(--o, .4); } 85% { opacity: var(--o, .4); }
    100% { transform: translateY(calc(-1 * var(--h, 520px))) rotate(var(--r, 180deg)); opacity: 0; } }
.mgms-hero h1 { background: linear-gradient(100deg, #fff 18%, #f6de94 38%, #fff 52%, #fff 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text;
    color: transparent !important; animation: mgmsfxSheen 7s linear infinite; }
@keyframes mgmsfxSheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.mgmsfx-flow { list-style: none; margin: 30px auto 0; padding: 0; display: flex; justify-content: center; max-width: 940px; }
.mgmsfx-flow li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 8px; text-align: center; margin: 0; }
.mgmsfx-flow li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: calc(50% + 38px); right: calc(-50% + 38px); height: 2px;
    background: linear-gradient(90deg, rgba(232,201,107,.15), rgba(232,201,107,.6), rgba(232,201,107,.15)) 0 0 / 200% 100%; animation: mgmsfxWire 2s linear infinite; }
@keyframes mgmsfxWire { from { background-position: 200% 0; } to { background-position: 0 0; } }
.mgmsfx-flow-ico { width: 62px; height: 62px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; color: #f0d47b; background: rgba(14,14,26,.85);
    box-shadow: 0 0 0 1px rgba(232,201,107,.4); animation: mgmsfxStep 8s ease-in-out infinite; }
.mgmsfx-flow li:nth-child(2) .mgmsfx-flow-ico { animation-delay: 2s; }
.mgmsfx-flow li:nth-child(3) .mgmsfx-flow-ico { animation-delay: 4s; }
.mgmsfx-flow li:nth-child(4) .mgmsfx-flow-ico { animation-delay: 6s; }
@keyframes mgmsfxStep { 0%, 22% { transform: scale(1.14); box-shadow: 0 0 0 2px #e8c96b, 0 0 30px rgba(232,201,107,.75); background: rgba(58,48,24,.9); }
    32%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(232,201,107,.4); } }
.mgmsfx-flow-ico svg { width: 30px; height: 30px; }
.mgmsfx-flow-ico svg[viewBox="0 0 40 48"] { width: 30px; height: 36px; }
.mgmsfx-flow b { color: #fff; font-size: 1.02rem; }
.mgmsfx-flow span:not(.mgmsfx-flow-ico) { color: var(--mgms-text-muted); font-size: .88rem; }

/* ── cards ────────────────────────────────────────────────────── */
.mgms-wrap .mgms-items-grid .mgms-item { position: relative; transform-style: preserve-3d; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s; }
.mgms-wrap .mgms-items-grid .mgms-item:hover:not(.mgms-item--oos) { transform: perspective(900px) translateY(-7px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.mgms-wrap .mgms-items-grid .mgms-item::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,240,190,.17), transparent 46%); }
.mgms-wrap .mgms-items-grid .mgms-item:hover::after { opacity: 1; }
.mgms-item .mgms-item-icon-img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.mgms-item:hover .mgms-item-icon-img { transform: translateY(-5px) scale(1.1); }
.mgms-item .mgms-shard-mini { transition: transform .5s; }
.mgms-item:hover .mgms-shard-mini { transform: rotate(360deg) scale(1.2); }
/* price tiers — border + glow in the icon well */
.mgms-item[data-mgmsfx-tier="rare"] { border-color: rgba(96,165,250,.55); }
.mgms-item[data-mgmsfx-tier="rare"] .mgms-item-icon-wrap { background: radial-gradient(circle at 50% 70%, rgba(96,165,250,.28), transparent 70%), linear-gradient(135deg, var(--mgms-bg), var(--mgms-surface2)); }
.mgms-item[data-mgmsfx-tier="epic"] { border-color: rgba(167,139,250,.65); }
.mgms-item[data-mgmsfx-tier="epic"] .mgms-item-icon-wrap { background: radial-gradient(circle at 50% 70%, rgba(167,139,250,.34), transparent 70%), linear-gradient(135deg, var(--mgms-bg), var(--mgms-surface2)); }
.mgms-item[data-mgmsfx-tier="legend"] { border-color: rgba(251,146,60,.75); box-shadow: 0 0 22px rgba(251,146,60,.18); }
.mgms-item[data-mgmsfx-tier="legend"] .mgms-item-icon-wrap { background: radial-gradient(circle at 50% 70%, rgba(251,146,60,.38), transparent 70%), linear-gradient(135deg, var(--mgms-bg), var(--mgms-surface2)); }
.mgms-item[data-mgmsfx-tier="legend"] .mgms-item-icon-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,214,150,.22) 50%, transparent 65%) 0 0 / 250% 100%; animation: mgmsfxSheen 3.5s linear infinite; }
/* entrances */
.mgmsfx-rise { animation: mgmsfxRise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes mgmsfxRise { from { opacity: 0; transform: translateY(22px) scale(.96); } }
.mgmsfx-slide { animation: mgmsfxSlide .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes mgmsfxSlide { from { opacity: 0; transform: translateX(26px); } }
.mgmsfx-materialize { position: relative; animation: mgmsfxMat .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes mgmsfxMat { 0% { opacity: 0; clip-path: inset(100% 0 0 0); filter: brightness(2.2) saturate(0); } 60% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.5); }
    100% { filter: none; clip-path: inset(0 0 0 0); } }
.mgmsfx-materialize::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, #f6de94, transparent);
    box-shadow: 0 0 18px #e8c96b; animation: mgmsfxScan .8s ease both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes mgmsfxScan { 0% { top: 100%; opacity: 1; } 80% { opacity: 1; } 100% { top: 0; opacity: 0; } }
.mgmsfx-viewin { animation: mgmsfxView .4s ease both; }
@keyframes mgmsfxView { from { opacity: 0; transform: translateY(10px); } }
/* freshly bought */
.mgmsfx-new { box-shadow: 0 0 0 2px #e8c96b, 0 0 26px rgba(232,201,107,.4); animation: mgmsfxNewGlow 2.2s ease-in-out infinite; }
@keyframes mgmsfxNewGlow { 50% { box-shadow: 0 0 0 2px #f6de94, 0 0 42px rgba(232,201,107,.65); } }
.mgmsfx-newtag { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 3px 9px; border-radius: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #15151f; background: linear-gradient(90deg, #f6de94, #e8c96b); box-shadow: 0 0 14px rgba(232,201,107,.7); animation: mgmsfxPop .6s cubic-bezier(.2,1.6,.4,1) .5s both; }
/* Inventory tab after a checkout */
.mgms-view-btn.mgmsfx-glow { color: var(--mgms-text); box-shadow: inset 0 0 0 1px var(--mgms-purple), 0 0 22px rgba(232,201,107,.45); animation: mgmsfxTabGlow 1.6s ease-in-out infinite; }
@keyframes mgmsfxTabGlow { 50% { box-shadow: inset 0 0 0 1px var(--mgms-purple-light), 0 0 34px rgba(232,201,107,.7); } }

/* ── cart drawer ──────────────────────────────────────────────── */
.mgms-cart-drawer { transition: transform .45s cubic-bezier(.2,1.15,.3,1); }
.mgms-checkout-btn.mgmsfx-forging { background: linear-gradient(90deg, #c9a83e, #fff2b8, #c9a83e) 0 0 / 200% 100% !important; color: #15151f !important;
    animation: mgmsfxForge .9s linear infinite; }
@keyframes mgmsfxForge { from { background-position: 200% 0; } to { background-position: 0 0; } }
.mgmsfx-afterbuy { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; margin-top: 12px; padding: 14px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(232,201,107,.16), rgba(93,227,154,.1)); box-shadow: inset 0 0 0 1px rgba(232,201,107,.5); animation: mgmsfxRise .5s ease both .9s; }
.mgmsfx-afterbuy-seal svg { width: 46px; height: 55px; filter: drop-shadow(0 0 10px rgba(232,201,107,.7)); animation: mgmsfxCharge 1.2s ease 1s; }
.mgmsfx-afterbuy-t b { display: block; color: #fff; font-size: 1rem; }
.mgmsfx-afterbuy-t span { display: block; color: var(--mgms-text-muted); font-size: .85rem; margin-top: 2px; }
.mgmsfx-goinv { grid-column: 1 / -1; cursor: pointer; border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #15151f; background: linear-gradient(180deg, #f6de94, #e8c96b); box-shadow: 0 8px 24px rgba(232,201,107,.3); transition: transform .15s; }
.mgmsfx-goinv:hover { transform: translateY(-2px); }

/* ── floating mini-cart ───────────────────────────────────────── */
.mgmsfx-minicart { position: fixed; right: 22px; bottom: 22px; z-index: 99990; width: 66px; height: 66px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    color: #15151f; background: radial-gradient(circle at 35% 30%, #fff2b8, #e8c96b 55%, #b8923a); box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(232,201,107,.55);
    transform: scale(0); transition: transform .38s cubic-bezier(.2,1.5,.4,1); }
.mgmsfx-minicart.is-on { transform: scale(1); }
.mgmsfx-minicart .mgms-ico, .mgmsfx-minicart svg { width: 30px; height: 30px; }
.mgmsfx-minicount { position: absolute; top: -4px; right: -4px; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 13px; background: #15151f; color: #f0d47b;
    font: 800 13px/25px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #e8c96b; }

@media (max-width: 640px) {
    .mgmsfx-flow { flex-wrap: wrap; row-gap: 18px; }
    .mgmsfx-flow li { flex: 1 1 45%; }
    .mgmsfx-flow li:not(:last-child)::after { display: none; }
    .mgmsfx-minicart { right: 16px; bottom: 16px; width: 58px; height: 58px; }
}