/* ── Root ────────────────────────────────────────────────────── */
root {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Background base ─────────────────────────────────────────── */
.mm-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #04010d;
    pointer-events: none;
    overflow: visible;
    z-index: 0; 
}

/* ── Grid animated background container ── */
/* ── Grid container ── */
/* ── Grid container ── */
@keyframes mm-grid-breathe {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1.0); }
}

.mm-grid-bg {
    position: absolute;
    left: -100px;
    top: -100px;
    width: 2400px;
    height: 1400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    transform-origin: center center;
    animation: mm-grid-breathe 20s infinite;
}

/* ── Base cell ── */
.mm-gc {
    width: 160px;
    height: 160px;
    border-radius: 6px;
    background-color: #0f0c1c;
    border: 2px solid #17122a;
    box-shadow: inset 2px 2px 0px #1a1530, inset -1px -1px 0px #07050e;
    flex-shrink: 0;
}

/* ── Edge vignette — replaces mm-overlay ── */
.mm-grid-fade {
    position: absolute;
    inset: 0px;
    pointer-events: none;
    background-color: transparent;
    border-width: 120px;
    border-color: #08060f;
    box-shadow: inset 0px 0px 120px 60px #08060f;
}

/* ── Keyframes — one per type ── */
@keyframes mm-gc-breathe {
    0%   { background-color: #0f0c1c; border-color: #17122a; }
    50%  { background-color: #131020; border-color: #1c1732; }
    100% { background-color: #0f0c1c; border-color: #17122a; }
}

@keyframes mm-gc-purp {
    0%   { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
    45%  { background-color: #1c0a38; border-color: #7035d5; box-shadow: inset 1px 1px 0px #32126a, inset -1px -1px 0px #0a0420; }
    55%  { background-color: #1c0a38; border-color: #7035d5; box-shadow: inset 1px 1px 0px #32126a, inset -1px -1px 0px #0a0420; }
    100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
}

@keyframes mm-gc-gold {
    0%   { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
    45%  { background-color: #251000; border-color: #c87215; box-shadow: inset 1px 1px 0px #4a2200, inset -1px -1px 0px #0d0600; }
    55%  { background-color: #251000; border-color: #c87215; box-shadow: inset 1px 1px 0px #4a2200, inset -1px -1px 0px #0d0600; }
    100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
}

@keyframes mm-gc-red {
    0%   { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
    45%  { background-color: #220508; border-color: #b82525; box-shadow: inset 1px 1px 0px #451010, inset -1px -1px 0px #0c0304; }
    55%  { background-color: #220508; border-color: #b82525; box-shadow: inset 1px 1px 0px #451010, inset -1px -1px 0px #0c0304; }
    100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
}

@keyframes mm-gc-chain {
    0%   { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
    45%  { background-color: #08141e; border-color: #155590; box-shadow: inset 1px 1px 0px #0e2538; }
    55%  { background-color: #08141e; border-color: #155590; box-shadow: inset 1px 1px 0px #0e2538; }
    100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }
}

@keyframes mm-gc-expl {
    0%   { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }
    78%  { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }
    80%  { background-color: #ff9030; border-color: #ffe060; box-shadow: inset 1px 1px 0px #ffee90; }
    83%  { background-color: #ff5c10; border-color: #ff8020; }
    87%  { background-color: #c03000; border-color: #ff5010; }
    93%  { background-color: #2c1000; border-color: #8a2c08; }
    100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }
}

@keyframes mm-gc-expl2 {
    0%   { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }
    60%  { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }
    62%  { background-color: #ff9030; border-color: #ffe060; box-shadow: inset 1px 1px 0px #ffee90; }
    65%  { background-color: #ff5c10; border-color: #ff8020; }
    69%  { background-color: #c03000; border-color: #ff5010; }
    75%  { background-color: #2c1000; border-color: #8a2c08; }
    100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }
}

/* ── Animation bindings — one per class, no stacking ── */
.mm-gc-idle  { animation: mm-gc-breathe 4s   infinite; }
.mm-gc-purp  { animation: mm-gc-purp    4.5s infinite; }
.mm-gc-gold  { animation: mm-gc-gold    5s   infinite; }
.mm-gc-red   { animation: mm-gc-red     4.2s infinite; }
.mm-gc-chain { animation: mm-gc-chain   3.2s infinite; }
.mm-gc-expl  { animation: mm-gc-expl    7s   infinite; }
.mm-gc-expl2 { animation: mm-gc-expl2   9s   infinite; }

/* ── Vignette — keep your existing mm-overlay, or add this ── */
.mm-grid-bg-vignette {
    position: absolute;
    inset: 0px;
    background-color: transparent;
    pointer-events: none;
    box-shadow: inset 0px 0px 160px 100px #0a0812;
}

/* ---------------------------------------------------------------------- */

/* ── Background grid preview — animated 5x5 game simulation ─── */
.mm-grid-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0.13;
    pointer-events: none;
	opacity: 0.13;
    transition: opacity 0.6s ease;
}

// light up grid when auto farm is active
.mm-grid-preview.active {
    opacity: 0.35;
}

/* Grid row — one horizontal line of cells */

.mm-prev-row {
    display: flex;
    flex-direction: row;
     gap: 8px; /* was 12px */ /* horizontal gap between cells — increase this */
}


/* ── Grid block — wraps header + grid preview as one unit ── */
.mm-farm-panel {
    display: flex;
    flex-direction: column;
    align-items: center;    /* centers children (grid, headers) horizontally within the panel */
    justify-content: center; /* centers children vertically */
    gap: 16px;
    width: 100%;            /* fill mm-center horizontally */
}

.mm-card-farm
{
    margin-top: 0px; /* moves it up */
    margin-right: 50px;
}

.mm-center-enter {
    animation: center-enter 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

/* Cards surrounding our _tabs content*/
.mm-content-card {
    color: rgba(255,255,255,0.80);
    position: relative;
    right: 90px;
    background-color: rgba(8, 3, 22, 0.92);
    border: 2px solid rgba(120,80,220,0.30);
    border-radius: 14px;
    /* cel-shaded: hard offset */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.65), inset 0px 1px 0px rgba(255,255,255,0.04);
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 700px;
    max-height: 180%;
}

@keyframes center-enter {
    0%   { opacity: 0; transform: translateY(14px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0px) scale(1.0); }
}

.mm-grid-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 570px;
    padding: 10px 16px;
    background-color: rgba(129,140,248,0.08);
    border: 1px solid rgba(129,140,248,0.18);
    border-radius: 12px;
    transition: opacity 0.6s ease;
}

.mm-grid-header.active
{
	opacity: 0.7;
}

.mm-grid-header-label {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(129,140,248,0.90);
    text-transform: uppercase;
	flex-shrink: 0;
	width: 120px;   /* fixed width anchors left side */
}

.mm-grid-header-val {
    font-size: 18px;
    font-weight: 900;
    color: rgba(129,140,248,0.90);
	flex: 1;
    text-align: center; /* centers the fragment count between the two fixed elements */
}

.mm-grid-above-header-label
{
	font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(129,140,248,0.90);
    text-transform: uppercase;
	position: relative;
	padding: 0px 120px;
}




/* ── Grid preview — the actual 5x5 cells ── */
.mm-grid-preview {
    position: relative; /* for popup positioning */
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0.13;
    pointer-events: none;
}


/* Individual grid cell — base style */
.mm-prev-cell {
    width: 76px;     /* was 106px */
    height: 76px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.05);
    background-color: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon inside each cell */
.mm-prev-icon {
    font-size: 26px;  /* was 36px */
    pointer-events: none;
}

/* Transition when entering the menu  (on grid preview)
* The 0.3s delay lets the left side title and right side buttons start their mm-enter first, 
* then the grid fades in behind them — 
* so it feels layered rather than everything appearing simultaneously.
*/

/*The cubic-bezier(0.22,1,0.36,1) is the same spring curve used on the game over chest pops 
— gives it a slight overshoot feeling of snapping into place.*/

.mm-grid-enter {
    animation: grid-enter 1.0s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

@keyframes grid-enter {
    0%   { opacity: 0; transform: scale(0.94); }
    100% { opacity: 1; transform: scale(1.0); }
}

/* ── Grid cell types — static states ─────────────────────────── */

/* Empty cell — faint visible so full grid is readable */
.ct-empty {
    background-color: rgba(255, 255, 255, 0.226);
    border-color: rgba(255, 255, 255, 0.212);
}

/* Normal chest cell */
.ct-chest {
    background-color: rgba(206, 154, 76, 0.363);
    border-color: rgba(206, 165, 76, 0.281);
}

/* Gem chest — green tint */
.ct-gem {
    background-color: rgba(30, 160, 110, 0.233);
    border-color: rgba(50,200,150,0.40);
}

/* Bomb chest — purple tint */
.ct-bomb-chest {
    background-color: rgba(100,30,200,0.20);
    border-color: rgba(160,130,250,0.40);
}

/* Placed bomb — bright purple */
.ct-bomb {
    background-color: rgba(100,30,200,0.30);
    border-color: rgba(160,130,250,0.50);
}

/* Detonating bomb — yellow flash */
.ct-blast {
    background-color: rgba(251,191,36,0.80);
    border-color: rgba(251,191,36,1.0);
    animation: ca-detonate 0.6s ease-out forwards;
}

/* Destroyed chest — fades to empty after red flash */
.ct-destroyed {
    background-color: rgba(240, 80, 80, 0.712);
    border-color: rgba(240,80,80,0.30);
    animation: ca-destroy 0.4s ease-out forwards;
}

/* ── Grid cell animations — triggered by state changes ───────── */

/* Bomb detonation — yellow flash fades to empty */
@keyframes ca-detonate {
    0%   { background-color: rgba(251,191,36,0.80); }
    60%  { background-color: rgba(251,191,36,0.20); }
    100% { background-color: rgba(255, 255, 255, 0.212); }
}

/* Chest destroyed — red flash fades to ghost cell */
@keyframes ca-destroy {
    0%   { background-color: rgba(240,80,80,0.70); opacity: 1; }
    100% { background-color: rgb(163, 45, 45); opacity: 0.5; }
}

/* Blast range on empty cell — brief yellow tint */
@keyframes ca-blast-empty {
    0%   { background-color: rgba(251,191,36,0.25); }
    100% { background-color: rgba(255, 255, 255, 0.212); }
}

.ca-blast-empty {
    animation: ca-blast-empty 0.5s ease-out forwards;
}

/* ── Old static keyframe animations — kept for fallback ─────── */
/* These ran on hardcoded cells before the C# state system */

@keyframes bomb-fire {
    0%   { background-color: rgba(100,30,200,0.30); }
    30%  { background-color: rgba(100,30,200,0.30); }
    36%  { background-color: rgba(251,191,36,0.85); }
    48%  { background-color: rgba(100,30,200,0.30); }
    100% { background-color: rgba(100,30,200,0.30); }
}

@keyframes bomb-chain {
    0%   { background-color: rgba(100,30,200,0.30); }
    40%  { background-color: rgba(100,30,200,0.30); }
    46%  { background-color: rgba(196,181,253,0.85); }
    58%  { background-color: rgba(100,30,200,0.30); }
    100% { background-color: rgba(100,30,200,0.30); }
}

@keyframes chest-pop-1 {
    0%   { background-color: rgba(100,115,135,0.10); opacity: 1; }
    34%  { background-color: rgba(100,115,135,0.10); opacity: 1; }
    39%  { background-color: rgba(240,80,80,0.70); }
    47%  { background-color: rgba(240,80,80,0.10); opacity: 0.2; }
    57%  { opacity: 0; }
    70%  { opacity: 1; background-color: rgba(100,115,135,0.10); }
    100% { background-color: rgba(100,115,135,0.10); opacity: 1; }
}

@keyframes chest-pop-2 {
    0%   { background-color: rgba(100,115,135,0.10); opacity: 1; }
    38%  { background-color: rgba(100,115,135,0.10); opacity: 1; }
    43%  { background-color: rgba(240,80,80,0.70); }
    51%  { background-color: rgba(240,80,80,0.10); opacity: 0.2; }
    60%  { opacity: 0; }
    70%  { opacity: 1; background-color: rgba(100,115,135,0.10); }
    100% { background-color: rgba(100,115,135,0.10); opacity: 1; }
}

@keyframes chest-pop-3 {
    0%   { background-color: rgba(100,115,135,0.10); opacity: 1; }
    42%  { background-color: rgba(100,115,135,0.10); opacity: 1; }
    47%  { background-color: rgba(240,80,80,0.70); }
    55%  { background-color: rgba(240,80,80,0.10); opacity: 0.2; }
    63%  { opacity: 0; }
    70%  { opacity: 1; background-color: rgba(100,115,135,0.10); }
    100% { background-color: rgba(100,115,135,0.10); opacity: 1; }
}

@keyframes chest-pop-4 {
    0%   { background-color: rgba(100,115,135,0.10); opacity: 1; }
    45%  { background-color: rgba(100,115,135,0.10); opacity: 1; }
    50%  { background-color: rgba(240,80,80,0.70); }
    58%  { background-color: rgba(240,80,80,0.10); opacity: 0.2; }
    66%  { opacity: 0; }
    70%  { opacity: 1; background-color: rgba(100,115,135,0.10); }
    100% { background-color: rgba(100,115,135,0.10); opacity: 1; }
}

@keyframes chest-pop-5 {
    0%   { background-color: rgba(30,160,110,0.12); opacity: 1; }
    48%  { background-color: rgba(30,160,110,0.12); opacity: 1; }
    53%  { background-color: rgba(50,220,160,0.80); }
    61%  { background-color: rgba(30,160,110,0.12); opacity: 0.2; }
    68%  { opacity: 0; }
    70%  { opacity: 1; background-color: rgba(30,160,110,0.12); }
    100% { background-color: rgba(30,160,110,0.12); opacity: 1; }
}

@keyframes chest-pop-6 {
    0%   { background-color: rgba(100,115,135,0.10); opacity: 1; }
    51%  { background-color: rgba(100,115,135,0.10); opacity: 1; }
    56%  { background-color: rgba(240,80,80,0.70); }
    64%  { background-color: rgba(240,80,80,0.10); opacity: 0.2; }
    69%  { opacity: 0; }
    70%  { opacity: 1; background-color: rgba(100,115,135,0.10); }
    100% { background-color: rgba(100,115,135,0.10); opacity: 1; }
}

.ca-bomb  { animation: bomb-fire   7s ease-in-out infinite; }
.ca-chain { animation: bomb-chain  7s ease-in-out infinite; }
.ca-c1    { animation: chest-pop-1 7s ease-in-out infinite; }
.ca-c2    { animation: chest-pop-2 7s ease-in-out infinite; }
.ca-c3    { animation: chest-pop-3 7s ease-in-out infinite; }
.ca-c4    { animation: chest-pop-4 7s ease-in-out infinite; }
.ca-c5    { animation: chest-pop-5 7s ease-in-out infinite; }
.ca-c6    { animation: chest-pop-6 7s ease-in-out infinite; }

/* ── Dark overlay — sits above grid, below UI ────────────────── */
.mm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(4,1,13,0.70);
    z-index: 1;
}

/* ── Rising particles — float up from bottom ─────────────────── */
.mm-particle {
    position: absolute;
    bottom: -5px;
    opacity: 0;
    animation-name: p-rise;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    pointer-events: none;
	z-index: 3; 
}

@keyframes p-rise {
    0%   { opacity: 0;   transform: translateY(0px); }
    15%  { opacity: 1; }
    80%  { opacity: 0.4; transform: translateY(-700px); }
    100% { opacity: 0;   transform: translateY(-1000px); }
}

/* ── Score popups — float up from destroyed chest positions ──── */
.mm-popup {
    position: absolute;
    font-weight: 900;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%); /* center text on its spawn point */
    white-space: nowrap;
    z-index: 20;
}

/* Active state — triggers the rise animation */
.popup-active {
    animation: popup-rise 1.8s ease-out forwards;
}

@keyframes popup-rise {
    0%   { opacity: 0;   transform: translateY(0px); }
    15%  { opacity: 1; }
    80%  { opacity: 0.8; transform: translateY(-60px); }
    100% { opacity: 0;   transform: translateY(-80px); }
}

/* Popup tiers — size and color by reward magnitude */
.popup-small { font-size: 14px; color: rgba(129,140,248,0.90); }
.popup-nice  { font-size: 16px; color: rgba(52,211,153,0.95); }
.popup-chain { font-size: 20px; color: rgba(251,191,36,0.95); }
.popup-mega  { font-size: 24px; color: rgba(244,114,182,0.95); }
.popup-hit   { font-size: 13px; color: rgba(248,113,113,0.80); }

/* ── Daily fragment counter — absolute above the grid ────────── */
.mm-today-frags {
    position: absolute;
    /* mm-grid-preview starts at left:150px, right:0 — so center of that zone */
    left: 150px;
    right: 0;
    /* sits just above where the grid vertically centers — grid-preview is top:120px,
       the grid is ~540px tall and vertically centered in remaining space.
       This approximates "above the grid" without JS measurement */
    top: calc(50% - 850px);
	left: 830px;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: rgba(129,140,248,0.85);
    letter-spacing: 0.15em;
    z-index: 5; /* above mm-overlay */
    pointer-events: none;
}

/* ── Main UI layout — full screen flex row ───────────────────── */
.mm-ui {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
    z-index: 5;
}

/* ── Left side — title and personal stats ────────────────────── */
.mm-left {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 90px;
    gap: 0px;
}

/* Small label above title */
.mm-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5em;
    color: rgba(160,130,250,0.40);
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-left: 6px;
    animation: mm-enter 0.6s ease-out 0.0s both;
}

/* Entrance animation — slides up from below */
@keyframes mm-enter {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0px); }
}

/* CHAIN — white title line */
.mm-title-chain {
    font-size: 112px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: -16px;
    animation: mm-enter 0.7s ease-out 0.1s both;
    /* hard cel-shaded offset shadow */
    text-shadow: 4px 4px 0px #1a0e30, -1px -1px 0px #0e0820;
}

/* Wrapper for REACTION — handles entrance separately from glow */
.mm-title-reaction-wrap {
    animation: mm-enter 0.7s ease-out 0.2s both;
    margin-bottom: 18px;
}

/* REACTION — purple, slow color glow loop */
.mm-title-reaction {
    font-size: 112px;
    font-weight: 900;
    line-height: 1;
    color: #a78bfa;
    text-shadow: 4px 4px 0px #2d0e6e, -1px -1px 0px #0e0820;
    animation: reaction-glow 3s ease-in-out infinite alternate;
}

@keyframes reaction-glow {
    0%   { color: #7c3aed; text-shadow: 4px 4px 0px #1a0640, -1px -1px 0px #0e0820; }
    100% { color: #fdb5b5; text-shadow: 4px 4px 0px #801a1a, -1px -1px 0px #0e0820; }
}

/* Subtitle tagline */
.mm-tagline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.18);
    text-transform: uppercase;
    margin-bottom: 28px;
    margin-left: 4px;
    animation: mm-enter 0.6s ease-out 0.35s both;
}

/* Personal best stats card */
.mm-stats-personal {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 28px;
    animation: mm-enter 0.6s ease-out 0.5s both;
    background-color: rgba(10, 4, 28, 0.85);
    border: 2px solid rgba(120,80,220,0.35);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.60);
    width: 280px;
}
/* Single stat row inside the card */
.mm-sp-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(120,80,220,0.12);
}

/* Hover effect per row */
.mm-sp-row:hover {
    background-color: rgba(120,80,220,0.08);
}

.mm-sp-icon {
    font-size: 18px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.mm-sp-val {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.mm-sp-lbl {
    font-size: 10px;
    font-weight:900;
    bottom: 100px;
    color: rgba(160,130,250,0.55);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    align-self: flex-end;
    padding-bottom: 2px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Version tag bottom-left */
.mm-ver {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.08);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    animation: mm-enter 0.5s ease-out 0.7s both;
    margin-top: 4px;
    margin-left: 4px;
}

/*      SECTION 2 — RIGHT SIDE : play button + tab buttons      */
/* ──────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────── */
/* ────────── Right side — play button and tab panels ───────── */
.mm-right {
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-right: 72px;
    gap: 8px;
    pointer-events: none;
}

/* Wrapper for play button — handles entrance animation */
.mm-play-wrap {
    animation: mm-enter 0.7s ease-out 0.4s both;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 6px;
}
/* Play button — cel-shaded raised tile */
.mm-play {
    position: relative;
    overflow: hidden;
    background-color: #00ff22;
    border: 2px solid #4ade80;
    border-radius: 10px;
    /* hard offset shadow = raised tile feel */
   // box-shadow: 4px 4px 0px #052e16, inset 0px 1px 0px rgba(255,255,255,0.10);
    color: white;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.22em;
    padding-top: 26px;
    padding-bottom: 26px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: all;
    animation: play-pulse 2.5s ease-in-out infinite alternate;
    transition: box-shadow 0.08s, transform 0.08s;
}

.mm-play.mm-play-locked {
    opacity: 0.35;
    cursor: default;
}

.mm-play.mm-play-locked:hover {
    background-color: #7c3aed;
}

/* Play button — slow purple pulse */
@keyframes play-glow {
    0%   { background-color: #28d937; }
    100% { background-color: #3aed49; }
}

@keyframes play-pulse {
    0%   { border-color: rgba(74,222,128,0.70); }
    100% { border-color: rgba(74,222,128,1.00); }
}

.mm-play:hover {
    background-color: #00ff62;
    box-shadow: 6px 6px 0px #052e16, inset 0px 1px 0px rgba(255,255,255,0.12);
}

.mm-play:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0px #196e0e;
}

/* Shine sweep across play button */
.mm-play-shine {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 35%;
    background-color: rgba(255,255,255,0.06);
    animation: shine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {
    0%   { transform: translateX(-180%); }
    35%  { transform: translateX(420%); }
    100% { transform: translateX(420%); }
}
/* ------------------ Multiplayer button ------------------- */
/* Wrapper for multiplayer button — handles entrance animation */
.mm-multiplayer-wrap {
    animation: mm-enter 0.7s ease-out 0.45s both;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Multiplayer button — hero CTA */
.mm-multiplayer {
    position: relative;
    overflow: hidden;
    background-color: #f8050546;
    border: 2px solid rgba(250, 139, 139, 0.55);
    border-radius: 18px;
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.18em;
    padding-top: 28px;
    padding-bottom: 28px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: all;
    animation: multiplayer-glow 2.3s ease-in-out infinite alternate;
}

/* Multiplayer button — slow purple pulse */
// @keyframes multiplayer-glow {
//     0%   { background-color: #0583f8; }
//     100% { background-color: #3ad8ed; }
// }

//.mm-play:hover { opacity: 0.88; }

/* Shine sweep across play button */
// .mm-multiplayer-shine {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     width: 35%;
//     background-color: rgba(0, 204, 255, 0.07);
//     animation: shine 3.5s ease-in-out infinite;
//     pointer-events: none;
// }

@keyframes mm-multiplayer-shine {
    0%   { transform: translateX(-180%); }
    40%  { transform: translateX(400%); }
    100% { transform: translateX(400%); }
}

/* ── Secondary tab buttons — leaderboard / stats / shop ──────── */
.mm-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: mm-enter 0.6s ease-out 0.55s both;
}

.mm-tab {
    background-color: rgba(15, 8, 35, 0.80);
    border: 2px solid rgba(80,50,140,0.40);
    border-radius: 8px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.50);
    color: rgba(200,180,255,0.50);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    pointer-events: all;
    transition: background-color 0.08s, border-color 0.08s, box-shadow 0.08s, transform 0.08s;
    letter-spacing: 0.04em;
    overflow: hidden;
    width: 100%;
}

.mm-tab:hover {
    background-color: rgba(80,40,160,0.25);
    border-color: rgba(140,100,255,0.55);
    color: rgba(220,200,255,0.85);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.60);
}

.mm-tab:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.50);
}

/* Active tab */
.mm-tab.on {
    background-color: rgba(80,30,180,0.30);
    border-color: rgba(167,139,250,0.70);
    color: #c4b5fd;
    box-shadow: 4px 4px 0px #1a0640;
    /* left accent bar */
    border-left-width: 4px;
}

/* Fragment count pill inside shop tab */
.mm-frags-pill {
    margin-left: auto;
    background-color: #6d28d9;
    border: 1px solid #a78bfa;
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    padding: 3px 8px;
    box-shadow: 2px 2px 0px #2d0e6e;
}

/* locked when menu tutorial */
.mm-tab.mm-tab-tut-locked {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── Tab content panels — leaderboard / stats / shop ─────────── */
.mm-panel {
    top: 0;
    bottom: 0;
    // left: 400px;   /* tune this — pushes right edge of mm-left */
    // right: 170px;  /* mm-right width */
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: all;
    padding: 0;
}

// Add a background (light) when a tab button is opened
// .mm-panel-backdrop {
//     position: absolute;
//     top: 0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     background-color: rgba(4,1,13,0.82);
//     pointer-events: none;
// }

/* Panel section header */
.mm-panel-hd {
    font-size: 11px;
    font-weight: 900;
    color: rgba(200,180,255,0.60);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(120,80,220,0.20);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

/* Empty state message */
.mm-panel-empty {
    font-size: 12px;
    color: rgba(255,255,255,0.20);
    padding-top: 10px;
    padding-bottom: 10px;
}


/* ──────────────────────────────────────────────────────────── */
/* SECTION 5 — LEADERBOARD ROWS                               */
/* ──────────────────────────────────────────────────────────── */

.mm-lb-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(80,50,140,0.12);
    background-color: rgba(255,255,255,0.02);
    transition: background-color 0.08s, border-color 0.08s;
}

.mm-lb-row:hover {
    background-color: rgba(80,40,160,0.10);
    border-color: rgba(120,80,220,0.25);
}

/* Top 3 gold row */
.mm-lb-row:first-child {
    background-color: rgba(120,80,10,0.18);
    border-color: rgba(251,191,36,0.35);
    box-shadow: 3px 3px 0px rgba(60,30,0,0.60);
}

/* Top 3 silver row */
.mm-lb-row:nth-child(2) {
    background-color: rgba(60,70,100,0.18);
    border-color: rgba(180,190,210,0.30);
    box-shadow: 3px 3px 0px rgba(20,25,40,0.60);
}

/* Top 3 bronze row */
.mm-lb-row:nth-child(3) {
    background-color: rgba(100,50,10,0.15);
    border-color: rgba(180,110,50,0.30);
    box-shadow: 3px 3px 0px rgba(40,15,0,0.60);
}

/* Current player row */
.mm-lb-row.me {
    background-color: rgba(80,30,180,0.22);
    border: 2px solid rgba(167,139,250,0.50);
    box-shadow: 3px 3px 0px rgba(20,0,60,0.65);
}

.mm-lb-rank {
    font-size: 16px;
    width: 32px;
    flex-shrink: 0;
    text-align: center;
}

/* Rank number for positions 4+ */
.mm-lb-rank-num {
    font-size: 11px;
    font-weight: 900;
    color: rgba(160,140,200,0.40);
    width: 32px;
    text-align: center;
    letter-spacing: 0.04em;
}

.mm-lb-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: rgba(220,210,255,0.70);
    letter-spacing: 0.04em;
}

.mm-lb-row.me .mm-lb-name {
    color: #e9d5ff;
    font-weight: 900;
}

/* Wave badge */
.mm-lb-wave {
    font-size: 10px;
    font-weight: 700;
    color: rgba(160,140,200,0.40);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 2px 7px;
}

.mm-lb-score {
    font-size: 15px;
    font-weight: 900;
    color: #a78bfa;
    letter-spacing: 0.04em;
    min-width: 70px;
    text-align: right;
    text-shadow: 1px 1px 0px rgba(40,0,80,0.80);
}

.mm-lb-row:first-child .mm-lb-score { color: #fbbf24; text-shadow: 1px 1px 0px rgba(80,40,0,0.80); }
.mm-lb-row:nth-child(2) .mm-lb-score { color: #cbd5e1; text-shadow: 1px 1px 0px rgba(20,25,40,0.80); }
.mm-lb-row:nth-child(3) .mm-lb-score { color: #d97706; text-shadow: 1px 1px 0px rgba(60,25,0,0.80); }
.mm-lb-row.me .mm-lb-score { color: #c4b5fd; }

/* ──────────────────────────────────────────────────────────── */
/*                  SECTION 6 — STATS ROWS                      */
/* ──────────────────────────────────────────────────────────── */

/** Stats grid — 2 columns */
.mm-stats-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* Big hero stat — spans full width, for best score */
.mm-srow-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 14px;
    border-radius: 10px;
    background-color: rgba(80,30,180,0.18);
    border: 2px solid rgba(167,139,250,0.35);
    box-shadow: 4px 4px 0px rgba(20,0,60,0.65);
    gap: 4px;
}

.mm-srow-hero .mm-slbl {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: rgba(180,160,240,0.50);
    text-transform: uppercase;
}

.mm-srow-hero .mm-sval {
    font-size: 36px;
    font-weight: 900;
    color: #a78bfa;
    text-shadow: 2px 2px 0px rgba(40,0,80,0.80);
    letter-spacing: 0.04em;
}

/* Regular stat tile — half width */
.mm-srow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(80,50,140,0.20);
    background-color: rgba(255,255,255,0.025);
    box-shadow: 3px 3px 0px rgba(0,0,0,0.50);
    width: 100%;
    overflow: hidden;
}

.mm-srow:hover {
    background-color: rgba(80,40,160,0.12);
    border-color: rgba(120,80,220,0.30);
}

.mm-slbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(180,160,240,0.55);
    text-transform: uppercase;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-sval {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fbbf24;
    text-shadow: 1px 1px 0px rgba(100,50,0,0.80);
    flex-shrink: 0;
    text-align: right;
}

/* ── Shop panel ───────────────────────────────────────────────── */
.mm-shop-row {
    display: flex;
    flex-direction: row;
    width: 100%; // stretches row
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: rgba(80,80,200,0.07);
    border: 1px solid rgba(80,80,200,0.15);
    border-radius: 10px;
    font-size: 12px;
}

.mm-shop-balance {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: rgba(10,4,28,0.70);
    border: 2px solid rgba(80,200,220,0.20);
    border-radius: 8px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.50);
}

.mm-shop-balance-icon { font-size: 18px; }

.mm-shop-balance-val {
    font-size: 22px;
    font-weight: 900;
    color: #e9d5ff;
    letter-spacing: 0.02em;
}

.mm-shop-balance-lbl {
    font-size: 11px;
    font-weight: 700;
    color: rgba(100,220,240,0.70);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    align-self: flex-end;
    padding-bottom: 5px;
}

/* Displays our Grid of shoppable modifiers in the Shop card */
.mm-shop-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 540px;        /* tune this — height of scroll area */
    overflow-y: scroll;       /* enable vertical scroll */
    padding-right: 1px;       /* space for scrollbar so cards don't touch it */
}

/* Scroll bar */

// .mm-shop-grid::-webkit-scrollbar {
//     width: 8px;
// }

// .mm-shop-grid::-webkit-scrollbar-track {
//     background-color: rgba(255,255,255,0.02);
//     border-radius: 4px;
// }

// .mm-shop-grid::-webkit-scrollbar-thumb {
//     background-color: rgba(167,139,250,0.30);
//     border-radius: 4px;
// }

// .mm-shop-grid::-webkit-scrollbar-thumb:hover {
//     background-color: rgba(167,139,250,0.50);
// }

/**/

.mm-mod-card {
    pointer-events: all;
    width: 195px;
    height: 230px;
    /* dark base */
    background-color: rgba(10, 4, 28, 0.88);
    border: 2px solid rgba(80,50,140,0.35);
    border-radius: 10px;
    /* cel-shaded raised tile */
    box-shadow: 4px 4px 0px rgba(0,0,0,0.65), inset 0px 1px 0px rgba(255,255,255,0.04);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: border-color 0.1s, background-color 0.1s, box-shadow 0.08s, transform 0.08s;
}

.mm-mod-card:hover {
    border-color: rgba(140,100,255,0.55);
    background-color: rgba(40,15,80,0.70);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.70), inset 0px 1px 0px rgba(255,255,255,0.06);
    transform: translate(-1px, -1px);
}

/* Rarity borders */
.mm-mod-card.rarity-common { border-color: rgba(80,50,140,0.35); }
.mm-mod-card.rarity-rare   {
    border-color: rgba(96,165,250,0.45);
    box-shadow: 4px 4px 0px rgba(0,0,30,0.70);
}
.mm-mod-card.rarity-epic   {
    border-color: rgba(167,139,250,0.55);
    box-shadow: 4px 4px 0px rgba(20,0,60,0.70);
}

.mm-mod-icon {
    font-size: 30px;
    text-align: center;
    margin-bottom: 2px;
}

.mm-mod-name {
    font-size: 13px;
    font-weight: 900;
    color: rgba(240,235,255,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
}

.mm-mod-desc {
    font-size: 11px;
    font-weight: 600;
    color: rgba(180,165,220,0.45);
    text-align: center;
    flex: 1;
}

.mm-mod-footer {
    margin-top: auto;
    width: 100%;
}

.mm-mod-btn {
    width: 100%;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    padding: 9px 0;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    pointer-events: all;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    letter-spacing: 0.05em;
    transition: background-color 0.08s, transform 0.06s, box-shadow 0.06s;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.55);
}

.mm-mod-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.55);
}

/* Buy */
.mm-mod-btn.btn-buy {
    background-color: rgba(80,40,180,0.30);
    border-color: rgba(140,100,255,0.55);
    color: #c4b5fd;
    box-shadow: 2px 2px 0px #1a0640;
}
.mm-mod-btn.btn-buy:hover {
    background-color: rgba(100,55,200,0.40);
    border-color: rgba(167,139,250,0.80);
}
.mm-mod-btn.btn-buy.cant-afford {
    background-color: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.22);
    cursor: default;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.40);
}

/* Active / owned */
.mm-mod-btn.btn-active {
    background-color: rgba(20,80,50,0.50);
    border-color: rgba(52,211,153,0.65);
    color: #34d399;
    box-shadow: 2px 2px 0px rgba(0,30,15,0.70);
}

/* Equip (inactive) */
.mm-mod-btn.btn-inactive {
    background-color: rgba(30,15,70,0.50);
    border-color: rgba(140,100,255,0.30);
    color: rgba(200,180,255,0.65);
}

.mm-mod-btn.btn-inactive:hover {
    background-color: rgba(60,30,140,0.40);
    border-color: rgba(167,139,250,0.55);
    color: #c4b5fd;
}

/* Slots full */
.mm-mod-btn.btn-capped {
    background-color: rgba(60,10,10,0.40);
    border-color: rgba(248,113,113,0.35);
    color: rgba(248,113,113,0.55);
    cursor: default;
    box-shadow: 2px 2px 0px rgba(40,0,0,0.55);
}

/* Let the player know how many slots are still available */
.mm-shop-slots {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background-color: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}

.mm-shop-slots-lbl {
    color: rgba(255,255,255,0.30);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.mm-shop-slots-val {
    color: rgba(200,180,255,0.75);
    font-weight: 900;
    font-size: 12px;
}

/* 1 — owned: subtle green border */
.mm-mod-card.owned {
    border-color: rgba(52,211,153,0.40);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.65);
}

/* 2 — capped: red tint for owned but can't equip */
.mm-mod-card.capped {
    border-color: rgba(248,113,113,0.50);
    box-shadow: 4px 4px 0px rgba(40,0,0,0.70);
}

/* 3 — capped-unowned: dimmed for not owned and slots full */
.mm-mod-card.capped-unowned {
    opacity: 0.38;
}

/* 4 — active: green tint — MUST BE LAST to win over everything above */
.mm-mod-card.active {
    border-color: rgba(52,211,153,0.75);
    background-color: rgba(10,40,25,0.70);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.65);
}

/* ── Diagonal drifting shapes ─────────────────────────── */
@keyframes shape-drift {
    0%   { transform: translate(0px, 0px)       rotate(0deg); }
    100% { transform: translate(280px, -280px)   rotate(160deg); }
}

.mm-shape {
    position: absolute;
    pointer-events: none;
    opacity: 0.08; /* always visible — fixed low opacity */
    animation-name: shape-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* bounces back so no jump-reset */
}

.mm-shape.tri {
    width: 0;
    height: 0;
    background: transparent !important; /* triangles use border trick */
}

.mm-shape.sq {
    border-radius: 3px;
}

/* message */

.mm-grid-preview-wrap {
    position: relative;
    width: 420px;    /* was 578px */
    height: 420px;   /* was 578px */
}



/* Centered idle grid messages — same float-up as popups but bigger */
.idle-msg-neutral {
    font-size: 13px;
    color: rgba(255,255,255,0.40);
}
.idle-msg-small {
    font-size: 16px;
    color: rgba(129,140,248,0.90);
}
.idle-msg-nice {
    font-size: 20px;
    color: rgba(52,211,153,0.95);
}
.idle-msg-chain {
    font-size: 24px;
    color: rgba(251,191,36,0.95);
}
.idle-msg-mega {
    font-size: 28px;
    color: rgba(244,114,182,0.95);
}

/* Toggle Button for Grid Farm Idle */
.mm-idle-toggle {
    background-color: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.50);
    font-size: 30px;
    padding: 15px 10px;
    cursor: pointer;
    pointer-events: all;
	flex-shrink: 0; /* never compress */
    width: 120px;   /* same as label width — keeps val truly centered */
    justify-content: center;   /* button content aligns right */
	right: 5px;
	position: relative;  /* ← THIS was missing — required for ::after to work */
	overflow: hidden; // required to not show sweep outside the button
	
}


.mm-idle-toggle:hover {
    background-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.80);
}

/* on */
.mm-idle-toggle.on {
	animation: none;
    border-color: rgba(129,140,248,0.35);
    color: rgba(129,140,248,0.80);
	letter-spacing: -0.32em;
}

.mm-idle-toggle.on::after {
    display: none;
}

/* off */
.mm-idle-toggle.off {
    animation: toggle-sleep 2.8s ease-in-out infinite;
	letter-spacing: -0.32em;
}

.mm-idle-toggle.off::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background-color: rgba(255,255,255,0.08);
    animation: toggle-sweep 3s ease-in-out infinite;
}

@keyframes toggle-sleep {
    0%   { border-color: rgba(255,255,255,0.06); }
    50%  { border-color: rgba(255,255,255,0.22); background-color: rgba(255,255,255,0.04); }
    100% { border-color: rgba(255,255,255,0.06); }
}

@keyframes toggle-sweep {
    0%   { transform: translateX(0%); }
    40%  { transform: translateX(500%); }
    100% { transform: translateX(500%); }
}

/* Pannels in the center */

.mm-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: all;
    min-height: 0;
}

/* Shop tabs (pets, modifiers, ...)*/
.mm-shop-tabs {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(120,80,220,0.15);
}

.mm-shop-tab {
    background-color: rgba(15,8,35,0.80);
    border: 2px solid rgba(80,50,140,0.35);
    border-radius: 7px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.50);
    color: rgba(200,180,255,0.45);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 13px;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    transition: background-color 0.08s, border-color 0.08s, transform 0.08s, box-shadow 0.08s;
}

.mm-shop-tab:hover {
    background-color: rgba(80,40,160,0.20);
    border-color: rgba(140,100,255,0.45);
    color: rgba(220,200,255,0.80);
}

.mm-shop-tab:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.50);
}

.mm-shop-tab.on {
    background-color: rgba(80,30,180,0.28);
    border-color: rgba(167,139,250,0.65);
    border-bottom-width: 3px;
    color: #c4b5fd;
    box-shadow: 3px 3px 0px #1a0640;
}

.mm-shop-tab.disabled {
    opacity: 0.40;
    cursor: default;
    pointer-events: none;
}

.mm-shop-tab-coming {
    font-size: 9px;
    font-weight: 900;
    color: rgba(251,191,36,0.70);
    background-color: rgba(251,191,36,0.08);
    border-radius: 4px;
    padding: 2px 5px;
    letter-spacing: 0.05em;
}

/* pet sleeping */ 
.mm-idle-toggle.sleeping {
    background-color: rgba(120,80,220,0.08);
    border-color: rgba(120,80,220,0.20);
    color: rgba(180,150,250,0.60);
    cursor: default;
    animation: pet-sleep 3s ease-in-out infinite;
}

.mm-idle-toggle.sleeping::after {
    display: none;
}

@keyframes pet-sleep {
    0%, 100% { opacity: 0.6; transform: scale(1.0); }
    50%      { opacity: 0.9; transform: scale(1.03); }
}

/* Debug Editor */

.mm-dev-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding: 8px;
    background-color: rgba(244,114,182,0.05);
    border: 1px dashed rgba(244,114,182,0.30);
    border-radius: 6px;
}

.mm-dev-btn {
    background-color: rgba(244,114,182,0.15);
    border: 1px solid rgba(244,114,182,0.30);
    border-radius: 4px;
    color: rgba(244,114,182,0.85);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    pointer-events: all;
    letter-spacing: 0.05em;
}

.mm-dev-btn:hover {
    background-color: rgba(244,114,182,0.25);
}

/* ────────────────────────────────────────────────────────────── */
/* ────────────────── Welcome gift overlay ────────────────────── */
/* ────────────────────────────────────────────────────────────── */

.mm-welcome-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(4, 1, 13, 0.85);
    z-index: 99;
    pointer-events: all;
    animation: welcome-bg-fade 0.4s ease-out both;
}

@keyframes welcome-bg-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.mm-welcome-gift {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(20, 8, 50, 0.98);
    border: 2px solid rgba(251, 191, 36, 0.60);
    border-radius: 20px;
    padding: 40px 60px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    pointer-events: all;
    animation: gift-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes gift-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}

.mm-gift-title {
    font-size: 36px;
    font-weight: 900;
    color: rgba(251, 191, 36, 0.95);
    letter-spacing: 0.15em;
    animation: title-glow 1.5s ease-in-out infinite alternate;
}

@keyframes title-glow {
    0%   { color: rgba(251, 191, 36, 0.80); }
    100% { color: rgba(251, 191, 36, 1.00); }
}

.mm-gift-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.60);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mm-gift-chests {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 12px 0;
}

/* Single chest container — closed or opened */
.mm-gift-chest {
     position: relative;
    width: 180px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Active state — pulsing, inviting to click */
.mm-gift-chest.active {
    border-color: rgba(251, 191, 36, 0.80);
    background-color: rgba(251, 191, 36, 0.10);
    cursor: pointer;
    pointer-events: all;
    animation: chest-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes chest-pulse {
    0%   { transform: scale(1.00); border-color: rgba(251, 191, 36, 0.60); }
    100% { transform: scale(1.04); border-color: rgba(251, 191, 36, 1.00); }
}

.mm-gift-chest.active:hover {
    background-color: rgba(251, 191, 36, 0.20);
}

/* Opened state — shows the reward inside */
.mm-gift-chest.opened {
    border-color: rgba(52, 211, 153, 0.50);
    background-color: rgba(52, 211, 153, 0.08);
    animation: chest-open 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes chest-open {
    0%   { transform: scale(1.0) rotate(0deg); }
    30%  { transform: scale(0.85) rotate(-3deg); }
    60%  { transform: scale(1.15) rotate(3deg); }
    100% { transform: scale(1.0) rotate(0deg); }
}

/* Chest icon (closed state) */
.mm-chest-icon {
    font-size: 64px;
    animation: chest-bounce 1.2s ease-in-out infinite;
}

@keyframes chest-bounce {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-6px); }
}

.mm-chest-label {
    font-size: 11px;
    font-weight: 900;
    color: rgba(251, 191, 36, 0.85);
    letter-spacing: 0.2em;
    margin-top: 4px;
}

/* Gift icon (opened state) */
.mm-gift-icon {
    font-size: 48px;
    animation: gift-reveal 0.6s ease-out both;
}

@keyframes gift-reveal {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1.0); }
}

.mm-gift-name {
    font-size: 15px;
    font-weight: 900;
    color: rgba(52, 211, 153, 0.95);
    letter-spacing: 0.05em;
    text-align: center;
}

.mm-gift-desc {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.795);
    text-align: center;
    //line-height: 10.3;
}

/* "Let's play" close button — appears when all chests opened */
.mm-gift-close {
    background-color: rgba(109, 40, 217, 0.50);
    border: 1px solid rgba(167, 139, 250, 0.70);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 900;
    padding: 14px 32px;
    cursor: pointer;
    pointer-events: all;
    letter-spacing: 0.12em;
    margin-top: 12px;
    animation: close-appear 0.5s ease-out both;
}

@keyframes close-appear {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0px); }
}

.mm-gift-close:hover {
    background-color: rgba(109, 40, 217, 0.70);
}

/* Confettis overlay (when gifts) */
.mm-confetti-wrap {
    position: absolute; /* ← fixed instead of absolute */
    top: -20px;
    left: 0;
    right: 0;
    height: 120vh; /* ← taller than screen */
    pointer-events: none;
    overflow: visible; /* ← allow pieces to fall below card */
    z-index: 198; /* ← below the gift card (z-index 100) but above bg (99) */
}

.mm-confetti-piece {
    position: absolute;
    top: -10px;
    border-radius: 2px;
    opacity: 0;
    animation-name: confetti-fall;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite; /* ← loops forever */
    pointer-events: none;
}

@keyframes confetti-fall {
    0%   { opacity: 0;   transform: translateY(-10px) rotate(0deg);   }
    10%  { opacity: 1; }
    90%  { opacity: 0.6; transform: translateY(600px) rotate(540deg); }
    100% { opacity: 0;   transform: translateY(700px) rotate(600deg); }
}

/* ================================================= */
/* ────────────────── SHOP CATALOG ───────────────── */
/* ================================================= */

/* Blast pattern hint — small label below bomb name */
.mm-bomb-hint {
    font-size: 11px;
    font-weight: 700;
    color: rgba(167,139,250,0.60);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

/* Trial badge — shown when player still has trial runs */
.mm-bomb-trial-badge {
    font-size: 11px;
    font-weight: 800;
    color: rgba(251,191,36,0.85);
    background-color: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 6px;
    padding: 4px 8px;
    text-align: center;
    flex-shrink: 0;
    justify-content: center;
    word-spacing: 0.1em;  
}

/* Bomb cards — taller than modifier cards to fit hint + trial badge */
.mm-bomb-card {
    height: auto;
    min-height: 200px;  /* same as modifier cards — won't shrink below this */
}

// wraps the badge and button, to push them at the bottom
.mm-bomb-footer {
    margin-top: 60px;  /* pushes to bottom */
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* ================================================= */
/* ──────────────── CONSUMABLE TAB ───────────────── */
/* ================================================= */

/* Consumable cards — same as bomb cards */
.mm-consumable-card {
    height: auto;
    min-height: 230px;
}

/* Stock badge — shows how many you own */
.mm-consumable-stock {
    font-size: 11px;
    font-weight: 800;
    color: rgba(52,211,153,0.85);
    background-color: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.25);
    border-radius: 6px;
    padding: 4px 8px;
    text-align: center;
}

/* ================================================= */
/* ──────────────── Pet display card ─────────────── */
/* ================================================= */
.mm-pet-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    margin-bottom: 8px;
}

.mm-pet-emoji {
    font-size: 72px;
    animation: pet-idle 2s ease-in-out infinite alternate;
}

@keyframes pet-idle {
    0%   { transform: translateY(0px) scale(1.0); }
    100% { transform: translateY(-8px) scale(1.05); }
}

.mm-pet-name {
    font-size: 20px;
    font-weight: 900;
    color: white;
}

.mm-pet-level {
    font-size: 12px;
    font-weight: 700;
    color: rgba(167,139,250,0.70);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* XP progress bar */
.mm-pet-xp-track {
    width: 100%;
    height: 8px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.mm-pet-xp-fill {
    height: 100%;
    background-color: #a78bfa;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.mm-pet-xp-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
}

/* Next evolution preview */
.mm-pet-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background-color: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 12px;
}

.mm-pet-next-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.30);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mm-pet-next-emoji {
    font-size: 36px;
    opacity: 0.35;
    filter: grayscale(100%);
}

.mm-pet-next-hint {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
}

/* ----------------------------------------- */
/* ---------- Pet Big In Menu Tab ---------- */
/* ----------------------------------------- */

.mm-pet-unlock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(4, 1, 13, 0.88);
    z-index: 110;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: welcome-bg-fade 0.4s ease-out both;
}
.mm-pet-unlock-popup {
    position: relative;
    top: 180px; 
    left: 340px;
    background-color: rgba(20, 8, 50, 0.98);
    border: 2px solid rgba(167,139,250,0.55);
    border-radius: 20px;
    box-shadow: 6px 6px 0px rgba(20,0,60,0.80);
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: all;
    animation: gift-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Pet card — replaces the entire farm tab content ── */

.mm-pet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 100%;
}

.mm-pet-unlock-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.28em;
    color: rgba(167,139,250,0.70);
    text-transform: uppercase;
}

/* ── Big pet emoji — hero display ── */
.mm-pet-hero-emoji {
    font-size: 140px;
    animation: pet-float 3s ease-in-out infinite alternate;
    margin-bottom: 4px;
    margin-top: 20px;
}
.mm-pet-emoji image
{
    width: 72px;
    height: 72px;
}

.mm-pet-hero-emoji image
{
    width: 130px;
    height: 130px;
}

@keyframes pet-float {
    0%   { transform: translateY(0px) scale(1.0); }
    100% { transform: translateY(-10px) scale(1.04); }
}

/* ── Pet name ── */
.mm-pet-hero-name {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.04em;
    text-shadow: 2px 2px 0px rgba(80,30,180,0.60);
}

/* ── Level badge ── */
.mm-pet-hero-level {
    font-size: 11px;
    font-weight: 800;
    color: rgba(167,139,250,0.65);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-top: 2px;
    margin-bottom: 14px;
}


.mm-pet-unlock-title {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.mm-pet-unlock-desc {
    font-size: 14px;
    font-weight: 600;
    color: rgba(200,185,255,0.60);
    text-align: center;
    letter-spacing: 0.04em;
}

.mm-pet-unlock-egg {
    font-size: 96px;
    animation: pet-float 2s ease-in-out infinite alternate;
    margin: 8px 0;
}

/* ── XP bar track ── */
.mm-pet-xp-track {
    width: 100%;
    height: 10px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 5px;
    border: 1px solid rgba(120,80,220,0.20);
    overflow: hidden;
    margin-bottom: 6px;
}

.mm-pet-xp-fill {
    height: 100%;
    background-color: #7c3aed;
    border-radius: 5px;
    transition: width 0.8s ease;
    box-shadow: 2px 0px 0px rgba(167,139,250,0.40);
}

.mm-pet-xp-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(180,160,240,0.40);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    align-self: flex-end;
}

/* ── Stat bonuses grid ── */
.mm-pet-stats {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    border: 2px solid rgba(120,80,220,0.25);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.55);
}

.mm-pet-stat-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(120,80,220,0.10);
    background-color: rgba(10,4,28,0.70);
    gap: 10px;
}

.mm-pet-stat-row:last-child {
    border-bottom: none;
}

.mm-pet-stat-row:hover {
    background-color: rgba(80,40,160,0.12);
}

.mm-pet-stat-icon {
    font-size: 15px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.mm-pet-stat-lbl {
    font-size: 11px;
    font-weight: 700;
    color: rgba(180,160,240,0.55);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    flex: 1;
}

.mm-pet-stat-val {
    font-size: 13px;
    font-weight: 900;
    color: #4ade80;
    text-shadow: 1px 1px 0px rgba(0,40,15,0.80);
    letter-spacing: 0.04em;
}

/* Locked stat — not yet unlocked at current level */
.mm-pet-stat-val.locked {
    color: rgba(255,255,255,0.15);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* ── Next evolution teaser ── */
.mm-pet-next-hint {
    margin-top: 14px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(160,130,250,0.30);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-self: center;
}

/* Name pet */
.mm-pet-name-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    pointer-events: all;
}

.mm-pet-name-prompt {
    font-size: 10px;
    font-weight: 700;
    color: rgba(167,139,250,0.60);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mm-pet-name-field {
    background-color: rgba(10,4,28,0.95);
    border: 2px solid rgba(167,139,250,0.70);
    border-radius: 8px;
    padding: 10px 18px;
    min-width: 240px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.55), inset 0px 1px 0px rgba(167,139,250,0.10);
    animation: name-field-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes name-field-pulse {
    0%   { border-color: rgba(167,139,250,0.50); }
    100% { border-color: rgba(167,139,250,1.00); }
}

.mm-pet-name-cursor {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.04em;
    min-height: 28px;
}

.mm-pet-name-hint {
    font-size: 9px;
    font-weight: 600;
    color: rgba(167,139,250,0.35);
    letter-spacing: 0.10em;
    text-align: center;
}

.mm-pet-name-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 4px;
}

.mm-pet-name-confirm {
    background-color: rgba(20,80,50,0.60);
    border: 2px solid rgba(52,211,153,0.60);
    border-radius: 6px;
    box-shadow: 2px 2px 0px rgba(0,30,15,0.60);
    color: #4ade80;
    font-size: 14px;
    font-weight: 900;
    padding: 8px 16px;
    cursor: pointer;
    pointer-events: all;
}

.mm-pet-name-cancel {
    background-color: rgba(60,10,10,0.50);
    border: 2px solid rgba(248,113,113,0.40);
    border-radius: 6px;
    box-shadow: 2px 2px 0px rgba(40,0,0,0.55);
    color: rgba(248,113,113,0.80);
    font-size: 14px;
    font-weight: 900;
    padding: 8px 16px;
    cursor: pointer;
    pointer-events: all;
}

.mm-pet-name-preview {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    background-color: rgba(10,4,28,0.95);
    border: 2px solid rgba(167,139,250,0.70);
    border-radius: 8px;
    padding: 10px 18px;
    min-width: 240px;
    min-height: 46px;
    letter-spacing: 0.04em;
    animation: name-field-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes name-field-pulse {
    0%   { border-color: rgba(167,139,250,0.40); }
    100% { border-color: rgba(167,139,250,1.00); }
}

/* hide the actual TextEntry so it doesn't show as a floating box */
.mm-pet-name-input {
    width: 240px;
    height: 48px;
    background-color: rgba(10,4,28,0.95);
    border: 2px solid rgba(167,139,250,0.70);
    border-radius: 8px;
    padding: 10px 18px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: all;
    animation: name-field-pulse 1.2s ease-in-out infinite alternate;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.55);
}

.mm-pet-name-input-wrap {
    width: 240px;
    height: 48px;
    pointer-events: all;
}

/* Evolution pet */
.mm-evo-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 200;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #04010d;
}

.mm-evo-pet {
    font-size: 260px;
}
.mm-evo-pet image {
    width: 220px;
    height: 220px;
}

.cat-sprite {
    width: 64px;
    height: 64px;
    background-image: url("ui/icons/cat/cat_normal_spritesheet.png");
    background-repeat: no-repeat;
    background-size: auto 100%; // adjust if needed
    animation: cat-walk 0.8s steps(4) infinite; // steps(N) = N frames
}

@keyframes cat-walk {
    from { background-position: 0 0; }
    to   { background-position: -256px 0; } // frame_width_px × total_frames
}
.mm-evo-egg-icon
{
    width: 200px;
    height: 200px;
}

.mm-evo-pet.evo-start { animation: evo-wobble 0.6s ease-in-out infinite; }
.mm-evo-pet.evo-shake { animation: evo-shake  0.2s ease-in-out infinite; }
.mm-evo-pet.evo-flash { font-size: 200px; }
.mm-evo-pet.evo-reveal { animation: evo-appear 0.6s ease-out both; }

@keyframes evo-wobble {
    0%   { margin-left: 0px; }
    25%  { margin-left: -10px; }
    75%  { margin-left: 10px; }
    100% { margin-left: 0px; }
}

@keyframes evo-shake {
    0%   { margin-left: 0px; }
    20%  { margin-left: -14px; }
    40%  { margin-left: 14px; }
    60%  { margin-left: -8px; }
    80%  { margin-left: 8px; }
    100% { margin-left: 0px; }
}

@keyframes evo-appear {
    0%   { opacity: 0; margin-top: 30px; }
    100% { opacity: 1; margin-top: 0px; }
}

.mm-evo-flash {
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    background-color: #ffffff;
    animation: evo-flash-fade 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes evo-flash-fade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.mm-evo-name {
    font-size: 36px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.06em;
    animation: evo-appear 0.6s ease-out both;
}

.mm-evo-level {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.28em;
    color: rgba(167,139,250,0.65);
    text-transform: uppercase;
    animation: evo-appear 0.6s ease-out 0.15s both;
}

@keyframes evo-text-appear {
    0%   { opacity: 0; margin-top: 20px; }
    100% { opacity: 1; margin-top: 0px; }
}

.mm-evo-text {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.80);
    animation: evo-text-appear 0.4s ease-out both;
    margin-bottom: 20px;
}

/* Pulse the text during shake phase */
.mm-evo-text.evo-shake {
    animation: evo-text-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes evo-text-pulse {
    0%   { opacity: 0.7; }
    100% { opacity: 1.0; }
}

/* Revealed text gets a gold color */
.mm-evo-text.evo-reveal {
    color: #fbbf24;
    font-size: 32px;
    text-shadow: 2px 2px 0px rgba(100,50,0,0.80);
    animation: evo-text-appear 0.5s ease-out both;
}

/* Edit Pet Name Button */
.mm-pet-name-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}


// .mm-pet-name-row:hover {
//     background-color: rgba(167,139,250,0.18);
//     border-color: rgba(167,139,250,0.55);
// }

.mm-pet-rename-btn:hover {
    background-color: rgba(167,139,250,0.15);
}

.mm-pet-rename-btn {
    font-size: 14px;
    background-color: rgba(20,20,50,.80);
    border: none;
    cursor: pointer;
    pointer-events: all;
    padding: 4px 4px;
    border-radius: 4px;
    transition: background-color 0.1s;
}

/* LEADERBOARD */ 
.mm-lb-mode-tabs {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 8px;
}

.mm-lb-mode-btn {
    background-color: rgba(15,8,35,0.80);
    border: 2px solid rgba(80,50,140,0.35);
    border-radius: 7px;
    color: rgba(200,180,255,0.45);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 16px;
    cursor: pointer;
    pointer-events: all;
    transition: background-color 0.08s, border-color 0.08s;
}

.mm-lb-mode-btn:hover {
    background-color: rgba(80,40,160,0.20);
    border-color: rgba(140,100,255,0.45);
    color: rgba(220,200,255,0.80);
}

.mm-lb-mode-btn.on {
    background-color: rgba(80,30,180,0.28);
    border-color: rgba(167,139,250,0.65);
    color: #c4b5fd;
    box-shadow: 3px 3px 0px #1a0640;
}

.mm-lb-pet-badge {
    font-size: 12px;
    font-weight: 700;
    color: rgba(167,139,250,0.70);
    background-color: rgba(167,139,250,0.08);
    border: 1px solid rgba(167,139,250,0.20);
    border-radius: 5px;
    padding: 2px 7px;
    flex-shrink: 0;
}

/* The top best Chain Reaction Sequences (+score) */
.mm-lb-name-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.mm-lb-chain-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(251,191,36,0.65);
    letter-spacing: 0.08em;
}

.mm-lb-chain-badge {
    font-size: 12px;
    font-weight: 900;
    color: rgba(196,181,253,0.90);
    background-color: rgba(139,92,246,0.12);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 5px;
    padding: 2px 8px;
    flex-shrink: 0;
}

/* TOP 100 CONTRIBUTORS FORCE PANEL PROGRESS BAR (left side) */
/* ── Force panel on left side ── */
.mm-force-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 280px;
    padding: 12px 16px;
    background-color: rgba(10,4,28,0.85);
    border: 2px solid rgba(251,191,36,0.25);
    border-radius: 12px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.60);
    margin-top: 8px;
    animation: mm-enter 0.6s ease-out 0.6s both;
}

.mm-force-panel-lbl {
    font-size: 10px;
    font-weight: 800;
    color: rgba(251,191,36,0.70);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mm-force-panel-sub {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.06em;
}

.mm-force-bar-track {
    width: 100%;
    height: 8px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.mm-force-bar-fill {
    height: 100%;
    background-color: rgba(251,191,36,0.85);
    border-radius: 4px;
    transition: width 0.8s ease;
}

/* ── Force summary inside leaderboard tab ── */
.mm-force-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background-color: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.20);
    border-radius: 8px;
    margin-bottom: 8px;
}

.mm-force-summary-lbl {
    font-size: 10px;
    font-weight: 800;
    color: rgba(251,191,36,0.70);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mm-force-summary-pct {
    font-size: 12px;
    font-weight: 900;
    color: rgba(251,191,36,0.90);
    align-self: flex-end;
}

/* ── Mini contribution bar per row ── */
.mm-force-bar-mini-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.mm-force-bar-mini {
    flex: 1;
    height: 6px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.mm-force-bar-mini-fill {
    height: 100%;
    background-color: rgba(251,191,36,0.70);
    border-radius: 3px;
}

.mm-force-pct {
    font-size: 10px;
    font-weight: 700;
    color: rgba(251,191,36,0.70);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}


/* HALL OF FAME (TOP 3 PLAYERS) left side */
.mm-hall-of-fame {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 280px;
    background-color: rgba(10,4,28,0.85);
    border: 2px solid rgba(251,191,36,0.25);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.60);
    margin-top: 8px;
    animation: mm-enter 0.6s ease-out 0.55s both;
}

.mm-hof-title {
    font-size: 10px;
    font-weight: 800;
    color: rgba(251,191,36,0.70);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(251,191,36,0.12);
}

.mm-hof-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mm-hof-row:last-child {
    border-bottom: none;
}

.mm-hof-medal {
    font-size: 16px;
    flex-shrink: 0;
}

.mm-hof-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(220,210,255,0.75);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-hof-score {
    font-size: 12px;
    font-weight: 900;
    color: rgba(251,191,36,0.85);
    flex-shrink: 0;
}

/* Pet unlocked visual (tab) */
.mm-tab-locked {
    position: relative;
    border-color: rgba(251,191,36,0.30);
    background-color: rgba(251,191,36,0.06);
}

.mm-tab-lock-hint {
    display: contents;
    font-size: 14px;
    font-weight: 700;
    color: rgba(251,191,36,0.55);
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.mm-pet-locked-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 30px;
}

.mm-pet-locked-chest {
    font-size: 80px;
    animation: chest-card-idle 2s ease-in-out infinite alternate;
}

.mm-pet-locked-title {
    font-size: 28px;
    font-weight: 900;
    color: rgba(255,255,255,0.20);
    letter-spacing: 0.3em;
}

.mm-pet-locked-desc {
    word-spacing: 1px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.40);
}

.mm-pet-locked-count {
    color: #fbbf24;
    font-weight: 900;
    padding: 0px 6px;
    margin-top: -2px;
}

.mm-pet-locked-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.mm-pet-locked-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 3px;
    position: relative;
}

.mm-pet-locked-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: #fbbf24;
    border-radius: 3px;
    min-width: 0px;
}

.mm-pet-locked-pips {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.mm-pet-locked-pip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px rgba(255,255,255,0.12);
    background-color: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,0.25);
}

.mm-pet-locked-pip.done {
    border-color: rgba(251,191,36,0.60);
    background-color: rgba(251,191,36,0.12);
    color: #fbbf24;
}

/* ------------------------------------*/
/* ---------- Community Tab ---------- */
/* ------------------------------------*/

.mm-comm-from {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.28em;
    color: rgba(251,191,36,0.50);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.mm-comm-greeting {
    font-size: 22px;
    font-weight: 900;
    color: rgba(255,255,255,0.92);
    margin-bottom: 10px;
}

.mm-comm-body {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
    font-style: italic;
}

.mm-comm-devnote {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: rgba(251,191,36,0.05);
    border: 1px solid rgba(251,191,36,0.20);
    border-left-width: 3px;
    border-left-color: rgba(251,191,36,0.60);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 4px;
}

.mm-comm-devnote-label {
    font-size: 9px;
    font-weight: 900;
    color: rgba(251,191,36,0.70);
    letter-spacing: 0.22em;
}

.mm-comm-devnote-text {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    font-style: italic;
}

.mm-letter-divider {
    height: 1px;
    background-color: rgba(255,255,255,0.06);
    margin: 14px 0;
}

.mm-letter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.30);
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.mm-community-event-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mm-event-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 54px;
    text-align: center;
}

.mm-badge-green  { background-color: rgba(52,211,153,0.12);  color: rgba(52,211,153,0.95);  border: 1px solid rgba(52,211,153,0.25); }
.mm-badge-purple { background-color: rgba(167,139,250,0.12); color: rgba(167,139,250,0.95); border: 1px solid rgba(167,139,250,0.25); }
.mm-badge-yellow { background-color: rgba(251,191,36,0.12);  color: rgba(251,191,36,0.95);  border: 1px solid rgba(251,191,36,0.25); }
.mm-badge-gray   { background-color: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }

.mm-event-text {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}

.mm-comm-discord-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mm-comm-discord-text {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

.mm-discord-btn {
    background-color: rgba(88,101,242,0.85);
    border: 1px solid rgba(120,130,255,0.50);
    border-radius: 8px;
    color: rgba(255,255,255,0.95);
    font-size: 13px;
    font-weight: 800;
    padding: 11px 22px;
    cursor: pointer;
    pointer-events: all;
    letter-spacing: 0.05em;
    box-shadow: 3px 3px 0px rgba(20,25,80,0.70);
}

.mm-discord-btn:hover {
    background-color: rgba(88,101,242,1.0);
}

.mm-discord-btn.copied {
    background-color: rgba(52, 211, 153, 0.20);
    border-color: rgba(52, 211, 153, 0.50);
    color: rgba(52, 211, 153, 0.90);
}

/* CREDITS PAGE */
.mm-credits-section {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(167,139,250,0.12);
}

.mm-credits-section.last {
    border-bottom: none;
}

.mm-credits-role {
    font-size: 13px;
    color: rgba(167,139,250,0.7);
    margin-bottom: 10px;
    margin-right: 5px;
}

.mm-credits-name {
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 6px;
    margin-right: 5px;
}

.mm-credits-footer {
    margin-top: 28px;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

.mm-musiclink-btn{
    background-color:#b82525;
    border: 1px solid rgba(120,130,255,0.50);
    border-radius: 8px;
    color: rgba(255,255,255,0.95);
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
    margin-top: -10px;
    cursor: pointer;
    pointer-events: all;
    letter-spacing: 0.05em;
    box-shadow: 3px 3px 0px rgba(240, 80, 80, 0.712);
}

/* CREDITS PAGE */
.mm-multiplayer.mm-mode-locked {
    opacity: 0.35;
    cursor: default;
    animation: none;
}

.survival-loadout-card {
    max-width: 620px;
    max-height: 85vh;       /* cap relative to viewport */
    overflow-y: auto;       /* let the whole card scroll if content is tall */
    padding: 32px 48px;     /* slightly tighter than default mm-welcome-gift padding */
}

.survival-loadout-hint {
    font-size: 12px;
    font-weight: 800;
    color: rgba(251,191,36,0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.survival-bomb-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    overflow-y: visible;
}

.survival-bomb-card {
    position: relative;
    width: 140px;
    background-color: rgba(15, 8, 32, 0.95);
    border: 2px solid rgba(140,110,230,0.40);
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    pointer-events: all;
    transition: border-color 0.12s, background-color 0.12s, transform 0.08s;
}

.survival-bomb-card:hover {
    border-color: rgba(180,150,255,0.70);
    background-color: rgba(70,30,150,0.30);
    transform: translateY(-2px);
}

.survival-bomb-card.selected {
    border-color: rgba(74,222,128,0.90);
    background-color: rgba(34,150,90,0.18);
    box-shadow: 0px 0px 18px rgba(74,222,128,0.20);
}

.survival-bomb-check {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 16px;
    font-weight: 900;
    color: #4ade80;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
}

.survival-bomb-icon {
    font-size: 36px;
    line-height: 1;
}

.survival-bomb-name {
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.survival-bomb-hint {
    font-size: 11px;
    font-weight: 700;
    color: rgba(220,210,255,0.75);
    text-align: center;
    line-height: 1.4;
}